2. 保存后我们运行项目进行登录,输入参数与mock数据中一样 username为 admin ,password为 ant.design。并且查看登录接口是否与mock数据一致。 3. 第三步,就是查看返回值,看是否有我们增加两项的返回值。 由此可见,当前mock数据就是我们在登录页面中请求了 login 接口后返回的数据。 综上所述,mock数据是前端在后台...
我们先修改当前的mock数据,增加自定义返回值两个。isAdmin 与 userInfo 2. 保存后我们运行项目进行登录,输入参数与mock数据中一样 username为 admin ,password为 ant.design。并且查看登录接口是否与mock数据一致。 3. 第三步,就是查看返回值,看是否有我们增加两项的返回值。 由此可见,当前mock数据就是我们在登录...
Ant Design Pro 5项目初始化后,默认是使用mock模拟数据的,如果我们关闭mock,配置代理访问后端进行数据联调,那么配置方法如下: 修改config目录中的proxy.ts(这里以typescript版本示例,javascript版本也一样)。 将test配置中的内容复制到dev中,然后按照实际情况修改后端链接。 /** *@name代理的配置 *@see在生产环境 ...
在Ant Design Pro 中,因为我们底层的工具是 roadhog,而它自带了代理请求功能,通过代理请求就能够轻松处理数据模拟的功能。 二、详细 2.1、使用 roadhog 的请求代理功能 在通过配置.roadhogrc.mock.js来处理代理请求,支持基于require动态分析的实时刷新,支持 ES6 语法,以及友好的出错提示,详情参看roadhog。 1 2 3 ...
一、常用的几个目录: config :配置文件 config.js :路由定义文件&&代理路径文件 defaultSettings.js :主题颜色以及标题配置文件 plugin.config.js :没怎么用过的配置文件 mock:mock数据文件,用于本地开发使用 public:静态图片资源 src :开发项目文件(主要在此目录下进行发) ...
1、mock简介 Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。 在Ant Design Pro 中,因为我们的底层框架是 umi,而它自带了代理请求功能,通过代理请求就能够轻松处理数据模拟的功能。
在Ant Design Pro 中,因为我们底层的工具是 roadhog,而它自带了代理请求功能,通过代理请求就能够轻松处理数据模拟的功能。 二、详细 2.1、使用 roadhog 的请求代理功能 在通过配置.roadhogrc.mock.js来处理代理请求,支持基于require动态分析的实时刷新,支持 ES6 语法,以及友好的出错提示,详情参看roadhog。
发现原来mockjs仅仅支持ajax的请求拦截,而umi使用的是fetch,并不被mockjs所支持,在此我们需求增加另外一层代理,使得mockjs支持fetch。为此,在github上找到了一个叫做mockjs-fetch的库,下载下来稍加改造即可。 结语 至此我们可以在不改变ant-design-pro的框架下,使用mockjs进行请求拦截,并且随时可拔插。
然后直接一个 controller,返回数据抄的mock的数据,哈哈。 packagecom.example.antddesignpro.controller;importcom.alibaba.fastjson2.JSON;importcom.alibaba.fastjson2.JSONObject;importcom.example.antddesignpro.model.LoginInfo;importcom.example.antddesignpro.model.Persion;importlombok.extern.slf4j.Slf4j;importorg...
:gem:优雅美观:基于 Ant Design 体系精心设计 :triangular_ruler:常见设计模式:提炼自中后台应用的典型页面和场景 :rocket:最新技术栈:使用 React/umi/dva/antd等前端前沿技术开发 :iphone:响应式:针对不同屏幕大小设计 :art:主题:可配置的主题满足多样化的品牌诉求 ...