1. 使用者管理實作
1.1 使用者管理背景搭建
-1 表設計
-2.User的POJO設計
package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;
/**
* @author 劉昱江
* 時間 2021/2/2
*/
@TableName("user")
@Data
@Accessors(chain = true)
public class User extends BasePojo{
@TableId(type = IdType.AUTO)
private Integer id;
private String username;
private String password;
private String phone;
private String email;
private Boolean status;
@TableField(exist = false) //該屬性不存在
private Role role; //定義role角色資料
}
-3.使用者查詢的業務接口文檔
請求路徑: /user/list
請求類型: GET
請求參數: 背景使用PageResult對象接收
請求案例: http://localhost:8091/user/list?query=查詢關鍵字&pageNum=1&pageSize=10
響應參數: SysResult對象 需要攜帶分頁對象 PageResult
PageResult 對象介紹
-4 .頁面調用JS流程
1.生命周期函數
//利用鈎子函數實作資料查詢
mounted(){
this.getUserList()
}
2.getUserList()函數定義
async getUserList(){
const {data: result} = await this.$http.get('/user/list',{
params: this.queryInfo
})
if(result.status !== 200) return this.$message.error("使用者清單查詢失敗")
this.userList = result.data.rows
this.total = result.data.total
console.log("總記錄數:"+this.total)
}
-5 封裝PageResult–VO層
說明: 該對象主要的作用,封裝分頁後的結果 其中的資料需要在業務層 指派.最後由SysResult對象 攜帶傳回給使用者.
package com.jt.vo;
import lombok.Data;
import lombok.experimental.Accessors;
@Data
@Accessors(chain = true)
public class PageResult {
private String query; //使用者查詢的資料
private Integer pageNum; //頁數
private Integer pageSize;//每頁的條數
private Long total; //總記錄數
private Object rows; //分頁後的結果
}
-6 .編輯UserController
/**
* 業務:實作使用者清單的分頁查詢
* URL: /user/list
* 參數:PageResult 對象進行接收 傳遞3個參數
* 傳回值: SysResult 對象(PageResult 對象) 傳回5個
*
*/
@GetMapping("/list")
public SysResult getUserList(PageResult pageResult){//接收3個參數的pageResult對象
//同過業務處理 擷取總數/分頁後的結果
pageResult = userService.getUserList(pageResult);
return SysResult.success(pageResult);//傳回帶有5個參數的pageResult對象
}
-7. 編輯UserServicImpl
需求: 進行分頁查詢 總數 分頁後的結果
邏輯實作:
第n頁: select * from user limit (n-1)*PageSize , PageSize
/**
* xuqiu: 進行分頁查詢 total總數 rows分頁後的結果
* SQL: 每頁20條
* 第一頁: select * from user limit 0,20 下标[0-19]
* 第二頁: select * from user limit 20,20 下标[20-39]
* 第三頁: select * from user limit 40,20 下标[40-59]
* 第n頁: select * from user limit (n-1)*PageSize , PageSize 下标[(n-1)*row-(n-1)*row+19]
* @param pageResult
* @return
* 方法實作
*/
@Override
public PageResult getUserList(PageResult pageResult) {
//起始位置 getPageNum()//頁數n getPageSize()每頁的條數PageSize
//第n頁: select * from user limit (n-1)*rows , PageSize
int start = (pageResult.getPageNum()-1) * pageResult.getPageSize();
//每頁條數
int size = pageResult.getPageSize();
//分頁結果
List<User> rows = userMapper.findUserListByPage(start,size);
//擷取全部記錄的總數 利用java 自動拆裝箱的規範
long total = userMapper.selectCount(null);
//封裝資料實作傳回
pageResult.setTotal(total).setRows(rows);
return pageResult;
}
-8 .編輯UserMapper
package com.jt.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.User;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/**
* @author 劉昱江
* 時間 2021/2/2
*/
public interface UserMapper extends BaseMapper<User> {
/**
* 如果Sql語句比較簡單,可以通過直接注解開發.
* @Select("Sql!!!!!")
* @Insert("sql")
* @Update("sql")
* @Delete("sql")
* @param start
* @param size
* @return
*/
@Select("select * from user limit #{start},#{size}")
List<User> findUserListByPage(Integer start, Integer size);
}
1.2 MP方式實作分頁查詢(API調用!!!)
-1 .編輯UserServiceImpl
/**
* 以MP的方式分頁查詢
* 需求:
* 1.分頁查詢 List<user>
* 2.擷取記錄總數 封裝pageResult對象
*
* @param pageResult
* @return
*/
@Override
public PageResult getUserList(PageResult pageResult) {
//第一部分 實作資料的封裝!!!
int pageNum = pageResult.getPageNum(); //擷取頁面
int pageSize = pageResult.getPageSize();//擷取條件
//參數1: page分頁對象
Page<User> page = new Page(pageNum,pageSize);
//參數2: 分頁的查詢條件 username模糊查詢
//問題: 如果使用者沒有傳遞query like關鍵字 拼接參數
//動态拼接: 傳參拼接like condition:true 拼接like條件
// false 不拼接 like關鍵字
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
//判斷使用者是否傳參 如果傳參 傳回true 反之 傳回false
boolean flag = StringUtils.hasLength(pageResult.getQuery());
queryWrapper.like(flag,"username",pageResult.getQuery());
//規則: page2個參數 根據分頁查詢傳回 total/分頁後的記錄 4個參數
page = userMapper.selectPage(page,queryWrapper);
//根據分頁對象,擷取想要的結果
List<User> userList = page.getRecords();
long total = page.getTotal();
pageResult.setTotal(total).setRows(userList);
return pageResult;
}
-2.編輯配置類
包路徑: com.jt.config
說明: MP如果需要進行分頁的查詢 ,則必須添加配置類.否則分頁不能正常執行.
關于配置類的說明:
SpringBoot整合第三方架構時,提供了配置類的機制, 通過這種機制,第三方架構可以實作定制化的對象的建立.
//1.表示這個類 是一個配置類 目的: 封裝對象-交給Spring容器管理
@Configuration
public class MybatisPlusConfig {
// @Bean 将方法的傳回值對象,交給Spring容器管理
//MP分頁機制 Mysql分頁語句/Oracle分頁語句 為了實作功能複用 需要手動配置
//根據資料庫類型不同 之後動态的生成Sql MP才能調用分頁對象
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
//定義分頁攔截器對象
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
return interceptor;
}
}
-3.分頁後的結果
1.3 使用者狀态修改
-1.業務接口文檔
說明: 使用者通過開關 控制 狀态 true/false 在資料庫中 存儲true 用1, 存儲false 用0
-2.頁面JS分析(了解)
說明: 如果修改使用者可用狀态,則必須擷取目前行的資料. id/status
作用域插槽: 一般在表格循環周遊時,如果需要擷取目前行資料,則采用作用域插槽的方式.
作用域插槽用法:
作用域插槽 固定用法scope.row擷取行級元素-
<!-- 使用者資料表格展現 border 邊框線屬性 :data内部v-for-->
<el-table :data="userList" border stripe>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="username" label="使用者名"></el-table-column>
<el-table-column prop="phone" label="電話"></el-table-column>
<el-table-column prop="email" label="郵箱"></el-table-column>
<el-table-column prop="status" label="狀态">
<!-- 作用域插槽 固定用法scope.row擷取行級元素-->
<template slot-scope="scope">
<el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
發起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("使用者狀态修改成功!")
}
請求路徑:
-3. 編輯UserController
/**業務: 修改使用者可用狀态
* URL:"/user/status/${user.id}/${user.status}"
* 參數:id主鍵 status 狀态資訊
* 傳回值SysResult 對象 沒有業務參數
*/
@PutMapping("/status/{id}/{status}")
public SysResult updateStatus(User user){
userService.updateStatus(user);
return SysResult.success();
}
-4 .編輯UserService
user 對象的有效資料 id=x status= true/false
//修改status狀态
@Override
public void updateStatus(User user) {
userMapper.updateById(user);
}
1.4 使用者新增
-1. 業務接口文檔說明
-2. 使用者JS分析(了解)
//校驗使用者資料
addUserBtn(){
this.$refs.addUserRef.validate(async valid => {
//如果校驗失敗 則停止資料
if(!valid) return
//console.log(this.addUserModel)
const {data: result} = await this.$http.post('/user/addUser',this.addUserModel)
if(result.status !== 200) return this.$message.error("使用者新增失敗")
this.$message.success("使用者新增成功")
//關閉對話框
this.dialogVisible = false
//重新擷取使用者清單
this.getUserList()
})
-3. 編輯UserController
/**
* 業務: 實作使用者新增
* URL: /user/addUser
* 類型: post類型
* 參數: 整合form表單資料 JSON串 user對象接收
* 傳回值: SysResult對象
*/
@PostMapping("/addUser")
public SysResult addUser(@RequestBody User user){
userService.addUser(user);
return SysResult.success();
}
-4. 編輯UserService
/**
* 新增入庫:
* 1.密碼需要加密處理
* 2.應該指派預設狀态 true
* 3.需要添加時間 建立/修改 (下一節優化)
*/
@Override
public void addUser(User user) {
//1.密碼加密
byte[] bytes = user.getPassword().getBytes();
String md5Pass = DigestUtils.md5DigestAsHex(bytes);
user.setPassword(md5Pass);
//2.添加預設狀态
user.setStatus(true);
//3.添加時間 目的保證時間統一
Date date = new Date();
user.setCreated(date).setUpdated(date);
userMapper.insert(user);
}