1. 程式人生 > >【WEB】vue搭建自己的部落格網站並部署到伺服器

【WEB】vue搭建自己的部落格網站並部署到伺服器

技術框架和基本庫:

1.前端:vue-cli腳手架,vue-router管理路由,axios前後端互動。
2.伺服器端:使用node語言開發,express作為開發框架,提供api藉口給前端ajax呼叫。路由和render交給vue解決。同時以RESTful api 來通訊。後臺主要負責與資料庫建立連線並處理增刪該查的操作。
3.資料庫:mongodb
4.引用的js庫:用 Marked.js 和 highlight.js 。從資料庫拿到資料進行渲染。預設的樣式很醜,所以我自己寫了一個。
5.Webpack作為靜態資源的打包和釋出工具。

開發流程

1.資料庫
由於在資料庫中需要儲存文章的資料,因此新建article的schema,model,controller。controller中包括了與arcticle相關的資料庫操作(使用axios),這樣可以將與arcticle相關的操作集中在一個檔案裡方便管理。
2.寫後端的提供給axios的介面
同樣針對不同的內容分開寫到不通檔案中。
這裡要注意的是,由於在除錯的時候,vue本身就是一個小型的伺服器了,所以需要配置代理。配置代理的方式也很簡單,只需要在config檔案中寫入

  proxyTable: {
      '/api': {
        target: 'http://localhost:9999
        changeOrigin: true
      }

3.寫介面檔案
呼叫步驟1中的函式,從資料庫中獲取資料,並渲染到介面上。
4.利用vue-router配置前端路由,學習子路由的使用,非常使用。
5.部署到伺服器上

我踏過的坑

說到踏過的坑,真是剛從一個坑裡出來就掉進另一個坑,填坑填的懷疑人生,可是在這個過程中,我將之前沒理解透的概念,通過實踐,有了非常深刻的理解,畢竟曾經那麼痛苦的爬坑。現在我把想到的都總結起來,希望你們少走寫彎路。

1.對於node後臺到底怎麼用
我一直以為配置代理後,我的axios那麼聰明,肯定就會自己找到對應的介面然後順利的執行呀。結果一直提示代理配置錯誤。我檢查了好幾遍,沒錯啊…在糾結了一個小時後,我發現是我的node檔案沒有跑起來!服務根本沒開怎麼可能找的到啊。
2.對於介面渲染總是不成功
我的原計劃呢,是有一張canvas畫布,然後我要做一些好看的動畫。可是寫在created裡的初始化方法一直報錯,這怎麼就不行呢!我就去官網翻了翻看看有沒有靈感,果然被我翻到了,因為是宣告週期的原因,canvas貌似需要介面全部載入完再進行繪製,所以寫在mounted裡面就順利解決啦。
3.對於強迫症的我總想把程式碼好好的封裝起來惹得麻煩
為了追求更工整的程式碼,我遇到了使用promise非同步呼叫的問題,也遇到了生命週期寫錯的問題,如果寫在一起,完全不需要操心這些。可是正是因為我這一根筋,我覺得我學到了很多知識,也明白了細節的重要。所以,過來人的經驗給你:不要偷懶哦
4.最最坑的必然是部署到伺服器!!
我計劃的是使用ubuntu伺服器,程式碼通過私有github倉庫託管,使用nginx負載均衡,利用pm2進行服務管理。可是由於之前沒有使用linux系統的經驗,nginx也沒接觸過,pm2也不瞭解,有種瞎子走路的感覺,靠一個摸索真的很艱辛,還好我挺過來了!花了一週的時間,終於把硬骨頭啃下來了,步驟我會在稍後寫出來。

注:伺服器部署流程
1.首先要申請一個伺服器和域名
2.將你的程式碼放到私有git平臺上,我使用的是碼雲
3.利用pm2動態管理服務。
4,使用nginx的負載均衡配置,將所有的埠轉到80埠。
5.開啟gzip,這樣可以加速介面開啟速度
….