为了不影响大家的学习，如果后端的api数据还没有生成，可以先使用mock.js来模拟数据接口，提供对外服务的api接口。

第三章

1、Mock.js 解决什么问题
2、设么是Mock.js
3、使用EasyMock
- 3.1 什么是 EasyMock
- 3.2 创建项目
- 3.3 创建测试数据接口
- 3.4 调用数据接口
- 3.5 Post 请求带参数报请求超时
- 3.6 解决方案

对接 Mock.js 模拟数据接口

1、Mock.js 解决什么问题

问题：
前后端分离项目，前端和后端人员都是根据 API 文档进行开发项目的，不应该直接相互依赖，前端人员不应该等
待后端开发好接口后再进行测试，既然不依赖后端接口，那前端人员应该如何测试呢？
解决：
可以通过模拟数据生成器，通过一定规则（API文档）生成模拟数据接口, 提供给前端人员进行测试。

2、设么是Mock.js

官网：http://mockjs.com/
文档：https://github.com/nuysoft/Mock/wiki
Mock.js 是用于生成随机数据，拦截 Ajax 请求。
通过拦截 Ajax 请求，根据数据模板生成并返回模拟数据，让前端攻城师独立于后端进行开发，帮助编写单元测试。

3、使用EasyMock

3.1 什么是 EasyMock

Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务。
现在 Easy Mock 内置了 Mock.js，我们可以更愉快的伪造数据了
网址下载： https://github.com/easy-mock/easy-mock

$ git clone https://github.com/easy-mock/easy-mock.git
$ cd easy-mock && npm install

注意：
easy-mock 的安装还是比较麻烦，需要事先安装mongodb redis 。

3.2 创建项目

访问 http://192.168.16.11：7300/ ，进行登录。
注意：没有单独的注册页面，第一次输入的用户名和密码会自动帮你注册。
点击右下角 + ，创建一个项目
创建一个项目，如下：

3.3 创建测试数据接口

点击创建接口
EasyMock 添加模拟数据配置
请求地址：/test
请求方式：get

{"code": 20000,
"message": "操作成功"
}

3. 点击预览，测试数据接口是否正常

3.4 调用数据接口

在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置
注意：复制自己创建的 Base URL

 devServer: {port: port,open: true,overlay: {warnings: false,errors: true},before: require('./mock/mock-server.js'),// 开发环境配置proxy: {[process.env.VUE_APP_BASE_API]: { // 是.env.development 文件的'/dev-api':// 目标服务器地址target: ' https://192.168.16.11:7900/mock/64557f4faf3bc37f99a23c05/db',changeOrigin: true, // 开启代理服务器，pathRewrite: {// '^/dev-api': '',['^' + process.env.VUE_APP_BASE_API]: ''}}}}

创建 src/api/test.js 文件，定义调用接口 API

import request from '@/utils/request'
export default {test() {return request({url: '/test',method: 'get'})}
}

调用接口获取数据

src/views/dashboard/index.vue
<script>
// 引入 api
import api from '@/api/test'
export default {name: 'Dashboard',created() {this.fetchData()},methods: {fetchData() {api.test().then(response => {console.log(response)})}}
}
</script>

访问 http://localhost:9528/#/dashboard 查看浏览器是否打印值

3.5 Post 请求带参数报请求超时

post接口
修改下 /test 接口请求方式为 post
修改 src/api/test.js 文件，定义调用接口 API
通常post调用的时候都会传输数据

import request from '@/utils/request'
export default {test() {return request({url: '/test',method: 'post',data: {'name': '数哥'}})}
}

重启，访问页面报错
Axios 如果发送Post请求，并且带上请求参数时，会一直报请求超时，如下
原因：
这个问题是因为mock-server中express的中间件body-parser导致的，表现为不带参数请求没有问题，带上

3.6 解决方案

将 mock\mock-server.js 文件下面的注释掉，再加上新的（大概第12行）

  for (const mock of mocksForServer) {// app[mock.type](mock.url, mock.response)app[mock.type](mock.url, bodyParser.json(), bodyParser.urlencoded({extended: true}), mock.response)      mockLastIndex = app._router.stack.length}

然后往下拉，找到下面的注释掉

  // parse app.body// https://expressjs.com/en/4x/api.html#req.body// app.use(bodyParser.json())// app.use(bodyParser.urlencoded({//   extended: true// }))

修改后，完整的图示：
验证

前端003_模拟数据接口_easymock相关推荐

前端之模拟数据 - HackerVirus - 博客园
阅读目录玩转前端之模拟数据回到目录玩转前端之模拟数据博客园主页:http://www.cnblogs.com/handoing/ 是否还在为前端模拟数据头疼? 是否还在为后端返回数据格式较多内 ...
前端项目模拟数据两种方式
文章目录 1. Mock.js 1.1 安装依赖包mockjs 1.2 在 src 目录下创建 mock 文件夹 1.3 准备模拟的数据 1.4 创建 mockServer.js 1.5 引入mock ...
前端 mockjs模拟数据
mockjs文档: Mock.js 1.下载mockjs npm install mockjs --save //开发环境 2.在src下新建mock文件并导入index.js import Mock ...
前端常用api数据接口汇总~把一些失效的去掉了。
接口分类笔记出行词典电商地图电影视频即时通讯快递查询旅游社交天气图片与图像处理外卖消息推送音乐云语义识别语音识别杂志综合笔记印象笔记提供了ActionScr ...
推荐一个非常好用的在线模拟数据接口
官方网站:https://www.easy-mock.com 使用方法:登录后创建接口,在编辑接口里写自己想要的数据. 最后加上接口名称访问即可. get请求案例:https://www.easy-m ...
关于App开发：模拟服务器数据接口 - MockApi
为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...
mock模拟的数据能增删改查吗_Mock.js模拟数据，脱离后端独立开发，实现增删改查功能...
在目前容近对端手近对端手近对端手近对端手近我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于 ...
没有json数据，自己造！mockjs的使用-模拟数据其实超级简单
虽然mockjs已经有好几年没有更新了,但是这个其实跟年限无关,因为它最终的目的是生成模拟json. 而且mockjs可以用于任何webpack项目中,也就是可以在已有的项目中添加mockjs.比如w ...
web前端与后台数据交互
1.前端请求数据URL由谁来写? 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查 ...

前端003_模拟数据接口_easymock

第三章

1、Mock.js 解决什么问题

2、设么是Mock.js

3、使用EasyMock

3.1 什么是 EasyMock

3.2 创建项目

3.3 创建测试数据接口

3.4 调用数据接口

3.5 Post 请求带参数报请求超时

3.6 解决方案

前端003_模拟数据接口_easymock相关推荐

最新文章

热门文章

前端003_模拟数据接口_easymock

第三章

1、Mock.js 解决什么问题

2、设么是Mock.js

3、使用EasyMock

3.1 什么是 EasyMock

3.2 创建项目

3.3 创建测试数据接口

3.4 调用数据接口

3.5 Post 请求带参数 报请求超时

3.6 解决方案

前端003_模拟数据接口_easymock相关推荐

最新文章

热门文章

3.5 Post 请求带参数报请求超时