1、用户管理实现
1.1用户管理后台搭建
1.1.1 表设计
1.1.2 User pojo对象设计
1.1.3 页面调用JS流程
- 生命周期函数
- getUserList()函数定义
1.1.4 用户查询的业务接口文档
- 请求路径: /user/list
- 请求类型: GET
- 请求参数: 后台使用PageResult对象接收
- 请求案例: http://localhost:8091/user/list?query=查询关键字&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.1.5 封装PageResult
说明: 该对象主要的作用,封装分页后的结果 其中的数据需要在业务层 赋值.最后由SysResult对象 携带返回给用户.
@Data
@Accessors(chain = true)
public class PageResult
{
private String query;
private Integer pageNum;
private Integer pageSize;
private Long total;
private Object rows;
}
1.1.6 编辑UserController
@GetMapping("/list")
public SysResult UserList(PageResult pageResult)
{
pageResult = userService.getUserList(pageResult);
return SysResult.souccess(pageResult);
}
1.1.7 编辑UserServicImpl
@Override
public PageResult getUserList(PageResult pageResult)
{
int start = (pageResult.getPageNum() - 1) * pageResult.getPageSize();
int size = pageResult.getPageSize();
List<User> userList = userMapper.findUserListByPage(start,size);
long total = userMapper.selectCount(null);
pageResult.setTotal(total).setRows(userList);
return pageResult;
}
1.1.8 编辑UserMapper
public interface UserMapper extends BaseMapper<User>
{
@Select("select * from user limit #{start},#{size}")
List<User> findUserListByPage(Integer start, Integer size);
1.2 MP方式实现分页查询(API调用!!!)
1.2.1 编辑UserServiceImpl
@Override
public PageResult getUserList(PageResult pageResult)
{
Page page = new Page(pageResult.getPageNum(),pageResult.getPageSize());
QueryWrapper<User> queryWrapper= new QueryWrapper<>();
boolean flag = StringUtils.hasLength(pageResult.getQuery());
queryWrapper.like(flag,"username", pageResult.getQuery());
page = userMapper.selectPage(page, queryWrapper);
List<User> userList = page.getRecords();
long total = page.getTotal();
pageResult.setTotal(total).setRows(userList);
return pageResult;
}
1.2.2
包路径: com.jt.config
说明: MP如果需要进行分页的查询 ,则必须添加配置类.否则分页不能正常执行.
关于配置类的说明:
SpringBoot整合第三方框架时,提供了配置类的机制, 通过这种机制,第三方框架可以实现定制化的对象的创建.
@Configuration
public class MyBaitsPlusConfig
{
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor()
{
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
return interceptor;
}
}
1.2.3 分页结果
1.3 用户状态修改
1.3.1 业务接口文档说明
说明: 用户通过开关 控制 状态 true/false 在数据库中 存储true 用1, 存储false 用0
- 请求路径:/user/status/{id}/{status}
- 请求类型:PUT
- 请求参数:用户ID/状态值数据
参数名称 | 参数类型 | 参数说明 | 备注信息 |
---|
id | Integer | 用户ID号 | 不能为NULL |
status | boolean | 参数状态信息 | 不能NULL |
返回值结果:SysResult对象
参数名称 | 参数说明 | 备注 |
---|
status | 状态信息 | 200表示服务器请求成功 201表示服务器异常 |
msg | 服务器返回的提示信息 | 可以为null |
data | 服务器返回的业务数据 | 可以为null |
1.3.2 页面JS分析
说明: 如果修改状态信息,则必须获取当前行的数据. id/status
作用域插槽: 一般在表格循环遍历时,如果需要获取当前行数据,则采用作用域插槽的方式.
作用域插槽用法:
发起Ajax请求:
async updateStatus(user){
//实现用户状态修改 注意使用模版字符串 ES6中提出的新用法 ${key}
//const {data: result} = await this.$http.put('/user/status/'+user.id+'/'+user.status)
const {data: result} = await this.$http.put(`/user/status/${user.id}/${user.status}`)
if(result.status !== 200) return this.$message.error("用户状态修改失败!")
this.$message.success("用户状态修改成功!")
},
请求路径:
1.3.3 编辑UserController
1.3.4 编辑UserServiceImpl
1.4 用户新增
1.4.1 用户JS分析
14.2 业务接口文档说明
- 请求路径:/user/addUser
- 请求类型:POST
- 请求参数:整个From表单
参数名称 | 参数类型 | 参数说明 | 备注信息 |
---|
username | String | 用户名 | 不能为NULL |
password | String | 密码 | 不能为NULL |
phone | String | 电话号码 | 不能为NULL |
email | String | 密码 | 不能为NULL |
- 返回值结果:SysResult
参数名称 | 参数说明 | 备注 |
---|
status | 状态信息 | 200表示服务器请求成功 201表示服务器异常 |
msg | 服务器返回的提示信息 | 可以为null |
data | 服务器返回的业务数据 | 可以为null |
1.4.3 编辑UserController
@PostMapping("/addUser")
public SysResult insetUser(@RequestBody User user)
{
userService.insertUser(user);
return SysResult.souccess();
}
1.4.4 编辑UserServiceImpl
@Override
@Transactional
public void insertUser(User user)
{
byte[] bytes = user.getPassword().getBytes();
String md5Pass = DigestUtils.md5DigestAsHex(bytes);
user.setPassword(md5Pass);
user.setStatus(true);
Date date = new Date();
user.setCreated(date).setUpdated(date);
userMapper.insert(user);
}