455 lines
12 KiB
Markdown
455 lines
12 KiB
Markdown
# *coder station* 后台管理系统笔记
|
||
|
||
|
||
|
||
## 项目准备
|
||
|
||
这一次项目会有一些前置知识需要学习：
|
||
|
||
- *Antd pro*
|
||
- *Dva*
|
||
- *UmiJS 4.0*
|
||
|
||
|
||
|
||
## 项目笔记
|
||
|
||
|
||
|
||
1. 如何修改项目的端口号
|
||
|
||
在项目根目录下面创建一个 *.env* 文件，之后就可以配置端口号之类的内容
|
||
|
||
参阅文档：*https://umijs.org/docs/guides/directory-structure#env*
|
||
|
||
|
||
|
||
2. 关于路由的配置，需要参阅 *Antd pro* 这个文档的“新增页面”部分的内容
|
||
|
||
文档：*https://pro.ant.design/zh-CN/docs/new-page*
|
||
|
||
如果想要某个页面不出现在左侧的导航栏中，可以配置 *hideInMenu:true*
|
||
|
||
|
||
|
||
3. 配置代理服务器直接在 *umirc.js* 中进行配置
|
||
|
||
文档：*https://umijs.org/docs/api/config#proxy*
|
||
|
||
例如：
|
||
|
||
```js
|
||
proxy : {
|
||
"/api" : {
|
||
target : "http://127.0.0.1:7001",
|
||
changeOrigin : true,
|
||
},
|
||
"/static" : {
|
||
target : "http://127.0.0.1:7001",
|
||
changeOrigin : true,
|
||
},
|
||
"/res" : {
|
||
target : "http://127.0.0.1:7001",
|
||
changeOrigin : true,
|
||
}
|
||
},
|
||
```
|
||
|
||
|
||
|
||
4. 当我们使用 *antd* 里面的表格的时候，和 *Element-ui* 不同的是，在 *antd* 中的表格需要配置每一列
|
||
|
||
例如：
|
||
|
||
```js
|
||
// 对应表格每一列的配置
|
||
const columns = [{
|
||
title : "登录账号",
|
||
dataIndex : "loginId",
|
||
key : "loginId",
|
||
align : "center"
|
||
}];
|
||
```
|
||
|
||
具体请参阅文档：*https://ant.design/components/table-cn/#Column*
|
||
|
||
注意，在配置列的时候，有一些列选项是输属于 *procomponents* 新增的，所以有些属性我们需要参阅 *procomponents* 的文档
|
||
|
||
文档：
|
||
|
||
- *columns* 列定义：*https://procomponents.ant.design/components/table#columns-%E5%88%97%E5%AE%9A%E4%B9%89*
|
||
|
||
- *valueType* 对应的值：*https://procomponents.ant.design/components/schema#valuetype-%E5%88%97%E8%A1%A8*
|
||
|
||
如果是单纯的渲染某一个值，那么直接配置 *dataIndex* 即可，但是很多时候，我们是根据数据对应的值渲染成其他的东西，例如：
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-18-064046.png" alt="image-20221118144046443" style="zoom:50%;" />
|
||
|
||
那么这个时候，咱们就需要使用到 *render*。
|
||
|
||
如果不要搜索，可以将搜索选项关闭：*search：false*
|
||
|
||
|
||
|
||
5. 设置全局的 *CSS* 样式
|
||
|
||
在 *src* 目录下面创建一个 *global.css* 的文件，该 *CSS* 文件就是一个全局的样式：
|
||
|
||
*https://umijs.org/docs/guides/directory-structure#globalcsslesssassscss*
|
||
|
||
|
||
|
||
6. 如何回填表单的值
|
||
|
||
我们在修改的时候，经常会涉及到回填表单的值，在 *ant design* 里面，使用 *setFieldsValue*
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-22-074057.png" alt="image-20221122154057171" style="zoom:50%;" />
|
||
|
||
|
||
|
||
7. 关于发送请求获取数据
|
||
|
||
有两种处理方式：
|
||
|
||
- 通过 *dispatch* 一个 *action* 到状态仓库，然后状态仓库来发请求，请求回来的数据放入到数据仓库中（管理员模块）
|
||
- 适用于数据量不多
|
||
- 多个组件要共享某一块数据
|
||
- 直接在组件里面请求数据
|
||
- 数据量很大，在向服务器发送请求的时候，只能分页请求
|
||
- 不需要和其他组件共享
|
||
|
||
|
||
|
||
8. 关于在 *ProTable* 组件中使用 *request* 发送请求
|
||
|
||
*ProTable* 有一个重要的属性叫做 *request*，该属性对应的值一般是一个异步函数，该异步函数自动接受一个 *params*，*params* 中会有默认的当前页码（*current*）和每一页的条数（*pageSize*），这两个值会有默认值，*current* 默认为 *1*，*pageSize* 默认为 *20*，可以通过配置 *pagination* 属性来修改 *current* 和 *pageSize* 的值
|
||
|
||
```js
|
||
<ProTable
|
||
headerTitle="用户列表"
|
||
pagination={{
|
||
showQuickJumper: true,
|
||
showSizeChanger: true,
|
||
pageSizeOptions: [5, 10, 15, 20],
|
||
...pagination,
|
||
onChange: handlePageChange
|
||
}}
|
||
request={async (params) => {
|
||
console.log(params);
|
||
}}
|
||
/>
|
||
```
|
||
|
||
|
||
|
||
9. 刷新表格
|
||
|
||
获取到表格的实例（通过 *ref*），注意这里是 *actionRef*，然后调用 *reload* 方法
|
||
|
||
```react
|
||
<ProTable
|
||
actionRef={tableRef}
|
||
...
|
||
/>
|
||
```
|
||
|
||
```js
|
||
tableRef.current.reload();
|
||
```
|
||
|
||
请参阅：*https://procomponents.ant.design/components/table/#actionref-%E6%89%8B%E5%8A%A8%E8%A7%A6%E5%8F%91*
|
||
|
||
|
||
|
||
10. 如何新增不再导航栏显示的页面
|
||
|
||
只需要一个配置项即可
|
||
|
||
```js
|
||
hideInMenu : true
|
||
```
|
||
|
||
更多的配置项，请参阅：*https://pro.ant.design/zh-CN/docs/new-page*
|
||
|
||
|
||
|
||
11. *Warning: Cannot update a component (`InternalFormItem`) while rendering a different component (`UserForm`).*
|
||
|
||
该警告出现的原因，是因为在初次渲染组件的时候，我们设置了数据的回填，导致组件初次还没有渲染完毕，又在更新
|
||
|
||
如何解决，也非常简单，我们等待第一次渲染完毕后再进行数据的回填，所以我们将回填的代码放入 *useEffect*
|
||
|
||
```js
|
||
useEffect(() => {
|
||
if (formRef.current) {
|
||
formRef.current.setFieldsValue(userInfo);
|
||
}
|
||
}, [userInfo]);
|
||
```
|
||
|
||
|
||
|
||
12. 关于使用 *markdown* 编辑器做修改操作时光标跳转的问题
|
||
|
||
该问题的出现是因为对应的组件在重新渲染时，*markdown* 编辑器回填了数据多次
|
||
|
||
要解决这个问题也很简单，我们只需要设置一个状态值，第一次 *markdown* 回填了数据后，之后就不再让编辑器回填数据
|
||
|
||
```js
|
||
useEffect(()=>{
|
||
if(formRef.current && firstIn && bookInfo){
|
||
formRef.current.setFieldsValue(bookInfo);
|
||
// 关键就是关于编辑器的回填
|
||
editorRef.current.getInstance().setHTML(bookInfo?.bookIntro);
|
||
// 将 firstIn 设置为 false
|
||
setFirstIn(false);
|
||
}
|
||
if(formRef.current){
|
||
formRef.current.setFieldsValue(bookInfo);
|
||
}
|
||
},[bookInfo])
|
||
```
|
||
|
||
|
||
|
||
13. 关于登录页面的 Canvas 动画，使用到的是一个第三方库，叫做 *react-canvas-nest*
|
||
|
||
*https://www.npmjs.com/package/react-canvas-nest*
|
||
|
||
```react
|
||
<ReactCanvasNest
|
||
config={{
|
||
pointColor: '255, 0, 0',
|
||
count: 66,
|
||
follow: false,
|
||
}}
|
||
style={{ zIndex: 1 }}
|
||
/>
|
||
```
|
||
|
||
|
||
|
||
14. 配置初始化数据
|
||
|
||
在 umi 的运行时配置（*app.js/ts*）中，有一个叫做 *getInitialState* 方法，该方法可以配置一些初始化的数据，回头在其他组件中通过 *useModel* 来获取你返回的初始化数据
|
||
|
||
*https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81*
|
||
|
||
后台管理系统导航守卫逻辑如下：
|
||
|
||
```js
|
||
// 全局初始化数据配置，用于 Layout 用户信息和权限初始化
|
||
// 更多信息见文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate
|
||
export async function getInitialState() {
|
||
if (location.pathname === '/login') {
|
||
// 强行跳登录页
|
||
// 判断是否有有效的 token
|
||
const token = localStorage.getItem('adminToken');
|
||
if (token) {
|
||
const result = await AdminController.getInfo();
|
||
console.log(result, 'result');
|
||
if (result.data) {
|
||
// 不仅有 token，而且 token 是有效的
|
||
// 不允许你去 login
|
||
message.warning('请先退出后在登录');
|
||
history.go(-1);
|
||
}
|
||
}
|
||
} else {
|
||
// 强行要跳内部页面
|
||
const result = await AdminController.getInfo();
|
||
if (result.data) {
|
||
// 说明有 token，并且 token 有效
|
||
// 获取该 id 对应的管理员信息
|
||
const { data } = await AdminController.getAdminById(result.data._id);
|
||
// 这里返回的就是一个全局的初始化数据
|
||
// 之后各个组件都可以通过 useModel 获取到该初始数据
|
||
return {
|
||
name: data.nickname,
|
||
avatar: data.avatar,
|
||
adminInfo: data,
|
||
};
|
||
} else {
|
||
// token 验证失败，跳转至登录
|
||
// 失效可能是因为 token 过期，也有可能是因为压根儿就没有 token，不管有没有，删除掉原有的
|
||
localStorage.removeItem("adminToken");
|
||
location.href = "/login";
|
||
message.warning('请重新登录');
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
15. 配置请求和响应拦截器也是在 *app.js/ts* 运行时配置中进行配置
|
||
|
||
*https://umijs.org/docs/api/runtime-config#request*
|
||
|
||
```js
|
||
export const request = {
|
||
timeout : 3000,
|
||
// 请求拦截器
|
||
requestInterceptors: [function(url, options){
|
||
// 从本地获取 token
|
||
const token = localStorage.getItem("adminToken");
|
||
if(token){
|
||
options.headers['Authorization'] = "Bearer " + token;
|
||
}
|
||
return {url, options};
|
||
}]
|
||
}
|
||
```
|
||
|
||
|
||
|
||
16. 退出登录
|
||
|
||
退出登录只需要在运行时配置文件 *app.js/ts* 的 *layout* 里面书写 *logout* 对应的回调函数逻辑即可：
|
||
|
||
```js
|
||
logout : ()=>{
|
||
// 删除本地 token
|
||
localStorage.removeItem("adminToken");
|
||
// 跳转到登录页面
|
||
location.href = "/login";
|
||
message.success('退出登录成功');
|
||
}
|
||
```
|
||
|
||
|
||
|
||
17. 关于权限
|
||
|
||
*https://umijs.org/docs/max/access*
|
||
|
||
首先需要在构建时配置文件 *umirn.js/ts* 中启动 *access*，之后在 *src* 目录下面创建一个 *access.js/ts* 文件
|
||
|
||
接下来在路由配置中，为每一个路由配置对应权限，例如：
|
||
|
||
```js
|
||
{
|
||
name: '首页',
|
||
path: '/home',
|
||
component: './Home',
|
||
icon : "HomeOutlined",
|
||
access : "NormalAdmin" // 普通管理员能够访问
|
||
},
|
||
{
|
||
name : "管理员",
|
||
path : "/admin",
|
||
icon: 'UserOutlined',
|
||
access : "SuperAdmin", // 超级管理员能够访问
|
||
...
|
||
},
|
||
```
|
||
|
||
最后在 *access.js* 文件中，根据登录的账户的 *permission* 来确定返回的对象
|
||
|
||
```js
|
||
// 在该函数中，我们需要返回一个对象，对象里面对应一个一个权限项目，每个权限项目对应的值是一个布尔值
|
||
// true 代表有权限 false 代表没有权限
|
||
|
||
// 假设现在是超管登录 adminInfo.permission ---> 1
|
||
// { SuperAdmin : true, NormalAdmin : true}
|
||
// 假设现在登录的是普通管理员 adminInfo.permission ---> 2
|
||
// { SuperAdmin : false, NormalAdmin : true}
|
||
|
||
if (initialState) {
|
||
return {
|
||
SuperAdmin: initialState.adminInfo.permission === 1,
|
||
NormalAdmin:
|
||
initialState.adminInfo.permission === 1 ||
|
||
initialState.adminInfo.permission === 2,
|
||
};
|
||
} else {
|
||
return {
|
||
SuperAdmin : false,
|
||
NormalAdmin : false
|
||
}
|
||
}
|
||
```
|
||
|
||
针对页面中某一块区域如果要设置权限，那么可以通过 *useAccess* *hook* 函数获取到当前的权限对象（*access.js* 中我们返回的对象）
|
||
|
||
之后通过 *Access* 组件包裹有权限的区域，设置 *accessible* 属性即可
|
||
|
||
```react
|
||
<Access accessible={access.SuperAdmin}>
|
||
//...
|
||
</Access>
|
||
```
|
||
|
||
|
||
|
||
18. 在页面中获取全局初始化数据
|
||
|
||
可以通过 *useModel* 来进行获取，示例如下：
|
||
|
||
```js
|
||
const { initialState } = useModel("@@ininitialState");
|
||
```
|
||
|
||
|
||
|
||
19. 关于首页的 Echarts
|
||
|
||
*https://umijs.org/docs/max/charts*
|
||
|
||
首先安装 *Echart* 相关的依赖：
|
||
|
||
```js
|
||
npm install @ant-design/charts
|
||
```
|
||
|
||
之后引入对应的图表，做好数据配置，直接使用即可。
|
||
|
||
具体可以使用的图表类型可以参阅：*https://charts.ant.design/*
|
||
|
||
|
||
|
||
20. *mf-dep____vendor.0d0d1aca.js:389066 Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.*
|
||
|
||
该问题是 *umi.js* 内部的问题，并非我们的代码，随着 *umi.js* 的升级，期望后期官方能够修复这个问题。
|
||
|
||
可以参阅：*https://github.com/ant-design/pro-components/issues/6162*
|
||
|
||
关于运行时配置中，*layout* 能够配置的项目，可以参阅：*https://procomponents.ant.design/components/layout/#prolayout*
|
||
|
||
|
||
|
||
## 项目总结
|
||
|
||
- *dva*
|
||
- *antd* 组件库以及 *antd pro* 后台集成方案
|
||
- *umi.js 4.x*
|
||
|
||
整个项目使用到的是 *react* 技术栈，前端路由使用到了 *react-router*，数据流方案采用的是基于 *redux* 和 *redux-saga* 的 *dva*，整体项目框架采用 *umijs.4.x* 搭建，里面使用到了 *antd pro* 后台集成解决方案。
|
||
|
||
|
||
|
||
|
||
|
||
## 后期课程安排
|
||
|
||
- 入门篇
|
||
- *React* 核心知识（你必须要掌握的）
|
||
- 基础语法
|
||
- *Hooks*
|
||
- 周边库
|
||
- *router*
|
||
- *redux*
|
||
- **课程短、学习快、只讲最必要的知识**
|
||
- 就业篇
|
||
- 类似于三阶段的笔面试题
|
||
- 大致目录如下
|
||
- 官方文档的进阶部分
|
||
- 高级概念
|
||
- 事件系统
|
||
- 渲染流程
|
||
- *React* 架构
|
||
- *v18* 的一些新特性
|
||
- 常见应用场景
|
||
- 就业篇会长期保持更新
|
||
- 源码篇
|