Vue中使用Mock.js 不需要开启服务

学了一个月的前端,终于要开始用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

这个可以模拟真实接口,带数据库,我还没研究,大家有兴趣可以去看一下。

最后祝我下个星期能够学得顺利

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容