mock.js简单教程

最新推荐文章于 2024-12-03 10:43:08 发布

设计师的小猪

最新推荐文章于 2024-12-03 10:43:08 发布

阅读量916

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript Vue 文章标签： javascript html

本文链接：https://blog.csdn.net/wingsb/article/details/120840396

javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

本文详细介绍了如何使用 Mock.js 来模拟数据。首先，通过 npm 安装 Mock.js，然后在 main.js 中引入并配置。接着，创建 mock.js 文件，导入数据并利用 Mock.Random 生成各种随机数据。在 mock.js 中，设置了多个 API 的模拟响应，包括不同的请求类型和参数处理。在实际应用中，可以在组件中调用这些 API，获取模拟数据。这个教程对于前端开发中快速构建本地数据环境非常有用。

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

一、mockjs官网
mock.js

二、使用步骤
1.安装mock
npm install mockjs

2.安装完成后，在main.js中引入
// 导入静态文件给全局使用
require(’./mock/mock.js’)

3.封装mock，在该路径下\src\mock\mock.js，创建mock.js。这里的路径和文件可以自己命名。

4.封装mock.js的代码：

import Mock from 'mockjs';
import jsonData from './jsonData.js';//数据文件，可以自己定义
console.log(jsonData)
// Mock.Random是一个工具类，用于生成各种随机数据
const Random = Mock.Random;
let data2 = [] // 用于接受生成数据的数组
let size = [
    '300x250', '250x250', '240x400', '336x280',
    '180x150', '720x300', '468x60', '234x60',
    '88x31', '120x90', '120x60', '120x240',
    '125x125', '728x90', '160x600', '120x600',
    '300x600'
] // 定义随机值
for (let i = 0; i < 10; i++) { //生成10个对象放到数组中
    let template = {
        'Boolean': Random.boolean, // 可以生成基本数据类型
        'Natural': Random.natural(1, 100), // 生成1到100之间自然数
        'Integer': Random.integer(1, 100), // 生成1到100之间的整数
        'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
        'Character': Random.character(), // 生成随机字符串,可加参数定义规则
        'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
        'Range': Random.range(0, 10, 6), // 生成一个随机数组
        'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
        'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
        'Color': Random.color(), // 生成一个颜色随机值
        'Paragraph': Random.paragraph(2, 5), //生成2至5个句子的文本
        'Name': Random.name(), // 生成姓名
        'Url': Random.url(), // 生成web地址
        'Address': Random.province() // 生成地址
    }
    data2.push(template)
}
// 设置拦截ajax请求的相应时间 延时200-2000毫秒
Mock.setup({
    timeout: '200-1000'
});
// // // post请求,带参数,参数会在data中返回,会返回url,type,body三个参数,可以把data打印出来看看
Mock.mock('/api/Admission/TitleValueList', 'post', function (param) {
    console.log(param);
    param.body=JSON.parse(param.body)
    console.log(param.body.id);
    console.log(param.body.name);
    if (param.body.id != "" && param.body.name != "") {
        return {
            code: '1',
            msg: 'success',
            data: {
                msg: '请求成功'
            }
        }
    } else {
        return {
            code: '0',
            msg: 'error',
            data: {
                msg: '参数不全'
            }
        }
    }
})

//post请求，Mock.mock('链接', '请求方式get、post',返回内容)
Mock.mock('/api/Admission/getselect', 'post', { code: 1 })
Mock.mock('/api/GroupLeaderDo/compareGroupAreaAndMemberAreaInTemplate', 'get', { respon: jsonData.systemData })

5.在使用的页面中调用，如test.vue

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    // this.getTreeData();
    // this.compareGroupAreaAndMemberAreaInTemplate();
    this.TitleValueList();
  },
  methods: {
    getTreeData() {
      this.$post("/api/Admission/getselect", { code: 1 }).then((res) => {
        console.log(res);
      });
    },
    compareGroupAreaAndMemberAreaInTemplate() {
      this.$get("/api/GroupLeaderDo/compareGroupAreaAndMemberAreaInTemplate").then((res) => {
        console.log(res);
      });
    },
    TitleValueList() {
        const param = {
            id:'123',
            name:'test'
        }
      this.$post("/api/Admission/TitleValueList",param).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>