zuiidea/antd-admin

关于mock

zuiidea opened this issue · 22 comments

  • mock的优点在于可以在后端未开发接口时,前端可以模拟数据接口进行开发。

  • roadhog为我们提供了一个完善的mock功能,在本项目中的接口均为mock的

  • 在开发过程中,后端部分接口已经开发完成,我们怎么使用别人的接口呢?如果需要同时请求多个同事的电脑或者多台服务器上的接口呢?我是这样做的,roadhog的配置中有接口代理的功能(.roadhogrc.js),
    自己mock的接口加上前缀‘/api/v1’,A同事的接口加上前缀‘/api/v2’,C同事的接口加上前缀‘/api/v3’,利用roadhog分别匹配‘/api/v2’,‘/api/v3’并代理到A、B同事的电脑上。这样就可以不跨域的情况下愉快的开发啦。

  • 当发布到正式环境后,利用nginx或者其他工具,将‘/api/v1’,‘/api/v2’,‘/api/v3’分别代理到指定的端口或者服务器,也可以正常运行啦

可参考
https://github.com/zuiidea/antd-admin/blob/master/src/utils/config.js
https://github.com/zuiidea/antd-admin/blob/master/.roadhogrc.js

@zuiidea @FatFatFox
问题描述:在本地搭建好了Nginx服务器,本地服务器上运行起来
http://192.168.0.136:8080/nhsoft-mercury-web/checkLoginPhone?phoneNumber=18667411797&password=123456&callback=jsonp_1502759125384
Request Method:GET
Status Code:200 OK
Remote Address:192.168.0.136:8080
返回:
{"status":0,"msg":"登录成功","data":null}
但是models/login.js里:
const data = yield call(login, payload)
console.log(data.status)
接收不到data.status

这是什么原因?
@cdscawd 和你的问题很像login明明是post请求结果变get了,后台已经解决跨域问题了

我在utils/config.js调用作者的登录接口可以登录。
综合上述情况,问题出在哪呢?

后台返回给我的数据是{"status":0,"msg":"登录成功","data":null}
看作者的data返回是{success: true, message: "Ok", statusCode: 200,data:""}
那我要让后台写死了,success: true, message: "Ok", statusCode: 200?

你请求的接口和你当前所在域不同,跨域后默认使用了jsonp

@zuiidea 看了你的这个回答
请求的接口域和当前的域不一致而跨域,默认走了JSONP,可以在utils/config.js里的CORS属性加上接口的域名。或者利用ngnix代理,使接口的域和当前域相同。
试过了还是不行。
拿了你比较老的版本
2
我这边200请求成功,为什么他那边会是没进来呢?
就是我service/login.js里面写get可以进去,我写post他怎么改都进不去。。。

OPTIONS 方式的请求是个探针,一般还有第二个请求,你看看呢,
另外CORS的话,需要后端配合设置Access-Control-Request-Method,

推荐你使用roadhog的proxy功能,在.roadhogrc.js这样就不会跨域,也不会有这些问题了

后台加了CORS,处理了options和post请求,但是放回的数据没有在service/login.js里的data里,只能在控制台看到请求的数据返回,两次请求options和post,两次都是返回数据了,但是返回的数据没在data里,还是只有那三个字段,这个问题要怎么处理呢?
message:""
status:200
success:true

@qingjiaowochengzd ,这个是在src/request.js处理了的,真实的数据在浏览器的控制台的network那里看啊,建议多了解一下网络相关的知识

@zuiidea 拿了比较老的项目版本。昨天后台做了CORS处理,可以接收到两次请求后,返回给我11111,今天早上返回给我正规的json数据,后台数据可以通过...data加入到那三个字段里了,这样我也可以获取了。

还有一版最新的4.3.2还是调同样的后台接口,message:"Timeout",status:600,success:false,未解决,目前先用老的已经调通的。
谢谢作者耐心回答

@qingjiaowochengzd 这种情况不是服务端的错,排查一下src/request.js

/api/v1/users
返回的接口total能修改成别的字段么?比如totalCount?

@zuiidea 如何调试mock目录下的响应的js文件呢。。如果mock/user.js?谢谢。。

各位大哥,这个能在本地调接口吗?
image
image

只想访问本地的api,这个mock怎么关掉呢,

楼上 你的问题解决了吗?我也遇到同样的问题。proxy没有生效

@MrSuntb 把.roadhogrc.mock.js 注释掉

目前master分支使用了umi, 加上启动参数MOCK=none即可

请问部署到测试或是生成环境该怎么打包啊

@lee-Tony npm run build

zecor commented

.roadhogrc.js 文件在哪里,自己建么? .webpackrc.js 里的proxy 和这个是什么关系?

@zecor

.roadhogrc.js 文件在哪里,自己建么?

.roadhogrc.js 是roadhog的配置文件,4.x 版本使用
目前master分支已使用umi来处理,直接使用即可,不需要额外的配置,参考

.webpackrc.js 里的proxy 和这个是什么关系?

Mock 是开发环境下用来模拟后端接口的,那如果是生产环境呢?proxy就出场了
开发环境下,两者可以同时作用,存在优先级关系,目前是proxy优于Mock

还是没看懂怎么在本地开发取消mock^^^^^^

目前master分支使用了umi, 加上启动参数MOCK=none即可

也不行哦

@Wine-in-June 经测试,最新的master分支,在package.json中改为

    "start": "MOCK=none umi dev"

mock没有生效,无法登陆