国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue.js+socket.io打造一個好玩的新聞社區

xiguadada / 2286人閱讀

摘要：云新聞云新聞收藏的使用需要注意的地方提交的是，而不是直接的狀態變更可以包含任意異步操作。的使用利用實現了簡單的聊天功能，在同一個服務器下。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83491.html

相關文章

  • 2017-06-18 前端日報

    摘要：前端日報精選精讀高階組件知乎專欄是如何重新定義前端開發的知乎專欄為您的性能選擇最佳的引擎知乎專欄中的尺寸單位掘金一種生成雪碧圖的懶惰姿勢中文第期編寫現代代碼周刊第期的平凡之路我們到底可以通過多少種方式修改元素樣式掘金 2017-06-18 前端日報 精選 精讀 React 高階組件 - 知乎專欄React 是如何重新定義前端開發的 - 知乎專欄為您的 Node 性能選擇最佳的 JS 引...

    Yang_River 評論0 收藏0

  • 2017-06-17 前端日報

    摘要：前端日報求精選幾乎誤我一生知乎專欄最新特性實現的三大黑科技十年蹤跡的博客里的真真假假，平等之論眾成翻譯技術周刊年中復盤程序員的自我修養社區周刊跨域每日技術筆記中文譯理解中的文件掘金個最佳企業應用案例從到個人文章 2017-06-17 前端日報 GitHub 求star 精選 React Router v4 幾乎誤我一生 - 知乎專欄JavaScript 最新特性實現的三大黑科技 - 十...

    desdik 評論0 收藏0

  • 個人分享--web前端學習資源分享

    摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

  • 前端每周清單第 44 期: 2017 JS 調查報告、REST 接口實時化、ESM 的過去與未來

    摘要：巔峰人生年老兵思路上的轉變，遠比單純提升技術更有價值本文節選自趙成教授在極客時間開設的趙成的運維體系管理課，是其對自己十年技術生涯的回顧與總結。趙成教授來自美麗聯合集團，集團旗下兩大主力產品是蘑菇街和美麗說，目前負責管理集團的技術服務團隊。 showImg(https://segmentfault.com/img/remote/1460000012476504?w=1240&h=826...

    MASAILA 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<