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

演示地址

源码地址

### 项目描述
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


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>