从零搭建express + vue开发环境

往下看之前，先确保你的机器上已经安装过 node，可以用 node -v 来确认下

一、express框架和vue框架介绍

express框架是一个基于node.js的web应用框架，它能够帮你创建一个从前端到后端功能完整的网站；
vue是一个流行的前端框架，它主要是用来构建用户界面的，并且具有组件化，响应式等特点；
所以，可以这样理解：express负责后端，vue负责前端，它俩之间使用HTTP来进行数据交换

二、开始搭建

1. 后端 - express环境搭建

• 我们利用 express-generator 脚手架来快速生成我们的express项目
  全局安装 express-generator npm install express-generator -g
  然后用 express --version 来检测一下是否安装成功
• 创建express项目
  express express_app 该命令即创建了一个名为 express_app 的 express 项目
  项目目录如下：
  
  因为express_app负责后端，因此我将其放在了/server目录下
  进入到express_app目录下，执行 npm install 即可安装项目所需的依赖模块，然后就会生成 node_modules 目录，存放的都是下载的依赖模块
• 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 的时候，大家的依赖版本相同

现在我们执行命令 npm start 启动我们的项目，然后浏览器访问 http://localhost:3000/
就会看到如下页面：

然后我们在routes目录下新建一个 get_article_list.js 文件，内容如下：

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

router.get('/', function (req, res, next) {
  res.send('响应成功!')
});

module.exports = router;

然后在 app.js 文件中添加：

var getArticleList = require('./routes/get_article_list')
app.use('/get_article_list', getArticleList)

就是将 /get_article_list 这个路径对应于 get_article_list.js 文件；修改成功后，我们重启项目，访问 http://localhost:3000/get_article_list 就能看到如下页面

到这里，后端的事情就先告一段落，我们来看看前端vue项目的搭建

2. 前端 - vue环境搭建

同样，我们使用 vue-cli 脚手架工具快速搭建我们的 vue项目
首先，全局安装 vue-cli 3.0
npm install -g @vue/cli 然后用 vue -V 检查一下
执行命令 vue create vue_app 即创建名为 vue_app 的vue项目
期间会提示你进行一些配置的选择，这里一路按 enter 选择默认的就好了
创建成功后，项目目录如下：

同样，进入vue_app目录下执行 npm install 安装项目依赖，就会生成 node_modules 目录和package-lock.json 文件
其中 src 目录结构如下：

• assets 存放图片、CSS样式文件等
• components 存放vue组件
• router 是我后来新建的，用来管理路由
• App.vue 文件是项目的根组件
• main.js 是项目的入口文件，用来导入模块，初始化vue实例等等

执行命令 npm run serve 启动 vue 项目，启动成功后显示如下

访问上面的地址，就可以看到 vue 项目的欢迎界面

3. 前后端交互

现在我们前后端项目都已经启动了，下面需要通过HTTP来进行数据交换；在 express 中已经集成了HTTP相关模块，可以使用express.Router() 对象来进行HTTP操作；在vue中就需要使用 axios 这一基于 promise 的 HTTP 库，在 vue_app 目录下执行命令
npm install axios --save 然后修改 components 目录下的 HelloWorld.vue 文件

<template>
  <div>
    <h1>{{this.msg}}</h1>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: ''
    }
  },
  created() {
    axios.get('http://localhost:3000/get_article_list')
      .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>

在这里面引入 axios 模块，对URL http://localhost:3000/get_article_list 进行 get 请求，将响应data赋值给变量 msg 并渲染到页面上；同时，我们需要在 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()
})

这是使用 CROS 来处理跨域请求的问题，关于跨域请求可以自行查阅资料
然后重启 express_app 项目，刷新一下 vue 页面，就会看到如下页面

打开浏览器的开发者工具栏，可以看到请求详情

到这里，我们就打通了vue到express的一套开发环境，上面的内容只是举例，我们还可以进行一些封装，使用 Vuex 来管理vue中的各种数据，把 axios 进行一层封装，把express的app.js中设置路由的部分提取到一个单独的文件中等等

更多项目源码请访问： https://github.com/RJM1996/express_vue_app