vue 安装使用mockjs

最新推荐文章于 2025-09-11 18:39:25 发布

转载最新推荐文章于 2025-09-11 18:39:25 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/u013483969/article/details/112878005

文章标签：

#vue.js #npm #前端

vue基础笔记专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用MockJS来模拟接口数据，包括安装、创建mock文件、在main.js中注册、定义接口及在页面上使用的方法。MockJS能够帮助开发者在后端接口未完成时进行前端功能的开发，提高效率。

使用 mockjs 的案例过程：

1. 安装

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

npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置_jwl_willon的博客-优快云博客_npm save备注：<=> 意为等价于；1、npm install <=> npm i --save <=> -S --save-dev <=> -D npm run start <=> npm start // 对应"scripts"里的"start"命令少敲几下键https://blog.youkuaiyun.com/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();
}