Ant Design Pro

一：Ant Design pro是什么：

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。（官网写的）

npm是什么：

NPM 的全称是 Node Package Manager，是随同 NodeJS 一起安装的包管理和分发工具，它很方便让 JavaScript 开发者下载、安装、上传以及管理已经安装的包。

npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。

npm 提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。

二：初始化（新建一个项目）：

1：用以下这个命令来安装Ant Design Pro。

npm install -g @ant-design/pro-cli@3.1.0

2：下面这个命令来创建

pro create usercenterapp

? 🐂 使用 umi@4 还是 umi@3 ? umi@3
? 🚀 要全量的还是一个简单的脚手架? simple

同时选取umi@3 和 simple

这里出现了一个错误：

这bug搞了我三个小时。

无法访问“https://github.com/ant-design/ant-design-pro/”:在2078毫秒后连接到github.com端口443失败:无法连接到服务器

解决方法：

原因是git的proxy代理问题：

git config --global --unset http.proxy
git config --global --unset https.proxy

输入这两行代码即可。

 成功创建一个项目。

三：在webstorm中打开：

运行package.json中的start

 

最后的效果。 

四：Ant Design Pro的使用

1：知道Ant Design Pro常用的文件：

1. app.tsx 项目全局入口文件，定义了整个项目中使用的公共数据（比如用户信息）首次访问页面（刷新页面），进入 app.tsx，执行 getInitialState 方法，该方法的返回值就是全局可用的状态值。
2. access.ts 控制用户的访问权限，这个用户中心的权限设置只有两个：一个是管理员admin，一个是用户user
3. api.ts 文件通常用于定义前端与后端交互的接口请求，这些接口请求通常用于获取数据、提交数据或进行其他类型的服务端交互
4. router.ts 处理前端路由：即确定不同 URL 路径对应的页面组件。在这个文件中，你可以配置路由信息，包括路径、组件、权限等。可以很方便地设置前端路由规则，实现页面的跳转和访问控制。
5. proxy.ts 代理配置的文件：文件则用于配置代理，用于前端开发环境中解决跨域访问问题
6. typing.d.ts 可以定义全局类型、接口、类型别名等，以便在整个项目中共享和引用。和后端的constant有点像。

跨域：

在开发过程中，前端可能会需要访问不同域的服务端接口，而由于浏览器的同源策略，可能会遇到跨域访问的问题

就比如我们前端项目的端口是8000，而后端端口是8080，就需要用到代理的技术

第一种技术就是常用的Nginx：Nginx_nginx代理访问速度提高-CSDN博客

不过在Ant Design Pro这个框架的文件里面有一个proxy.ts，这里也能实现代理。

2：实现前后端的交互（已登录接口举例）：

a：在前端的proxy.ts中配置：

统一把接口的前缀加上/api

同时你前端定义了路径的前缀/api

那后端也得对应上

在后端的application.yml中加入：

server:
  port: 8080
  servlet:
    context-path: /api

 b.在前端的api.ts中定义接口请求：

/** 登录接口 POST /api/user/login */
export async function login(body: API.LoginParams, options?: { [key: string]: any }) {
  return request<API.BaseResponse<API.LoginResult>>('/api/user/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}