项目开发-前端-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
实现:

1. 在登录状态接口中添加token字段：在“src\services\API.d.ts”的LoginStateType接口中添加data?:string类型，服务器返回的token字段保存在data字段中。
2. 服务器返回token：在“mock\user.ts”中'POST /api/login/account'方法中添加返回字段data，其中包含服务器生成的token字段。
3. 请求登录保存token：在“src\pages\user\login\index.tsx”中handleSubmit登录成功情况下使用localStorage保存token。
4. 退出登录删除token：在“src\components\RightContent\AvatarDropdown.tsx”的onMenuClick退出登录事件中删除token。
5. 查询当前用户token：在“src\services\user.ts”的queryCurrent方法中添加形参token，并将request修改为post方法，传递token。
6. 任意页面打开检查token：在“src\app.tsx”的getInitialState中获取本地token，没有则跳转到登录页面，有则调用queryCurrent方法，传入{token}参数，查询验证用户的身份。

2、首页左侧菜单和权限管理实现：

1. 在“src\pages”中创建新的 js，less 文件。 如果有多个相关页面，可以创建一个新文件夹来放置相关文件。

   config
   src
     models
     pages
   +   NewPage.js
   +   NewPage.less
     ...
   ...
   package.json
   

   NewPage.js的内容如下：

   import React from 'react';
   import styles from './NewPage.less';
   export default () => {
     return <div>New Page</div>;
   };
   

2. 在“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/)
3. 在“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