需求分析

  • 注册 / 登录
  • 用户管理（管理员）

技术选型

前端

  • HTML + CSS + JavaScript 前端三件套
  • React 开发框架
  • Ant Design Pro 项目模板
  • 正向代理

后端

  • Java
  • Spring + SpringMVC + SpringBoot 开发框架
  • MyBatis + MyBatis-Plus 持久层框架
  • MySQL 数据库
  • JUint 单元测试

部署

  • Linux 单机部署
  • Nginx
  • Docker 容器
  • 容器托管平台

项目初始化

前端初始化

  • 引入 Ant Design Pro 框架
  • 框架瘦身

后端初始化

  • 环境搭建
  • 整合框架
  • demo 测试

数据库表设计

用户表：

列名 说明 类型
id 主键 bigint
user_name 昵称 varchar
user_account 账号 varchar
avatar_url 头像 varchar
gender 性别（0-男 1-女） tinyint
password 密码 varchar
phone 电话 varchar
email 邮箱 varchar
user_status 用户状态（0-正常） tinyint
create_time 创建时间 datetime
update_time 更新时间 datetime
is_delete 是否删除（逻辑删除） tinyint
user_role 角色权限 0-普通用户 1-管理员 tinyint

功能实现

后端

  • 注册功能

    • 逻辑（Service 层）

      • 校验用户的账号和密码是否合法

      • 密码加密

      • 添加用户数据到数据库

  • 登录功能

    • 逻辑（Service 层）

      • 校验用户的账号和密码是否合法

      • 校验密码是否正确，与数据库中的密文密码对比

      • 用户信息脱敏

      • 记录用户的登录态（session），存储到服务器上（SpringBoot 封装的 Tomcat 服务器）

      • 返回脱敏后的用户信息

    • 登录接口（Controller 层）

      • 接收参数：用户账号、密码
      • 请求类型：POST
      • 请求体：JSON 格式数据
      • 返回值：用户信息（脱敏）

  • 用户管理功能
    ！！！必须鉴权

    • 查询用户
      • 允许根据用户名查询
    • 删除用户
      • 允许根据 id 删除用户

  • 用户注销功能

前端

  • 登录页面开发

  • 正向代理

    • application.yaml 指定接口：

      1
      2
      servlet:
        context-path: /api

    • proxy.ts 指定代理（正向代理）：

      1
      2
      3
      4
      5
      6
      dev: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
        },
      },

  • 注册页面开发

  • 获取用户登录态（获取当前用户的信息）

  • 用户管理功能

  • 用户注销功能

代码优化

后端

  • 通用返回对象
    目的：告诉前端在业务层面是成功还是失败
    • 自定义错误码
    • 返回对象工具类
  • 封装全局异常处理
    • 定义业务异常类
    • 编写全局异常处理器

前端

  • 对接后端返回值，取 data
  • 全局响应处理

项目部署

  • 原始前后端部署
  • 宝塔 Linux
  • Docker 容器
  • 容器平台