我用Vue寫了個博客園WebApp

最近我們公司用vue搞事情，我們就用了Node和Vue寫了個博客園的移動端WebApp，想拿出來與大家分享下，也談談我遇到的坑。由於時間問題，目前還剩“閃存”，“博問”這兩塊還沒做完。先分享下截圖吧。

我呢，就從技術，部署，以及遇到的坑來講吧，當然啦,首先要感謝博客園官方提供接口，以及客服人員對於我的“郵箱轟炸”，還回復我的問題。致以大大的感謝。

說說我使用的技術吧

• 開發工具：vs code
• 前端：vue，vue-cli3.0 vant(ui框架)，webpack，less
• 后端：博客園官方api
• 部署：nginx，雲服務器

技術就是這么簡單，開發工具就不講了，前端采用腳手架構建而成，就不用自己累死累活去配置，這個時代真好。然后再使用vant的UI框架構建樣式界面，webpack打包嘛，less專注樣式咯，后端就完全是博客園的api了，拿來即用，不過接口要申請下權限。前后端的請求，我采用的是“axios”,使用它的攔截器做了不少事。然后部署的話，我呢，就生成靜態了，然后用nginx部署在阿里雲服務器上了。

技術想講的就這些，vue是基礎，若是vue不懂，可以去我之前的文章看看，不過呢，我更建議去官方文檔上去學習，其他的也是，我只是比較喜歡寫寫文章。由這些技術，我就構建了一個webapp。

我遇到的大坑

1. token問題
   博客園的接口采用的是OAuth2的形式，所以授權玩會附帶一個token給我們，那遇到的token是啥問題呢，我們都知道token是
   時效性的，所以一般來說拿到就要保存下來，保存沒問題，可以保存到cookie來，但是你再次訪問，怎么知道token過期呢，還有進行重新獲取呢。

   為啥說這個是大坑呢，因為以前都是jQuery的ajax，沒有用過axios，不知道攔截器這種東西，我們使用攔截器，進行攔截"401"的轉態碼，因為它代表着未授權，攔截到后我們重新請求token，保存，並重新請求剛才的http。附上代碼。

   1. instance.interceptors.request.use( 

      ---

   2. config => { 

      ---

   3. let token = window.$cookies.get(_apiTokenKey) || ""; 

      ---

   4. config.headers.Authorization = `Bearer ${token}`; 

      ---

   5. return config; 

      ---

   6. }, 

      ---

   7. error => { 

      ---

   8. return Promise.reject(error); 

      ---

   9. } 

      ---

   10. ); 

       ---

   11. instance.interceptors.response.use( 

       ---

   12. response => { 

       ---

   13. return response.data; 

       ---

   14. }, 

       ---

   15. error => { 

       ---

   16. let response = error.response; 

       ---

   17. let config = error.config; 

       ---

   18. if (response.status === 401) { 

       ---

   19. getApiToken().then(res => { 

       ---

   20. config.baseURL = ''; 

       ---

   21. instance(config) 

       ---

   22. }).catch(res=>{ 

       ---

   23. window.$vm.$toast({ 

       ---

   24. message: error.message 

       ---

   25. }); 

       ---

   26. }); 

       ---

   27. }else{ 

       ---

   28. window.$vm.$toast({ 

       ---

   29. message: error.message 

       ---

   30. }); 

       ---

   31. } 

       ---

   32. return Promise.reject(error); 

       ---

   33. } 

       ---

   34. ); 

       ---

2. 跨域問題

   對於博客園的接口地址，我們屬於不同域的情況，可能你用POSTMAN來進行接口調試的情況，可以正常獲取到數據，但實際在項目內我們卻會遇到跨域問題。這也是很多作為前后端分離項目，優先考慮的問題。在這分為開發環境以及線上環境，線上環境會在下面講到，我們先講下開發環境底下的跨域問題。

   因為開發環境是在Node.js底下嘛，所以我采用的是webpack的跨域插件"http-proxy-middleware"來進行跨域的，因為vue-cli3.0，它集成在"vue.config.js"底下,配置如下：

   1. devServer: { 

      ---

   2. host: "192.168.123.22", 

      ---

   3. port: 8080, 

      ---

   4. proxy: { 

      ---

   5. "/credentials": { 

      ---

   6. target: "https://api.cnblogs.com", 

      ---

   7. changeOrigin: true, 

      ---

   8. secure: true, 

      ---

   9. pathRewrite: { 

      ---

   10. "^/credentials": "" //這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可 

       ---

   11. } 

       ---

   12. }, 

       ---

   13. "/api": { 

       ---

   14. target: "https://api.cnblogs.com/api", 

       ---

   15. changeOrigin: true, 

       ---

   16. secure: true, 

       ---

   17. pathRewrite: { 

       ---

   18. "^/api": "" //這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可 

       ---

   19. } 

       ---

   20. }, 

       ---

   21. "/oauth": { 

       ---

   22. target: "https://oauth.cnblogs.com", 

       ---

   23. changeOrigin: true, 

       ---

   24. secure: false, 

       ---

   25. pathRewrite:{ 

       ---

   26. "^/oauth":"" 

       ---

   27. } 

       ---

   28. } 

       ---

   29. } 

       ---

   30. } 

       ---

   具體作用嘛，大家看官方文檔咯，https://webpack.docschina.org/configuration/dev-server/#devserver-proxy

3. 登錄問題

   接下來就是登錄問題，剛才我們講過了博客園是采用OAuth2的授權，這邊博客園還分為兩種。不涉及用戶操作的授權采用的是"授權碼模式"，而有關用戶操作的授權采用的是"密碼模式",兩者區分大家可以看這篇文章。那意味着我們在WebApp管理兩個token。管理兩個token不是大坑，無非就是兩個token嘛，大坑指的是我們獲取用戶操作的token是需要先用戶進行登錄操作，然后回調一個授權碼的。我們來分析下。

   1. 接口問題
      

   從上圖的接口描述我們可以得知，我們要先或許授權碼code，但是code是有回調地址redirect_uri參數傳過來的，這邊是默認博客園的地址的，安卓或者ios的開發，可以根據webView的監聽來獲取，但是Web這邊就存在跨域的問題了，我嘗試了很多方式，有iframe等等，但是最根本的問題，頁面在人家手上，你碰不着，這也就是大坑了，然后我就聯系管理員，官方把回調地址改成我這邊設置好的域名。真的很感謝管理員及其博客園的開發。

   但在這之前，我就想着說，如果改不成，那就換成引導式的方法來引導用戶進行自己講授權碼復制回來，然后粘貼到我們設置到的授權頁面，也就有下圖的界面，所以即使回調地址不是咱們這邊的，也可以進行登錄授權。可以點擊"獲取授權碼"來跳轉頁面，獲取授權碼，然后回到這個頁面登錄。
   

   2. vue路由問題
      一般來說，單頁面開發使用的路由都是hash形式的路由，但是回調地址返回的參數是附帶在#后面的，我們hash路由自帶#，兩者起沖突了，沒辦法，我們改成history形式的路由。
   1. let routers = new Router({ 

      ---

   2. mode: 'history', 

      ---

   3. routes: config 

      ---

   4. }); 

      ---

4. 圖片防盜鏈
   最后剩下一個坑，也就是圖片防盜鏈吧，正常博客園的博問內容有些地址是image.cnblogs的地址，所以我們附在了我們自己的域名底下就會出現防盜鏈的結果，那如何處理防盜鏈呢，這邊有2種做法，第一種是在head加上<meta name="referrer" content="no-referrer">來標識，第一種是使用vue的過濾器，然后用第三方代理去請求圖片。這樣子就可以了，不過代理的地址是cdn，所以可能找不到圖片。

   1. const imgConvert = url => { 

      ---

   2. //沒有在nginx做反向代理，直接用別人的反向代理訪問, 

      ---

   3. //該地址是cdn緩存圖片存在，可能找不到圖片 

      ---

   4. if(url==undefined||url==null){ 

      ---

   5. url=""; 

      ---

   6. } 

      ---

   7. url = url 

      ---

   8. .replace("http://", "") 

      ---

   9. .replace("https://", "") 

      ---

   10. .replace("https:", ""); 

       ---

   11. return `https://images.weserv.nl/?url=${url}`; 

       ---

   12. }; 

       ---

   1. <img class="blog-item_faceImg" :src="item.Avatar | imgConvert" @error="errorFace" @click="gotoZone"> 

      ---

5. 總結下吧
   整體來說，整個項目挺好做的，思路也很清晰，唯一就是跨域問題比較有點，但最終也是解決了。還不錯吧。

怎么去部署呢

在前面說到，我部署是使用雲服務器+nginx，至於怎么安裝nginx不懂可以私信我，或者百度嘛，我這邊分享下我nginx的配置節點就可以了。當然如果還想要部署在外網環境，可以的話雲服務器來一台，或者做個內網穿透，frp，ngrok之類的就可以，廢話不多說，附上節點代碼：

1. server{ 

   ---

2. listen 80; 

   ---

3. server_name cnblog.xuhuale.cn; 

   ---

4. root /ftpfiles/cnblog/dist; 

   ---

5. index index.html index.htm index.php; 

   ---

6.  

   ---

7. location / { 

   ---

8. try_files $uri $uri/ @router; 

   ---

9. index index.html; 

   ---

10. # error_page 405 =200 http://$host$request_uri; 

    ---

11. } 

    ---

12. location @router{ 

    ---

13. rewrite ^.*$ /index.html last; 

    ---

14. }  

    ---

15. location /api { 

    ---

16. error_log logs/rewrite.log notice; 

    ---

17. # rewrite ^/api/(.*) /$1 break; 

    ---

18. proxy_pass https://api.cnblogs.com; 

    ---

19. }  

    ---

20. location /credentials { 

    ---

21. error_log logs/rewrite.log notice; 

    ---

22. rewrite ^/credentials/(.*) /$1 break; 

    ---

23. proxy_pass https://api.cnblogs.com; 

    ---

24. }  

    ---

25. location /oauth { 

    ---

26. error_log logs/rewrite.log notice; 

    ---

27. rewrite ^/oauth/(.*) /$1 break; 

    ---

28. proxy_pass https://oauth.cnblogs.com; 

    ---

29. } 

    ---

30.  

    ---

31. } 

    ---

我們可以看到配置節點有"proxy_pass"這個就是nginx做的反向代理了，可以解決掉跨域問題。

總結下吧

我平時喜歡逛逛博客園的文章，但是移動端直接訪問網頁沒有適配，手機端還是需要下載軟件，所以我就想着做個webapp版的，想要嵌入Android，ios也可以，掛在公眾號也可以，直接訪問也可以，愛咋咋地。然后發現了api，又最近在練手vue，所以就做了一個出來，但是內容還沒完善，后面可以會完善起來，大家要是有在移動端設備看博客的習慣，可以收藏網址一波，或者大家進去捧捧場咯。最后附上源碼地址，網站地址，還有網站二維碼，以便手機掃嘛。

1.源碼地址：https://github.com/xhl592576605/cnblog_vue
2.網站地址：http://cnblog.xuhuale.cn(建議使用移動端的模式訪問，觀感更加)
3.二維碼:

 

HANS許博客園