【Vue项目使用mockjs独立开发】_创建vue mockjs项目-CSDN博客

本文链接：https://blog.csdn.net/weixin_43690623/article/details/127527972

博客介绍了Mock.js，它可模拟随机数据返回。还说明了其安装及使用步骤，包括在工程下新建文件夹和文件、引入相关文件、封装方法以及在获取数据文件中调用方法，最后提及了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是mockjs：

简单来说就是自己模拟随机数据返回。

官网：http://mockjs.com/

2、安装及使用：

# 安装mockjs
npm install mockjs --save-dev

# 安装axios
npm install axios --save

（1）在工程下新建文件夹mockjs，创建index.js文件：
在这里插入图片描述
（2）index.js中，引入以下两个文件：

import Mock from "mockjs";
import axios from "axios";

（3）开始mock数据，封装方法：

import Mock from "mockjs";
import axios from "axios";
// 1、卡片数据
Mock.mock("/card/list", "get", {
  "list|1": [
    {
      "total|1-999": 1, //总积分
      "use|1-999": 1, //可用积分
      "used|1-999": 1, //使用积分
      "overdue|1-999": 1, //过期积分
    },
  ],
});
export function cardList(query) {
  return axios({
    url: "/card/list",
    method: "get",
    // params: query,
  });
}


// 2、积分中心列表数据
Mock.mock("/user/list", "get", {
  "list|10-30": [
    {
      email: "@email", //邮箱
      name: "@cname(qq.com)", //昵称
      "total|1-999": 1, //总积分
      "use|1-999": 1, //可用积分
      "used|1-999": 1, //使用积分
      "overdue|1-999": 1, //过期积分
      date: "@date(yyyy-MM-dd hh:mm:ss)", //时间
    },
  ],
});

export function dataList(query) {
  return axios({
    url: "/user/list",
    method: "get",
    // params: query,
  });
}

// 3、积分获取明细
Mock.mock("/user/gain", "get", {
  "list|10-30": [
    {
      behavior: "@ctitle(5,10)", //用户行为
      "pointsChange|-999-999": 1, //积分变化
      date: "@date(yyyy-MM-dd hh:mm:ss)", //时间
      "current|1-999": 1, //当前余额
      remark: "@csentence(10,15)", //备注
    },
  ],
});

export function gainList(query) {
  return axios({
    url: "/user/gain",
    method: "get",
    // params: query,
  });
}

// 4、积分消耗记录
Mock.mock("/user/consume", "get", {
  "list|10-30": [
    {
      img: "@image('200x150','#FFA07A','#FFBBFF','png','mmp')", //参数：图片大小，背景色，前景色，格式，文字
      name: "@ctitle(5,10)", //名称
      behavior: "@ctitle(5,10)", //用户行为
      "pointsChange|-999-999": 1, //积分变化
      date: "@date(yyyy-MM-dd hh:mm:ss)", //时间
      "current|1-999": 1, //当前余额
      remark: "@csentence(10,15)", //备注
    },
  ],
});

export function consumeList(query) {
  return axios({
    url: "/user/consume",
    method: "get",
    // params: query,
  });
}

（3）在获取数据的文件中调用方法：

引入../mockjs 文件  使用
1、卡片数据
methods: {
  getCardList() {
   let data = {
      userId: this.queryParams.userId
    }
    console.log(1115, data);
  
    cardList(data).then(res => {
      this.cardList = res.data
      console.log(11114, res);
    });
  },
}