web综合案例_需求文档
# 实战安排1. 第一天 : 大家自己写0). 需求:大家按照这个需求文档把素材提供的(前端,后端以及数据库脚本)搭建基础的架子完成用户管理模块的功能(增删改查)1). 数据库: 经典五张表(数据库实战时候已完成)2). 前端: vue脚手架的最后案例提示vue + elementui + axios(ajax+son)3). 后端: servlet,数据封装4). 要求:I. 先尝试自己写(可以百度,可以抄自己代码)II. 不要问怎么实现,不懂回顾之前的东西III. 实在不会, 看完整代码IV. 想一想自己不会,之前学习欠缺了什么V. 如果有bug不会调, 你可以问我2. 第二天 : 我们讲
一. 数据库说明
# 主表和从表
在多表关系中,表A引用了表B的主键作为自己的外键
那么表B就是主表, 表A就是从表
# 多表关系的建表原则
1. 一对一
任意一张表引用另一张表的主键作为外键,外键需要唯一约束
2. 一对多
多方添加一方的主键作为外键
3. 多对多
建立一张中间表,添加两张主表的主键作为其外键
# 数据库学习
1. 基础
多表关系: 要建立外键
2. 优化
多表关系 : 没有外键
**用户_角色_权限经典五张表**
# 表和表关系说明
1. 三张表
a. 用户表
b. 角色表
c. 权限表(菜单表)
2. 表与表之间的关系
a. 用户表和角色表 : 多对多
一个用户可以拥有多个角色 : 一个qq用户可以申请绿钻(qq音乐),黄钻(qq空间),粉钻(qq炫舞)
一个角色可以属于多个用户 : 一个黄钻角色, 可以有张三,李四...用户
b. 角色表和权限表 : 多对多
一个角色可以拥有多个权限 : 一个黄钻角色可以拥有 隐身访问(A权限),查看被挡访客(B权限)
一个权限可以属于多个角色 : A权限 属于 黄钻, 粉钻
3. 另外两张表
多对多表关系建立: 用一张中间表,引用两张主表的主键作为外键(联合主键)
a. 用户角色中间表
b. 角色权限中间表
create database case2test;
use case2test;
CREATE TABLE `t_user` (
`id` int(11) NOT NULL AUTO_INCREMENT, -- 用户编号
`username` varchar(32) DEFAULT NULL, -- 用户名字
`password` varchar(32) DEFAULT NULL, -- 用户密码
`remark` varchar(32) DEFAULT NULL, -- 用户备注
`email` varchar(32) DEFAULT NULL, -- 用户邮箱
`createTime` timestamp not NULL DEFAULT CURRENT_TIMESTAMP, -- 该用户创建时间
`updateTime` timestamp not NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, -- 该用户修改时间
PRIMARY KEY (`id`) -- 设置主键
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- timestamp 时间戳, 添加数据的时候createTime=null那么createTime = 系统当前时间 (年月日 时分秒)
-- updateTime 在你执行update语句,自动修改为修改的当前时间
-- 此语法在mysql8.0上是不兼容的可以修改成 `createTime` datetime
-- ----------------------------
-- Records of t_user
-- ----------------------------
insert into t_user values(null,'admin','123',null,'admin@163.com',null,null),(null,'zhansan','123',null,'zhansan@163.com',null,null);
# 角色表
CREATE TABLE `t_role` (
`id` int(11) NOT NULL AUTO_INCREMENT, -- 角色id
`name` varchar(32) DEFAULT NULL, -- 角色名字
`keyword` varchar(64) DEFAULT NULL, -- 角色关键字
`description` varchar(128) DEFAULT NULL, -- 角色描述
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of t_role
-- ----------------------------
INSERT INTO `t_role` VALUES ('1', '管理员', 'ROLE_ADMIN', '这是管理员')
,('2', '会员', 'ROLE_MEMBER', '这是会员')
,('3', '游客', 'ROLE_VISITOR', '这是游客');
# 权限表
CREATE TABLE `t_permission` (
`id` int(11) NOT NULL AUTO_INCREMENT, -- 权限编号
`name` varchar(32) DEFAULT NULL, -- 权限名字
`keyword` varchar(64) DEFAULT NULL, -- 权限关键字
`description` varchar(128) DEFAULT NULL, -- 权限描述
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of t_permission
-- ----------------------------
INSERT INTO `t_permission` VALUES ('1', '新增', 'ITEM_ADD', '这是新增权限')
,('2', '删除', 'ITEM_DELETE', '这是删除权限')
,('3', '编辑', 'ITEM_EDIT', '这是编辑权限')
,('4', '查询', 'ITEM_QUERY', '这是查询权限');
# 用户角色中间表
CREATE TABLE `t_user_role` (
`user_id` int(11) NOT NULL,
`role_id` int(11) NOT NULL,
PRIMARY KEY (`user_id`,`role_id`),
KEY `FK_Reference_8` (`role_id`),
CONSTRAINT `FK_Reference_7` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`),
CONSTRAINT `FK_Reference_8` FOREIGN KEY (`role_id`) REFERENCES `t_role` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- 联合主键
-- 1. 一张表只能有一个主键 (唯一标识)
-- 2. 一个主键可以多个字段 (联合主键)
-- 2.1 class=316 班级号
-- 2.2 number=5 座位号
-- 2.3 以上任一字段都无法确定一个同学, 两者合在一起就可以唯一确定一位同学(联合主键)
-- ----------------------------
-- Records of t_user_role
-- ----------------------------
INSERT INTO `t_user_role` VALUES ('1', '1'),('1','2'),('2', '2');
# 角色权限中间表
CREATE TABLE `t_role_permission` (
`role_id` int(11) NOT NULL,
`permission_id` int(11) NOT NULL,
PRIMARY KEY (`role_id`,`permission_id`),
KEY `FK_Reference_12` (`permission_id`),
CONSTRAINT `FK_Reference_11` FOREIGN KEY (`role_id`) REFERENCES `t_role` (`id`),
CONSTRAINT `FK_Reference_12` FOREIGN KEY (`permission_id`) REFERENCES `t_permission` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of t_role_permission
-- ----------------------------
INSERT INTO `t_role_permission`
VALUES ('1', '1'),('1', '2'),('1', '3'),('1', '4'),('2', '3'),('2', '4'),('3', '4');
二. 需求
# 三个模块
1. 用户管理
2. 角色管理
3. 权限管理
# 需求
0. 每个模块的功能一致(以下以'用户管理'模块为例)
1. 查询用户功能(分页,搜索)
2. 新增用户功能
3. 删除用户功能
4. 修改用户功能
# 要求
1. 根据提供的素材完成以上用户管理模块的功能
2. 提示:
1). 后端项目基本的环境已经搭建
只需要完成逻辑代码
2). 前端项目基本环境也已经搭建
代码都在userList.vue
三. 技术架构
# 前后端分离
1. 前端项目
vuecli脚手架 + vue + axios + elementui
注意: elementui可能翻阅文档
2. 后端项目
1). web层 : servlet
2). service层 : 无
3). dao层: mybatis
4). 数据库 : mysql
四. 原型图
4.1 查询功能
4.2 添加功能
4.3 修改功能
4.4 删除功能
五. 接口文档
5.1 查询用户分页数据
1. 请求地址:
1). http://localhost:8080/user/find
2). 备注: localhost是服务器地址, 8080是tomcat端口
2. 请求方式:
post
3. 请求参数:
{
currentPage : 1, // 请求的页码
pageSize : 5, // 每页显示的数量
queryParams : { // 搜索条件
// 表示搜索username包含d的用户,username可为空,表示查询所有
username: 'd'
}
}
4. 响应结果
1). 请求失败,响应
{
"flag": false,
"message": "查询用户失败",
"result": null
}
2). 请求成功,响应
// 注意result中包含两个属性,rows表示查询页的用户列表,total表示用户总数
{
"flag": true,
"message": "查询用户成功",
"result": {
"rows": [
{
"createTime": "2020-05-20 00:00:00.0",
"updateTime": "2020-05-20 00:00:00.0",
"id": 1,
"username": "zs",
"password": "123",
"remark" : "管理员",
"email" : "zs@itcast.cn",
"roles" : [
{
"id": "1",
"name": "A管理员",
"description" : "A模块的管理员"
},
{
"id": "3",
"name": "B管理员",
"description" : "B模块的管理员"
}
]
},
...
],
"total": 15
}
}
5.2 查询所有的角色
1. 请求地址:
1). http://localhost:8080/role/query
2). 备注: localhost是服务器地址, 8080是tomcat端口
2. 请求方式:
post
3. 请求参数:
无
4. 响应结果
1). 请求成功,响应
[
{
"id": "1",
"name": "管理员"
} ,
{
"id": "2",
"name": "会员"
},
{
"id": "3",
"name": "游客"
}
]
2). 由于太过简单,不考虑失败情况
5.3 添加用户
1. 请求地址:
1). http://localhost:8080/user/add
2). 备注: localhost是服务器地址, 8080是tomcat端口
2. 请求方式:
post
3. 请求参数:
{
username: 'zs', //用户名
email: 'zs@itcast.cn', // 邮箱
password: '123', //密码
remark: '测试', //备注
roleIds: [1,2] // 指定当前用户的角色id
}
4. 响应结果
1). 请求失败,响应
{
"flag": false,
"message": "添加用户失败",
"result": null
}
2). 请求成功,响应
{
"flag": true,
"message": "添加用户成功",
"result": null
}
5.4 修改用户
1. 请求地址:
1). http://localhost:8080/user/update
2). 备注: localhost是服务器地址, 8080是tomcat端口
2. 请求方式:
post
3. 请求参数:
{
id: '1', //用修改的用户id
username: 'zs', //用户名
email: 'zs@itcast.cn', // 邮箱
password: '123', //密码
roleIds: [1,2] // 指定当前用户的角色id
}
4. 响应结果
1). 请求失败,响应
{
"flag": false,
"message": "添加用户失败",
"result": null
}
2). 请求成功,响应
{
"flag": true,
"message": "添加用户成功",
"result": null
}
5.5 删除用户
1. 请求地址:
1). http://localhost:8080/user/delete
2). 备注: localhost是服务器地址, 8080是tomcat端口
2. 请求方式:
post
3. 请求参数:
uid=1 // 要删除的用户id
4. 响应结果
1). 请求失败,响应
{
"flag": false,
"message": "删除用户失败",
"result": null
}
2). 请求成功,响应
{
"flag": true,
"message": "删除用户成功",
"result": null
}
若有收获，就点个赞吧
0 人点赞
