Web 平台开发日记 - 用户管理界面Web平台新增用户管理 UI、角色权限界面、密码安全、开发工具优化。用户管理页面是

Web 平台开发日记 - 第三章：用户管理界面实战

核心内容: 用户管理 UI、角色权限界面、密码安全、开发工具优化

📋 目录

目标
用户管理界面
角色管理界面
密码安全强化
开发工具整合
Bug 修复实战
项目实践总结

🎯 目标

项目GitHub地址：github.com/Mythetic/we…

👥 用户管理界面

界面设计

用户管理页面是管理系统的核心,提供了完整的用户生命周期管理功能。

核心功能模块:

用户管理界面
├── 搜索栏（关键字搜索用户）
├── 操作按钮（新增用户）
├── 用户列表表格
│   ├── 用户名
│   ├── 邮箱
│   ├── 手机号
│   ├── 角色标签
│   ├── 状态标识
│   └── 操作按钮
│       ├── 编辑
│       ├── 分配角色
│       ├── 修改密码
│       └── 删除
└── 分页组件

表单验证规则

在用户创建和编辑时,我们设置了严格的表单验证:

用户名验证:

必填项
长度限制: 3-50 个字符
只能包含字母、数字、下划线

邮箱验证:

必填项
标准邮箱格式验证

密码验证 (重点):

必填项（创建时）
最小长度: 8 个字符
必须包含大写字母 (A-Z)
必须包含小写字母 (a-z)
必须包含数字 (0-9)

手机号验证:

可选项
中国大陆手机号格式: 1[3-9]\d{9}

角色分配功能

角色分配允许管理员为用户设置多个角色,支持:

加载所有可用角色列表
多选角色（Checkbox Group）
显示角色的友好名称（displayName）
实时更新用户角色关联

关键实现:

// 显示角色的友好名称,而不是系统标识符
<el-checkbox v-for="role in roles" :key="role.id" :label="role.id">
  {{ role.displayName }}
</el-checkbox>

密码修改功能

管理员可以为用户重置密码,包含:

新密码输入（带复杂度验证）
确认密码输入（二次确认）
密码一致性验证
密码要求提示

🎭 角色管理界面

角色的双重标识

在实际开发中,我们发现角色需要两个标识:

字段	说明	示例	用途
name	系统标识符	`role:admin`	用于权限验证、API 调用
displayName	显示名称	`管理员`	用于界面显示、用户理解

为什么需要两个字段？

系统标识符 (name) - 用于程序内部识别,格式统一,不能随意修改
显示名称 (displayName) - 用于用户界面,可以是中文,容易理解

角色列表界面

角色管理页面展示:

角色管理界面
├── 新增角色按钮
├── 角色列表表格
│   ├── 角色标识 (name)
│   ├── 显示名称 (displayName)
│   ├── 描述信息
│   ├── 创建时间
│   └── 操作按钮
│       ├── 编辑
│       ├── 查看用户
│       └── 删除
└── 分页组件

角色创建表单

创建角色时需要同时提供两个标识:

表单字段:

┌─────────────────────────────────────┐
│ 角色标识: [role:editor        ]    │  ← 系统用,创建后不可修改
│ 提示: 用于系统内部识别              │
│                                     │
│ 显示名称: [编辑者             ]    │  ← 用户看,可以修改
│ 提示: 用于界面显示                  │
│                                     │
│ 描述: [可以编辑内容但不能删除]      │
└─────────────────────────────────────┘

设计考虑:

name 在创建时输入,之后禁用编辑（保证系统稳定性）
displayName 可以随时修改（满足国际化需求）

查看角色用户

管理员可以查看某个角色下的所有用户:

点击"查看用户"按钮
弹出对话框显示用户列表
展示用户基本信息（用户名、邮箱、状态等）

项目效果

主界面.png

用户管理.png

角色管理.png

🛠️ 开发工具整合

脚本整合前的混乱

项目中原本有 4 个独立的 shell 脚本:

start_dev.sh          - 启动完整开发环境
start_services.sh     - 启动基础设施（MySQL、Redis）
test_auth.sh          - 测试认证接口
test_user_api.sh      - 测试用户API

存在的问题:

❌ 脚本过多,不知道用哪个
❌ 功能重复,代码冗余
❌ 缺少统一的日志格式
❌ 没有状态检查功能
❌ 错误处理不完善

统一开发脚本 dev.sh

我们将所有脚本整合成一个统一的开发工具:

./dev.sh <command>

支持的命令:

命令	说明	示例
`start`	启动完整开发环境	`./dev.sh start`
`stop`	停止所有服务	`./dev.sh stop`
`restart`	重启开发环境	`./dev.sh restart`
`status`	查看服务状态	`./dev.sh status`
`logs`	查看服务日志	`./dev.sh logs`
`test`	运行 API 测试	`./dev.sh test`
`infra`	只启动基础设施	`./dev.sh infra`
`clean`	清理日志和临时文件	`./dev.sh clean`

统一的输出格式

使用颜色标识不同级别的信息:

[INFO]    蓝色 - 普通信息
[SUCCESS] 绿色 - 成功操作
[WARNING] 黄色 - 警告信息
[ERROR]   红色 - 错误信息

示例输出:

[INFO] 启动完整开发环境...
[INFO] 检查基础设施容器...
[SUCCESS] MySQL 已运行
[SUCCESS] Redis 已运行
[INFO] 启动后端服务...
[SUCCESS] 后端启动成功 (http://localhost:8888)
[INFO] 启动前端服务...
[SUCCESS] 前端启动成功 (http://localhost:8848)
[SUCCESS] 开发环境启动完成!

健康检查功能

脚本会自动检查服务是否成功启动:

# 后端健康检查
# 最多等待 30 秒,每秒检查一次
# 调用 /api/health 接口
# 返回 200 表示成功

# 前端健康检查
# 检查进程是否存在
# 检查端口是否监听

API 测试集成

内置完整的 API 测试流程:

./dev.sh test

# 测试流程:
# 1. 登录接口测试
# 2. 获取 Token
# 3. 用户列表接口测试
# 4. 角色列表接口测试
# 5. 登出接口测试

Web 平台开发日记 - 用户管理界面