一、介绍
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 的开发环境