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

注意： 如果你

• 需要支持 IE 8 或更低版本的浏览器
• 需要支持 React 16.8.0 以下的 React
• 需要跑在 Node 10 以下的环境中
• 有很强的 webpack 自定义需求和主观意愿
• 需要选择不同的路由方案 请不要选择umi来开发

0、前言

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

0-1、涉及技术栈

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

---

0-2、实现的功能

• 后端用户鉴权
• 前端权限管理
• 用户密码加密
• 封装一套通用弹窗表单组件，实现新建、修改、详情功能
• 用户登录注册(首次需要后端自己添加一条用户登录信息)

• 后端通过expressJWT实现接口鉴权与添加白名单
• 后端日志功能
• 后端封装方法统一处理返回信息
• 实现列表的筛选、排序、删除、批量删除
• 实现新建、修改、查看详情

---

1、初始化前端项目

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参考文档

procomponents.ant.design/components/…

4、实现一个用户管理

总结： 总体来说使用了umi和antd方便了我们的开发过程，省去了对路由和样式消耗的精力，可以全力投身开发业务逻辑中来