json-server 搭配 Vue-cli3 測試 Restful Api

tags: Vue json-server

不需要安裝任何套件，直接使用webpack，抓json資料

缺點：只能模擬get的方式

https://tahazsh.com/use-mock-data-in-vue

Json Server 方式 (推薦)

文件： https://github.com/typicode/json-server

可以模擬 post put delete 等，參考以下兩個教學文章

https://www.jianshu.com/p/7094c477207d
https://tpu.thinkpower.com.tw/tpu/articleDetails/1327

重要步驟：

1. 需全局安裝 json-server
2. 建立一個mock資料夾，專門db.json
3. webpack 設定 加入 proxy 代理到json-server
4. package.json 設定 script

範例：

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "mock": "json-server mock/db.json --port 9090",
    "mockdev": "npm run mock & npm run serve"
  },

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      // proxy all requests starting with /api to jsonplaceholder
      "/api": {
        target: "http://localhost:9090",
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

進階用法 資料很多的時候 將db.json猜開

1. 在 mock/ 建立server.js 與 db.js
2. server.js負責啟動json-server
3. db.js 匯入所有的 json文件
4. package.json 的 script 要改成 "mock": "node mock/server.js"

範例

server.js

/* eslint-disable no-console */

const jsonServer = require("json-server");
const server = jsonServer.create();
const middlewares = jsonServer.defaults();

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares);

// 获取db数据
const db = require("./db.js");

// Use router
server.use(jsonServer.router(db));

server.listen(9090, () => {
  console.log("JSON Server is running on 9090");
});

db.js

module.exports = {
  product: require("./data/product.json"),
  tags: require("./data/tags.json")
};

記錄問題：

1. 在 npm run mock的時候，如果報錯找不到 module

Error: Cannot find module 'json-server'

處理方式在local端也安裝json-server

$ npm install --save-dev json-server

2. 如果啟動 node mock/server.js 有這個錯誤

listen EADDRINUSE

表示已經有進程了，把它刪除

ps | grep node
kill <id>