【Ant Design Pro】使用ant design pro做为你的开发模板(三) 接入mock数据做持续开发

简介: 【Ant Design Pro】使用ant design pro做为你的开发模板(三) 接入mock数据做持续开发

接上文,在一个项目中,除过基础的增加页面之外,我们紧跟着就是要数据联调,可是当后台还没有给出正式接口的时候,前端难道要停止开发等待后台接口吗?答案是否定的!这时候前端需要的是mock数据。也就是传说中的假数据,只不过mock数据是基于接口请求并且返回的。前端模拟后台返回数据,后续切到线上后也只需要修改请求地址即可。而不用去修改其它地方。


在pro中,mock有两种定义方式,并且默认pro 是开启mock数据的。一般是不需要配置。


  • 是在根目录的mock中接入
  • 是在src/pages中的mock.ts中进行配置。


我们查看项目目录可以发现,项目模板默认使用的是第一种方式:在根目录的mock中接入。

610f3976d846445e830075044d3f21b5.png


一个标准的mock由三部分组成。我们以login登录接口为例:

f0eae4789fe74fa18b73061d39688125.png


红色块为第一部分,指的是网络请求的method 配置。也就是说,get,post,delete,put等请求方式。

为黄色块。它指的是网络请求的地址,一般我们会使用统一前缀,这样方便修改代理的使用。

第三部分则为绿色块,指的是mock接口的返回数据,一般都是json。或者是配置一个function,function有三个参数,req,res,url,具体的其实是与 express 相同。其中需要注意的是,所有数据都必须通过res.send 来进行返回。

我们在项目中看一下,项目是如何使用mock数据的(以登录接口为例)。


一:查找接口。


一般我们在开发的时候都喜欢将接口文件地址统一提取成一个单独的文件,这样方便后期修改,而不用去触动页面逻辑。所以我们可以查看下登录页面的请求接口。


a21b950037354ff7a6149eaae3d32b16.png

可以看到在登录页面中,引入了一个login接口。这个接口被单独提取出去放在了根目录下的 services/ant-design-pro/api这个文件中。

我们可以继续深入查看当前接口。


862ad1b2179e46028a13b85b1e62ca5f.png

进入当前文件后可以看到,该接口的实际请求地址为:api/login/account 这个地址。其余的大家都清楚,我就不再做一一表述。我们看下当前请求接口:api/login/account 在mock的返回数据是怎样的。


我们打开根目录下的mock/user.ts 这个文件进行搜索 api/login/account这个请求地址。

9cdd5aeee1eb4229b8b6aadaa03ace53.png


可以看到就是我们刚才示例的mock接口 。


二:验证接口


在我们找当当前接口后还不行,我们下来是需要验证当前接口。怎么验证呢?当然是启动项目去尝试。

就必须,我们要验证登录接口,那么我们就启动项目找到登录,进行登录,然后查看接口返回值是否一直。


  1. 我们先修改当前的mock数据,增加自定义返回值两个。isAdmin 与 userInfo

e7c529b8ed804b7fb605a24102924288.png

    2. 保存后我们运行项目进行登录,输入参数与mock数据中一样 username为 admin ,password为 ant.design。并且查看登录接口是否与mock数据一致。

71f8acb2a95846888d6f622987a3cb5c.png


ea305c3c5d814984bfac647a0d1f5e7b.png

     3. 第三步,就是查看返回值,看是否有我们增加两项的返回值。


1b9ec11b49ae45549cfe73498aa768fe.png


由此可见,当前mock数据就是我们在登录页面中请求了 login 接口后返回的数据。


综上所述,mock数据是前端在后台正式接口还没出来之前的模拟数据,前端模拟后台数据返回,可以自由定义返回数据,使前端不停歇的继续开发,大大提高了开发效率。并且在前后端分离的现在,前后端只需要定义好数据接口,其实就可以不用去管,我们只需要在正式上线时候切换到正式环境即可,其余的都可以不用修改。


本章目前就到这里,如果说你的项目使用的是正式后台请求接口,那么下一章,我们来看看,pro如何正式联调后台接口!

目录
相关文章
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1066 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
前端开发 JavaScript Java
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
624 0
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
|
开发工具 git
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
566 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
|
6月前
Ant Design pro删除模块笔记(二)
Ant Design pro删除模块笔记(二)
43 0
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1105 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
9月前
Ant Design Pro:页面结构规范
Ant Design Pro:页面结构规范
|
9月前
Ant Design Pro新增页面步骤
Ant Design Pro新增页面步骤
212 0
|
10月前
|
前端开发 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板 OpenAPI,快速管理你的请求接口。
前言 >转载好文,作者:[赵小左](https://blog.csdn.net/qq_31281245/article/details/126783707)
【Ant Design Pro】使用ant design pro做为你的开发模板 OpenAPI,快速管理你的请求接口。
|
API
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
595 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
|
前端开发
前端项目实战109-ant design onRow的属性控制
前端项目实战109-ant design onRow的属性控制
135 0