模仿豆瓣前端

vue.js 2.0, vuex, vue-router, vue-server-renderer, express, cheerio, superagent, redis

live demo （部署在搬瓦工主機上，海外節點，應該需要1s）

1. Build

#redis-server

redis-server &
install dependencies
npm install
serve with hot reload at localhost:4000
npm run dev
init data
curl http://host:port/api/spider // 更替換成真實地址和端口號
build for production with minification
npm run build && npm start</code></pre> 
  
2. 注意
 
  
 
   
請確認 redis 是 start 狀態
 
   
在瀏覽器中訪問 http://127.0.0.1:4000/api/spider 啟動爬蟲
 
   
 
目前完成的界面: 首頁, 讀書首頁, 標簽頁, 列表頁, 詳情頁
 
http://127.0.0.1:4000/
 
http://127.0.0.1:4000/book
 
http://127.0.0.1:4000/tags
 
http://127.0.0.1:4000/tag:name
 
http://127.0.0.1:4000/subject:id
 
 
   
增加了搜索功能，優化了排版， 但是豆瓣沒有評論接口，所以只能等日后寫爬蟲解決
 
  
 
  
3. Vue.js1.0 更新到 Vue.js2.0 記錄
 
  
 
   
在2.0中 Vue.set(store.item, item) 不會觸發更新dom, store.item = item 才可以
 
   
由于 server side render 的原因, 不能使用 vue-resource 了, 改用 superagent 發請求了
 
   
store.item 為{}時, 在頁面中引用 會直接error, 需要指定詳細數據類型
 
   
v-html 替換了 {{{}}}
 
   
webpack 出現了 mdzz 的錯誤 Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. 解決辦法為:
 
  
 
  
$ npm uninstall webpack --save-dev

followed by
$ npm install webpack@2.1.0-beta.22 --save-dev
Then you should be able to gulp again. Fixed the issue for me.</code></pre> 
  
 
 
  
<div>
  <span v-for="n in 10">{{ n }}</span> // 需要指定n
</div>
<div>
  <span v-for="(item, $index) in items">{{ $index }}</span> // 需要顯示聲明$index
</div>
 
  
上面的 bug 已經被 尤大 fixed
 
  
4. 更新記錄
 
  
2016 11 19 根據 i5ting 前輩的建議, 更改了目錄結構
 
  
5. 目錄結構
 
  
. ├── README.md ├── build ├── index.html ├── server.js ├── frontend │ ├── App.vue │ ├── app.js │ ├── assets │ ├── client-entry.js │ ├── components │ ├── router │ ├── server-entry.js │ ├── store │ └── views ├── backend │ ├── spiders │ └── routers ├── node_modules ├── package.json ├── public └── test