在Ant Design Pro 中,因为我们的底层框架是 umi,而它自带了代理请求功能,通过代理请求就能够轻松处理数据模拟的功能。 umi 里约定 mock 文件夹下的文件即 mock 文件,文件导出接口定义,支持基于require动态分析的实时刷新,支持 ES6 语法,以及友好的出错提示,详情参看umijs.org。 exportdefault{// 支持值为 Object ...
综上所述,mock数据是前端在后台正式接口还没出来之前的模拟数据,前端模拟后台数据返回,可以自由定义返回数据,使前端不停歇的继续开发,大大提高了开发效率。并且在前后端分离的现在,前后端只需要定义好数据接口,其实就可以不用去管,我们只需要在正式上线时候切换到正式环境即可,其余的都可以不用修改。 本章目前就到这...
我们先修改当前的mock数据,增加自定义返回值两个。isAdmin 与 userInfo 2. 保存后我们运行项目进行登录,输入参数与mock数据中一样 username为 admin ,password为 ant.design。并且查看登录接口是否与mock数据一致。 3. 第三步,就是查看返回值,看是否有我们增加两项的返回值。 由此可见,当前mock数据就是我们在登录...
go-admin-pro依旧是前后端分离的项目结构,前端使用的antd pro React最新版本V5版的基础上进行开发,服务端是在原go-admin的基础上再做优化升级的一个版本。 以上图片是默认使用了antd官方的工作台页面布局; 以上图片是默认使用了antd官方的分析台页面布局,后台数据自动化,以后方便大家可以参考; 用户管理界面,可以根据...
在第三章节中,我们联调后台管理系统,因为后台服务接口没出来,所以我们使用的mock模拟数据来联调,这时候假如我们的正式后台接口出来了,我们的pro模板应当如何联调正式的后台管理系统呢? 关闭mock数据 正式联调后台接口的时候,我们要做的第一步就是关闭mock数据。
在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进行请求拦截,并且随时可拔插。
【Ant Design Pro】接口联调 之前开发写代码的时候,所有的数据都是通过接口mock模拟的假数据,当前端的代码编写完毕,后端的接口也已经写好之后,我们就需要把mock假数据干掉,使用后端提供的数据,进行前后端的一个调试,这个过程我们就把它称之为前后端的接口联调。
然后直接一个 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...
ant design pro最常用有两个命令: umi dev:本地模拟开发环境,可以使用mock数据,使用的开发环境的服务器是expressumi build:打包出静态文件,使用线上服务器进行运行,如果在本地模拟线上环境,可以通过插件serve,这时候用不了mock数据的(可以安装一个本地静态服务器:npm i serve ,然后通过serve -s dist,这时候就可...