vue中使用mockjs简单返回数据、包括get,post请求

JavaScript021

vue中使用mockjs简单返回数据、包括get,post请求,第1张

 1、安装     npm install mockjs 2、在src文件下     创建mock文件夹         在mock文件夹下创建json文件 并在json文件夹下创建index.json         在mock文件下创建mock.js文件 3、在mian.js文件中引用mock.js             import "./mock/mock.js"     mock.js文件中的内容     ```     import Mock from 'mockjs'     Mock.setup({          timeout: 500 //设置一个延迟时间虚拟服务器响应效果      }) //格式： Mock.mock( url, post/get , 返回的数据)； Mock.mock('/getList', 'get', require('./json/index.json')) // 通过Mock.mock函数模拟post请求 Mock.mock('/api/addgoods', 'post', function (option) {  // 这里的option是请求的相关参数 var $name=JSON.parse(option.body).name if($name){     return Mock.mock({         status: 200,         message: '提交成功！！！'     }) }else{     return Mock.mock({         status: 400,         message: '未提交参数'     }) } })   ``` index.json文件中的内容 ``` {    "retcode": "0000",   "retmsg": "成功",   "data": [     {       "tabId": 1,       "tabShowName": "推荐",       "tabName": "recommend"     },     {       "tabId": 2,       "tabShowName": "7×24",       "tabName": "7x24"     },     {       "tabId": 3,       "tabShowName": "观点",       "tabName": "opinion"     }   ] ```     3、发送请求并获取数据此处用的是axios     方式一：发送get请求     ```     this.$axios.get('/getList').then((res)=>{         console.log(res)     })     ```     方式二：发送post请求     ```       var  data={         name:"张三"       }   this.$axios.post("/api/addgoods",data).then(res=>{         console.log(res,"MOCK __ POST")   })     ```4、附上官网链接   https://github.com/nuysoft/Mock/wiki5、目录结构 6、完结