引言
其实这种开发模式，我之前讲 VueSSR 的时候已经提过了。但是，当时只是简单的提及一个工作目录 entry-server.js 和 server.js 两个和服务端相关的文件，用来进行一些后端的查询之类的。但是如果是简单的 VueSSR，不能完全适应一些后端的开发，如果需要多写几个查询，项目的耦合性就不高了。现在，我把它补上。
目录结构
对比我之前将的目录结构，其实就多了个文件夹。然后，这个文件夹里面都是和 Express 和 MySQL 相关的文件，例如连接数据库、路由等等。并且，数据处理部分，我把它简单地分了两个部分 Controller、Model（一般我不用哈哈，留着已被不时之需）。所以，一个完整的 Express + VueSSR 的项目结构会是这样：
build
├── webpack.client.config.js # 用于服务端的打包
├── webpack.server.config.js # 用于客户端的打包
server # 和服务端相关的代码，可以理解为中间层
├── controllers # 进行数据的处理和返回
├── index.js
├── db # 连接数据库相关
├── index.js
├── routes # 后端路由
├── index.js
├── index.js # 整个项目入口
src
├── store
├── index.js # 不同于传统的，它是一个工厂函数
├── routes
├── index.js # 不同于传统的，它是一个工厂函数
├── components # 组件
├── views # 页面
├── Home
├── index.vue
├── App.vue
├── main.js # 通用 entry(universal entry)，不同于传统的，它是一个工厂函数
├── entry-client.js # 仅运行于客户端（浏览器）
└── entry-server.js # 仅运行于服务器
相比较之前的 VueSSR 其实还有一个小细节，就是我把项目入口文件改成 server 文件夹下的 index.js，其实就是为了方便阅读。接下来，来看看 Server 中文件夹具体作用。
作用
1.index.js 项目入口文件
首先，项目的入口迁到 server 文件夹中，也不是平白无故。因为，要用 express 框架实现中间层的概念，所以相应地也得在项目入口中，实例化 express 并绑定路由，不过需要注意的是原来的 SSR 逻辑保持不变，不过还得设置一些 Content-Type，毕竟我们后面要传输 JSON 数据给前端。
// 导入路由文件
const router = require('./routes/index')
// 实例化 express
const app = express()
// 绑定路由
router(app)
...
app.get('*', isProd ? render : (req, res) => {
console.log('请求中')
res.setHeader('Content-Type', 'text/html;charset=utf-8')
readyPromise.then(() => render(req, res))
})
2.routes 路由文件夹
比如说现在有个首页 home 的 banner 对应的路由（即对应 home.js），它在 express 中路由是这样的：
const express = require('express')
const route = express.Router()
const home = require('../controllers/home')
route.get('/api/banner', home.getBanner)
module.exports = route
在平常的开发中我们可能存在很多模块，为了项目的解耦，我们也需要适当地将不同模块的路由分开在淡单独的文件。然后，通过新建一个 index.js 文件来统一导出项目所有路由。
const home = require('./home')
module.exports = function (app) {
app.use(home)
}
3.db 数据库连接相关文件夹
实现中间层，意味着我们需要查询数据库，那就需要连接数据库。
const mysql = require('mysql')
var pool = mysql.createPool({
host: 'localhost',
port: '3306',
user: 'root',
password: '',
database: 'myblog'
})
const query = function (sql, callback) {
pool.getConnection(function(err, conn) {
if (err) {
callback(err, null, null)
} else {
conn.query(sql, function(qerr, vals, fields) {
// 释放连接
conn.release()
callback(qerr, vals, fields)
})
}
})
}
// 向外暴露连接数据库的db对象
module.exports = query
连接的操作很简单，这里用了连接池来管理我对数据库的连接。
4. controllers 文件夹
而 controllers 文件夹中，具体做的就是对查询的数据进行修饰，返回给前端可以直接使用的数据格式，这里继续延续我们前面的 homer 模块的 benner 路由。
const query = require("../db/index")
function getBanner(req, res, next) {
const sql = "SELECT * FROM banner"
query(sql, (err, result) => {
if (err) {
console.log(`[SELECT ERROR] - `, err.message)
return
}
const data = {
status: 1001,
message: 'success',
data: {
bannerList: result
}
}
res.json(data)
})
}
module.exports = {
getBanner
}
PS：model 文件夹就不讲了，没用过…这里后端的同学应该更懂
总结
其实，说白了就是将 Express 应用直接嵌入到 VueSSR 项目中。很类似与以前的 MVC，可以这么说，也可以不那么说。因为传统的 MVC 已经不符合这个时代的需要，并且随着前端的工程化，Node.js 搭建的服务更适合和 Vue、React 之类的框架搭配使用，它们所用的工具链，几乎都是基于 Node 实现的，所以夸张点就是无缝衔接。当然，话说回来，用这种开发要应场景而进行不同的选择，Node.js 并不是万能的~
