内容简介：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
以上所述就是小编给大家介绍的《vue.js+socket.io打造一个好玩的新闻社区》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
