使用umi3和antd pro5从零实现全栈中后台管理系统

淡淡的烟草味﹌ 2022-12-27 08:23 167阅读 0赞

### 0、前言 ###

使用umi3和antd pro5从零实现全栈中后台管理系统  
![image.png][]

#### 0-1、涉及技术栈 ####

**前端： TS 、 React、React Hooks、 umi3、antd-pro5**  
**后端: express、mongodb、jwt**  
\*\*

#### 0-2、实现的功能 ####

*  后端用户鉴权
 *  前端权限管理
 *  用户密码加密
 *  封装一套通用弹窗表单组件，实现新建、修改、详情功能
 *  用户登录注册(首次需要后端自己添加一条用户登录信息)
 *  ![image.png][image.png 1]
 *  后端通过expressJWT实现接口鉴权与添加白名单
 *  后端日志功能
 *  后端封装方法统一处理返回信息
 *  实现列表的筛选、排序、删除、批量删除
 *  实现新建、修改、查看详情

### 1、初始化前端项目 ###

umi [官网][Link 1]  
[coding网址 ][coding_]

yarn create umi myapp
    npm i 
    npm run dev

#### 1、设置config下的proxy代理 ####

dev: { 
        '/api/': { 
          target: "http://localhost:3000",
          changeOrigin: true,
          pathRewrite: {  '^': '' },
        },
      },

#### 2、登录 ####

修改src/service/login.ts 接口改为/api/user/login

export async function fakeAccountLogin(params: LoginParamsType) { 
      return request<API.LoginStateType>('/api/user/login', { 
        method: 'POST',
        data: params,
      });
    }

###### 存储token pages/user/login/index.tsx ######

localStorage.setItem('token' , msg.token)

使用token services/user.ts

export async function queryCurrent() { 
      return request<API.CurrentUser>('/api/currentUser',  headers: { 
          Authorization :  'Bearer ' + `${ localStorage.getItem('token') }`
        }
    }

每次请求都带上token src/app.tsx

export const request: RequestConfig = { 
      errorHandler,
      headers: {  
        Authorization :  'Bearer ' + `${ localStorage.getItem('token')}`
      }
    };

退出 RightContent/AvatarDropdown.tsx

localStorage.removeItem('token')

#### 3、pro5参考文档 ####

[https://procomponents.ant.design/components/form\#proform-1][https_procomponents.ant.design_components_form_proform-1]

#### 4、实现一个用户管理 ####

![image.png][image.png 2]

#### 5、列表页 ####

pages/ListTableList/index.tsx

import {  PlusOutlined } from '@ant-design/icons';
    import {  Button, Divider, message, Avatar } from 'antd';
    import React, {  useState, useRef } from 'react';
    import {  PageContainer, FooterToolbar } from '@ant-design/pro-layout';
    import ProTable, {  ProColumns, ActionType } from '@ant-design/pro-table';
    import HandleForm from './components/HandleForm';
    import {  TableListItem } from './data.d';
    import {  queryRule, updateRule, addRule, removeRule } from './service';
    import moment from 'moment';
    /** * 操作提交 * @param fields */
    const handleSubmit = async (_id?: string, fields?: TableListItem) => { 
    
      let title = _id ? '修改' : '新增';
      const hide = message.loading(`正在${ title}`);
      try { 
        if (_id) { 
          await updateRule({ 
            _id,
            ...fields,
          });
        } else { 
          await addRule({  ...fields });
        }
        hide();
        message.success(`${ title}成功`);
        return true;
      } catch (error) { 
        hide();
        message.error(`${ title}失败`);
        return false;
      }
    };
    
    /** * 删除节点 * @param selectedRows */
    const handleRemove = async (selectedRows: string[], _id: string) => { 
      // console.log(selectedRows,_id,'selectedRows>>>>')
      const hide = message.loading('正在删除');
      // return
      try { 
        await removeRule({ 
          _id: _id ? _id : selectedRows,
        });
        hide();
        message.success('删除成功');
        return true;
      } catch (error) { 
        hide();
        message.error('删除失败');
        return false;
      }
    };
    
    const TableList: React.FC<{ }> = () => { 
      const [modalVisible, handleModalVisible] = useState<boolean>(false);
      const [currentInfo, handleSaveCurrentInfo] = useState<TableListItem | null>(null);
      const [isDetail, setDetail] = useState<boolean>(false);
      const actionRef = useRef<ActionType>();
      const [selectedRowsState, setSelectedRows] = useState<any>([]);
      const columns: ProColumns<TableListItem>[] = [
        { 
          title: '用户名',
          dataIndex: 'username',
        },
        { 
          title: '密码',
          dataIndex: 'password',
          hideInDescriptions: true, //详情页不显示
          hideInTable: true,
        },
        { 
          title: '角色',
          dataIndex: 'access',
          search: false,
          filters: [
            {  text: '普通用户', value: 'user' },
            {  text: '管理员', value: 'admin' },
          ],
          valueEnum: { 
            user: {  text: '普通用户' },
            admin: {  text: '管理员' },
          },
        },
        { 
          title: '_id',
          dataIndex: '_id',
          sorter: true,
          hideInForm: true,
          search: false,
        },
        { 
          title: '头像',
          dataIndex: 'avatar',
          search: false,
          hideInForm: true,
          render: (dom, entity) => { 
            return <Avatar src={ entity.avatar} alt="" />;
          },
        },
        { 
          title: '邮箱',
          dataIndex: 'email',
        },
        { 
          title: '更新时间',
          dataIndex: 'updatedAt',
          sorter: true,
          hideInForm: true,
          search: false,
          renderText: (val: string) => { 
            if (!val) return '';
            return moment(val).fromNow(); // 绝对时间转化成相对时间
          },
        },
        { 
          title: '创建时间',
          dataIndex: 'createdAt',
          sorter: true,
          hideInForm: true,
          search: false,
          valueType: 'dateTime',
        },
        { 
          title: '操作',
          dataIndex: 'option',
          valueType: 'option',
          render: (_, record) => (
            <>
              <a
                href="javascript:;"
                onClick={ () => { 
                  handleModalVisible(true), handleSaveCurrentInfo(record);
                }}
              >
                修改
              </a>
              <Divider type="vertical" />
              <a
                href="javascript:;"
                onClick={ () => { 
                  handleModalVisible(true), handleSaveCurrentInfo(record), setDetail(true);
                }}
              >
                详情
              </a>
              <Divider type="vertical" />
              <a
                href="javascript:;"
                onClick={ async () => { 
                  await handleRemove([], record._id as 'string');
                  // 刷新
                  actionRef.current?.reloadAndRest?.();
                }}
              >
                删除
              </a>
            </>
          ),
        },
      ];
    
      return (
        <PageContainer>
          <ProTable<TableListItem>
            headerTitle="用户管理"
            actionRef={ actionRef}
            rowKey="_id"
            search={ { 
              labelWidth: 120,
            }}
            toolBarRender={ () => [
              <Button type="primary" onClick={ () => handleModalVisible(true)}>
                <PlusOutlined />
                新增
              </Button>,
            ]}
            request={ (params, sorter, filter) => queryRule({  ...params, sorter, filter })}
            columns={ columns}
            form={ { 
              submitter: false,
            }}
            pagination={ {  defaultPageSize: 5 }}
            rowSelection={ { 
              onChange: (selected, selectedRows) => { 
                setSelectedRows(selected);
              },
            }}
          />
          <HandleForm
            onCancel={ () => { 
              handleModalVisible(false), handleSaveCurrentInfo({ }), setDetail(false);
            }}
            modalVisible={ modalVisible}
            values={ currentInfo}
            isDetail={ isDetail}
            onSubmit={ async (values) => { 
              const success = await handleSubmit(currentInfo?._id, values);
              if (success) { 
                handleModalVisible(false);
                if (actionRef.current) { 
                  actionRef.current.reload();
                }
              }
            }}
          ></HandleForm>
          { selectedRowsState?.length > 0 && (
            <FooterToolbar
              extra={ 
                <div>
                  已选择
                  <a style={ {  fontWeight: 600 }}>{ selectedRowsState.length}</a> 项
                </div>
              }
            >
              <Button
                onClick={ async () => { 
                  await handleRemove(selectedRowsState, '');
                  setSelectedRows([]);
                  actionRef.current?.reloadAndRest?.();
                }}
              >
                批量删除
              </Button>
            </FooterToolbar>
          )}
        </PageContainer>
      );
    };
    
    export default TableList;

pages/ListTableList/data.d.ts

export interface TableListItem { 
      _id?: string;
      username?: string;
      password?: string;
      avatar?: string;
      access?: string;
      email?: string;
    } 
    
    export interface TableListPagination { 
      total: number;
      pageSize: number;
      current: number;
    }
    
    export interface TableListData { 
      list: TableListItem[];
      pagination: Partial<TableListPagination>;
    }
    
    export interface TableListParams { 
      _id?: string;
      username?: string;
      password?: string;
      avatar?: string;
      access?: string;
      email?: string;
      pageSize?: number;
      currentPage?: number;
      filter?: {  [key: string]: any[] };
      sorter?: {  [key: string]: any };
    }

pages/ListTableList/service.ts

import {  request } from 'umi';
    import {  TableListParams } from './data.d';
    
    export async function queryRule(params?: TableListParams) { 
      return request('/api/user/account', { 
        params,
      });
    }
    
    export async function removeRule(params: {  _id: string|string[] }) { 
      return request('/api/user/account', { 
        method: 'DELETE',
        data: params
      });
    }
    
    export async function addRule(params: TableListParams) { 
      return request('/api/user/account', { 
        method: 'POST',
        data: { 
          ...params
        },
      });
    }
    
    export async function updateRule(params: TableListParams) { 
      return request(`/api/user/account?_id=${ params._id}`, { 
        method: 'PUT',
        data: { 
          ...params
        },
      });
    }

#### 6、弹窗表单组件 ####

###### pages/ListTableList/components/HandleForm.d.ts ######

import React from 'react';
    import {  Modal } from 'antd';
    import ProForm, {  ProFormText, ProFormRadio } from '@ant-design/pro-form';
    import {  TableListItem } from '../data';
    
    export interface FormValueType extends Partial<TableListItem> { 
      username?: string;
      password?: string;
      type?: string;
      time?: string;
      frequency?: string;
    }
    
    export interface CreateFormProps { 
      onCancel: (flag?: boolean, formVals?: FormValueType) => void;
      onSubmit: (values?: FormValueType) => Promise<void>;
      modalVisible: boolean;
      values: Partial<TableListItem> | null;
      isDetail?: boolean;
    }
    
    const CreateForm: React.FC<CreateFormProps> = ({ 
      isDetail,
      onCancel,
      modalVisible,
      values,
      onSubmit,
    }) => { 
      if (values?.password) values.password = '******';
      return (
        <Modal
          destroyOnClose
          title={ !values ? '新建用户' : isDetail ? '用户详情' : '更新用户'}
          visible={ modalVisible}
          onCancel={ () => onCancel()}
          footer={ null}
          width={ 840}
        >
          <ProForm
            initialValues={ values as TableListItem}
            onFinish={ async (values: Partial<TableListItem>) => { 
              !isDetail && onSubmit(values);
            }}
            { ...(isDetail && {  submitter: false })}
          >
            <ProFormText
              rules={ [{  required: true, message: '请输入用户名!' }]}
              disabled={ isDetail}
              label="用户名"
              name="username"
            />
            <ProFormText
              rules={ [{  required: true, message: '请输入密码!' }]}
              disabled={ isDetail}
              label="密码"
              name="password"
            />
            <ProFormText
              rules={ [{  required: true, message: '请输入邮箱!' }]}
              disabled={ isDetail}
              label="邮箱"
              name="email"
            />
            <ProFormRadio.Group
              name="access"
              disabled={ isDetail}
              label="角色"
              rules={ [{  required: true, message: '请选择角色!' }]}
              options={ [
                { 
                  label: '管理员',
                  value: 'admin',
                },
                { 
                  label: '用户',
                  value: 'user',
                },
              ]}
            />
            <ProFormText
              // rules={[{ required: true, message: '请填写头像!' }]}
              disabled={ isDetail}
              label="头像"
              name="avatar"
            />
          </ProForm>
        </Modal>
      );
    };
    
    export default CreateForm;

#### 7、登录和用户信息services ####

pages/services/login.ts

import {  request } from 'umi';
    
    export interface LoginParamsType { 
      username: string;
      password: string;
      mobile: string;
      captcha: string;
      type: string;
    }
    
    export async function fakeAccountLogin(params: LoginParamsType) { 
      return request<API.LoginStateType>('/api/user/login', { 
        method: 'POST',
        data: params
      });
    }
    
    export async function getFakeCaptcha(mobile: string) { 
      return request(`/api/login/captcha?mobile=${ mobile}`);
    }
    
    export async function outLogin() { 
      return request('/api/login/outLogin');
    }

pages/services/user.ts

import {  request } from 'umi';
    
    export async function query() { 
      return request<API.CurrentUser[]>('/api/users');
    }
    
    export async function queryCurrent() { 
      return request<API.CurrentUser>('/api/currentUser', { 
        headers: {  
          Authorization :  'Bearer ' + `${ localStorage.getItem('token')}`
        }
      });
    }
    
    export async function queryNotices(): Promise<any> { 
      return request<{  data: API.NoticeIconData[] }>('/api/notices');
    }

### 2、初始化server端项目 ###

[参考链接][Link 2] 实现链接数据库的例子˘

#### 0、实现的功能 ####

*  处理post请求（body-parser）
 *  处理跨域 (cors)
 *  处理cookie (cookie-parser)
 *  打印日志 (morgan)
 *  设置token信息，解析token信息 (jsonwebtoken)
 *  全局验证jwt (express-jwt)
 *  实现登录返回token，全局验证token
 *  实现注册密码加密 （md5）

npm i express mongoose body-parser jsonwebtoken http-status-codes -S

#### 1、入口文件 app.js ####

#### 2、开启mongodb数据库 ####

// 没有/data/db需要创建
    cd /usr/local/mongodb/bin
    sudo ./mongod  -dbpath /data/db/

#### 3、配置config.js ####

module.exports={ 
        dbUrl:'mongodb://localhost:27017/pro5App',
        screct:'pro5',
        EXPIRESD:60*60*24
    }

#### 4、路由 routes ####

routes/index.js

const {  userRouter } = require("./user");
    module.exports = { 
      userRouter,
    };

routers/user.js

#### 5、模型model ####

model/index.js

model/user.js

#### 6、工具函数utils ####

utils/resModule.js

class BaseModel { 
        constructor(data,message) { 
            if(typeof data === 'string') { 
                this.message = data
                data = null
                message = null
            }
            if(data){ 
                this.data = data
            }
            if(message){ 
                this.message = message
            }
        }
    }
    
    class SuccessModel extends BaseModel { 
        constructor(data,message){ 
            super(data,message)
            this.errno = 0
            this.code = 200
            this.type = "success"
        }
    }
    
    class ErrorModel extends BaseModel { 
        constructor(data,message,code){ 
            super(data,message)
            this.errno = -1
            this.type = "error"
            this.code = code
        }
    }
    
    module.exports = { 
        SuccessModel,
        ErrorModel
    }

### 3、项目地址与参考链接 ###

前端地址：[https://rockshang.coding.net/public/react\_pro\_server/umi3pro5/git][https_rockshang.coding.net_public_react_pro_server_umi3pro5_git]  
服务端地址：[https://rockshang.coding.net/public/react\_pro\_server/umi3pro5Server/git/files][https_rockshang.coding.net_public_react_pro_server_umi3pro5Server_git_files]  
umi [官网][Link 1]  
pro5参考文档：[https://procomponents.ant.design/components/form\#proform-1][https_procomponents.ant.design_components_form_proform-1]

[image.png]: /images/20221120/22bed607108e4dbdb57cff750727d709.png
[image.png 1]: /images/20221120/a4499ef9042b4b36aa5b2175907852b8.png
[Link 1]: https://www.baidu.com/link?url=GFzOIcaiu0CGKe1fotfAOuUl0BWRmWhudJB5JfgPJb7&wd=&eqid=d057fc7e00068d00000000045fcda4a6
[coding_]: https://rockshang.coding.net/p/react_pro_server/d/umi3pro5/git
[https_procomponents.ant.design_components_form_proform-1]: https://procomponents.ant.design/components/form#proform-1
[image.png 2]: /images/20221120/e824ad3752bd42ffbe9fb2111c7821ec.png
[Link 2]: https://www.cnblogs.com/deng-jie/p/12787985.html
[https_rockshang.coding.net_public_react_pro_server_umi3pro5_git]: https://rockshang.coding.net/public/react_pro_server/umi3pro5/git
[https_rockshang.coding.net_public_react_pro_server_umi3pro5Server_git_files]: https://rockshang.coding.net/public/react_pro_server/umi3pro5Server/git/files