1 新增员工和异常处理
需求分析：
后台管理系统可以管理员工信息，通过新增员工来添加员工信息
代码开发：
1、页面发送ajax请求，将输入的数据以json形式提交到服务器
2、服务端Controller接受页面提交的数据并调用Service将数据进行保存
3、Service调用mapper操作数据库，保存数据
功能测试正常，但是这时候如果用户在输入相同用户名，因为用户名是在mysql中唯一属性，这时候会出现异常
这里建议使用全局异常捕获，在common包下创建异常处理类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@ResponseBody
@Slf4j
@ControllerAdvice(annotations = {RestController.class})
public class GlobalExceptionHandler {
@ExceptionHandler(SQLIntegrityConstraintViolationException.class)
public R<String> exceptionHandler(SQLIntegrityConstraintViolationException ex) {
log.info(ex.getMessage());
if (ex.getMessage().contains("Duplicate entry")) {
String[] str = ex.getMessage().split(" ");
return R.error("用户名" + str[2] + "已存在");
}
return R.error("未知错误");
}
}
|
这样很容易能够定位到出错的位置，其中把异常信息用String的split方法截取出来
2 员工分页查询
需求分析：
系统中有几百个员工，如果在一个页面中显示出来很显示很乱，所以一般需要通过分页的方式展示
代码开发：
1、页面发送ajax请求，将分页查询的参数（page、PageSize、name）提交到服务器
2、服务端Controller接受页面提交的数据并调用Service查询数据
3、Service调用Mapper操作数据库，查询分页数据
4、Controller将查询的分页数据响应给页面
5、页面接受到分页数据并通过ElementUI的Table组件展示到页面上
在这个项目中并没有使用RestFul风格设计接口，前端接口是写死的。在这个项目中使用mybatisplus提供的分页插件
1
2
3
4
5
6
7
8
9
10
| @Configuration
public class MybatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return mybatisPlusInterceptor;
}
}
|
Controller中添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| public R<Page> page(int page, int pageSize, String name) {
log.info("page={},pageSize={},name={}", page, pageSize, name);
Page pageInfo = new Page();
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getUsername, name);
queryWrapper.orderByDesc(Employee::getCreateTime);
employeeService.page(pageInfo, queryWrapper);
return R.success(pageInfo);
}
|
这里根据name查询并且降序排序，中间使用queryWrapper条件构造器构造sql语句；因为前端需要page类的信息，所以这里返回pageinfo
功能测试一切正常
3 启用/禁用员工账号
需求分析：
在员工管理页面，可以对某个员工进行账号禁用/启用，只有管理员（admin用户）可以对其他普通用户操作，所以普通用户是看不到启用/禁用按钮的
代码开发：
1、页面发送ajax请求，将参数{id、status}提交到服务端
2、服务端Controller接受页面提交的数据并调用service更新数据
3、service调用mapper操作数据库
1
2
3
4
5
6
7
8
9
10
| @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("员工信息修改成功");
}
|
这里操作失败，是因为js对long型数据操作处理时丢失精度
解决：
在服务端给页面相应json数据时，将long型转换成String字符串
代码修复步骤：
1、拷贝JacksonObjectMapper工具类
2、扩展MVC框架的消息转换器
1
2
3
4
5
6
7
8
9
| @Override
protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
messageConverter.setObjectMapper(new JacksonObjectMapper());
converters.add(0,messageConverter);
}
|
4 编辑员工信息
需求分析：在页面点击编辑，跳转到编辑页面，在编辑页面回显员工信息并进行修改，最好点击保存
代码开发：
1、点击编辑按钮，跳转到add.html，并在url中携带参数员工id
2、在add.html页面中获取url中的参数[员工id]
3、发送ajax请求，提交到服务端，同时提交员工id参数
4、服务端接受请求，根据员工id查询员工信息，将员工信息以json形式响应给页面
5、页面接受服务端响应的json数据，通过vue的数据绑定进行员工信息的回显
6、点击保存按钮，发送ajax请求，将页面中的员工信息以json形式提交给服务端
7、服务端接受员工信息，并进行处理，完成后响应给页面
8、页面接受到服务端响应信息后进行相应处理