【MockJS】使用MockJS模拟数据 （超级详细）

最新推荐文章于 2024-09-22 09:35:18 发布
最新推荐文章于 2024-09-22 09:35:18 发布
阅读量2.3k 收藏 16
点赞数 5
分类专栏： 服务端 文章标签： javascript 前端 node.js 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Trees__/article/details/127195669
版权

【MockJS】使用MockJS模拟数据 （超级详细）

文章目录

2. MockJS

2.1 准备工作

npm i axios

npm i mockjs

2.2 语法规范

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

属性名   name
生成规则 rule
属性值   value
'name|rule': value

注意：

  • 属性名 和 生成规则 之间用竖线 | 分隔。

  • 生成规则 是可选的。

  • 生成规则

    有 7 种格式：

    1. 'name|min-max': value
    2. 'name|count': value
    3. 'name|min-max.dmin-dmax': value
    4. 'name|min-max.dcount': value
    5. 'name|count.dmin-dmax': value
    6. 'name|count.dcount': value
    7. 'name|+step': value

  • *生成规则* 的 含义 需要依赖 *属性值的类型* 才能确定。

  • 属性值 中可以含有 @占位符。

  • 属性值 还指定了最终值的初始值和类型。

生成规则和示例：

1. 属性值是字符串 String

  1. 'name|min-max': string

    通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

  2. 'name|count': string

    通过重复 string 生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number

  1. 'name|+1': number

    属性值自动加 1，初始值为 number。

  2. 'name|min-max': number

    生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

  3. 'name|min-max.dmin-dmax': number

    生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

Mock.mock({
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
})
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}

3. 属性值是布尔型 Boolean

  1. 'name|1': boolean

    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

  2. 'name|min-max': value

    随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

  1. 'name|count': object

    从属性值 object 中随机选取 count 个属性。

  2. 'name|min-max': object

    从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

  1. 'name|1': array

    从属性值 array 中随机选取 1 个元素，作为最终值。

  2. 'name|+1': array

    从属性值 array 中顺序选取 1 个元素，作为最终值。

  3. 'name|min-max': array

    通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

  4. 'name|count': array

    通过重复属性值 array 生成一个新数组，重复次数为 count。

6. 属性值是函数 Function

  1. 'name': function

    执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

7. 属性值是正则表达式 RegExp

  1. 'name': regexp

    根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

    Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})
// =>
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符 的格式为：

@占位符
@占位符(参数 [, 参数])

注意：

  1. 用 @ 来标识其后的字符串是 占位符。
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性。
  6. 占位符 支持 相对路径 和 绝对路径。
Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

2.3 模拟get请求

在这里插入图片描述

<script lang="ts" setup>
import axios from 'axios'
import Mock from 'mockjs'
// 这里需要注意userInfo是解构出来的，要一一对应
const { usersInfo } = Mock.mock({
    "usersInfo|10-20": [ // 表示生成10-20个数据
        {
            "id|+1": 1, // 表示id从1开始自增1
            name: '@cname()', // 生成随机名字固定写法
            address: '@city(true)', // 传入true表示具体到省份市区
            email: '@email(163.com)' // 传入163.com表示生成的邮箱以163.com结尾，可自定义
        }
    ]
})

const { newInfo } = Mock.mock({
    "newInfo|5-10": [
        {
            // id+1 的另外一种写法
            id: '@increment(45564)', // 可以指定从多少开始自增1
            title: "@ctitle", // 随机标题
            date: '@date(yyyy-MM-dd HH:mm:ss)', // 指定时间格式
            message:'@paragraph(3-5)', // 指定输出的段落
            image:"@image('200x200','#23272E','#FFF')"
        }
    ]
})

// 相当于模拟接口
Mock.mock('/api/users','get',() =>{
    return {
        code:200,
        msg:'查询成功！',
        data:usersInfo
    }
})

Mock.mock('/api/news','get',() =>{
    return {
        code:200,
        msg:'查询成功！',
        data:newInfo
    }
})


const getUsersInfo = () =>{
    axios.get('/api/users').then((res) =>{
        console.log(res.data);
    })
}

const getNewsInfo = () =>{
    axios.get('/api/news').then((res) =>{
        console.log(res.data);
    })
}

</script>

2.4 模拟post请求

const {companyList} = Mock.mock({
    "companyList|5-8":[
        {
            id:'@increment(1)',
            'company|1':['腾讯','阿里巴巴','CSDN','百度','拼多多','京东'],  // 在指定的数组中选一个
            description:'@word(40)', // 生成40个字符
            logo:'@image("200x200","#ffffff","#23272E","LOGO")'
        }
    ]
})


Mock.mock('/api/company','post',(req:any) =>{
    console.log(req);
    console.log(req.body)
    return {
        code:200,
        msg:'请求成功',
        data:companyList
    }
})

const getCompanyInfo = () =>{
    axios.post('/api/company',{name:'admin',password:'123456'}).then((res) =>{
        console.log(res.data);   
    })
}

2.5 模拟delete和put请求

Mock.mock('/api/putinfo','put',(req:any) =>{
    return {
        code:200,
        msg:'修改成功！',
        data:req.body
    }
})

Mock.mock('/api/deleteinfo','delete',(req:any) =>{
    return {
        code:200,
        msg:'删除成功!',
        data:req
    }
})

const putInfo = () =>{
    axios.put('/api/putinfo',{name:'admin',password:'123456'}).then((res) =>{
        console.log(res.data);   
    })
}

const deleteInfo = () =>{
    axios.delete('/api/deleteinfo').then((res) =>{
        console.log(res.data);   
    })
}

2.6 可以搭配fastmock开发

在这里插入图片描述

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！

Tree_wws
关注
专栏目录
SPA项目开发之首页导航与左侧菜单 - mock.js模拟数据
qq_63492318的博客
09-13 847
我们在main.js中定义一个变量，为总线；main.jsnew Vue({router,data() {return {//在Vue根实例中定一个变量，这个变量就是vue实例，它就是总线}},})3.2 改变收缩图标的样式methods: {//将 this.collapsed 放到总线上}}测试一下没有问题；2、在LeftNav.vue中使用钩子函数，从总线上取出this.collapsed变量data(){return {}},
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
liaozhixiangjava的博客
09-26 370
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
mockjs数据模拟
11-30
里面包含mockjs的介绍，以及在初级使用的过程中出现的例子代码等
理解mockjs并且怎么去使用mockjs
weixin_46419373的博客
11-24 816
今天发现个好的东西 参考链接：https://github.com/nuysoft/Mock/wiki （mockjs的详细讲解） 一. 什么是mockjs? 生成随机数据，拦截 Ajax 请求 二. 为什么要使用mockjs? 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口， 1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查 2.使用json-server模拟，但不能随机生成所需数据 3.使用mockjs模拟后端接口，可随机生成所需数据，.
前后端问题整理 持续更新 Vue
最新发布
m0_45894394的博客
09-22 1476
前后端问题整理 持续更新 Vue创建项目编写安装模块时遇到的各种报错问题
vue实战-mockjs模拟数据
bying666的博客
09-25 1293
在创建axios实例时的默认api改成’/mock’利用计算mapState。
前端模拟数据mock.js
weixin_52796953的博客
03-18 656
mock.js是不需要修改既有代码，就可以拦截Ajax请求，生成随机数据，返回模拟的响应数据。使用mock.js可以，实现真正的前后端分离开发模式。
使用mockjs模拟数据
前端如逆水行舟...
08-02 643
1.安装 npm i mockjs 2.在mock文件夹创建xxx.json，将模拟的json数据放进去
Mock.js 模拟数据
weixin_52053631的博客
05-18 231
4. 创建 mockServe.js ，通过mockjs插件实现模拟数据（ 注：webpack默认对外暴露的：图片、JSON数据格式 ）6. 创建mock的请求文件 mockAjax.js。5. 在main.js引入mockServe.js。2. 创建mock文件夹。
vue之Mockjs的首页导航+左侧菜单
TZyybhs的博客
08-23 1516
Mockjs的首页导航+左侧菜单Mock.jsMock.js使用步骤登陆与注册页面的跳转 Mock.js 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 老大，接口文档还没输出，我的好多活干不下去啊！ 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 众所周知Mock.js因为两个重
element ui 菜单封装_用vue2.0全家桶+element-ui+mockjs 实现后台管理权限系统及顶栏三级菜单显示...
weixin_29994587的博客
01-14 718
手摸手，带你用vue实现后台管理权限系统及顶栏三级菜单显示项目demo展示重要功能总结权限功能的实现权限路由思路：根据用户登录的roles信息与路由中配置的roles信息进行比较过滤，生成可以访问的路由表，并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表，从而实现左侧和顶栏菜单的展示。实现步骤：1.在router/index.js中...
vue框架使用
qq_45645848的博客
01-11 1248
前端vue基础知识总结，汇总
mockjs模拟数据的使用
m0_51144154的博客
12-26 388
MOCKjs模拟数据使用方法 如果想mock数据，需要用到一个插件mockjs 使用步骤 1） 在项目当中src文件夹中创建mock文件夹 2） 第二步准备JSON数据（mock文件夹中创建相应的JSON文件）(切记JSON文件需要格式化一下，别留有空格，不然跑不起来) 3） 把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹】 4） 创建mockServer.js通过mockjs插件实现模拟数据 5） mockServer.js
Mock.js模拟数据
m0_62908813的博客
04-20 936
在数据服务器未提供的状态下，使用mock.js进行数据接口模拟 下载mock.js插件 使用步骤 在项目中src创建mock文件夹 准备json数据（在mock文件夹中创建相应的json文件）格式化数据，不能留有空格 把mock数据需要的图片放置到public文件夹中（public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹中） 创建mockserer.js通过mock.js插件实现模拟数组 使用步骤 引入mock模块 把json数据格式引入进来（json数据格式没有对外
玩转Mock.js：构建模拟数据的利器
会思想的苇草i的博客
01-18 3038
在本篇文章中，介绍了Mock的基础知识和语法规范，并探讨了它在前端开发中的重要性。此外还分享了如何结合Axios和Mock快速进行接口测试和开发，以提高前端开发效率。最后对常见的mock方案进行简要概述和对比，分析利弊，希望能在日常开发中帮助到大家。
mockjs模拟数据+Vuex
zhang1509123907的博客
03-20 1026
Mock.js可以模拟请求，获取数据 1、在项目根目录下载mockjs npm install --save mockjs 2、在项目src文件夹中创建mock文件夹 3、将准备好的JSON数据放入JSON文件中 注意：JSON数据不允许有空格，最好格式化好文档，否则容易报错 [ { "id": "1", "imgUrl": "/images/banner1.jpg" }, { "id": "2", "imgUrl": "/images/...
mockjs
qq_44769099的博客
03-21 1338
定义 当前端开发程序员写好了接口文档，后端还没有实现接口文档的时候，用于自己造数据，模拟后端，方便继续开发前端的功能 后端接口做好后，和后端联调，更改baseURL即可实现切换接口服务器 具体效果 1、拦截ajax 2、生成随机数据 安装 npm i mockjs -D 使用 1.定义mock.js 2.在main.js导入 import '@/mock/mock.js' 导入moc...
简单使用mockjs模拟数据
weixin_43636454的博客
03-05 428
前提：安装axios，mockjs 步骤： 1.导包 index.js main.js 2. 创建模拟api接口 index.js 3.请求数据 App.vue PS: 请求的api接口可以用正则表达式写url路径 当mockjs自带的函数不适用时可以自己写扩展函数（例如以下） 生成水果的名字，并且通过id值来获取商品 ...
前端用Mockjs模拟数据
m0_45219210的博客
04-21 2947
mockjs可以模拟数据，可以使我们更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。 使用步骤： 1、安装 npm i mockjs 2、配置 src/mock/index.js 这里的setup是配置，跟vue3的setup不一样。 import Mock from 'mockjs' // mock的配置 Mock.setup({ // 随机延时200-300毫秒，模拟网络延时 timeo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值