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

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项目，就选择了做一个新闻方面的社区，很多不足的地方，希望大家
见谅，但是对于初学的小伙伴来说，相信还是可以帮助到大家，毕竟我只是一个爱分享的小学渣。
### 效果预览

演示地址

源码地址

### 项目描述

前端部分

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