当前位置: 首页 > Web前端 > vue.js

Vue2.x使用mockjs模拟数据

时间:2023-03-31 19:32:41 vue.js

现在是前后端分开开发的。在开发过程中,经常会遇到后台界面还没有写好,但是前端界面需要运行流程来测试界面交互的情况。这时候就需要做一些Fakedata来模拟整个过程。我已经使用mockjs生成随机数据并拦截Ajax请求。1.安装mockjs/axioscnpminstallmockjs--save-devcnpminstallaxios--save-dev2。在src目录下创建mock->index.js3,mock->index.js文件定义接口并填写数据importMockfrom'mockjs'//接口地址Mock.mock('/api/login',(req,res)=>{return{data:[{username:'zxc',password:'123456'}]}})注意:mockjs有很多方法可以快速创建数据4.importmock->index.js文件import'../src在main.js/mock'5.使用importaxiosfrom'axios'exportdefault{name:'HelloWorld',data(){return{msg:'WelcometoYourVue.jsApp'}},mounted(){//mockjsaxios.get中定义的接口地址('/api/login').then(res=>{console.log(res)})}}//基本用法importMockfrom'mockjs'letRandom=Mock.Random//1.Mock.mock//url:表示需要拦截的URL,可以是URL字符串或URL正则//type:表示需要拦截的Ajax请求类型。例如GET、POST、PUT、DELETE等。//template:表示数据模板,可以是对象也可以是字符串。例如{'data|1-10':[{}]},'@EMAIL'。//function:指示用于生成响应数据的函数。//1.url,templateMock.mock('/api/user/list',{'array|10':[{name:'zxc',password:'*****',//ofMock.Random该方法在数据模板中称为“placeholder”,书写格式为@placeholder(parameter[,parameter]).email:'@email',age:'@integer(1,100)',address:'@county(true)'}]})//2.url,functionMock.mock('/api/login',(req,res)=>{//如果请求接口返回数据,可以在这里处理//letdata=JSON.parse(JSON.stringify(res))//data.forEach((value,index)=>{//if(value==='zxc'){//value='hello'+value//}//})//return{//数据//}})//3.url,type,templateMock.mock('/api/register','post',{'string|10':'zxc'})//4.url,type,functionMock.mock('/api/register','post',(req,res)=>{return{username:'zxc',//使用随机生成的地址:Random.county(true)}})//二、Mock.setup//指定拦截Ajax请求的响应时间,单位毫秒。该值可以为正整数,如400,表示400毫秒后返回响应内容;也可以是破折号'-'形式的字符串,比如'200-600',表示响应时间在200到600毫秒之间Mock.setup({timeout:400})//3.Mock.Random随机数据生成官方文档:http://mockjs.comhttps://github.com/nuysoft/Mo...6.浏览器查看数据