基於Vue 2.0高仿 今日頭條 單頁應用——vue-toutiao

vue-toutiao

這是用 vue.js 2.0 高仿 今日頭條 的移動端項目，結合了原生app的部分功能以及網頁版。

前言

本人是 今日頭條 的重度用戶，在學習vue.js過程當中，在GitHub上看到了不少高仿webapp的好項目。由此在有了必定的技術積累後，開始構思使用Vue寫今日頭條，一是本身對於頭條的喜好，另外也是對於本身學習成果的檢驗。

技術棧

1. vue.js 2.0全家桶（vue、vuex、vue-router）
2. axios、jsonp
3. element-ui、iview
4. vue-lazyload、animate.css、moment、flexible.js

   在線地址

   線上地址（預覽地址）
   GitHub地址

說明

1. 項目內定死 帳號: admin, 密碼: admin。
2. 由於數據緣由，首頁請求的數據接口來自網頁版今日頭條，修改了一些參數； 收藏 頁面數據由本地（static文件）獲取。
3. 此項目主要是對於vue.js的運用，在樣式上沒法徹底還原app，可能有些地方稍微醜陋，望請諒解！
4. 由於網頁接口限制，沒法得到app中 視頻 這一欄目的數據，因此將其改了一些頁面結構。

安裝

git clone github.com/hcy1996/vue…

安裝

npm install

運行 (8090端口)

npm run dev

感謝

• 若是您也是頭條的重度用戶，感受項目對您有學習幫助，麻煩給個star吧，嘿嘿^_^
• 項目會一直更新，完善更多的功能，如發現一些地方的bug請issue，謝謝。

---

聊一些項目有關的內容

首先，重要的邏輯和操做都是在 home頁（首頁） 。

這個項目很關鍵的一環即是數據的獲取，並且如今網上不多有現成的新聞數據接口，固然也有，可是返回的數據沒法知足咱們的需求。

後來我在刷新今日頭條（f12移動模式）時，在控制檯network中捕捉到了數據接口，如今直接分享給你們。
http://m.toutiao.com/list/?tag='+ payload.kind +' &ac=wap&count=20&format=json_raw&as=A125A8CEDCF8987&cp=58EC18F948F79E1& min_behot_time= parseInt((new Date().getTime()) / 1000)

這個接口其實很簡單，主要修改tag和min_behot_time這兩個字段。

• min_behot_time
  請求發出時的時間戳，秒爲單位。
• tag
  "推薦"：__all__,
  "視頻"：vedio,
  除上述兩個外：news_×××

  說一說這 tag

  tag中news_×××的 ××× 內容須要幾分鐘去複製一下，
  好比「熱點」：news_hot; 「軍事」：news_military。。。等等

另外這個請求是有跨域問題的，可用代理（設置proxyTable）和jsonp實現。
其實你們仔細看都能發現，我這裏就獻醜了，但願對您之後作一些新聞相關的項目有幫助。

---

這個項目的更新會在readme中都寫出大概，以後會繼續把更新中一些具體的代碼案例分享在 掘金 的專題裏，但願你們多多支持，謝謝~。~

4-23 更新

1. 美化首頁每條新聞的樣式；
2. 底部導航圖標與文字調整；
3. 修改detail頁回到home頁「點擊加載更多」按鈕消失的bug；