基於vue2.0與追書神器api的小說閱讀webapp

vue-nReader

整個項目一共14個頁面（包括通用組件），主要使用了vue2.0+vue-router+vuex，主要實現了小說排行榜，小說分類，小說詳情，小說閱讀，搜索頁面，小說閱讀記錄等頁面。達到了可用來看小說的基本需求。

項目地址：https://github.com/zimplexing...

項目中使用的api是經過charles進行抓取的，抓取了筆趣閣和追書神器的api，可是筆趣閣的api有一個問題，就是請求的成功率過低了，時不時地就掛了，在使用這個app的時候是在很差受，因此最後使用的追書神器的api，想當年追書神器免費的時候，真的是看小說神器啊，如今也開始收費了。

• 筆趣閣api

• 追書神器api

​以前沒有過開發移動端的經歷，看完vue官方文檔，執行完npm install vue-cli -g,而後生成項目結構以後，就懵逼了。webapp頁面怎麼佈局？確定不能使用px，那要用什麼？直接拿一個移動端的UI組件來用？等等一些很傻的問題在個人腦海中出現了。

1. 一個比較完善的用vue2.0寫的餓了麼 用來參考

2. 支持vue的圖標庫 以及圖標庫的 圖標展現 （後來使用了iview組件，圖標也一塊兒使用了iview集成的圖標了）

3. vue-router的官方指導文檔 一開始使用路由，特別是對vue還不是很熟的狀況下，仍是須要多看看官方的文檔

4. 7個你可能不認識的CSS單位 如何在移動端使用合適的單位有疑問的，靠這篇解惑了。

5. Flex 佈局教程：語法篇和Flex 佈局教程：實例篇 使用flex佈局，基本可以使用全部的使用場景了。

利用下班時間，寫寫停停，大概花了一個月的時間，終於把這個小項目搞定了。這個項目不單單是用來給本身練手用，也是本身打發業餘時間的須要。一箭雙鵰。

這些是我在開發過程當中遇到的一些疑問或者是困惑或者是尚未解決的，第一次使用vue開發，遇到的一些問題仍是一些比較基礎的，重在記錄:

開發中的問題：

• 每次切換tab頁後都從新加載數據,使用keep-alive後，排行榜頁面仍是會發送請求

解決方法：使用created鉤子進行請求數據，使用beforeEnterRoute重複發請求

• 列表一次性所有加載，沒有實現滾動加載

解決方法：使用vue-scroll獲取滾動的高度，更新渲染的數據

• 使用$router.push()後使用瀏覽器返回會徹底還原歷史路徑

解決方法：存在二次跳轉的，最好使用重定向解決，不要使用mounted以後在進行push操做

• 有多層頁面，而且上級頁面不肯定時，路由返回錯誤

解決方法：將每層的頁面路徑分類並放到state中（二級頁面，三級頁面等等）分開管理，向state提交上級路徑時，排除當頁面的全部下級頁面路徑

• 異步獲取數據後渲染模板 模板會先報錯再等數據返回以後再作一次渲染

解決方法1：在渲染須要用到異步獲取的數據的地方都先進行判斷

解決方法2：事件在data定義異步獲取數據的數據格式，避免報錯

• tab切換渲染加載等待加載動畫效果

解決方法：使用vue-spinner組件

• 數據過濾或者是時間格式化問題

解決方法：使用filters加moment解決

• 跳轉到相應路由標記active

解決方法：使用vue-router並設置exact屬性便可

• api爲第三方網站的，存在跨域問題

使用代理將請求進行轉發

• 事件綁定都是使用的是click，在移動端火出現延遲

解決方法：使用vue-touch#next，使用tap替代click事件

預覽地址

項目放在google雲的虛擬主機上，訪問速度看人品。代理也運行在上面，因此加載速度可能會比較慢。其中有一些小說封面會加載不出來，這個是api的問題，並非網絡的緣由。

電腦端請開啓開發者模式
在線預覽地址

手機掃碼：

屏幕截圖

![]https://github.com/zimplexing...