vue.js+socket.io打造一个好玩的新闻社区

2019年9月14日 211次阅读 来源: keephhh

title: Socket.io+vue打造新闻社区
date: 2017-06-12 20:19:05

tags: [vue.js,javascript,socket.io]

vue2.0 + socket.io打造一个DIY新闻社区（web第一版）

学习vue快有一个多月了，想着动手做一个DIY项目，就选择了做一个新闻方面的社区，很多不足的地方，希望大家
见谅，但是对于初学的小伙伴来说，相信还是可以帮助到大家，毕竟我只是一个爱分享的小学渣。
### 效果预览

演示地址

源码地址

### 项目描述
《vue.js+socket.io打造一个好玩的新闻社区》
《vue.js+socket.io打造一个好玩的新闻社区》
《vue.js+socket.io打造一个好玩的新闻社区》
前端部分

  • SPA单页应用，前后端的分离， webpack build to dist

  • 移动设备兼容：使用flexible.js和rem处理兼容问题

  • axios做ajax请求

  • 使用了 Vuex 管理组件间的状态，实现非父子组件之间的通信

  • canvas实现了一个页面加载的时间动画

后端部分

  • 直接搭建在自己的服务器上，API数据是聚合上的数据

  • express 做静态资源目录

  • 启用了socket.io实现一个简易的聊天窗口

待更新的功能

  • 用户登录功能，目前收藏只能保存在localstore里面

  • 用 express + mongodb 保存用户状态

  • 用户的评论功能

具体功能的实现

使用了Vue组件化开发的概念，将端后端分离开，样式统一放在一个单独的文件夹，方便管理的复用，使用vuex
统一做一个资源管理，当各个组件需要数据时就向vuex仓库请求，极大的方便了管理，模块化更加的清晰明了。

const store = new Vuex.Store({
  state: {
    // url: [require('../../pic/home_1.png') , require('../../pic/home_2.png')],
    Title: '云新闻',
    newslist: [],
    url: [require('./pic/like_1.png') , require('./pic/like_2.png')],
    isShowAsideMenu: false,
    isShowAbout: false,
    ischangeC: false,
    tab: 'top',
    Tab: 'guoji',
    title: '云新闻',
    showmenu: true,
    showback: false,
    msg: true,
    ismore: false,
    hid: true,
    hod: false,
    hmd: false,
    bgColor: '',
    like: 0,
    status: '收藏',
    v1: true,
    isshowf: true,
    isLoading: false,
    isShare: false,
    isCollection: false
  },

vuex的使用

  • 需要注意的地方：Action提交的是mution，而不是直接的状态变更

  • Action 可以包含任意异步操作。

socket.io的使用

利用socket实现了简单的聊天功能，在同一个服务器下。看看新闻的同时还可以相互讨论一下,这是在后端请求，当然你
得事先安装一下socket了 npm install socket.io --save

var server = http.createServer(app)
var io = require('socket.io')(server)

io.on('connection', function(socket) {
  console.log('启动了Socket.io');
  socket.on('sendGroupMsg', function(value){
    this.broadcast.emit('receiveGroupMsg', value);
  })
  // socket.broadcast.emit('user connected');
})

前端再运用

  socket.emit('sendGroupMsg', this.value.trim());

  socket.on('receiveGroupMsg',() => {
    ...
  })

前期我遇到的问题(分享一下)

  • API存在跨域问题啊，新手肯定有这样的疑惑，这可怎么决解？

遇到这个肯定是要现在自己的后台对这个数据进行处理一下吗，不然你自己的前端根本访问不了那个接口，相
当于自己做一下转接。其实也挺容易的
(后端处理接口)

apiRoutes.get('/news/:type', (req, res) => {
  let type = req.params.type;
  function search(tab) {
    return new Promise((resolve, reject) => {
      let searchResult = '';
      url = 'http://v.juhe.cn/toutiao/index?type='+ tab +'........';
      http.get(url, response => {
        response.on('data', data => {
          searchResult += data;
        });
        response.on('end', () => {
          resolve(searchResult)
        })
      })
    })
  }
  search(type)
    .then(searchResult => {
      res.json(JSON.parse(searchResult))
    })
});

app.use('/api', apiRoutes);

(前端请求自定义路由)

this.axios.get('/api/news/' + type)
    .then(data => {
          // console.log(data);

          if(data.status) {
            this.$store.commit('changeTab', {news: data.data.result.data, type: type, isloading: false})
            this.$store.commit('details', {data: this.$store.state.Title, fa: true, fb: false, fc: true,})
          }
      })

刚学的小伙伴们是不是瞬间觉得还是自己可以处理的呢，实在不行你就把我的项目拷到自己的目录下安装运行一
下，再研究一下。但是一个很难受的事就是我请求的API放在自己的网站服务器上，由于我的域名是https的，API
里面的文章详情的地址是http，还没备案，存在打不开的缺陷， 但是你们自己拷贝到自己的电脑下正常安装依赖
运行还是没问题的了，请谅解，不是不可以访问哦。

安装并运行

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
    原文作者：keephhh
    原文地址: https://segmentfault.com/a/1190000009813474
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞