vue 模拟接口数据mockjs

最新推荐文章于 2024-09-03 09:18:21 发布

nameLhc

最新推荐文章于 2024-09-03 09:18:21 发布

阅读量327

点赞数

文章标签： vue.js javascript 前端前端框架 npm

本文链接：https://blog.csdn.net/nameeL/article/details/122382108

版权

这篇博客介绍了如何使用MockJS生成模拟数据，并在Vue项目中通过在main.js引入mock.js文件，设置Mock.mock来拦截和响应'/Get/list1'的POST请求。数据模板包括了登记证明号、坐落等信息，同时还展示了权利人数据的生成。最后，通过axios进行请求，实现了前端与模拟数据的交互。

摘要由CSDN通过智能技术生成

下载mockjs
npm install mockjs --save

在根目录下创建mock.js

在main.js引入刚创建的mock.js

在mock.js文件里写

import Mock from 'mockjs';
//数据模板'name|min-max':value
let row1 = {
'code': 0, //0代表成功
'data|10': [{
'id|+1': 1,
'registrationNo|1': '@cword(10)' + '@string("number",3,4)' + '号', //登记证明号
'location|1': '@province' + '@city' + '@county', //坐落
'titleMembers|2': [{ //权利人
'memberName|1': '@cname',
'memberId|1': /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
}]
}]
};
Mock.mock('/Get/list1', 'post', row1);

然后用axios请求：