環境配置

這裡需要用到json-server和mockjs模擬外掛。

json-server: https://github.com/typicode/json-server
mockjs: http://mockjs.com/

安裝

npm install json-server –save-dev
npm install mockjs –save-dev

mock目錄結構

db.js檔案

// mock框架，這裡demo暫時沒用到
var Mock = require('mockjs');

var apiUser = require
 
('./modules/user.js');
var apiGoods = require('./modules/goods.js');

module.exports = {
    login: apiUser.login,
    goodsList: apiGoods.goodsList
}

routes.js檔案

const routes = {
    "/user/login": "/login",
    "/goods/list": "/goodsList"
}

module.exports = routes;

server.js檔案

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

const port = 3000;

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

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 http://localhost:${port}`);
})

user.js檔案

function login(config) {
    // 模擬資料
    let result = {
        code: 200,
        data: null,
        msg: '獲取成功',
        time: new Date()
    }

    result.data = { userName: "hello", mobile: "13888888888" };
    return result;
}

module.exports = {
    login: login()
}

goods.js檔案

function goodsList(config) {
    // 模擬資料
    let result = {
        "status": "0",
        "result": [
            {
                "productId": "10001",
                "productName": "小米6",
                "prodcutPrice": "2499",
                "prodcutImg": "mi6.jpg"
            },
            {
                "productId": "10002",
                "productName": "小米筆記本",
                "prodcutPrice": "3999",
                "prodcutImg": "minote.jpg"
            }
        ]
    };
    return result;
}

module.exports = {
    goodsList: goodsList()
}

配置請求代理

在/config/index.js中新增如下

module.exports = {
  dev: {
    proxyTable: {
      '/mock': {
        target: 'http://localhost:3000',   // 需要請求的地址
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          '^/mock': '/'  // 替換target中的請求地址,例如請求的時候把'/login'換成'/mock/login'
      }
    },
    }
}

配置package.json

這裡由於涉及到一個終端開啟兩個埠的服務，所以需要用到concurrently，先安裝concurrently。

npm install concurrently –save-dev

在package.json中新增如下指令碼

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "mock-server": "node ./src/mock/server.js",
    "mock-dev": "concurrently \"npm run dev\" \"npm run mock-server\""
  },

執行專案

npm run mock-dev

執行成功後就可以請求模擬資料了。

介面請求地址

http://localhost:3000/login
http://localhost:3000/goodsList

請求示例

<script>
import axios from "axios";

export default {
  data() {
    return {};
  },
  mounted() {
    this.getMockData();
  },
  methods: {
    getMockData() {
      axios.get("/mock/goodsList").then(resp => {
        console.log(resp.data);
      });
    },
  }
};
</script>

總結

本人也是第一次使用json-server和mockjs來模擬資料，有問題再記錄。