vue使用mock.js模拟接口数据

vue使用mock.js模拟接口数据

---

---

安装 mock.js

cnpm i --save-dev mockjs 或 npm install mockjs --save-dev
npm install axios -S

一、创建mock文件

在src目录下创建mock文件夹，文件夹中创建index.js文件和存放数据的comp.js文件

index.js：

import Mock from 'mockjs'; 
import comp from './comp';

// 接口，第一个参数url，第二个参数请求类型，第三个参数响应回调
Mock.mock(new RegExp('/api/userList'), 'post', comp.listUser);
Mock.mock("/api/roleList", 'post', comp.listRole);

comp.js：

import Mock from 'mockjs';

//模拟 用户 数据
const listUser = function(){
  const a = Mock.mock({
    'list|1-20':  [{
      'userId|+1': 0,
      'userName|1': ["张三","李四","鲍勃","丽丽","李阳","杨洋","王五","周星星","大仙","孤影"],
      'role|1':["系统管理员","操作人员","销售","平台管理者","仓库管理员","部长"],
    }]
  });
  return a;
}

//模拟 角色 数据
const listRole = function(){
  const a = Mock.mock({
    'list|6':  [{
      'roleId|+1': 0,
      'userName|1': ["张三","李四","鲍勃","丽丽","李阳","杨洋","王五","周星星","大仙","孤影"],
      'role|1':["系统管理员","操作人员","销售","平台管理者","仓库管理员","部长"],
    }]
  });
  return a
}


//模拟 随机 数据
const listCount = function(){
  // mock随机数据
  const Random = Mock.Random;
  let data= [];
  for (let i = 0; i < 10; i++) {
    let newData = {
      title: Random.csentence(10, 25), // 随机生成长度为10-25的标题
      region: Random.region(), // 随机生成地区
      author: Random.cname(), // 随机生成名字
      date: Random.date() + ' ' + Random.time(), // 随机生成年月日 + 时间
      "star|1-10": "★"
    }
    data.push(newData)
  }

  const a = Mock.mock(data);
  return a
}

// Mock.mock(url,method,chartData) 三个参数对应 api地址、请求方式、数据源

export default { listUser,listRole ,listCount}

二、main.js引入

import './mock/index'

三、vue页面调用mock的接口

import axios from 'axios'

created() {
            this.getData();
          },

methods:{
getData() {
          axios.post('/api/listCount').then((res) => {
            debugger;
            console.log(res);
            this.mes = res.data;
          });
        },
}

mock的接口可调用