关于前后端联调,后端问题需要依赖于复杂页面交互,是怎么接入前端来调试后端问题的呢
我是前端开发,现在对接不同的部门的后端开发,而且我们是有开发服务器的,我这边调试都是接入开发服务器的地址(只要后端是最新的)不用依赖后端同事
部门 A 后端开发,每次后端出现问题,都要我启动前端本地项目来接入他本地进行调试问题(耦合性也太大了,我本来在做其它项目,突然要我启动前端,每次去厕所在拉屎,会让我启动前端服务)
部门 B 后端,从开发开时就从没连过他们本地服务,他们有变动会更新后端服务就很舒服(有个疑问,对于后端需要前端页面复杂交互来调试接口是怎么来调试的呢)
给他惯的,最多告诉他调用了哪些接口,顺序是什么,自己造数据测去
#1 部门 B 有时会让 提供接口需要的参数
让他用 postman 测试啊,最不济也可以用 curl 测试啊,
发错版了喂
前端就是人肉网关 外加背锅的
正常正规都是 B ,跨部门、跨公司开发联调。A 一般是部门内部快速看问题,通常也是熟人打招呼连他本地,因为他 debug 方便。综上,看你跟他关系了
后端都是看着原型图加 postman 出接口的,连前端太费劲了
正常都是后端自己用 postman ,再不行后端自己写模拟请求工具
让他自己启动前端项目去,什么奇葩联调,要参数啥的,自己看接口文档 swageer 啥的,按流程搞好接口文档啥的,哪这么多逼事
让后端写单测 + postman 自己测试过了再发到测试环境。
你反问他:“找前端要接口参数是不是认为后端没存在的必要了?”
首先去连接他的服务器本地调试这种事就不对啊 (让他自己解决)
- 复杂参数第一次, 这种你完全可以把测试环境的 CURL 参数发给他, 他自己导入到 postman 自己调试 (然后写到 API 文档默认参数, 下次继续使用)
依赖顺序行为的 (比如, 需要点击 A, 行为 B, 触发 C) 要么写单测, 要么恶心人
让后端自己写单测吧
#6 A 是一块进公司的
给他代码,让他自己在本地跑,我测试都是拉前端最新的代码,自己在本地测,大家都方便
这种问题很简单啊,你们找你们前端牢大,建立一个测试前端环境
假设原来:
本地环境前端: 127.0.0.1
生产环境前端:8.8.8.8
你们只需要搭建一个测试环境前端:
本地环境前端: 127.0.0.1
测试环境前端: 192.168.50.66 api 指向测试环境后端 api
生产环境前端:8.8.8.8
然后这个测试环境每次你们前端 commit 都会触发 build ,或者每小时,每次打 tag 都触发 build ,这样以后后端找问题,让他自己去测试环境自己测试就行了,不妨碍你带薪拉屎
你把前端打包一下,然后用 node.js 起一个静态服务器和 http 请求代理转发到后端,把页面地址给后端,让他自己调。这样就不会影响本地正在开发的项目,而且可以同时对接多个后端
你前端也搭个测试环境呗。
op 都说了,后端 a 是跟 op 一起入职的,说明这两人都是新来的,都不熟悉流程跟接口参数,需要前端手动走一遍流程,看看是走的那些参数跟接口。评论区里这一群人,一上来就说是后端的问题,也是没谁了,敢情就你一个人厉害了,那公司还要招那么多人干嘛,全给你一个人干不就行了。😅
找运维要个资源 发测试版
请求头里加参数,网关根据参数决定转发到哪个服务上
#17 服务器 不能访问个人电脑 只能个人电脑访问服务器
害得我登录回复 哥们你不会抓包请求 甩给他 curl 请求嘛 何必将就 A
curl 就是前后端联调的沟通窗口啊 返回数据有问题 就让后端改
什么本地起服务 联调
调侃下 估计你们公司开的薪资都很低 😂
network fetch/xhr copy --> copy as curl
#24 纯牛马 工资是低
#24 他需要自己复现 比如是一个表单提交接口报错了,而提交需要的参数是其它页面接口返回的
#25 这不就是正解吗,这么简单的事
哪个接口报错了,把接口名称和参数发给后端,后端自己直接调用接口调试。
基本上能解决 90%的问题
话说,你们没有稳定的前端开发环境?
把相关所有接口的 curl 给他就行,他自己去试
#30 没有只有开发环境, 这个有什么特别的吗
就是 19 楼说的意思,稳定的前端测试环境
发个 curl 不就行了么。
你还没理解我的意思 厘清责任
curl 甩给他 剩下不需要你做什么事,跟环境没任何关系 ,
你只需要证明返回的数据 在我的 ui 交互和数据展示上没问题就行了, 除非你自己 web 端有问题
你可以配合他联调 但是主动权在你这里 当然你这个后台开发应该是 99% javaer 开发的
至于开发测试生产环境 你喊没有资源 需要运维支持下(当然运维一般不要太菜)
#35 好的 感谢大佬
#33 服务器是不能访问个人电脑的,除非后端打包放到服务器才行,现在后端就想在本地调试,环境没什么用(当然前端也可以打包,让它自己本地启个前端服务)
代理下接口能有多难...
专门部署一个用来测试啊, 比如游戏的后端要测试, 要写代码模拟的工作量是等于是要把前端重写一遍了.
1 、可以根据你的前端项目出一个 API 文档(不管是你自动生成 OpenAPI 还是手写的),接口名称,接口参数,数据格式等等,测试代码示例 - postman 或者 curl 示例 一步一步咋测写清楚 。作为公共文档丢给它
2 、本地搭建一个前端的测试项目
一般都是反过来的。因为后端是比较好构造逻辑调试的。反而前端是不容易构造一些数据和环境的。
这点从单测上就能看出来
后端对着 postman 自动脑补画面,这是基本功
我是使用浏览器扩展 github.com/g0ngjie/ajax-proxy 重定向前端的接口到本地服务器(服务需要配置一下 cors ),所有在原本的前端页面发起的请求都过来了
自己发 api 测啊,postman 是干啥使的?
话说回来,好多前端连 copy as curl 都不知道
我是后端,如果线上的开发环境不理想,对于特别复杂的页面,涉及好多个接口好几个后端服务的,我都是自己本地启动前端调试
我同事都是在她电脑本地启动前端项目,自己调用页面调试的
A 就是有问题,哪怕是刚接触项目要从界面熟悉接口,也应该找楼主问前端编译好的项目和启动方式,而不是强奸楼主的时间
简单,让运维在开发环境也正常部署前端代码不就完了。
#48 三年起步
#45 之前都是 打开浏览器请求 址 和 参数 一个一个复制的
#49 没有运维 服务器密码给你 前端后端分开部署自己的
A 比较水,一般是用 postman 之类的 http 客户端工具测试接口有没有问题
我特别想知道,没有相对稳定的开发测试环境的话,你们测试都是怎么工作的
#54 有开发环境,但开发环境前后端都是打包部署后的,现在问题是后面想连本地调试
想本地调试喊他自己运行啊,装个 node 又不麻烦
看样子 op 和我司的环境比较像, 测试开发环境在公网, 不能连接本地, 本地能访问测试开发环境.
而且后端还是微服务, 网关, 授权, 注册中心等都在公网(由于公网不能访问本地所以注册上去也没用).
这种问题其实很简单, 这是我的解决办法:
后端只需要本地启动一个 nginx 就行了,
除了需要 debug 的微服务代理到本地, 其他所有的全部走测试,开发环境;
比如测试环境在 test.com, 现在后端觉得有一个微服务 svc-x 有问题, 需要联调,
可以这样配置:
server {
listen 7004;
server_name localhost;
# 这里主要是看网关路由的配置是什么, 一般现在前端和后端的路由是有区别的
# /svc-x 的服务全部走到本地, 并且去掉/svc-x path
location /svc-x/ {
proxy_redirect off;
proxy_pass localhost:8080/;
proxy_connect_timeout 15s;
proxy_send_timeout 15s;
proxy_read_timeout 15s;
proxy_set_header X-Forwarded-Proto http;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location / {
proxy_pass test.com;
proxy_connect_timeout 15s;
proxy_send_timeout 15s;
proxy_read_timeout 15s;
proxy_set_header X-Forwarded-Proto http;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
这样随时使用开发测试环境的前端以及后端鉴权等.
#45 你以为后端知道? 我发一个 curl 还在里面一个一个扒入参呢
之前 leader 推广过前端微服务,我写了个 Chrome 扩展插件,用于测试线上环境的,本质上就是通过 Chrome 的插件来修改请求调用的网关地址。
同样的,可以让后端浏览器装个插件,把请求转发到他本地服务,就不需要依赖前端了
以前用的这个 Chrome 插件, github.com/yize/xswitch ,一把抓住前端请求,顷刻炼... 转发到本地后端。
不过这个插件现在不维护了,使用油猴脚本、或者 whistle 之类的代理工具也能轻松实现。或者让 ai 给你写个 Chrome 插件来转发。
哈哈哈,确实这种很常见
感谢 清英 同学的投稿 Copy-On-Write简称COW,是一种用于程序设计中的优化策略。其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会…
虽然大部分情况下只用英文搜索,很少见到 CSDN ,但还是好奇一个代码要登录才能复制,评论要登录可见,打开还要叉掉“红包雨”的体验如此烂的平台为什么会有这么多开发者愿意把自己的…
打开这个地址: api.likepoems.com/img/bing/ 它会自动跳转到一个图片的地址,然后可以看到浏览器 url 变化了。 我想在代码中先 axios 请求这…