nodejs微信小プログラムmockサービスを構築する

13962 ワード

現在のプログラムアーキテクチャは基本的に前後端分離で、フロントエンドがバックエンドから提供されるrestful appiを呼び出しますが、バックエンドのappiをまだ持っていない場合、この時は自分のmockデータが必要になります.しかし、微信小プログラムはブラウザのように直接にmockjsを使うことができませんので、ネットで検索したmockjs教程はWeChat小プログラムではほとんど使えません.だから今日はnodejsでmockバックサービスを構築します.
1.nodejs環境をインストールする
ここでは詳しく話しません.先のことは全部分かります.
2.expressの設置
  • npm install-g express
  • npm install express-generator-g
  • npm install-g pm 2
  • express mockserver
  • npm installをインストールするとき、エラーがあれば自分でモジュールをインストールしてください.参照モジュールはそのいくつです.
  • pm 2 start ap.js
  • 3.項目を書き換える
    ページには使わないと表示されていますので、ビューエンジンを削除することができます.他の使えないものは全部削除します.
    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
    
    
    //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
    
    
    フロントエンドはmpvue小さいプログラムのフレームワークを採用しています.自分でgetとpostの要求を封入しました.以下のApiPath.user.getUserInfoは、つまり、要求アドレス「localhost:3000/appi/user」です.
    handleClick () {
          this.getUserInfo()
        },
    async getUserInfo () {
         //   '/user/userinfo'  
         let res = await this.$net.get({
           url: ApiPath.user.getUserInfo,
           data: ''
         })
        }