一、介紹
Express 框架是一個基於node.js的web應用框架，能夠幫你創建一個從前端到后端功能完整的網站；Vue是一個流行的前端框架，主要是用來構建用戶界面的，並且具有組件化，響應式等特點；所以理解為 express負責后端，vue負責前端，它倆之間使用HTTP來進行數據交換。
二、開始搭建
后端 - express環境搭建
1. 安裝 express框架
npm install -g express
2. 安裝 express-generator
npm install -g express-generator
然后用 express --version 來檢測是否安裝成功
3. 創建 express項目
利用express-generator 腳手架快速生成項目
express --no-view server
該命令即創建了一個名為 server的無視圖 express 項目
項目目錄如下：
- bin 目錄下有一個 www 文件，用來啟動項目，默認監聽3000端口
- public 目錄下存放靜態文件（images, js, css）
- routes 目錄下存放路由文件，路由就是用來確定URL和資源的對應關系的，這里面的代碼主要用來接收前端的請求，然后進行響應
- views 目錄存放模板引擎文件，這里面的文件最終會渲染為html頁面
- app.js 文件是整個項目的入口文件，在這里面引入一些項目需要的模塊，創建 express 實例，進行總體路由設置等
- package.json 是依賴包描述文件，這里面有的依賴包可以通過 npm install 一鍵安裝
- package-lock.json 是在執行完 npm install 后生成的，里面是已經安裝的依賴包的詳細描述，需要上傳到 git 上，以保證其他人在 install 的時候，大家的依賴版本相同
進入項目目錄下(/server)，執行 npm install 來安裝項目所需的依賴模塊，然后就會生成 node_modules 目錄，存放的都是下載的依賴模塊
現在執行命令 npm start 啟動項目，通過瀏覽器訪問 http://localhost:3000/，可以看到如下頁面：
然后我們在routes目錄下新建一個 test.js 文件，內容如下：
var express = require('express');
var router = express.Router();
router.get('/', function (req, res, next) {
res.send('響應成功!')
});
module.exports = router;
然后在 app.js 文件中添加：
var testRouter = require('./routes/test')
app.use('/test', testRouter)
就是將 /test這個路徑對應於 test.js 文件；修改成功后，我們重啟項目，訪問 http://localhost:3000/test ，可以看到如下頁面：
至此express后端就搭建完成了
前端 - vue環境搭建
1. 安裝 vue-cli
npm install -g @vue/cli
然后用 vue -V 檢查一下
2. 創建 vue項目
這里使用 vue-cli 腳手架工具快速搭建 vue項目，執行命令，即創建名為 client的vue項目
vue create client
期間會提示你進行一些配置的選擇（下一期講解），這里一路按 enter 選擇默認的就好了
創建成功后，項目目錄如下：
-
assets 存放圖片、CSS樣式文件等
-
components 存放vue組件
-
router 是我后來新建的，用來管理路由
-
App.vue 文件是項目的根組件
-
main.js 是項目的入口文件，用來導入模塊，初始化vue實例等
在項目目錄下執行 npm install 安裝項目依賴，自動生成 node_modules 目錄和package-lock.json 文件
3. 啟動 vue項目
執行命令 npm run serve 啟動 vue 項目，啟動成功后顯示如下：
訪問 http://localhost:8080/，可以看到 vue 的歡迎界面
前后端交互
1. 創建vue視圖
現在我們前后端項目都已經啟動了，下面需要通過HTTP來進行數據交換；在 express 中已經集成了HTTP相關模塊，可以使用express.Router() 對象來進行HTTP操作；在vue中就需要使用 axios 這一基於 promise 的 HTTP 庫，在 client目錄下執行命令npm install axios --save， 然后在view目錄下新建Test.vue
<template>
<div>
<h1>{{ this.msg }}</h1>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "Test",
data() {
return {
msg: "",
};
},
created() {
axios
.get("http://localhost:3000/test")
.then((res) => {
this.msg = res.data;
})
.catch((err) => {
console.log(err);
});
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
</style>
2. 綁定路由
在router目錄下的index.js里綁定路由
import Test from '../views/Test.vue'
const routes = [
{
...
},
{
path: '/test',
name: 'Test',
component: Test
}
]
3. 實現跨域
這里引入 axios 模塊，對URL http://localhost:3000/test 進行 get 請求，將響應data賦值給變量 msg 並渲染到頁面上；為了實現express與vue之間的跨域問題，需要在 express_app 的 app.js 文件中添加以下內容：
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With')
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
res.header('X-Powered-By', ' 3.2.1')
req.method == "OPTIONS" ? res.send(200) : next()
})
重啟 express服務，刷新 vue 頁面，可以看到如下頁面:
打開瀏覽器的開發者工具欄，可以看到請求詳情
至此，完成了簡單的 Express + Vue 的開發環境