mockjs的簡單應用

npm install mockjs -D

官方文檔：http://mockjs.com/

創建mock文件夾

文件夾下創建mock.js

/**
 * Created by suwt on 2020/3/19.
 */
import Mock from 'mockjs';

export default {
  mockData () {
    Mock.mock("/api/getList", "get", {
      "array|1-10": [
        {
          "string|1-10": "☆",
          "title": "@cword(3,10)",
          "id|+1": 1,
          "boolean|1-2": true,
          "date": "@date(yyyy-MM-dd)",
          "dateTime": "@datetime",
          "img": Mock.Random.dataImage('200x100', 'Hello Mock.js!'),
          "sentence": "@sentence(5)",
          "cparagraph": "@cparagraph(2)",
          "address": "@county(true)"
        }
      ]
    });
    Mock.mock("/api/login", "post", function(opts) {
      console.log(opts)
      return {
        status: 200,
        msg: "登錄成功"
      }
    });
    Mock.mock('/api/user', {
      "code": "000",
      "datas": {
        "name": "@cname", // 內容：npm安裝後 mockjs/src/mock/random/xxx.js
        "area": "@province(true)",
        "identity": "超級管理員"
      }
    });
    Mock.mock('/api/getTable', {
      "code": "000",
      "datas|5-20": [
        {
          "date": '@date("yyyy-MM-dd")',
          "name": "@cname",
          "address": "@county(true)"
        }
      ]
    });
    Mock.mock('/api/getOptions', {
      "code": "000",
      "datas|5-7": [
        {
          "label": '廣東省',
          "value": "@natural(10, 100)",
          "children|5-8": [
            {
              "label": '深圳市',
              "value": "@natural(10, 100)",
              "children|5-5": [
                {
                  "label": '南山區',
                  "value": "@natural(10, 100)"
                }
              ]
            }
          ]
        }
      ],
      "places|9-18": [
        {
          "label": '廣東省',
          "value": "@natural(10, 100)"
        }
      ]
    });
  }
};

main.js

import Mock from './mock/mock';

Mock.mockData();

getData() {
      this.$http.get("/api/getList").then(res => {
        console.log(res);
        this.ruleForm.imgurl = res.data.img
      });
    },
    login() {
      this.$http.post("/api/login", this.ruleForm).then(res => {
        console.log(res);
      });
    },

調試