概述

一個基於vue的仿知乎日報的前端專案。

關於知乎日報：

知乎日報是一款擁有千萬使用者的資訊類客戶端，每日提供來自知乎社群的精選問答，還有國內一流媒體的專欄特稿。

主要功能

每天更新好文章，包括權威的時事解讀、有趣的生活建議
　　更符合使用者口味的「主題日報」，覆蓋電影、財經、設計、體育等領域
　　長評優先展示
　　離線下載功能，及時快取近期的 30 篇文章
　　更多貼心小細節：多圖及長文預警；支援一鍵分享收藏；夜間模式

安裝

# install dependencies
npm install

# serve with hot reload at localhost:8080
 

npm run dev

# build for production with minification
npm run build

技術棧

vue

vuex

axios

線上演示

demo

細節

API:

感謝Xiao Liang提供的API,所有 API 均由 知乎（Zhihu.Inc）提供。

跨域問題

由於瀏覽器的同源策略，不允許進行跨域請求，所以首先解決的就是跨域問題，以前採用的是開發時配置/config/index.js下的proxyTable選項，實際部署時採用nodejs轉發，這次為了方便，採用了第三方APIJsonBird進行轉發,可以避免跨域的問題，返回的是json物件。

輪播：

知乎日報在首頁有5個top_stories，採用的是輪播方式展現出來的，為了實現輪播，採用的mint-ui的swipe元件，不過在使用的時候折磨了很久，最後發現原因是該元件沒有設定預設的高度，需要手動設定，如果不設定，就什麼都顯示不出來。。。（尷尬。。。）

重新整理

採用的同樣是mint-ui下的元件，規定聚頁面底部的距離閾值，小於閾值就觸發自定義事件。

路由

vue-router的配置檔案

import Vue from 'vue'
import Router from 'vue-router'
import showContent from '@/components/showContent'
 

import detail from '@/components/detail'
import message from '@/components/message'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/show',         //顯示新聞列表
      name: 'showContent',
      component: showContent
    },
    {
        path: '/detail',　　　//顯示詳細資訊
        name: 'detail',
        component: detail
    },
    {
      path: '/message',　　　//訊息頁面
      name: 'message',
      component: message
    }
  ]
})

狀態管理

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
        id: 9377231,      //文章id
        response: '',    
        top_stories: [],  //標題文章
        stories: '',    　//普通文章
        date: 20170425　　//日期
    },

    mutations: {
    },
    actions: {

    },

})
export default store

防盜鏈

知乎在圖片做了防盜鏈處理，只需要在header中加入

<meta name="referrer" content="never">

即可解決

執行截圖

檔案結構

.
├── build
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── dist
│   ├── index.html
│   └── static
│       ├── css
│       ├── img
│       └── js
├── index.html
├── node_modules
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   ├── components            //元件資料夾
│   │   ├── detailHeader.vue      //詳細資訊的頭部元件
│   │   ├── detail.vue            //詳細資訊元件
│   │   ├── indexHeader.vue       //首頁元件頭部
│   │   ├── messageHeader.vue     //訊息頁面的頭部元件
│   │   ├── message.vue           //訊息頁面元件
│   │   └── showContent.vue       //首頁顯示元件
│   ├── main.js
│   ├── router
│   │   └── index.js    //vue-router的配置檔案
│   └── store
│       └── index.js    //vuex的配置檔案

13 directories, 41 files