Ant Design Pro v5项目开发学习
开发前准备
1、删除国际化
在项目目录下打开cmd命令窗口输入以下命令:
yarn run i18n-remove
删除登录界面的国际化图标,将“src\pages\user\login\index.tsx”内的以下内容删除:
<div className={styles.lang}>
<SelectLang />
</div>
删除控制台界面的国际化图标,将“src\components\RightContent\index.tsx”内的以下内容删除:
<SelectLang className={styles.action} />
2、目录结构详解
├── config # umi 配置,包含路由,构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── locales # 国际化
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ └── access.ts # 用户权限控制
│ └── app.tsx # 项目初始化:state、layout、errorHandler
│ ├── global.less # 全局样式
│ └── global.tsx # 全局 ts
├── tests # 测试工具
├── README.md
└── package.json
3、修改Footer
修改“src\components\Footer\index.tsx”。
4、显示Header中用户中的个人中心和个人设置,并设置监听事件。
- 在“src\components\RightContent\AvatarDropdown.tsx”中发现AvatarDropdown组件中接受menu参数,在menuHeaderDropdown使用,用于控制是否显示“个人中心、个人设置”。
- 在“src\components\RightContent\index.tsx”中的
<Avatar />
修改为<Avatar menu={true}/>
修改“src\components\RightContent\AvatarDropdown.tsx”中的onMenuClick即可添加监听事件。
正式开发
1、登录机制实现:
原理解析:https://blog.csdn.net/u011192674/article/details/107101526
实现:
- 在登录状态接口中添加token字段:在“src\services\API.d.ts”的LoginStateType接口中添加data?:string类型,服务器返回的token字段保存在data字段中。
- 服务器返回token:在“mock\user.ts”中
'POST /api/login/account'
方法中添加返回字段data,其中包含服务器生成的token字段。 - 请求登录保存token:在“src\pages\user\login\index.tsx”中handleSubmit登录成功情况下使用localStorage保存token。
- 退出登录删除token:在“src\components\RightContent\AvatarDropdown.tsx”的onMenuClick退出登录事件中删除token。
- 查询当前用户token:在“src\services\user.ts”的queryCurrent方法中添加形参token,并将request修改为post方法,传递token。
- 任意页面打开检查token:在“src\app.tsx”的getInitialState中获取本地token,没有则跳转到登录页面,有则调用queryCurrent方法,传入{token}参数,查询验证用户的身份。
2、首页左侧菜单和权限管理实现:
- 在“src\pages”中创建新的 js,less 文件。 如果有多个相关页面,可以创建一个新文件夹来放置相关文件。
NewPage.js的内容如下:config src models pages + NewPage.js + NewPage.less ... ... package.json
import React from 'react'; import styles from './NewPage.less'; export default () => { return <div>New Page</div>; };
- 在“config\config.ts”中routes下添加一条配置路由,canUser为自己定义的变量,用户打开页面时根据用户身份赋值,规定当前页面的访问权限。
{ path: '/new-page', name: 'NewPage', icon: 'smile', component: './NewPage', access: 'canUser', },
icon可以为url或者官方提供的图片[https://ant.design/components/icon-cn/](https://ant.design/components/icon-cn/)
- 在“src\access.ts”中添加canUser并设置赋值条件,根据此条件判断用户是否能打开此网页。currentUser.access属性为querryCurrent方法向服务器查询时返回设置的值。在“src\app.tsx”初始化保存在全局State中。
3、使用Ant Design 组件库
官方API:https://ant.design/components/overview-cn/
拓展组件API:https://procomponents.ant.design/components
图表类组件库:https://charts.ant.design/guide/
测试阶段
1、服务器完成部分接口,使用proxy测试服务器接口。
- 注释掉mock内测试接口对应的模拟请求。
- 修改
config/proxy
文件如下
Note: 上述配置的含义为:匹配/api
开头的请求,重定向到target的连接地址,并且将/api
替换为空字符串。注意target链接不能用https,会报重定向错误。在某些服务器上或后端框架会禁止跨域请求,请进行相应的配置,不然会无法访问接口如405错误。
2、接口全部实现,关闭mock进行测试。
npm run start:no-mock