vue 安装使用mockjs

 使用 mockjs 的案例过程：

1. 安装

npm install axios -S
npm install mockjs --save-dev

 npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置_jwl_willon的博客-CSDN博客_npm save备注：<=> 意为等价于；1、npm install <=> npm i     --save   <=> -S          --save-dev  <=> -D       npm run start <=> npm start  // 对应"scripts"里的"start"命令      少敲几下键https://blog.csdn.net/jwl_willon/article/details/81054978

 npm安装包时 --save 和 --save-dev 的区别 - Yuan-yiming - 博客园以npm 安装 vue为例 1.npm install vue: 会把vue包安装到node_modules目录中； 不会修改package.json文件； 之后运行nphttps://www.cnblogs.com/yuanyiming/p/10735513.html

2. 创建 mockjs 文件

在 src/assets 目录下新建 mock 文件夹，mock 文件夹下新建 index.js（接口集合）、user.js（某个页面的接口）

3. 在 main.js中注册

import "@/assets/mock"
import axios from 'axios'
Vue.prototype.$axios = axios

4. 使用

4.1 user.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
}

export default { listUser,listRole }

Mock.mock( template )，根据数据模板生成模拟数据。【mockJs文档二】 

 4.2 index.js：引用，定义接口名称

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

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

Mock.mock( rurl, template )

        记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。 【mockJs文档二】 

4.3 页面上使用：

methods:{
  initData(){
    //调用用户接口
    this.$axios.post('/api/userList').then(res=>{
      console.log("用户",res)
    });

    //调用角色接口
    this.$axios.post('/api/roleList').then(res=>{
      console.log("角色",res)
    });
  }
},
created(){
  this.initData();
}

 

---

 参考：

mockjs + vue 配置使用_hylcyz的专栏-CSDN博客1、什么是mockjs前后端分离的过程中，会出现后端接口未写完，但前端需要一定的模拟数据来开发功能，此时就可用mockjs来提前模拟后端数据，MockJS可以实现多种数据类型的生成，基本上满足我们日常开发的大部分需求。2、mockjs的优势mockjs可随机生成大量的数据，而且它具有数据类型丰富，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变请求地址即可。3、mockjs的使用安装npm install mockjs --save-dev..https://blog.csdn.net/u013483969/article/details/112878005vue中配置mock.js_zj25xy11的博客-CSDN博客_vue安装mockjs1.在vue项目中安装mockjsnpm install mockjs --save-dev2.配置文件在根目录下建mock文件夹3.index.jsconst Mock =require('mockjs')const fs = require('fs')const path = require('path')// 用于被index.js进行调用function getJsonFile (filePath) { // 读取指定的json文件 const json =https://blog.csdn.net/zj25xy11/article/details/108074160