我用Vue寫了個博客園WebApp

時間 2019-11-18

標籤 vue 寫了博客 webapp 欄目無線简体版

原文原文鏈接

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

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

說說我使用的技術吧

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

技術就是這麼簡單，開發工具就不講了，前端採用腳手架構建而成，就不用本身累死累活去配置，這個時代真好。而後再使用vant的UI框架構建樣式界面，webpack打包嘛，less專一樣式咯，後端就徹底是博客園的api了，拿來即用，不過接口要申請下權限。先後端的請求，我採用的是「axios」,使用它的攔截器作了很多事。而後部署的話，我呢，就生成靜態了，而後用nginx部署在阿里雲服務器上了。html

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

我遇到的大坑

token問題
博客園的接口採用的是OAuth2的形式，因此受權玩會附帶一個token給咱們，那遇到的token是啥問題呢，咱們都知道token是
時效性的，因此通常來講拿到就要保存下來，保存沒問題，能夠保存到cookie來，可是你再次訪問，怎麼知道token過時呢，還有進行從新獲取呢。vue

爲啥說這個是大坑呢，由於之前都是jQuery的ajax，沒有用過axios，不知道攔截器這種東西，咱們使用攔截器，進行攔截"401"的轉態碼，由於它表明着未受權，攔截到後咱們從新請求token，保存，並從新請求剛纔的http。附上代碼。java
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. );
跨域問題webpack

對於博客園的接口地址，咱們屬於不一樣域的狀況，可能你用POSTMAN來進行接口調試的狀況，能夠正常獲取到數據，但實際在項目內咱們卻會遇到跨域問題。這也是不少做爲先後端分離項目，優先考慮的問題。在這分爲開發環境以及線上環境，線上環境會在下面講到，咱們先講下開發環境底下的跨域問題。ios

由於開發環境是在Node.js底下嘛，因此我採用的是webpack的跨域插件"http-proxy-middleware"來進行跨域的，由於vue-cli3.0，它集成在"vue.config.js"底下,配置以下：nginx
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-proxygit
登陸問題

接下來就是登陸問題，剛纔咱們講過了博客園是採用OAuth2的受權，這邊博客園還分爲兩種。不涉及用戶操做的受權採用的是"受權碼模式"，而有關用戶操做的受權採用的是"密碼模式",二者區分你們能夠看這篇文章。那意味着咱們在WebApp管理兩個token。管理兩個token不是大坑，無非就是兩個token嘛，大坑指的是咱們獲取用戶操做的token是須要先用戶進行登陸操做，而後回調一個受權碼的。咱們來分析下。
1. 接口問題
從上圖的接口描述咱們能夠得知，咱們要先或許受權碼code，可是code是有回調地址redirect_uri參數傳過來的，這邊是默認博客園的地址的，安卓或者ios的開發，能夠根據webView的監聽來獲取，可是Web這邊就存在跨域的問題了，我嘗試了不少方式，有iframe等等，可是最根本的問題，頁面在人家手上，你碰不着，這也就是大坑了，而後我就聯繫管理員，官方把回調地址改爲我這邊設置好的域名。真的很感謝管理員及其博客園的開發。

但在這以前，我就想着說，若是改不成，那就換成引導式的方法來引導用戶進行本身講受權碼複製回來，而後粘貼到咱們設置到的受權頁面，也就有下圖的界面，因此即便回調地址不是我們這邊的，也能夠進行登陸受權。能夠點擊"獲取受權碼"來跳轉頁面，獲取受權碼，而後回到這個頁面登陸。
1. vue路由問題
  通常來講，單頁面開發使用的路由都是hash形式的路由，可是回調地址返回的參數是附帶在#後面的，咱們hash路由自帶#，二者起衝突了，沒辦法，咱們改爲history形式的路由。
1. let routers = new Router({
2. mode: 'history',
3. routes: config
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">
總結下吧
總體來講，整個項目挺好作的，思路也很清晰，惟一就是跨域問題比較有點，但最終也是解決了。還不錯吧。

怎麼去部署呢

在前面說到，我部署是使用雲服務器+nginx，至於怎麼安裝nginx不懂能夠私信我，或者百度嘛，我這邊分享下我nginx的配置節點就能夠了。固然若是還想要部署在外網環境，能夠的話雲服務器來一臺，或者作個內網穿透，frp，ngrok之類的就能夠，廢話很少說，附上節點代碼：

 
     server{  
       
 listen 80;  
       
 server_name cnblog.xuhuale.cn;  
       
 root /ftpfiles/cnblog/dist;  
       
 index index.html index.htm index.php;  
       
 location / {  
       
 try_files $uri $uri/ @router;  
       
 index index.html;  
       
 # error_page 405 =200 http://$host$request_uri;  
       
 }  
       
 location @router{  
       
 rewrite ^.*$ /index.html last;  
       
 }   
       
 location /api {  
       
 error_log logs/rewrite.log notice;  
       
 # rewrite ^/api/(.*) /$1 break;  
       
 proxy_pass https://api.cnblogs.com;  
       
 }   
       
 location /credentials {  
       
 error_log logs/rewrite.log notice;  
       
 rewrite ^/credentials/(.*) /$1 break;  
       
 proxy_pass https://api.cnblogs.com;  
       
 }   
       
 location /oauth {  
       
 error_log logs/rewrite.log notice;  
       
 rewrite ^/oauth/(.*) /$1 break;  
       
 proxy_pass https://oauth.cnblogs.com;  
       
 }  
       
 }

咱們能夠看到配置節點有"proxy_pass"這個就是nginx作的反向代理了，能夠解決掉跨域問題。

總結下吧

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

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

HANS許博客園

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。