Vue中使用Mock.js
1.介绍:Mock.js非常强大,可以用来模拟后端接口,模拟请求数据
// 安装mock.js npm install mock.js --save // 新建文件夹Mock,再新建index.js放置mock模拟数据 const Mock = require('mockjs') // 设置mock过期时间 Mock.setup({ timeout: 6000 }) // 设置的模拟数据 const articles = Mock.mock({ 'name|1-10': [ { 'name|+1': [ 'Hello', 'Mock.js', '!' ] } ] }) // 接口,第一个参数url,第二个参数请求类型,第三个参数响应回调 Mock.mock('/api/login', 'get', res => { return { articles } }) // 打印当前Mock的版本号 console.log(Mock.version) // 可以自定义Mock的扩展方法 Mock.Random.extend({ filter (data) { const msgData = data || ['星期一', '星期二', '星期三', '星期四', '星期五'] return this.pick(msgData) } }) // 调用该方法 console.log(Mock.Random.filter()) // 产生mock模板的正规json格式数据 var template = { 'key|1-10': '★' } console.log(Mock.toJSONSchema(template)) // 图片地址、邮件地址,字体颜色,英文姓名 console.log(Mock.Random.image()) console.log(Mock.Random.email()) console.log(Mock.Random.color()) console.log(Mock.Random.name()) // Mock文档地址:http://mockjs.com/examples.html // 再vue组件中请求接口数据 <script> import axios from 'axios' export default { mounted () { axios.get('/api/login').then(res => { console.log(res) }) } } </script>