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

栏目: 服务器 · 发布时间: 7年前

内容简介: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

以上所述就是小编给大家介绍的《vue.js+socket.io打造一个好玩的新闻社区》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Services原理与研发实践

Web Services原理与研发实践

顾宁刘家茂柴晓路 / 机械工业出版社 / 2006-1 / 33.00元

本书以web services技术原理为主线,详细解释、分析包括XML、XML Schema、SOAP、WSDL、UDDI等在内在的web Services核心技术。在分析、阐述技术原理的同时,结合作者在Web Services领域的最新研究成果,使用大量的实例帮助读者深刻理解技术的设计思路与原则。全书共有9章,第1章主要介绍web Services的背景知识;第2-7章着重讲解webServic......一起来看看 《Web Services原理与研发实践》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码