模拟数据Mock

Mock

gitHub地址
文档

npm i -D mockjs

npm i -D mockjs

配置服务器

import Mock from "mockjs";
import banners from "./rbanners.json";
import floors from "./rfloors.json";

// 一旦运行就会拦截Get请求，请求地址/mock/banners
// 并最后参数作为响应结果响应~
Mock.mock("/mock/banners", "get", {
  code: 200,
  "data|4": banners,
});

Mock.mock("/mock/floors", "get", {
  code: 200,
  "data|3-5": floors,
});

banners.json

[
  {
    "id|+1": 1,
    "imgUrl": "@image('720x455', '@color')"
  }
]

拦截器

import axios from "axios";
// 进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";
// 提示框
import { Message } from "element-ui";

const instence = axios.create({
  baseURL: "/mock",
});

instence.interceptors.request.use((config) => {
  NProgress.start();
  return config;
});

// 响应拦截器
instence.interceptors.response.use(
  (response) => {
    NProgress.done();
    if (response.data.code === 200) {
      return response.data.data;
    }
    Message.error(response.data.message);
    return Promise.reject(response.data.message);
  },
  (err) => {
    NProgress.done();
    Message.error(err);
    return Promise.reject(err);
  }
);

export default instence;

数据由vuex管理

…

node环境

// 使用 Mock
var Mock = require("mockjs");

Mock.Random.title();
Mock.Random.cname();
Mock.Random.color();
Mock.Random.image();

var data = Mock.mock({
   // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  "list|1-10": [
    {
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      "id|+1": 1,
    },
  ], 
     title: "@title(4)",
     "cnname|10": ["@cname"],
     "subTitle|3-10": ["@title(1,3)"],
  "imgList|4": ["@image('200x100', '@color', '#FFF', 'png', '@cname')"],
});

// 输出结果
console.log(data);

// 使用 Mock
var Mock = require("mockjs");

Mock.Random.ctitle();
Mock.Random.color();
Mock.Random.cname();
Mock.Random.image();

var data = Mock.mock({
  // // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  // 'list|5': [{
  //     // 属性 id 是一个自增数，起始值为 1，每次增 1
  //     'id|+1': 1
  // }]

  // @ctitle(4) 随机中文标题, 长度4位
  title: "@ctitle(4)",
  // "subTitle|3-10" 属性subTitle的值为数组，长度为3-10位
  // @ctitle(1,4) 随机中文标题, 长度1-4位
  "subTitle|3-10": ["@ctitle(1,4)"],
  // "caroucelList|4" 属性caroucelList的值为数组，长度为4位
  "caroucelList|4": [
    // "@image(大小, 背景色, 字体色, 图片格式, 图片内容)" 随机图片
    "@image('200x100', '@color', '#FFF', 'png', '@cname')",
  ],
});
// 输出结果
console.log(data);