上一节配置了axios用来做网络接口请求的插件，这一节集成express+mockjs实现本地化接口，这个作用是在前后端分离后，前后端开发人员只做数据格式的统一，在后期打包处理后两个模块进行合并，方便快捷，总之好处很多不多说，直接实操
1.首先先实现express接口请求的配置
nuxt初始化项目的时候也是可以选择安装express的，直接安好后，我们就做接口请求的配置,首先找到项目中server文件夹下的index文件，前提是初始化项目的时候已经安装了express不然需要自己手动创建，这里只讲已经在项目初始化的时候安装的教程，找到index文件后，我们用app这个变量去调用use方法,添加一个请求地址为 admin/login的接口，如下
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
async function start() {
// Init Nuxt.js
const nuxt = new Nuxt(config)
const { host, port } = nuxt.options.server
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
} else {
await nuxt.ready()
}
// Give nuxt middleware to express
app.use('/admin/login',(req, res) => res.send('Hello World!'))
app.use(nuxt.render)
// Listen the server
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
}
start()
这里提醒大家千万千万不要把
app.use('/admin/login',(req, res) => res.send('Hello World!'))
这段代码放在了
app.use(nuxt.render)
代码的后面，巨坑，一下午的时间爬上来的，不要问为什么，配置好以后重启服务器,然后在浏览器输入localhost:3000/admin/login就出现效果,如下
2请求发送mock数据
现在express配置的请求接口已经打通，下一步就是将mock的数据封装好放在接口里发送给前台就可以实现基本的模拟数据请求
1.首先安装mockjs 通过下面命令
npm i mockjs --save-dev
2.我们先使用mock看一下整体的效果，在server文件下的index.js文件中去修改/admin/login接口，如下
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const Mock = require('mockjs')
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
async function start() {
// Init Nuxt.js
const nuxt = new Nuxt(config)
const { host, port } = nuxt.options.server
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
} else {
await nuxt.ready()
}
// Give nuxt middleware to express
app.use('/admin/login',(req, res) => res.send(
Mock.mock({
'list|1-10':[
{'id|+1':1}
]
})
))
app.use(nuxt.render)
// Listen the server
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
}
start()
这段代码我在顶部通过require引入了mock,然后在/admin/login接口发送内容的地方去调用了mock方法，
app.use('/admin/login',(req, res) => res.send(
Mock.mock({
'list|1-10':[
{'id|+1':1}
]
})
))
这里的数据是list随机生成1到10条数据，每条数据的id是自增的。
然后重启服务效果如下:
现在express+mock的基本请求接口已经实现，接下来就是去优化mock数据模块，我们可以把mock抽取在项目根目录新建一个data文件夹创建loginData.json，就可以愉快的创建自己想要的数据
在loginData.json文件下编写数据格式如下
{
"status": 200,
"list|1-10": [
{"id|+1": 1}
],
"msg": "成功"
}
然后我们在server文件夹下的index文件中哄引入loginData.json
const loginData = require('../data/loginData');
在/admin/login接口的地方修改为
app.use('/admin/login',(req, res) => res.send(
Mock.mock(loginData)
))
重启服务器，效果如下
总结
到此搭建的express+mockjs实现的本地数据化接口已经完成，使用这个东西在开发的时候前端人员完全可以不用等到后台人员给数据接口就可以自己实现数据的请求，不必要再次依赖后端，方便快捷省时，只需要和后台人员确定数据格式，到时候统一搭配接口就可以。
