2. 程式人生 > >我用Vue寫了個部落格園WebApp

我用Vue寫了個部落格園WebApp

阿新 • • 發佈：2019-05-27

使用了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等等，但是最根本的問題，頁面在人家手上，你碰不著，這也就是大坑了，然後我就聯絡管理員，官方把回撥地址改成我這邊設定好的域名。真的很感謝管理員及其部落格園的開發。

    但在這之前，我就想著說，如果改不成，那就換成引導式的方法來引導使用者進行自己講授權碼複製回來，然後貼上到我們設定到的授權頁面，也就有下圖的介面，所以即使回撥地址不是咱們這邊的，也可以進行登入授權。可以點選"獲取授權碼"來跳轉頁面，獲取授權碼，然後回到這個頁面登入。

    1. 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. 相關推薦

    我用Vue寫了個部落格園WebApp

    使用了Node和Vue寫了個部落格園的移動端WebApp，想拿出來與大家分享下，也談談我遇到的坑。由於時間問題，目前還剩“快閃記憶體”，“博問”這兩塊還沒做完。先分享下截圖吧。 我呢，就從技術，部署，以及遇到的坑來講吧，當然啦,首

    受夠了移動端的數字輸入，我用vue寫了個模擬鍵盤

    前言 在H5開發過程中，涉及到使用者輸入的表單時，有一個非常常見的場景：輸入數字，在此基礎上往往還會涉及到限定數字範圍等一系列邏輯處理。 這些限定倒還好說，我受不了的是裝置鍵盤，目前常見的處理方式是用type="tel"直接喚起手機號碼的鍵盤，如果想要輸入負號，就只能

    用vue寫了個移動端車牌輸入鍵盤

    mar ace max UNC btn 代碼 this 大神 nsf 話不多說，先看圖 初學vue，斷斷續續花了一天半才寫出來.... 寫樣式真的很麻煩 下面上代碼 html 1 <template> 2 <section class=

    「懶惰的美德」我用 python 寫了個自動生成給文件生成索引的指令碼

    我用 python 寫了一個自動生成索引的指令碼 簡介：為了刷演算法題，建了一個 GitHub倉庫：PiperLiu / ACMOI_Journey，記錄自己的刷題軌跡，並總結一下方法、心得。想到一個需求：能不能在我每新增一條題目的筆記後，利用程式自動地將其歸類、建立索引？用 Python 實現一個入門級的

    用markdown寫的新部落格覆蓋了原有的部落格，導致原有的部落格消失了

    查了一下，確實是找不到了，瀏覽量還是存在的。只有重新寫了，那是在markdown上快取的部落格，感覺是個小bug。 剛開始用csdn，不會用markdown真是一臉黑。 查了下，點（也不知道圖片上傳成功了沒）新建就可以了。也確實可以了！

    是時候讓大家看看你用django寫出來的部落格了（內含部署教程視訊）

    ![](https://img2018.cnblogs.com/blog/759200/201908/759200-20190828185611060-1211614569.jpg) 作者：HelloGitHub-追夢人物 > 文中涉及的示例程式碼，已同步更新到 [HelloGitHub-Team

    用C#寫了個鍵盤記錄器

    為了把自己充實起來，閒來沒事，寫了個鍵盤記錄器，主要功能如下：   1.獲取使用者的按鍵資訊，將記錄的資訊以文字的形式儲存起來； 2.讀取檔案內容，已郵件方式傳送到指定郵箱； 3.實現了定時傳送； 4.為了能夠隨系統啟動，所以把程式寫到了服務裡。  

    用Python寫了個色情文章檢測器！投放各大自媒體！就年薪百萬了？

      但是，有些作者發表的文章充斥著色情與暴力，一旦被青少年看到，會產生難以想象的後果。我們需要對網路上的文章進行檢測，以標記出其是否為色情文章，如果是，那麼我們就要將其過濾不予顯示。而人工檢測在資訊爆炸的今天幾乎不可能實現。所以，我們提出了基於神經網路的色情文章檢測。 具體的

    我用Python寫了一個共享單車的應用程式！下一個摩拜單車會是我嗎

    學習如何使用 Redis 和 Python 構建一個位置感知的應用程式。 我經常出差。但不是一個汽車狂熱分子，所以當我有空閒時，我更喜歡在城市中散步或者騎單車。我參觀過的許多城市都有共享單車系統，你可以租個單車用幾個小時。大多數系統都有一個應用程式來幫助使用者定位和租用他們的單車，但對於像我這樣

    擔心酒店資訊洩露，我用Python寫了段加密演算法，看你怎麼破

    前段時間的酒店資訊洩露事情，鬧的沸沸揚揚！確實我們很多的資料在網路上都是裸奔，在資料庫裡面躺著也都是明文資料，連我自己的寫某某程式都被熱情的粉絲攻破！不如，我們用萬能的Python寫段加密資料傳送玩玩，也許就能避免酒店資料洩漏了！ 簡單的場景: Serve

    想在家看VIP電影，我用python做了個破解軟體，她很開心！

    執行平臺： Windows Python版本： Python3.x IDE： Sublime text3 一、前言 沒有會員，想線上觀看或下載愛奇藝、PPTV、優酷、網易公開課、騰訊視訊、搜狐視訊、樂視、土豆、A站、B站等主流視訊網站的VIP視訊？又不想充會員怎麼辦？博主本次寫的VI

    我的大一生活以及在部落格園寫部落格的這一年

           高考的慘痛教訓讓我學會了謙虛，不得已落魄至此，沒有我喜歡的學校，沒有我喜歡的專業，沒有我喜歡的人。。。我當時一直是這樣看待一切的~~~好不容易有所改變的我因為受人排擠，被處處針對，輔導員三番屢次的找我麻煩，班委一職莫名地被撤掉了，學校為了提高畢業率就業率，明著寫了一堆校規禁忌，背地裡卻做著暗箱操

    我用Python寫了一個搜尋引擎

    開玩笑啦，我所謂的搜尋引擎就是自己在小範圍內的網頁內進行搜尋的一個工具，總共程式碼也就兩三百行，自然沒法跟google和百度比啦。主要是長時間沒有使用python寫過程式碼了，為免生疏，就在上班之餘寫了這麼一個小東西。 先來看一下文件。 =======

    初用Hibernate4寫了個BaseDao實現請多多指教

    import java.io.Serializable; import java.util.List; import java.util.Map; import javax.annotation.Resource; import org.hibernate.Hiberna

    用 Python 寫了個簡單的股票量化交易框架

    因為行情的獲取用到了 `async / await` 所以暫時只支援 `Python3.5`交易支援 佣金寶 和 華泰 兩家券商的自動登入和買賣。行情使用的是新浪的免費行情，大概一秒鐘推送一次 所有的 3000 多隻股票的實時資料。也可以自己引入 tushare 這個免費的財經資訊獲取包 或者 引入 wind

    用wxpython寫了個簡單的檔案轉碼工具

    最近換的電腦是英文的系統，以前的一些資料都是中文gbk編碼。導致一直亂碼，系統沒有管理員許可權也不能修改編碼 想想很久沒用wxpythonl。就寫了這樣的一個小工具 #! /usr/bin/python # -*- coding:utf-8 -*- ''' Created

    雙十一之前，我用python跑了個指令碼

    先上指令碼： #!/usr/bin/env python # -*- coding:utf-8 -*- import requests from fake_useragent import UserAgent ua = UserAgent() def getHTMLT

    用pygame寫了個俄羅斯方塊

    最近在學習pygame，就寫了個俄羅斯方塊玩玩，完成了基本的功能，後續在加入 需要安裝pygame，ubuntu使用者 sudo apt-get install python-pygame 程式碼入下 #-* coding:UTF-8 -* #!/usr/bin/env

    用Python寫了個檢測文章抄襲，詳談去重演算法原理

    在網際網路出現之前，“抄”很不方便，一是“源”少，而是釋出渠道少；而在網際網路出現之後，“抄”變得很簡單，鋪天蓋地的“源”源源不斷

    我用STM32MP1做了個疫情監控平臺4—功能完善介面重新設計

    @[toc] ### 前言 之前我用STM32MP1和Qt實現了疫情監控平臺，系列教程： - [我用STM32MP1做了個疫情監控平臺1—交叉編譯環境搭建](https://www.cnblogs.com/whik/p/12430277.html) - [我用STM32MP1做了個疫情監控平臺2—Qt環境