Mpvue和Express前后分离构建微信小程序

前提：已经安装node环境和vue-cli脚手架，已注册小程序。

1、执行以下命令，生成前端项目结构

vue init mpvue/mpvue-quickstart project

2、执行以下命令全局安装express脚手架和express

npm install -g express-generator

npm install express -g

进入要将项目建立的位置，执行express server命令生成后端项目server的目录结构，然后根据提示完成相关依赖安装。

3、进入server文件夹，执行命令npm install cors --save安装cors。在app.js文件中的路由之前加上以下几行代码，进行跨域配置

var cors=require("cors")
app.use(cors({
  origin:["http://localhost:8080"],
  methods:["get","post"],
  allowedHeaders:["Content-Type","Authorization"]
}))

4、执行npm install nodemon --save命令，安装nodemon实现每次修改后端代码以后服务自启动。安装好以后需要在pachage.json文件里面进行以下配置，然后执行npm run dev启动后端服务。

"scripts": {
    "start": "node ./bin/www",
    "dev": "nodemon" // npm run dev
}

好了，现在前后端的环境就搭好了，可以开始愉快的前后端分离进行开发了，因为本地没办法做https，小程序请求的接口又必须是https，只是为了开发的话，可以在开发者工具的详情里面勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”，就可以开始愉快的请求本地接口了。

5、后端配置数据库

在server文件夹下面建立一个config文件夹，然后在config文件夹下面新建一个db.js文件，在db.js中写下如下代码：

// 创建数据库连接
const mysql = require("mysql")
const connection = mysql.createConnection({
    host: "",
    port: 3306,
    user: "",
    password: "",
    database: ""
})
connection.connect((err) => {
    if (err) { console.log("连接失败") }
    else { console.log("连接成功") }
})

let query=(sql, callback)=>{
    connection.query(sql, function (err, rows) {
        callback(err, rows);
    });
    // connection.end();//end()的话好像就只能连接一次的样子
}

exports.query = query

写上要连接的数据库的ip、端口号、用户名、密码、数据库名称等信息，然后创建连接。然后在接下来写接口的时候，每一个路由文件都需要引入这个文件。比如新建一个article的文件写一个获取列表的接口：

const express = require("express")
const router = express.Router()
let db=require("../config/db")

router.get('/getList',(req,res,next)=>{
    let sql="select * from article order by time desc"
    db.query(sql,(err,rows)=>{
        if(err){res.send({err:err})}
        else{res.send(rows)}
    })
})

好了，数据库也配好了，以后就可以只需要在routes文件夹下面写接口，然后在app.js里面引入使用一下就好了。app.js中引入如下：

var article=require("./routes/article")
app.use("/article",article)

到此，完成。接下来就可以一心一意后端方面就在routes文件夹里写接口，前端方面就在src里面写页面了。