mockServer的搭建

使用json-server模拟服务器

mockServer的思路

• 以 json-server 作为 mock 服务器， mock.js 生成 mock 数据，以此达到 mock-server 要求。

安装

• 全局安装npm install -g json-server
• 项目安装npm install --save-dev json-server
• 安装mock.js快速创建模拟接口 npm install --save-dev mock.js

配置

• 在项目根目录下创建mock文件夹
• 再分别创建db.js作为 mock 数据源、router.js作为 mock 服务、server.js重写路由表
• db.js配置接口

// db.js
var Mock = require('mockjs');
module.exports = {
  getComment: Mock.mock({
    "error": 0,
    "message": "success",
    "result|40": [{
      "author": "@name",
      "comment": "@cparagraph",
      "date": "@datetime"
    }]
  }),
  addComment: Mock.mock({
    "error": 0,
    "message": "success",
    "result": []
  })
};

• 通过路由表routes.js实现路由配置

module.exports = {
  "/comment/get.action": "/getComment",
  "/comment/add.action": "/addComment"
}

• server.js正式使用json-server

// server.js
const jsonServer = require('json-server')
const db = require('./db.js')
const routes = require('./router.js')
const port = 3000;
const opn = require('opn')

const server = jsonServer.create()
const router = jsonServer.router(db)
const middlewares = jsonServer.defaults()
const rewriter = jsonServer.rewriter(routes)

let url = 'http://localhost:' + port

server.use(middlewares)
// 将 POST 请求转为 GET
server.use((request, res, next) => {
  request.method = 'GET';
  next();
})

server.use(rewriter) // 注意：rewriter 的设置一定要在 router 设置之前
server.use(router)

server.listen(port, () => {
  console.log('open mock server at localhost:' + port)
  opn(url);
})

使用

1. 在package.json中配置命令
   • 配置mockServer启动"mockServer": "node mock/server.js"
   • 配置mockServer和项目一起启动"mock": "npm run mockServer | npm run dev"
2. 调用命令启动项目和mockServernpm run mock

端口代理

• 通过 Webpack 配置 proxy 代理,vue-cli创建的项目在config/index.js中配置

//配置代理
proxyTable: {
  '/api/': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

• 接口请求案例,以 axios 为例子

function getComments () {
  axios.get('api/comment/get.action', {}).then((res) => {
    console.log(res.data)
  })
}