Vue.js開發的讀書WebAPP

時間 2019-11-11

標籤 vue.js vue 開發讀書 webapp 欄目 JavaScript 简体版

原文原文鏈接

前言

初學Vue.js，官網的文檔寫的很清楚，看着不難。俗話說：光說不練假把式。程序猿學個新東西仍是要敲出來看看效果比較好。最開始是想搞個音樂類的，畢竟每天都會聽歌，但發現搞音樂類的太多了，我再搞個多沒意思。考慮了一下，仍是搞個看書的吧，這個仍是不多有人搞的。找了找發現只有追書神器的api暴露出來了，起點之類的api找不到。最終效果由於api數據的限制，參考了起點中文網app、起點中文網web端，以及追書神器web端，再加上本身的一些想法搞出來的。項目中的小圖標使用的是阿里巴巴的矢量圖標庫Iconfont。html

技術棧

Vue2 + vuex + vue-router + webpack + ES6 + axios + sassvue

源碼地址

https://github.com/XNAL/ReadMorewebpack

項目運行

git clone https://github.com/XNAL/ReadMore
cd ReadMore
npm install

npm run dev（本地運行 訪問：http://localhost:8080）

npm run build （部署上線 生成的dist文件夾放到服務器中便可：須要配置代理，如使用nginx，可參考下面問題中的配置）

說明

目前只作了第一個版本，還存在一些須要進行優化的細節問題，後續會繼續進行維護更新。若是發現什麼問題，也歡迎跟我聯繫反饋。
若是以爲作的還行，對您有所幫助，歡迎「start」一下。

開發中遇到的一些問題

多個子組件循環，父組件如何處理加載狀態（精選頁面）

每一個子組件加載完後是同`this.$emit`通知父組件，父組件判斷全部子組件加載完成後隱藏loading。

跳轉頁面後active標記

最開始使用url.indexOf來處理，後來直接發現vue-router的exact屬性更好用。

調用第三方api接口時跨域的問題

1. 本地使用proxyTbale

    在config/index.js中添加配置：
    
    '/api': {
        target: 'http://api.zhuishushenqi.com',
        changeOrigin: true,
        pathRewrite: {                
            '^/api': ''
        }   
    }
    

2. 部署服務器後經過nginx代理

    nginx中配置：
    
    location /api/ {
            proxy_pass http://api.zhuishushenqi.com/;
        }

3. 調用接口時只須要以`/api`開頭就能夠

服務器部署後vue-router的虛擬路由在刷新時出現404頁面

修改nginx配置：

location / {
        try_files $uri $uri/ @router;          //增長的內容
        root /home/don/book;
        index index.html;
}
    
location @router {                          //增長的內容
    rewrite ^.*$ /index.html last;          //增長的內容
}                                           //增長的內容