web综合案例_需求文档
约 2153 字大约 7 分钟
web综合案例_需求文档
一. 接口文档
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
}
}注意：elementui中分页只需要将后台查询的数据总记录数赋值给前端页面的pagination的total总记录数即可完成分页，同时需要将查询的数据赋值给userList。
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). 由于太过简单,不考虑失败情况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
}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 删除用户(最简单)
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
}web综合案例_讲解
#1.回顾学生系统分页后端 前端
1.在elementui中只要将后台数据的总记录数赋值给前端pagination中的total就可以实现分页，最后将页面显示的数据赋值给vue中data中的tableData
#2.介绍用户 角色 权限系统需求
1.后台数据库设计 sql语句 service dao层可以参考之前mybatis最后一天的综合案例
2.前端参考的是学生管理系统
#3.强调多表模糊分页查询的sql语句
#4.mybatis映射文件扩展知识点
#5.做用户 角色 权限系统，前端参考学生系统，后端参考之前mybatis综合案例。或者直接参考授课代码
#6.遇到错误学会调试(前端和后端)一. 查询功能
注意：多表的模糊查询分页的sql语句有些难度。
# 1. 明确前后端的分工
1. 前端
1. 发起请求
2. 获取响应
3. 展示数据
2. 后端
1. 接收请求
2. 业务处理
3. 响应数据
# 2. 从前端入手
1. 页面userList.html
created函数调用
this.getUserList() //分页查询用户列表
this.getRoleList()
2. getUserList函数 : 从伪数据入手
有个伪数据,并实现了展示数据功能
还差发起请求和获取响应
我们如果发起请求获得的数据数据跟伪数据格式一致,我们就不需要关心数据展示这一块的内容(因为已经写好了)
3. 分析伪数据(响应的数据)
1). Result的获取
根据执行结果
2). PageResult的获取
分页数据的查询结果
3). User的获取
结果集的映射
4. 分页查询 : PageResult的获取
1). rows : 用户列表 (从数据库查询)
-- 1). 确定有几张表 : t_user tu, t_role tr, t_user_role tur
-- 2). 连接条件 : tu.id = tur.user_id , tr.id = tur.role_id
-- 3). 补充条件 : limit 0,2
-- 真正需求: 查询两个用户
-- limit : 限制查询数量
-- 4). 查询字段
-- 错误的 : 只查询一个用户两条记录
select * from t_user tu,
t_role tr, t_user_role tur -- 笛卡尔积
where tu.id = tur.user_id and tr.id = tur.role_id -- 看中间表
limit 0,2;
-- 正确的
select * from (select * from t_user limit 0,2) tu,
t_role tr, t_user_role tur
where tu.id = tur.user_id and tr.id = tur.role_id
;
2). total : 用户总数
select count(*) from t_user;# 代码实现
1. 前端(发起请求)
1). 代码位置: methods里的getUserList函数中书写
2). 发起异步请求
I. 请求地址 : user/query (请求转发)
II. 请求参数 :
page当前页码,
count每页显示的用户数量
queryParams 查询条件
2. 后端(接收请求,处理业务,响应)
1). UserServlet : url = /user/*
2). 接收请求参数
3). 业务处理: 数据库查询(mybatis多表的数据映射: 一对一,一对多)
4). 响应数据: 注意数据封装
3. 前端(接收响应,显示数据)
二. 添加功能
注意：新增用户的时候，首先需要将用户数据添加到t_user表，其次还需要将新添加用户的id和角色id添加到中间表，这样可以维护用户可以有什么样的角色信息，角色id前端有传递，用户id是新添加的用户，需要使用自增主键回填获取新增用户id.
# 1. 获取所有的角色
0. 代码位置: methods中getRoleList函数
1. 目的: 需要在添加表单中体现所有的角色(动态数据)
2. sql:
select * from t_role;
3. 请求地址: role/ query
4. 请求参数: 无
# 2. 添加一个用户
0. sql分析:
1). 在t_user表中添加用户信息
insert into t_user values(null,?a,?b,?c,?d,null,null);
-- 4个?来源于前端参数
2). 在t_user_role添加该用户的角色信息
insert into t_user_role values
(?u,?x),(?u,?y)... -- 动态sql
-- ?x和?y 表示该用户的角色id,来源于前端参数
-- ?u 表示该用户的id,来源于上一句执行之后返回的id
(mybatis 主键回填)
1. 前端 : 发起请求 (userList.html的handleCreateConfirm函数)
1). 请求地址 : user/add
2). 请求参数 : 4个用户数据,还有用户对应的角色信息
2. 后端
1). 接收请求参数 AddUser
2). 数据库
I. 在t_user表中添加用户信息 (主键回填)
II. 在t_user_role添加该用户的角色信息
3). 响应
3. 前端
1). 添加成功: 界面刷新
2). 或者提示添加失败三. 修改功能
# 修改功能
0. sql
1). 修改t_user表
update t_user set username=?,password=?,email=?
where id = ?;
2). 修改t_user_role表: 删完再加
-- 先删除此用户对应所有角色信息
delete from t_user_role where user_id = ?;
-- 然后重新添加
insert into t_user_role values
(?u,?x),(?u,?y)... -- 添加功能写过了
1. 前端: 发起请求 (userList.html的handleUpdateConfirm函数)
1). 请求地址: user/update
2). 请求参数: updateUser
(包含用户id以及3个用户信息以及对应的角色信息)
2. 后端
3. 前端四. 删除功能
注意：如果有外键约束,并且没有级联操作,要删除从表数据,再删除主表数据
# 删除功能
0. sql: (如果有外键约束,并且没有级联操作,要删除从表数据,再删除主表数据)
1). 因为外键约束的存在,先删除中间表中的数据 t_user_role
delete from t_user_role where user_id = ?;
2). 再删除t_user
delete from t_user where id = ?;
1. 前端 : 发起请求(userList.html的handleDeleted函数)
1). 请求地址: user/delete
2). 请求参数: id
2. 后端
3. 前端