0、前言

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

0-1、涉及技术栈

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

0-2、实现的功能

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

1、初始化前端项目

umi 官网
coding网址 

  1. yarn create umi myapp
  2. npm i 
  3. npm run dev

1、设置config下的proxy代理

  1.   dev: {
  2.     '/api/': {
  3.       target: "http://localhost:3000",
  4.       changeOrigin: true,
  5.       pathRewrite: { '^': '' },
  6.     },
  7.   },

2、登录

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

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

存储token pages/user/login/index.tsx
  1. localStorage.setItem('token' , msg.token)

使用token services/user.ts

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

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

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

退出 RightContent/AvatarDropdown.tsx

  1.  localStorage.removeItem('token')

3、pro5参考文档

https://procomponents.ant.design/components/form#proform-1

4、实现一个用户管理

image.png

5、列表页

pages/ListTableList/index.tsx

  1. import { PlusOutlined } from '@ant-design/icons';
  2. import { Button, Divider, message, Avatar } from 'antd';
  3. import React, { useState, useRef } from 'react';
  4. import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
  5. import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
  6. import HandleForm from './components/HandleForm';
  7. import { TableListItem } from './data.d';
  8. import { queryRule, updateRule, addRule, removeRule } from './service';
  9. import moment from 'moment';
  10. /**
  11.  * 操作提交
  12.  * @param fields
  13.  */
  14. const handleSubmit = async (_id?: string, fields?: TableListItem) => {
  16.   let title = _id ? '修改' : '新增';
  17.   const hide = message.loading(`正在${title}`);
  18.   try {
  19.     if (_id) {
  20.       await updateRule({
  21.         _id,
  22.         ...fields,
  23.       });
  24.     } else {
  25.       await addRule({ ...fields });
  26.     }
  27.     hide();
  28.     message.success(`${title}成功`);
  29.     return true;
  30.   } catch (error) {
  31.     hide();
  32.     message.error(`${title}失败`);
  33.     return false;
  34.   }
  35. };
  37. /**
  38.  *  删除节点
  39.  * @param selectedRows
  40.  */
  41. const handleRemove = async (selectedRows: string[], _id: string) => {
  42.   // console.log(selectedRows,_id,'selectedRows>>>>')
  43.   const hide = message.loading('正在删除');
  44.   // return
  45.   try {
  46.     await removeRule({
  47.       _id: _id ? _id : selectedRows,
  48.     });
  49.     hide();
  50.     message.success('删除成功');
  51.     return true;
  52.   } catch (error) {
  53.     hide();
  54.     message.error('删除失败');
  55.     return false;
  56.   }
  57. };
  59. const TableList: React.FC<{}> = () => {
  60.   const [modalVisible, handleModalVisible] = useState<boolean>(false);
  61.   const [currentInfo, handleSaveCurrentInfo] = useState<TableListItem | null>(null);
  62.   const [isDetail, setDetail] = useState<boolean>(false);
  63.   const actionRef = useRef<ActionType>();
  64.   const [selectedRowsState, setSelectedRows] = useState<any>([]);
  65.   const columns: ProColumns<TableListItem>[] = [
  66.     {
  67.       title: '用户名',
  68.       dataIndex: 'username',
  69.     },
  70.     {
  71.       title: '密码',
  72.       dataIndex: 'password',
  73.       hideInDescriptions: true, //详情页不显示
  74.       hideInTable: true,
  75.     },
  76.     {
  77.       title: '角色',
  78.       dataIndex: 'access',
  79.       search: false,
  80.       filters: [
  81.         { text: '普通用户', value: 'user' },
  82.         { text: '管理员', value: 'admin' },
  83.       ],
  84.       valueEnum: {
  85.         user: { text: '普通用户' },
  86.         admin: { text: '管理员' },
  87.       },
  88.     },
  89.     {
  90.       title: '_id',
  91.       dataIndex: '_id',
  92.       sorter: true,
  93.       hideInForm: true,
  94.       search: false,
  95.     },
  96.     {
  97.       title: '头像',
  98.       dataIndex: 'avatar',
  99.       search: false,
  100.       hideInForm: true,
  101.       render: (dom, entity) => {
  102.         return <Avatar src={entity.avatar} alt="" />;
  103.       },
  104.     },
  105.     {
  106.       title: '邮箱',
  107.       dataIndex: 'email',
  108.     },
  109.     {
  110.       title: '更新时间',
  111.       dataIndex: 'updatedAt',
  112.       sorter: true,
  113.       hideInForm: true,
  114.       search: false,
  115.       renderText: (val: string) => {
  116.         if (!val) return '';
  117.         return moment(val).fromNow(); // 绝对时间转化成相对时间
  118.       },
  119.     },
  120.     {
  121.       title: '创建时间',
  122.       dataIndex: 'createdAt',
  123.       sorter: true,
  124.       hideInForm: true,
  125.       search: false,
  126.       valueType: 'dateTime',
  127.     },
  128.     {
  129.       title: '操作',
  130.       dataIndex: 'option',
  131.       valueType: 'option',
  132.       render: (_, record) => (
  133.         <>
  134.           <a
  135.             href="javascript:;"
  136.             onClick={() => {
  137.               handleModalVisible(true), handleSaveCurrentInfo(record);
  138.             }}
  139.           >
  140.             修改
  141.           </a>
  142.           <Divider type="vertical" />
  143.           <a
  144.             href="javascript:;"
  145.             onClick={() => {
  146.               handleModalVisible(true), handleSaveCurrentInfo(record), setDetail(true);
  147.             }}
  148.           >
  149.             详情
  150.           </a>
  151.           <Divider type="vertical" />
  152.           <a
  153.             href="javascript:;"
  154.             onClick={async () => {
  155.               await handleRemove([], record._id as 'string');
  156.               // 刷新
  157.               actionRef.current?.reloadAndRest?.();
  158.             }}
  159.           >
  160.             删除
  161.           </a>
  162.         </>
  163.       ),
  164.     },
  165.   ];
  167.   return (
  168.     <PageContainer>
  169.       <ProTable<TableListItem>
  170.         headerTitle="用户管理"
  171.         actionRef={actionRef}
  172.         rowKey="_id"
  173.         search={{
  174.           labelWidth: 120,
  175.         }}
  176.         toolBarRender={() => [
  177.           <Button type="primary" onClick={() => handleModalVisible(true)}>
  178.             <PlusOutlined />
  179.             新增
  180.           </Button>,
  181.         ]}
  182.         request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
  183.         columns={columns}
  184.         form={{
  185.           submitter: false,
  186.         }}
  187.         pagination={{ defaultPageSize: 5 }}
  188.         rowSelection={{
  189.           onChange: (selected, selectedRows) => {
  190.             setSelectedRows(selected);
  191.           },
  192.         }}
  193.       />
  194.       <HandleForm
  195.         onCancel={() => {
  196.           handleModalVisible(false), handleSaveCurrentInfo({}), setDetail(false);
  197.         }}
  198.         modalVisible={modalVisible}
  199.         values={currentInfo}
  200.         isDetail={isDetail}
  201.         onSubmit={async (values) => {
  202.           const success = await handleSubmit(currentInfo?._id, values);
  203.           if (success) {
  204.             handleModalVisible(false);
  205.             if (actionRef.current) {
  206.               actionRef.current.reload();
  207.             }
  208.           }
  209.         }}
  210.       ></HandleForm>
  211.       {selectedRowsState?.length > 0 && (
  212.         <FooterToolbar
  213.           extra={
  214.             <div>
  215.               已选择
  216.               <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a> 项
  217.             </div>
  218.           }
  219.         >
  220.           <Button
  221.             onClick={async () => {
  222.               await handleRemove(selectedRowsState, '');
  223.               setSelectedRows([]);
  224.               actionRef.current?.reloadAndRest?.();
  225.             }}
  226.           >
  227.             批量删除
  228.           </Button>
  229.         </FooterToolbar>
  230.       )}
  231.     </PageContainer>
  232.   );
  233. };
  235. 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端项目

参考链接 实现链接数据库的例子˘

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

var createError = require("http-errors");
let express = require("express");
let bodyParser = require("body-parser");
let app = express();
var cors = require("cors");
var logger = require("morgan");
var cookieParser = require("cookie-parser");
const expressJWT = require("express-jwt");
const config = require("./config");
let { userRouter } = require("./routes/index");

// 处理post请求
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 打印日志
app.use(logger("dev"));
// 处理跨域
app.use(cors());

// 日志
app.use(logger("dev"));

// 使用cookie
app.use(cookieParser());

// 校验token，获取headers⾥里里的Authorization的token，要写在路由加载之前，静态资源之后
app.use(
  expressJWT({
    secret: config.Secret,
    algorithms: ["HS256"],
    credentialsRequired: true,
  }).unless({
    path: ["/api/user/register", "/api/login", "/api/user/account"], //⽩白名单,除了了这⾥里里写的地址，其他的URL都需要验证
  })
);

app.use("/api", userRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  if (err.name === "UnauthorizedError") {
    // 这个需要根据⾃自⼰己的业务逻辑来处理理
    res.status(401).send({ code: -1, msg: "token验证失败" });
  } else {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get("env") === "development" ? err : {};
    // render the error page
    res.status(err.status || 500);
    res.render("error");
  }
});

app.listen(3000, function () {
  console.log("服务在3000启动了");
});

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

let express = require("express");
let userRouter = express.Router();
const { UserModel } = require("../model/index");
let jwt = require("jsonwebtoken");
let config = require("../config");
const { SuccessModel, ErrorModel } = require("../utils/resModule");

// 用户注册接口
userRouter.post("/user/register", async function (req, res) {
  await UserModel.create(req.body);
  res.json(new SuccessModel("注册成功"));
});

// 登录接口
userRouter.post("/user/login", async function (req, res) {
  let { username, password } = req.body;
  let query = { username, password };
  try {
    let result = await UserModel.findOne(query);
    let resultJSON = result.toJSON();
    let token = jwt.sign(resultJSON, config.Secret,{expiresIn:config.EXPIRESD});
    res.json(new SuccessModel(token));
  } catch (error) {
    res.json(new ErrorModel("登录失败"));
  }
});

// 查询当前用户信息接口
userRouter.get("/user/currentInfo", async function (req, res) {
  let authorization = req.headers["authorization"];
  let token = authorization.split(" ")[1];
  let result = jwt.verify(token, config.Secret);
  res.json(new SuccessModel(result, "注册成功"));
});

// 查询所有用户信息
userRouter.get("/user/account", async function (req, res) {
  try {
    let result = await UserModel.find();
    res.json(new SuccessModel(result, "查询成功"));
  } catch (error) {
    res.json(new ErrorModel(error));
  }
});

// 删除用户信息
userRouter.delete("/user/account", async function (req, res) {
  let hasRes = await UserModel.findOne(req.body);
  if (hasRes) {
    let { deletedCount } = await UserModel.remove(req.body);
    if (deletedCount) {
      res.json(new SuccessModel("删除成功"));
    }
  } else {
    res.json(new ErrorModel("删除失败"));
  }
});

// 修改用户信息
userRouter.put("/user/account", async function (req, res) {
  let { nModified } = await UserModel.update(
    req.query,
    { $set: req.body },
    { multi: true }
  );
  if (nModified) {
    res.json(new SuccessModel("修改成功"));
  } else {
    res.json(new ErrorModel("修改失败"));
  }
});

module.exports = {
  userRouter,
};

5、模型model

model/index.js

const mongoose = require("mongoose");
const config = require("../config");
const { UserSchema } = require("./user");
// 注册
let connection = mongoose.createConnection(config.dbUrl, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
// 连接数据库
const UserModel = connection.model("User", UserSchema);
module.exports = {
  UserModel,
};

model/user.js

let mongoose = require("mongoose");
const Schema = mongoose.Schema;
// 定义数据结构
let UserSchema = new Schema({
  username: { type: String },
  email: { type: String },
  password: { type: String },
  avatar: { type: String },
  access: { type: String },
});
module.exports = {
    UserSchema
};

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/umi3pro5Server/git/files
umi 官网
pro5参考文档：https://procomponents.ant.design/components/form#proform-1