概述
一個(gè)基于vue的仿知乎日?qǐng)?bào)的前端項(xiàng)目坚俗。
關(guān)于知乎日?qǐng)?bào)：
知乎日?qǐng)?bào)是一款擁有千萬(wàn)用戶的資訊類(lèi)客戶端，每日提供來(lái)自知乎社區(qū)的精選問(wèn)答骏庸，還有國(guó)內(nèi)一流媒體的專(zhuān)欄特稿杂数。
主要功能
每天更新好文章，包括權(quán)威的時(shí)事解讀锉试、有趣的生活建議
更符合用戶口味的「主題日?qǐng)?bào)」猫十，覆蓋電影、財(cái)經(jīng)呆盖、設(shè)計(jì)拖云、體育等領(lǐng)域
長(zhǎng)評(píng)優(yōu)先展示
離線下載功能，及時(shí)緩存近期的 30 篇文章
更多貼心小細(xì)節(jié)：多圖及長(zhǎng)文預(yù)警应又；支持一鍵分享收藏宙项；夜間模式
安裝
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
技術(shù)棧
在線演示
細(xì)節(jié)
API:
感謝Xiao Liang提供的API,所有 API 均由 知乎（Zhihu.Inc）提供。
跨域問(wèn)題
由于瀏覽器的同源策略株扛，不允許進(jìn)行跨域請(qǐng)求尤筐，所以首先解決的就是跨域問(wèn)題，以前采用的是開(kāi)發(fā)時(shí)配置/config/index.js下的proxyTable選項(xiàng)洞就，實(shí)際部署時(shí)采用nodejs轉(zhuǎn)發(fā)盆繁，這次為了方便，采用了第三方APIJsonBird進(jìn)行轉(zhuǎn)發(fā),可以避免跨域的問(wèn)題奖磁，返回的是json對(duì)象改基。
輪播：
知乎日?qǐng)?bào)在首頁(yè)有5個(gè)top_stories繁疤，采用的是輪播方式展現(xiàn)出來(lái)的咖为，為了實(shí)現(xiàn)輪播秕狰，采用的mint-ui的swipe組件，不過(guò)在使用的時(shí)候折磨了很久躁染，最后發(fā)現(xiàn)原因是該組件沒(méi)有設(shè)置默認(rèn)的高度鸣哀，需要手動(dòng)設(shè)置，如果不設(shè)置吞彤，就什么都顯示不出來(lái)我衬。。饰恕。（尷尬挠羔。。埋嵌。）
刷新
采用的同樣是mint-ui下的組件破加，規(guī)定聚頁(yè)面底部的距離閾值，小于閾值就觸發(fā)自定義事件雹嗦。
路由
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', //顯示詳細(xì)信息
name: 'detail',
component: detail
},
{
path: '/message', //消息頁(yè)面
name: 'message',
component: message
}
]
})
狀態(tài)管理
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
id: 9377231, //文章id
response: '',
top_stories: [], //標(biāo)題文章
stories: '', //普通文章
date: 20170425 //日期
},
mutations: {
},
actions: {
},
})
export default store
防盜鏈
知乎在圖片做了防盜鏈處理范舀，只需要在header中加入
<meta name="referrer" content="never">
即可解決
運(yùn)行截圖
文件結(jié)構(gòu)
.
├── 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 //詳細(xì)信息的頭部組件
│ │ ├── detail.vue //詳細(xì)信息組件
│ │ ├── indexHeader.vue //首頁(yè)組件頭部
│ │ ├── messageHeader.vue //消息頁(yè)面的頭部組件
│ │ ├── message.vue //消息頁(yè)面組件
│ │ └── showContent.vue //首頁(yè)顯示組件
│ ├── main.js
│ ├── router
│ │ └── index.js //vue-router的配置文件
│ └── store
│ └── index.js //vuex的配置文件
13 directories, 41 files
