在pro中,mock有两种定义方式,并且默认pro 是开启mock数据的。一般是不需要配置。 是在根目录的mock中接入 是在src/pages中的mock.ts中进行配置。 我们查看项目目录可以发现,项目模板默认使用的是第一种方式:在根目录的mock中接入。 一个标准的mock由三部分组成。我们以login登录接口为例: 红色块为第一部分,指的...
isAdmin 与 userInfo 2. 保存后我们运行项目进行登录,输入参数与mock数据中一样 username为 admin ,password为 ant.design。并且查看登录接口是否与mock数据一致。 3. 第三步,就是查看返回值,看是否有我们增加两项的返回值。 由此可见,当前mock数据就是我们在登录页面中请求了 login 接口后返回的数据。 综上所述...
ant design pro启用mock ant design pro admin go-admin-pro依旧是前后端分离的项目结构,前端使用的antd pro React最新版本V5版的基础上进行开发,服务端是在原go-admin的基础上再做优化升级的一个版本。 以上图片是默认使用了antd官方的工作台页面布局; 以上图片是默认使用了antd官方的分析台页面布局,后台数据自动化...
在 antd pro 项目中通常会在真实的后端接口地址上加一个前缀/api来标识为后端接口。 子项目 App1 的前缀配置成/api-app1 // app1/config/config.ts`exportdefault{proxy:{'/api-app1':{target:'https://easy-mock.bookset.io/mock/5dc1032e9e606017b5d2c92d',changeOrigin:true,pathRewrite:(path)=>path...
1、mock简介 Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。 在Ant Design Pro 中,因为我们的底层框架是 umi,而它自带了代理请求功能,通过代理请求就能够轻松处理数据模拟的功能。
发现原来mockjs仅仅支持ajax的请求拦截,而umi使用的是fetch,并不被mockjs所支持,在此我们需求增加另外一层代理,使得mockjs支持fetch。为此,在github上找到了一个叫做mockjs-fetch的库,下载下来稍加改造即可。 结语 至此我们可以在不改变ant-design-pro的框架下,使用mockjs进行请求拦截,并且随时可拔插。
Ant Design Pro 5项目初始化后,默认是使用mock模拟数据的,如果我们关闭mock,配置代理访问后端进行数据联调,那么配置方法如下: 修改config目录中的proxy.ts(这里以typescript版本示例,javascript版本也一样)。 将test配置中的内容复制到dev中,然后按照实际情况修改后端链接。
一、概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。 在 Ant Desi
ant-design-pro-vue 开发笔记(二)配置连接后台数据库 1、vue.config.js (后台使用phalapi) devServer: {//development server port 8000port: 8000, // TODO api proxy 关于api请求代理: 如果期望启用代理,请删除mockjs的配置 mockjs /src/main.js
Ant Design Pro中默认是使用了mock数据的,由于在做项目之前没有学习过react dva redux umi这些基础组成知识,对我这个新手来说确实比较辣手. 首先修改config目录下config.js的proxy属性,将我们的后端接口添加进来. 当本地开发完毕之后,如果服务器的接口满足之前的约定,那么只需要关闭 mock 数据或者代理到服务端的真实接...