瑞吉外卖（二）

最新推荐文章于 2024-07-04 09:24:51 发布

我是猫809

最新推荐文章于 2024-07-04 09:24:51 发布

阅读量111

点赞数 1

文章标签： servlet java 前端

本文链接：https://blog.csdn.net/weixin_62331017/article/details/129351344

版权

1、完整登录功能

问题分析

前面我们已经完成了简单的用户登录功能，但是有一个问题：如果用户不登陆，还是可以访问页面，我们希望的是当跳转到一个新的页面，判断用户是否登录。我们可以添加拦截器或者过滤器，在过滤器或者拦截器中判断用户是否已经完成登录，如果没有登录则跳转到登录页面

代码实现

使用拦截器实现登录拦截

@Slf4j
public class LoginCheckInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if(request.getSession().getAttribute("employee")==null){
            response.getWriter().write(JSON.toJSONString(Result.error("NOTLOGIN")));
            log.info("LoginCheckInterceptor拦截请求成功：{}",request.getRequestURL());
            return false;
        }
        log.info("LoginCheckInterceptor拦截请求失败：{}",request.getRequestURL());
        return true;
    }
}

并在配置类中注册拦截器

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginCheckInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns( "/employee/login","/employee/logout", "/backend/**", "/front/**");
    }
}

注意：其实仅仅做到这一步拦截器是起不了作用的，我们知道在开启静态资源映射的时候，配置类继承了WebMvcConfigurationSupport类，通过查看WebMvcAutoConfiguration类：

@ConditionalOnClass({Servlet.class, DispatcherServlet.class, WebMvcConfigurer.class})
//容器中已经有WebMvcConfigurationSupport类的对象了，那么这个自动配置类将不会生效
@ConditionalOnMissingBean({WebMvcConfigurationSupport.class})
@AutoConfigureOrder(-2147483638)
public class WebMvcAutoConfiguration {

可知WebMvcConfigurationSupport 在整个应用程序中只会生效一个，如果用户已经实现了 WebMvcConfigurationSupport，则 WebMvcConfigurer 将不会生效，换句话来说，WebMvcConfigurer 的所有实现类将不会生效。也就是说登录拦截器不生效了。

我的解决方法是将WebMvcConfigurationSupport 类换成WebMvcConfiguration接口：

@Slf4j
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("开启静态资源映射");
        registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
        registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
    }
}

2、添加员工

数据模型

新增员工，其实就是将我们新增页面录入的员工数据插入到employee表。需要注意，employee表中对username字段加入了唯一约束，因为username是员工的登录账号，必须是唯一

代码开发

在开发代码之前，需要梳理一下整个程序的执行过程:

页面发送ajax请求，将新增员工页面中输入的数据以json的形式提交到服务端
服务端Controller接收页面提交的数据并调用Service将数据进行保存
Service调用Mapper操作数据库，保存数据

@PostMapping
public Result<String> save(@RequestBody Employee employee,HttpSession session){
    log.info("save员工：{}",employee);
    employee.setPassword(DigestUtils.md5DigestAsHex("123456".getBytes()));
    Date date = new Date();
    employee.setCreateTime(date);
    employee.setUpdateTime(date);
    Long empId = (Long) session.getAttribute("employee");
    employee.setCreateUser(empId);
    employee.setUpdateUser(empId);
    employeeService.save(employee);
    return Result.success(null);
}

前面的程序还存在一个问题，由于employee表中对该字段加入了唯一约束，当新增员工的账号已经存在时，此时程序会抛出异常:
java.sql.SQLIntegrityConstraintViolationException: Duplicate entry 'heniang' for key 'idx_username'

此时需要我们的程序进行异常捕获，通常有两种处理方式:

1、在Controller方法中加入try-catch进行异常捕获

2、使用异常处理器进行全局异常捕获此时程序会抛出异常

@RestControllerAdvice
@Slf4j
public class GlobalExceptionHandler {
    @ExceptionHandler(SQLIntegrityConstraintViolationException.class)
    public Result<String> exceptionHandler(SQLIntegrityConstraintViolationException ex){
        log.info("异常信息：{}",ex.getMessage());
        if (ex.getMessage().contains("Duplicate entry")){
            return Result.error("账号已存在");
        }
        return Result.error("操作失败");
    }
}

总结

1、根据产品原型明确业务需求

2、重点分析数据的流转过程和数据格式

3、通过debug断点调试跟踪程序执行过程

3、员工分页查询

需求分析

页面发送ajax请求，将分页查询参数(page.pageSize、name)提交到服务端
服务端Controller接收页面提交的数据并调用Service查询数据
Service调用Mapper操作数据库，查询分页数据
Controller将查询到的分页数据响应给页面
页面接收到分页数据并通过ElementUI的Table组件展示到页面上

代码开发

配置Mybatis-Plus的分页插件：

@Configuration
public class MyBatisPlusInterception {
    @Bean
    MybatisPlusInterceptor MybatisPlusInterceptor(){
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return mybatisPlusInterceptor;
    }
}

员工分页查询：

@GetMapping("/page")
public Result<Page> page(@RequestParam(value = "page", defaultValue = "1") Integer page,
                         @RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize,
                         @RequestParam(value = "name", required = false) String name) {
    log.info("分页数据——page:{},pageSize:{},name:{}", page, pageSize, name);
    //条件过滤器
    LambdaQueryWrapper<Employee> wrapper = new LambdaQueryWrapper<>();
    wrapper.like(StringUtils.hasLength(name), Employee::getName, name);
    wrapper.orderByDesc(Employee::getUpdateTime);
    Page<Employee> employeePage = employeeService.page(new Page<>(page, pageSize), wrapper);
    return Result.success(employeePage);
}

4、启用/禁用员工状态

需求分析

在员工管理列表页面，可以对某个员工账号进行启用或者禁用操作。账号禁用的员工不能登录系统，启用后的员工可以正常登录。

需要注意，只有管理员（admin用户）可以对其他普通用户进行启用、禁用操作，所以普通用户登录系统后启用、禁用按钮不显示。

前端发生送给服务器的请求：

function enableOrDisableEmployee (params) {
  return $axios({
    url: '/employee',
    method: 'put',
    data: { ...params }//{'id': this.id, 'status': !this.status ? 1 : 0}
  })
}

代码开发

更新员工状态：

@PutMapping
public Result<String> updateStatus(@RequestBody Employee employee,HttpSession session){
    log.info("id:{},status:{}",employee.getId(),employee.getStatus());
    Long empId = (Long) session.getAttribute("employee");
    employee.setUpdateTime(new Date());
    employee.setUpdateUser(empId);
    employeeService.updateById(employee);
    return Result.success("success");
}

代码修复

前面的代码在执行的时候没有异常，但是数据库在进行更新的时候却没有成功。通过调试我们知道服务器响应的数据是没有问题的，但请求参数却跟数据库表中的信息不一致。原因是服务器响应的id格式是19位的Long类型，但前端js对Long类型的处理只能精确到16位，这样id就丢失了精度，造成数据不匹配。

我们可以在服务端给页面响应json数据时进行处理，将long型数据统一转为String字符串。

具体实现步骤:

**1)**提供对象转换器JacksonObjectMapper，基于Jackson进行Java对象到json数据的转换

/**
 * 对象映射器:基于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);
    }
}

2) 在WebMvcConfig配置类中扩展Spring mvc的消息转换器，在此消息转换器中使用提供的对象转换器进行Java对象到json数据的转换

@Override
public void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
    MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
    messageConverter.setObjectMapper(new JacksonObjectMapper());
    converters.add(0,messageConverter);
}

5、编辑员工信息

需求分析

在员工管理列表页面点击编辑按钮，跳转到编辑页面，在编辑页面回显员工信息并进行修改，最后点击保存按钮完成编辑操作。

前端接口：

function queryEmployeeById (id) {
  return $axios({
    url: `/employee/${id}`,
    method: 'get'
  })
}

代码开发

1、点击编辑按钮时，页面跳转到add.html，并在url中携带参数[员工id]

2、在add.html页面获取url中的参数[员工id]

3、发送ajax请求，请求服务端，同时提交员工id参数

4、服务端接收请求，根据员工id查询员工信息，将员工信息以json形式响应给页面

@GetMapping("/{id}")
public Result<Employee> getEmpById(@PathVariable("id") Long id){
    Employee employee = employeeService.getById(id);
    return Result.success(employee);
}

5、页面接收服务端响应的json数据，通过VUE的数据绑定进行员工信息回显

6、点击保存按钮，发送ajax请求，将页面中的员工信息以json方式提交给服务端

// 修改员工
function editEmployee (params) {
  return $axios({
    url: '/employee',
    method: 'put',
    data: { ...params }
  })
}

7、服务端接收员工信息，并进行处理，完成后给页面响应

8、页面接收到服务端响应信息后进行相应处理

@PutMapping
public Result<String> update(@RequestBody Employee employee, HttpSession session) {
    log.info("update员工：{}", employee);
    Date date = new Date();
    employee.setUpdateTime(date);
    Long empId = (Long) session.getAttribute("employee");
    employee.setUpdateUser(empId);
    employeeService.updateById(employee);
    return Result.success("修改失败");
}