数据Mock与后端联调

Posted 2023-05-08

参考技术A 通常前端开发的时候，我们的页面已经开发完成。但是后端的接口不一定已经写完就了。这时候我们就可以自己去伪造一些符合规范的数据，用于前期的测试，等到后端接口完成的时候我们可以在进行一个接口联调。

对于我们前端来说，我们天生就会一个后端开发语言，nodejs即可实现。

我们只需要创建一个简易服务器，对请求路径进行判断，返回对应的mock数据。

Mock.js可以快速通过模板生成数据。

http://mockjs.com/examples.html

@ctitle(3, 10)
@cparagraph
@cword
@cname
@integer(10, 100)
@float(20, 30, 2, 3)
@color
@date
@time
@now
@id
@url
@email
@image('200x100')

http://rap2.taobao.org

约定好接口的路径是什么？
如
/auth/register

接口的提交类型是什么？
如
GET 获取数据
POST 提交或创建
PATCH 修改数据，部分修改
DELETE 删除数据
PUT 修改数据，整体替换原有数据

参数类型/格式
如
fromdata 或者 application/x-www-form-urlencoded

参数字段限制条件
返回成功的格式
返回失败的格式

当后端给到你接口的时候，你可以使用命令行的 curl 语句，进行简单的测试。

新手小白第一次与后端联调

前后端对接注意事项

1. 封装的axios，按照接口文档，请求方式，需不需要传参，后台响应参数。
2. 传参时注意：后台接收的参数形式与你传过去的参数的类型是否一样，不一样前后端都会报错
3. 我们对接口的时候出现的问题：①前台200，但是后台400，这里可能要注意请求头[“Content-Type”:“application/json”]，②请求超时，服务器报500等等，都是需要后台去解决。

总结：

前后端联调主要是前台传参、后台接收；如果参数传的没问题那么就会很容易完成从后台数据库获取数据渲染到前台页面上了，还有后台老哥说一个数据要改就会带动一堆数据改，哈哈辛苦我的后端老哥了