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

xiguadada 发布于2019-08-20 17:19 / 2285人阅读

摘要：云新闻云新闻收藏的使用需要注意的地方提交的是，而不是直接的状态变更可以包含任意异步操作。的使用利用实现了简单的聊天功能，在同一个服务器下。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83491.html

2017-06-18 前端日报

摘要：前端日报精选精读高阶组件知乎专栏是如何重新定义前端开发的知乎专栏为您的性能选择最佳的引擎知乎专栏中的尺寸单位掘金一种生成雪碧图的懒惰姿势中文第期编写现代代码周刊第期的平凡之路我们到底可以通过多少种方式修改元素样式掘金 2017-06-18 前端日报精选精读 React 高阶组件 - 知乎专栏React 是如何重新定义前端开发的 - 知乎专栏为您的 Node 性能选择最佳的 JS 引...

Yang_River 2019-08-20 17:20 评论0 收藏0
2017-06-17 前端日报

摘要：前端日报求精选几乎误我一生知乎专栏最新特性实现的三大黑科技十年踪迹的博客里的真真假假，平等之论众成翻译技术周刊年中复盘程序员的自我修养社区周刊跨域每日技术笔记中文译理解中的文件掘金个最佳企业应用案例从到个人文章 2017-06-17 前端日报 GitHub 求star 精选 React Router v4 几乎误我一生 - 知乎专栏JavaScript 最新特性实现的三大黑科技 - 十...

desdik 2019-08-20 17:19 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
前端每周清单第 44 期: 2017 JS 调查报告、REST 接口实时化、ESM 的过去与未来

摘要：巅峰人生年老兵思路上的转变，远比单纯提升技术更有价值本文节选自赵成教授在极客时间开设的赵成的运维体系管理课，是其对自己十年技术生涯的回顾与总结。赵成教授来自美丽联合集团，集团旗下两大主力产品是蘑菇街和美丽说，目前负责管理集团的技术服务团队。 showImg(https://segmentfault.com/img/remote/1460000012476504?w=1240&h=826...

MASAILA 2019-08-22 11:21 评论0 收藏0