nodejs搭建微信小程序mock服务_mockjs 微信小程序

现在的程序架构基本都是前后端分离，前端负责调用后端提供的restful api，但是当我们还没拿到后端的api时，这个时候我们就需要自己mock数据了。但是微信小程序无法像浏览器一样直接使用mockjs，所以网上搜到的mockjs教程在微信小程序上基本都没法用。所以今天记录一下用nodejs搭建一个mock后台服务。

1. 安装nodejs环境

这里不详述，搞前端的都懂

2. 安装express

1. npm install -g express
2. npm install express-generator -g
3. npm install -g pm2
4. express mockserver
5. npm install
   安装的时候如果报错就自己一个一个安装模块吧，引用的模块就那几个。
6. pm2 start app.js

3. 改写项目

页面显示不需要用到，所以可以把view引擎删除。其他用不到的都删除
//app.js

var createError = require('http-errors')
var express = require('express')
var path = require('path')
var cookieParser = require('cookie-parser')
var logger = require('morgan')

var app = express()

app.use(logger('dev'))
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))

app.use('/api', require('./routes/users'))

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404))
})

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message
  res.locals.error = req.app.get('env') === 'development' ? err : {}

  // render the error page
  res.status(err.status || 500)
  res.render('error')
})
app.listen(3000, function () {
  console.log('listen 3000')
})

module.exports = app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

//user.js

var express = require('express')
var router = express.Router()
var Mock = require('mockjs')
var Random = Mock.Random

/* GET users listing. */
router.get('/user', function (req, res, next) {
  var data = Mock.mock({
    'list|20': [{
      'guid': Random.guid(),
      'name': '@cname()',
      'description': '@cparagraph',
      'img': Random.image()
    }]
  })

  res.send({
    meta: {
      message: 'success'
    },
    status: true,
    data: data.list
  })
})

module.exports = router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

前端我采用的是mpvue小程序框架，自己封装了get 和 post请求，这个网上教程很多，不详述。下文中ApiPath.user.getUserInfo其实就是请求地址 ‘localhost:3000/api/user’

handleClick () {
      this.getUserInfo()
    },
async getUserInfo () {
     // 请求'/user/userinfo'接口
     let res = await this.$net.get({
       url: ApiPath.user.getUserInfo,
       data: ''
     })
    }
1
2
3
4
5
6
7
8
9
10