文章目录
1.用户模块实现
1.1 VUE中路由说明
1.1.1 路由要素
- 定义跳转的标签 用户
- 定义路由填充位(路由占位符)
- 定义路由机制
- vue对象挂载路由
1.1.2 父子组件跳转
编辑路由 index.js
1.2 用户列表展现
1.2.1 业务接口说明
- 请求路径: /user/list
- 请求类型: GET
- 请求参数: 后台使用PageResult对象接收
- 请求案例: http://localhost:8091/user/listquery=查询关键字&pageNum=1&pageSize=10
参数名称
参数说明
备注信息
query
用户查询的数据
可以为null
pageNum
分页查询的页数
必须赋值不能为null
pageSize
分页查询的条数
必须赋值不能为null
- 响应参数: SysResult对象 需要携带分页对象 PageResult
参数名称
参数说明
备注信息
status
状态信息
200表示服务器请求成功 201表示服务器异常
msg
服务器返回的提示信息
可以为null
data
服务器返回的业务数据
返回值PageResult对象
- PageResult 对象介绍
参数名称
参数类型
参数说明
备注信息
query
String
用户查询的数据
可以为null
pageNum
Integer
查询页数
不能为null
pageSize
Integer
查询条数
不能为null
total
Long
查询总记录数
不能为null
rows
Object
分页查询的结果
不能为null
-
返回值效果
{“status”:200,
“msg”:“服务器调用成功!”,
“data”:
{“query”:"",
“pageNum”:1,
“pageSize”:2,
“total”:4,
“rows”:[
{“created”:“2021-02-18T11:17:23.000+00:00”,
“updated”:“2021-03-26T06:47:20.000+00:00”,
“id”:1,
“username”:“admin”,
“password”:“a66abb5684c45962d887564f08346e8d”,
“phone”:“13111112222”,
“email”:“1235678@qq.com”,
“status”:true,
“role”:null
},
{“created”:“2021-02-18T11:17:23.000+00:00”,
“updated”:“2021-03-13T08:50:30.000+00:00”,
“id”:2,
“username”:“admin123”,
“password”:“a66abb5684c45962d887564f08346e8d”,
“phone”:“13111112223”,
“email”:“1235678@qq.com”,
“status”:false,
“role”:null
}
]
}
}
1.2.2 编辑UserController
/**
* 业务说明: 分页查询用户信息
* URL: http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10
* 参数: ?query=查询关键字&pageNum=1&pageSize=10
* 返回值: SysResult(PageResult)
*/
@GetMapping("/list")
public SysResult findUserList(PageResult pageResult){//3个有值
//业务层完成 查询总数和记录数的操作
pageResult = userService.findUserList(pageResult);
return SysResult.success(pageResult);
}
1.2.3 编辑UserService
1.定义接口
/**
* 业务说明: 分页查询用户信息
* URL: http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10
* 参数: ?query=查询关键字&pageNum=1&pageSize=10
* 返回值: SysResult(PageResult)
*/
@GetMapping("/list")
public SysResult findUserList(PageResult pageResult){//3个有值
//业务层完成 查询总数和记录数的操作
pageResult = userService.findUserList(pageResult);
return SysResult.success(pageResult);
}
-
编辑实现类
/**
* 业务说明: 需要分页查询
* java数组取值特点: 含头不含尾
* Sql: 一页10条
* select * from user limit 起始位置,查询的条数
* 第一页:
* select * from user limit 0,10 真实下标[0-9]
* 第二页:
* select * from user limit 10,10
* 第三页:
* select * from user limit 20,10
* 第N页:
* select * from user limit (n-1)*10,10
* @param pageResult
* @return
*/
@Override
public PageResult findUserList(PageResult pageResult) {
int size = pageResult.getPageSize();
int startNum = (pageResult.getPageNum() - 1) * size;
String query = pageResult.getQuery();return null; }
1.2.4 编辑UserMapper接口
1.编辑Mapper接口
long findCount(String query);
-
编辑Mapper映射文件
select * from user where username like "%"#{query}"%" limit #{startNum},#{size}<select id="findCount" resultType="long"> select count(1) from user where username like "%"#{query}"%" </select>
1.2.5 页面效果展现
1.3 用户状态的修改
1.3.1 业务接口文档
- 请求路径 /user/status/{id}/{status}
- 请求类型 PUT
- 请求参数: 用户ID/状态值数据
参数名称
参数类型
参数说明
备注信息
id
Integer
用户ID号
不能为null
status
boolean
参数状态信息
不能为null
-
返回值结果: SysResult对象
{“status”:200,“msg”:“服务器调用成功!”,“data”:null}
1.3.2 编辑UserController
/**
* URL: /user/status/{id}/{status}
* 参数: id/status
* 返回值: SysResult对象
*/
@PutMapping("/status/{id}/{status}")
public SysResult updateStatus(User user){
userService.updateStatus(user);
return SysResult.success();
}
1.3.3 编辑UserService
-
编辑UserService接口
void updateStatus(User user);
-
编辑UserServiceImpl实现类
//更新操作 准备修改时间
@Override
@Transactional //如果程序运行出现运行时异常,则实现事务回滚
public void updateStatus(User user) {//2个参数有值
user.setUpdated(new Date());
userMapper.updateStatus(user);
}
1.3.4 编辑UserMapper
-
编辑Mapper接口
@Update("update user set status=#{status},updated=#{updated} where id=#{id}") void updateStatus(User user);
1.4 用户数据新增
1.4.1 业务接口
- 请求路径 /user/addUser
- 请求类型 POST
- 请求参数: 整个form表单数据封装为js对象进行参数传递
参数名称
参数类型
参数说明
备注信息
username
String
用户名
不能为null
password
String
密码
不能为null
phone
String
电话号码
不能为null
String
密码
不能为null
-
返回值结果: SysResult对象
{“status”:200,“msg”:“服务器调用成功!”,“data”:null}
1.4.2 编辑UserController
/**
* URL: /user/addUser
* 参数: form表单 js对象 json串
* 返回值: SysResult对象
*/
@PostMapping("/addUser")
public SysResult addUser(@RequestBody User user){
userService.addUser(user);
return SysResult.success();
}
1.4.3 编辑UserService
-
编辑接口
void addUser(User user);
-
编辑实现类
/**
* 业务思维:
* 1.密码需要md5加密
* 2.设定状态信息 true
* 3.设定创建时间/修改时间
* 4.注意事务控制
* @param user
*/
@Override
@Transactional //事务控制
public void addUser(User user) {
//密码加密
Date date = new Date();
String password = user.getPassword();
password = DigestUtils.md5DigestAsHex(password.getBytes());
user.setPassword(password)
.setStatus(true)
.setCreated(date)
.setUpdated(date);
userMapper.addUser(user);
}
1.4.4 编辑UserMapper
1.编辑接口
void addUser(User user);
-
编辑映射文件
<insert id="addUser"> insert into user value (null,#{username},#{password},#{phone}, #{email},#{status},#{created},#{updated}) </insert>
1.5 用户数据修改-数据回显
1.5.1 业务接口说明
- 请求路径: /user/{id}
- 请求类型: GET
- 返回值: SysResult对象
参数名称
参数说明
备注
status
状态信息
200表示服务器请求成功 201表示服务器异常
msg
服务器返回的提示信息
可以为null
data
服务器返回的业务数据
返回user对象
-
JSON格式如下:
{
“status”:200,
“msg”:“服务器调用成功!”,
“data”:{
“created”:“2021-02-18T11:17:23.000+00:00”,
“updated”:“2021-05-17T11:33:46.000+00:00”,
“id”:1,
“username”:“admin”,
“password”:“a66abb5684c45962d887564f08346e8d”,
“phone”:“13111112222”,
“email”:“1235678@qq.com”,
“status”:true,
“role”:null
}
}
1.5.2 编辑UserController
/**
* URL: /user/{id}
* 参数: id
* 返回值: SysResult(user对象)
*/
@GetMapping("/{id}")
public SysResult findUserById(@PathVariable Integer id){
User user = userService.findUserById(id);
return SysResult.success(user);
}
1.5.3 编辑UserService
-
编辑UserService接口
User findUserById(Integer id);
-
编辑UserServiceImpl实现类
@Override
public User findUserById(Integer id) {return userMapper.findUserById(id); }
1.5.4 编辑UserMapper
@Select("select * from user where id=#{id}")
User findUserById(Integer id);
1.6 用户数据修改-数据更新操作
1.6.1 业务接口说明
- 请求路径: /user/updateUser
- 请求类型: PUT
- 请求参数: User对象结构
参数名称
参数说明
备注
ID
用户ID号
不能为null
phone
手机信息
不能为null
邮箱地址
不能为null
- 返回值: SysResult对象
参数名称
参数说明
备注
status
状态信息
200表示服务器请求成功 201表示服务器异常
msg
服务器返回的提示信息
可以为null
data
服务器返回的业务数据
null
-
JSON格式如下:
{
“status”:200,
“msg”:“服务器调用成功!”,
“data”:{}
}
1.6.2 编辑UserController
/**
* URL地址: /user/updateUser
* 参数: 3个参数 js对象 json串
* 返回值: SysResult对象
*/
@PutMapping("/updateUser")
public SysResult updateUser(@RequestBody User user){
userService.updateUser(user);
return SysResult.success();
}
1.6.3 编辑UserService
void updateUser(User user);
@Override
@Transactional
public void updateUser(User user) {
user.setUpdated(new Date());
userMapper.updateUser(user);
}
1.6.4 编辑UserMapper
-
编辑mapper接口
void updateUser(User user);
-
编辑xml映射文件
update user set phone=#{phone},email=#{email}, updated=#{updated} where id = #{id}
1.7 用户删除
1.7.1 业务接口文档
- 请求路径: /user/{id}
- 请求类型: delete
- 请求参数:
参数名称
参数说明
备注
ID
用户ID号
不能为null
- 返回值: SysResult对象
参数名称
参数说明
备注
status
状态信息
200表示服务器请求成功 201表示服务器异常
msg
服务器返回的提示信息
可以为null
data
服务器返回的业务数据
null
1.7.2 编辑UserController
@DeleteMapping("/{id}")
public SysResult deleteUserById(@PathVariable Integer id){
userService.deleteUserById(id);
return SysResult.success();
}
1.7.3 编辑UserService
void deleteUserById(Integer id);
@Override
@Transactional
public void deleteUserById(Integer id) {
userMapper.deleteUserById(id);
}
1.7.4 编辑UserMapper
@Delete("delete from user where id=#{id}")
void deleteUserById(Integer id);