概述
一個基于vue的仿知乎日報的前端項目。
關于知乎日報：
知乎日報是一款擁有千萬用戶的資訊類客戶端，每日提供來自知乎社區的精選問答，還有國內一流媒體的專欄特稿。
主要功能
每天更新好文章，包括權威的時事解讀、有趣的生活建議
更符合用戶口味的「主題日報」，覆蓋電影、財經、設計、體育等領域
長評優先展示
離線下載功能，及時緩存近期的 30 篇文章
更多貼心小細節：多圖及長文預警；支持一鍵分享收藏；夜間模式
安裝
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
技術棧
在線演示
細節
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">
即可解決
運行截圖
index.png
detail.png
message.png
文件結構
.
├── 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
