这个夏天，好热啊
一、（增）新增员工
1. 新增逻辑
编辑 src/main/java/com/reggie/controller/EmployeeController 类：
...
/**
* 员工新增
* @param employee
* @return
*/
@PostMapping
public R<String> sava(HttpServletRequest request, @RequestBody Employee employee) {
log.info("新增员工，员工信息：{}", employee.toString());
// 设置初始密码 123456（需要 md5 加密）
employee.setPassword(DigestUtils.md5DigestAsHex("123456".getBytes()));
// 创建时间
employee.setCreateTime(LocalDateTime.now());
// 更新时间
employee.setUpdateTime(LocalDateTime.now());
// 创建员工的用户
Long empId = (Long) request.getSession().getAttribute("employee");
employee.setCreateUser(empId);
// 更新员工的用户
employee.setUpdateUser(empId);
// 保存新增员工信息
employeeService.save(employee);
return R.success("新增员工成功");
}
}
2. 用户名唯一
用户登录的用户名是不可重复的，所以新增时需要给用户提示
新增 src/main/java/com/reggie/common/GlobalExceptionHandler 类：
/**
* 全局异常处理
*/
@ControllerAdvice(annotations = {RestController.class, Controller.class})
@ResponseBody
@Slf4j
public class GlobalExceptionHandler {
/**
* 异常方法处理
* @return
*/
// SQLIntegrityConstraintViolationException 是新增重名员工时，系统抛出的错误
@ExceptionHandler(SQLIntegrityConstraintViolationException.class)
public R<String> exceptionHandler(SQLIntegrityConstraintViolationException ex) {
log.info(ex.getMessage());
// 提示创建的用户已存在
if(ex.getMessage().contains("Duplicate entry")) {
String[] s = ex.getMessage().split(" ");
return R.error(s[2] + "已存在");
}
return R.error("未知错误");
}
}
二、（查）员工列表
1. 分页配置
新增 src/main/java/com/reggie/config/MybatisPlusConfig 类：
/**
* 配置 MP 的分页查询
*/
@Configuration
public class MybatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return mybatisPlusInterceptor;
}
}
2. 分页查询
编辑 src/main/java/com/reggie/controller/EmployeeController 类：
...
/**
* 员工信息分页查询
* @param page
* @param pageSize
* @param name
* @return
*/
@GetMapping("/page")
public R<Page> page(int page, int pageSize, String name) {
log.info("page = {}, pageSize = {}, name = {}", page, pageSize, name);
// 构造分页构造器
Page pageInfo = new Page(page, pageSize);
// 构造条件构造器
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();
// 添加条件过滤（name 非空时执行）
queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name);
// 添加排序条件
queryWrapper.orderByDesc(Employee::getUpdateTime);
// 执行查询（内部会返回分页查询的数据）
employeeService.page(pageInfo, queryWrapper);
// 返回配置对象
return R.success(pageInfo);
}
}
3. 分页展示（前端）
文件路径： src/main/resources/backend/page/member/list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
<link rel="stylesheet" href="../../styles/common.css" />
<link rel="stylesheet" href="../../styles/page.css" />
<style>
#member-app .notAdmin::after{
border: 0 !important;
}
</style>
</head>
<body>
<div class="dashboard-container" id="member-app">
<div class="container">
<div class="tableBar">
<el-input
v-model="input"
placeholder="请输入员工姓名"
style="width: 250px"
clearable
@keyup.enter.native="handleQuery"
>
<i
slot="prefix"
class="el-input__icon el-icon-search"
style="cursor: pointer"
@click="handleQuery"
></i>
</el-input>
<el-button
type="primary"
@click="addMemberHandle('add')"
>
+ 添加员工
</el-button>
</div>
<el-table
:data="tableData"
stripe
class="tableBox"
>
<el-table-column
prop="name"
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 label="账号状态">
<template slot-scope="scope">
{{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}
</template>
</el-table-column>
<el-table-column
label="操作"
width="160"
align="center"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
class="blueBug"
@click="addMemberHandle(scope.row.id)"
:class="{notAdmin:user !== 'admin'}"
>
编辑
</el-button>
<el-button
type="text"
size="small"
class="delBut non"
@click="statusHandle(scope.row)"
v-if="user === 'admin'"
>
{{ scope.row.status == '1' ? '禁用' : '启用' }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pageList"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="counts"
:current-page.sync="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/member.js"></script>
<script>
new Vue({
el: '#member-app',
data() {
return {
input: '',
counts: 0,
page: 1,
pageSize: 10,
tableData : [],
id : '',
status : '',
}
},
computed: {},
created() {
this.init()
this.user = JSON.parse(localStorage.getItem('userInfo')).username
},
mounted() {
},
methods: {
async init () {
const params = {
page: this.page,
pageSize: this.pageSize,
name: this.input ? this.input : undefined
}
await getMemberList(params).then(res => {
if (String(res.code) === '1') {
this.tableData = res.data.records || []
this.counts = res.data.total
}
}).catch(err => {
this.$message.error('请求出错了：' + err)
})
},
handleQuery() {
this.page = 1;
this.init();
},
// 添加
addMemberHandle (st) {
if (st === 'add'){
window.parent.menuHandle({
id: '2',
url: '/backend/page/member/add.html',
name: '添加员工'
},true)
} else {
window.parent.menuHandle({
id: '2',
url: '/backend/page/member/add.html?id='+st,
name: '修改员工'
},true)
}
},
//状态修改
statusHandle (row) {
this.id = row.id
this.status = row.status
this.$confirm('确认调整该账号的状态?', '提示', {
'confirmButtonText': '确定',
'cancelButtonText': '取消',
'type': 'warning'
}).then(() => {
enableOrDisableEmployee({ 'id': this.id, 'status': !this.status ? 1 : 0 }).then(res => {
console.log('enableOrDisableEmployee',res)
if (String(res.code) === '1') {
this.$message.success('账号状态更改成功！')
this.handleQuery()
}
}).catch(err => {
this.$message.error('请求出错了：' + err)
})
})
},
handleSizeChange (val) {
this.pageSize = val
this.init()
},
handleCurrentChange (val) {
this.page = val
this.init()
}
}
})
</script>
</body>
</html>
三、（删）禁用/启用员工状态
1. 修改员工信息
编辑 src/main/java/com/reggie/controller/EmployeeController 类：
...
/**
* 修改员工信息（获取 id）
* @param employee
* @return
*/
@PutMapping
public R<String> update(HttpServletRequest request, @RequestBody Employee employee) {
log.info(employee.toString());
Long empId = (Long) request.getSession().getAttribute("employee");
// 更新员工信息 用户
employee.setUpdateUser(empId);
// 更新员工信息 时间
employee.setUpdateTime(LocalDateTime.now());
employeeService.updateById(employee);
return R.success("员工信息修改成功");
}
}
2. 消息转换器
问题： 当修改状态时，前端（JS）会默认将用户 ID （19 位数字）转换成
16 位 + 四舍五入的值 + 00传递过来的，所以需要将传递给用户的ID 转换成字符串（日期等数组也需要）
⑴. 添加对象映射器
新增 src/main/java/com/reggie/common/JacksonObjectMapper 类：
/**
* 对象映射器:基于jackson将Java对象转为json，或者将json转为Java对象
* 将JSON解析为Java对象的过程称为 [从JSON反序列化Java对象]
* 从Java对象生成JSON的过程称为 [序列化Java对象到JSON]
*/
public class JacksonObjectMapper extends ObjectMapper {
public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";
public JacksonObjectMapper() {
super();
//收到未知属性时不报异常
this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);
//反序列化时，属性不存在的兼容处理
this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
SimpleModule simpleModule = new SimpleModule()
.addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
.addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
.addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))
.addSerializer(BigInteger.class, ToStringSerializer.instance)
.addSerializer(Long.class, ToStringSerializer.instance)
.addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
.addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
.addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));
//注册功能模块 例如，可以添加自定义序列化器和反序列化器
this.registerModule(simpleModule);
}
}
⑵. 扩展 mvc 框架
编辑 src/main/java/com/reggie/config/WebMvcConfig 类：
...
/**
* 扩展 mvc 框架的消息转换器
* @param converters
*/
@Override
protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
log.info("扩展消息转换器...");
// 创建对象转换器
MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
// 设置转换器对象（底层通过 jackson 将 java 转换为 json）
messageConverter.setObjectMapper(new JacksonObjectMapper());
// 将上面的消息转换器对象追加到 mvc 框架的转换器集合中
converters.add(0, messageConverter);
}
}
四、（改）编辑员工信息
1. 回显员工信息
编辑 src/main/java/com/reggie/controller/EmployeeController 类：
...
/**
* 获取员工信息（根据 id）
* @param id
* @return
*/
@GetMapping("/{id}")
public R<Employee> getById(@PathVariable Long id) {
log.info("获取员工信息");
Employee employee = employeeService.getById(id);
// 判断信息是否为空
if (employee != null) return R.success(employee);
return R.error("没有查询到员工信息");
}
}
2. 提交更新信息
修改员工状态时，已经写好了修改方法，不需要再次编写
五、拓展
删除需求：
- 删除数据库：
employeeService.removeById(employee); - 添加标签（软删）： 返回数据时，过滤该标签员工