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；

---