用 VUE + EXPRESS + 建置前後端網站

最近想要重置自己的履歷介紹,並將專案整理後放上來。

因為有的專案會用到跨域的 API,為了解決這個問題,就考慮要自己弄個後端 SERVER 來處理跨域問題,因此這次改版決定將 Vue 和 Express 通通整合進來,並將步驟記錄下來以供日後參考使用。

使用套件

預計會使用的套件如下:

  • VUE v2
  • Vue-Cli
  • Webpack
  • Axios
  • Node
  • Express
  • Cors
  • Nodemon

網站結構

我會將 Express 放在 Vue 專案底下,因此結構目錄大概長這樣:

Plain Text

安裝 Vue

使用 Webpack 建立專案

首先,用 Webpack 安裝 Vue-cli,可以自行修改細部的設定,也可以使用「Enter」大法一直按下一步,直到安裝完成。

Shell

安裝 Axios 套件

先安裝 Axios 套件

Shell

再打開 src/main.js 引入 axios

JS
src/main.js

使用 Axios

打開 vue 預設的檔案 HelloWorld.vue,將我們預先設計好的 api 寫進來。這邊用了兩個 function get & post API:getmsg() 以及 postmsg(),剩下的 API Router 設定會在 Express 完成。

HTML
components/HelloWorld.vue
JS
components/HelloWorld.vue

弄好之後可以先看一下畫面,使用指令 npm run dev,畫面如下所示:

前端 Vue 預設的 port 為:http://localhost:8080


安裝 Express

安裝 Express 產生器

第一次使用要先安裝他的產生器:

Shell

建立 Express 專案

Express 可以選擇要使用的「樣版引擎」以及「CSS 預處理器」,如果都沒有指定,預設就是:

  • 樣版引擎:jade
  • CSS 預處理器:原生的 css

我自己是習慣使用 ejs 跟 scss,所以我會下這樣的指令新建專案:

Shell

後端預設的 port 為 http://localhost:3000,畫面如下:

設定 Router

接著在 server/routes/index.js 設定 router

JS

使用 nodemon 自動重啟伺服器

nodemon 可以說是後端的 livereload。我們更改 server 端的程式碼後,不用關閉伺服器再打開,直接重新整理網頁即可,非常的方便!

先在 server 資料夾底下安裝 nodemon:

Shell

然後打開 app.js,將最後一行註釋起來

JS
server/app.js

並加入以下程式碼:

JS
server/app.js

接著再啟動 nodemon:

Shell

這樣每次存檔後,就可以到網頁上看結果,不需要重啟伺服器了。

安裝 Cross-env 跨平台設定環境

corss-env 這個套件可以讓我們跨平台的將環境設定好,讓 MAC / Linux / Windows 的環境一致。

Shell

打開 server/package.json,將 script 設定全部替換掉:

JSON
server/package.json

安裝 Cors 解決跨域問題

最後就是要解決前端跟後端的跨域問題了,先安裝 cors 套件:

Shell

然後在 server/app.js 裡,加入以下語法來設定跨域:

JS
server/app.js

開啟前端 Vue 的檔案設定 proxy,詳細位置為 portfolio/config/index.js

JS
config/index.js

最後重啟伺服器:

Shell

在網址輸入 http://localhost:8080 後,打開 console 視窗,試著點選 getpost 兩個按鈕,應該可以成功看到 api 資訊

到此為止,Vue 和 Express 的開發環境就算是設定完成了,我們可以在 Express 設定 API router,然後用 Vue 開發時接入 API。

使用 Express 部署 Vue 專案

最後,我希望用 Vue build 出來的專案(dist/index.html),可以在 Express 底下執行並順利接 API,完成我的一條龍計畫!

先安裝 connect-history-api-fallback 套件,這個套件是用來溝通前端和後端的中間層。

Shell

打開 server/app.js 修改 Express 的 router:

JS
server/app.js

打開 routes/index.js

JS
routes/index.js

回到前端將專案 build 出來

Shell

再打開後端的 http://localhost:3000,就可以執行我們最後 build 出來的專案囉,而且也可以順利執行 API:

最後就可以愉快地開始寫網站囉!!


想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
6 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Cynthia
Cynthia
17 days ago

很棒的一篇文章,但我的視線一直被的  code block 所吸引,能請問下妳是使用了什麼 tool 嗎?

Cynthia
Cynthia
16 days ago
Reply to  mukiwu

HAHA, 我是用 Jekyll + Markdown 來寫網誌的,看來要把
 Syntax highlighting 的 Style 弄成這套有點麻煩,我在來研究看看,謝謝!

P.S. 是我錯覺還是真的很久沒看到你更新手帳的社團了?

Cynthia
Cynthia
12 days ago
Reply to  mukiwu

對於半吊子前端很難阿 XDDD 可以直接用,只是都不太喜歡多多少都有不喜歡的部份。

P.S. 好的, 加油嘿~!當初妳跟 AKI 的網誌可是拖我入坑的,非常希望再看到妳們分享😀 ( 雖然 AKI 她的翻譯也已經被我歸入有生之年系列了 XDDDD) 

粉絲團