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