Vue

2021.09.08

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


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

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

使用套件

預計會使用的套件如下:

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

網站結構

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

portfolio (VEU project)
 ├─ /build
 ├─ /dist 
 ├─ /server (Express)
 ├─ /src
 ├─ ...
 ├─ index.html
 ├─ package.json
 │
 └── 下略...

安裝 Vue

使用 Webpack 建立專案

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

$ vue init webpack portfolio

安裝 Axios 套件

1. 安裝 Axios 套件

$ npm install --save axios

2. 打開 src/main.js 引入 axios

import axios from 'axios'
// 把 axios 註冊為原型
Vue.prototype.$axios = axios

使用 Axios

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

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button type="button" name="button" v-on:click="getmsg">get</button>
    <button type="button" name="button" v-on:click="postmsg">post</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    getmsg () {
      this.$axios.get('/api/personal?name=MUKI').then(function (res) {
        console.log('res=', res)
      })
    },
    postmsg () {
      this.$axios.post('/api/favorite', {name: 'money'}).then(res => {
        console.log('post res = ', res)
      })
    }
  }
}
</script>

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

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


安裝 Express

安裝 Express 產生器

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

$ npm install express-generator -g

建立 Express 專案

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

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

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

# 進入 portfolio 目錄下
$ cd portfolio

# 使用 express 產生器建立專案
$ express server --view=ejs --css=compass

# 開啟該專案的目錄
$ cd server

# 安裝需要用到的套件
$ npm install

# 啟動伺服器
$ npm start

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

設定 Router

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

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/personal', function(req,res,next){
  res.send(req.query)
})

router.post('/favorite', function(req, res, next){
  res.send(req.body)
})

module.exports = router;

使用 nodemon 自動重啟伺服器

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

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

$ cd server/
$ npm install --save-dev nodemon 

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

// module.exports = app;

並加入以下程式碼:

var debug = require('debug')('my-application');
app.set('port', process.env.PORT || 3000);

// 啟動監聽
var server = app.listen(app.get('port'), function() {
debug('Express server listening on port ' + server.address().port);
});

接著再啟動 nodemon:

$ nodemon app.js

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

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

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

$ cd server/
$ npm install --save-dev cross-env 

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

"scripts": {
  "start:dev": "cross-env NODE_ENV=development nodemon ./bin/www",
  "start:prod": "cross-env NODE_ENV=production node ./bin/www"
},

安裝 Cors 解決跨域問題

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

$ cd server/
$ npm install --save-dev cors

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

// 解決跨域問題
const cors = require('cors');  
app.use(cors({  
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
}));
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 next(); 
});

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

//將整段 proxyTable 替換為以下語法
proxyTable: {
  '/api': {
    target: 'http://localhost:3000/',
    ChangeOrigin: true
  }
},

最後重啟伺服器:

# 前端
$ cd portfolio/
$ npm run dev

# 後端
$ cd portfolio/server
$ nodemon app.js

在網址輸入 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 套件,這個套件是用來溝通前端和後端的中間層。

$ cd server/
$ npm install --save connect-history-api-fallback

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

// 1. 刪除以下語法
app.use(express.static(path.join(__dirname, 'public')));

// 2-1. 找到以下語法
app.use('/', indexRouter);
app.use('/users', usersRouter);

// 2-2. 替換成以下語法
app.use('/api', indexRouter);
app.use('/api/users', usersRouter);
var history = require('connect-history-api-fallback');
app.use(express.static(path.join(__dirname, '../dist')));
app.use(history());

打開 routes/index.js

// 將以下語法刪除或注釋起來
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

回到前端將專案 build 出來

$ cd portfolio/
$ npm run build

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

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


參考資料

vue+node(express)做中间层开发一

vue+node(express)做中间层开发一

前提条件安装:vue v2.9.6vue-cliiviewnode v15.4express v4.16.1axios v0.18.0cors采用的结构为前端Vue项目,内包一个node服务vue端 {代码…} 执行 npm run…

https://segmentfault.com/a/1190000038816828

使用Express部署Vue项目

使用Express部署Vue项目

使用Express部署Vue项目目录目录1. 背景2. 配置Vue CLI2.1. 安装Node.js2.2. 安装Vue CLI2.3. 创建Vue项目2.4. 构建Vue项目3. 配置Express3.1. 安装Express3.2. 创建项目4. 使用Express部署Vue项目 1. 背景我们想…

https://zhuanlan.zhihu.com/p/116749549

歡迎給我點鼓勵,讓我知道你來過 :)

4
1
guest

11 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Cynthia
Cynthia
1 year ago

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

Cynthia
Cynthia
1 year ago
Reply to  mukiwu

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

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

Cynthia
Cynthia
1 year ago
Reply to  mukiwu

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

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

Victor
Victor
8 months ago

我照著步驟做但是api打不過去404

Victor
Victor
8 months ago
Reply to  mukiwu

以解決謝謝您

Victor
Victor
8 months ago
Reply to  Victor

我是網頁的新手,我想問您express這邊除了server功能,還有其他功能面嗎,router的話Vue專案好像就有了

Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.