使用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)
  })
}