Vue中使用Mock.js 不需要开启服务
2019-08-25 本文已影响0人
程程大人
学了一个月的前端，终于要开始用vue框架了。。。
因为之前练习HTML的时候，发现mock.js 挺好用的，所以也想把它带到vue中使用，我看了官方文档好像没有说明用url请求的方式。所以自己也找了些其它大佬写的博客，弄了半天，还是自己研究出来了。
下面说的方法都是最最基础的方法。麻雀虽小，五脏俱全！！
第一步：把 axios mock.js 都安装在项目中（这个不用多说）
第二步：在src下面新建如下目录
目录结构
我这里模拟的是用户列表
看一下userInfo.js中的代码
const mockUserInfo = [{
id: 0,
username: 'admin',
password: '123456'
}, {
id: 1,
username: 'user1',
password: '123456'
}, {
id: 2,
username: 'user2',
password: '123456'
}]
export default {
mockUserInfo
}
再看一下index.js中的代码
import Mock from 'mockjs'
import userInfo from './mock/userInfo'
Mock.mock('/user/userInfo', 'get', userInfo)
再把index.js 文件在main.js 中全局引用
全局引用
测试请求
组件中请求
效果
请求效果
这样是不是很简单
对的就是很简单
我在查资料的时候，发现了这个网站 https://www.eolinker.com
这个可以模拟真实接口，带数据库，我还没研究，大家有兴趣可以去看一下。
