摘要：云新聞云新聞收藏的使用需要注意的地方提交的是，而不是直接的狀態(tài)變更可以包含任意異步操作。的使用利用實(shí)現(xiàn)了簡(jiǎn)單的聊天功能，在同一個(gè)服務(wù)器下。

title: Socket.io+vue打造新聞社區(qū)
date: 2017-06-12 20:19:05

學(xué)習(xí)vue快有一個(gè)多月了，想著動(dòng)手做一個(gè)DIY項(xiàng)目，就選擇了做一個(gè)新聞方面的社區(qū)，很多不足的地方，希望大家
見諒，但是對(duì)于初學(xué)的小伙伴來(lái)說(shuō)，相信還是可以幫助到大家，畢竟我只是一個(gè)愛分享的小學(xué)渣。
### 效果預(yù)覽

演示地址

源碼地址

### 項(xiàng)目描述



前端部分

SPA單頁(yè)應(yīng)用，前后端的分離， webpack build to dist

移動(dòng)設(shè)備兼容：使用flexible.js和rem處理兼容問題

axios做ajax請(qǐng)求

使用了 Vuex 管理組件間的狀態(tài)，實(shí)現(xiàn)非父子組件之間的通信

canvas實(shí)現(xiàn)了一個(gè)頁(yè)面加載的時(shí)間動(dòng)畫

后端部分

直接搭建在自己的服務(wù)器上，API數(shù)據(jù)是聚合上的數(shù)據(jù)

express 做靜態(tài)資源目錄

啟用了socket.io實(shí)現(xiàn)一個(gè)簡(jiǎn)易的聊天窗口

待更新的功能

用戶登錄功能，目前收藏只能保存在localstore里面

用 express + mongodb 保存用戶狀態(tài)

用戶的評(píng)論功能

使用了Vue組件化開發(fā)的概念，將端后端分離開，樣式統(tǒng)一放在一個(gè)多帶帶的文件夾，方便管理的復(fù)用，使用vuex
統(tǒng)一做一個(gè)資源管理，當(dāng)各個(gè)組件需要數(shù)據(jù)時(shí)就向vuex倉(cāng)庫(kù)請(qǐng)求，極大的方便了管理，模塊化更加的清晰明了。

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
  },

需要注意的地方：Action提交的是mution，而不是直接的狀態(tài)變更

Action 可以包含任意異步操作。

利用socket實(shí)現(xiàn)了簡(jiǎn)單的聊天功能，在同一個(gè)服務(wù)器下?？纯葱侣劦耐瑫r(shí)還可以相互討論一下,這是在后端請(qǐng)求，當(dāng)然你
得事先安裝一下socket了 npm install socket.io --save

var server = http.createServer(app)
var io = require("socket.io")(server)

io.on("connection", function(socket) {
  console.log("啟動(dòng)了Socket.io");
  socket.on("sendGroupMsg", function(value){
    this.broadcast.emit("receiveGroupMsg", value);
  })
  // socket.broadcast.emit("user connected");
})

前端再運(yùn)用

  socket.emit("sendGroupMsg", this.value.trim());

  socket.on("receiveGroupMsg",() => {
    ...
  })

API存在跨域問題啊，新手肯定有這樣的疑惑，這可怎么決解？

遇到這個(gè)肯定是要現(xiàn)在自己的后臺(tái)對(duì)這個(gè)數(shù)據(jù)進(jìn)行處理一下嗎，不然你自己的前端根本訪問不了那個(gè)接口，相
當(dāng)于自己做一下轉(zhuǎn)接。其實(shí)也挺容易的
(后端處理接口)

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);

(前端請(qǐng)求自定義路由)

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,})
          }
      })

剛學(xué)的小伙伴們是不是瞬間覺得還是自己可以處理的呢，實(shí)在不行你就把我的項(xiàng)目拷到自己的目錄下安裝運(yùn)行一
下，再研究一下。但是一個(gè)很難受的事就是我請(qǐng)求的API放在自己的網(wǎng)站服務(wù)器上，由于我的域名是https的，API
里面的文章詳情的地址是http，還沒備案，存在打不開的缺陷， 但是你們自己拷貝到自己的電腦下正常安裝依賴
運(yùn)行還是沒問題的了，請(qǐng)諒解，不是不可以訪問哦。

安裝并運(yùn)行

# 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