当前位置:   article > 正文

用springboot做一个电脑商城项目,第二天_springboot商城项目

springboot商城项目

用户登录

1 用户-登录-持久层

学习视频地址【SpringBoot项目实战完整版】SpringBoot+MyBatis+MySQL电脑商城项目实战_哔哩哔哩_bilibili

1.1 规划需要执行的SQL语句

用户登录功能需要执行的SQL语句是根据用户名查询用户数据,再判断密码是否正确。SQL语句大致是:

SELECT * FROM t_user WHERE username=?

说明:以上SQL语句对应的后台开发已经完成,无需再次开发。

1.2 接口与抽象方法

说明:无需再次开发。

1.3 配置SQL映射

说明:无需再次开发。

2 用户-登录-业务层

2.1 规划异常

1.如果用户名不存在则登录失败,抛出com.cy.store.service.ex.UserNotFoundException异常,并从父类生成子类的五个构造方法。

  1. package com.cy.store.service.ex;
  2. /** 用户数据不存在的异常 */
  3. public class UserNotFoundException extends ServiceException {
  4.    // Override Methods...
  5. }

2.如果用户的isDelete字段的值为1,则表示当前用户数据被标记为“已删除”,需进行登录失败操作同时抛出UserNotFoundException。

3.如果密码错误则进行登录失败操作,同时抛出com.cy.store.service.ex.PasswordNotMatchException异常。

  1. package com.cy.store.service.ex;
  2. /** 密码验证失败的异常 */
  3. public class PasswordNotMatchException extends ServiceException {
  4.    // Override Methods...
  5. }

4.创建以上UserNotFoundException和PasswordNotMatchException异常类,以上异常类应继承自ServiceException类。

2.2 接口与抽象方法

在IUserService接口中添加登录功能的抽象方法。

  1. /**
  2. * 用户登录
  3. * @param username 用户名
  4. * @param password 密码
  5. * @return 登录成功的用户数据
  6. */
  7. User login(String username, String password);

当登录成功后需要获取该用户的id,以便于后续识别该用户的身份,并且还需要获取该用户的用户名、头像等数据,用于显示在软件的界面中,需使用可以封装用于id、用户名和头像的数据的类型来作为登录方法的返回值类型。

2.3 实现抽象方法

1.在UserServiceImpl类中添加login(String username, String password)方法并分析业务逻辑。

  1. @Override
  2. public User login(String username, String password) {
  3. // 调用userMapper的findByUsername()方法,根据参数username查询用户数据
  4. // 判断查询结果是否为null
  5. // 是:抛出UserNotFoundException异常
  6. // 判断查询结果中的isDelete是否为1
  7. // 是:抛出UserNotFoundException异常
  8. // 从查询结果中获取盐值
  9. // 调用getMd5Password()方法,将参数password和salt结合起来进行加密
  10. // 判断查询结果中的密码,与以上加密得到的密码是否不一致
  11. // 是:抛出PasswordNotMatchException异常
  12. // 创建新的User对象
  13. // 将查询结果中的uid、username、avatar封装到新的user对象中
  14. // 返回新的user对象
  15. return null;
  16. }

2.login(String username, String password)方法中代码的具体实现。

  1. @Override
  2. public User login(String username, String password) {
  3.    // 调用userMapper的findByUsername()方法,根据参数username查询用户数据
  4.    User result = userMapper.findByUsername(username);
  5.    // 判断查询结果是否为null
  6.    if (result == null) {
  7.        // 是:抛出UserNotFoundException异常
  8.        throw new UserNotFoundException("用户数据不存在的错误");
  9.   }
  10.    // 判断查询结果中的isDelete是否为1
  11.    if (result.getIsDelete() == 1) {
  12.        // 是:抛出UserNotFoundException异常
  13.        throw new UserNotFoundException("用户数据不存在的错误");
  14.   }
  15.    // 从查询结果中获取盐值
  16.    String salt = result.getSalt();
  17.    // 调用getMd5Password()方法,将参数password和salt结合起来进行加密
  18.    String md5Password = getMd5Password(password, salt);
  19.    // 判断查询结果中的密码,与以上加密得到的密码是否不一致
  20.    if (!result.getPassword().equals(md5Password)) {
  21.        // 是:抛出PasswordNotMatchException异常
  22.        throw new PasswordNotMatchException("密码验证失败的错误");
  23.   }
  24.    // 创建新的User对象
  25.    User user = new User();
  26.    // 将查询结果中的uid、username、avatar封装到新的user对象中
  27.    user.setUid(result.getUid());
  28.    user.setUsername(result.getUsername());
  29.    user.setAvatar(result.getAvatar());
  30.    // 返回新的user对象
  31.    return user;
  32. }

3.完成后在UserServiceTests中编写并完成单元测试。

  1. @Test
  2. public void login() {
  3.    try {
  4.        String username = "lower";
  5.        String password = "123456";
  6.        User user = iUserService.login(username, password);
  7.        System.out.println("登录成功!" + user);
  8.   } catch (ServiceException e) {
  9.        System.out.println("登录失败!" + e.getClass().getSimpleName());
  10.        System.out.println(e.getMessage());
  11.   }

注意:不要使用错误的数据尝试登录,例如早期通过持久层测试新增用户的数据,将这些数据从表中删除。

3 用户-登录-控制器

3.1 处理异常

处理用户登录功能时,在业务层抛出了UserNotFoundException和PasswordNotMatchException异常,而这两个异常均未被处理过。则应在BaseController类的处理异常的方法中,添加这两个分支进行处理。

  1. @ExceptionHandler(ServiceException.class)
  2. public JsonResult<Void> handleException(Throwable e) {
  3. JsonResult<Void> result = new JsonResult<Void>(e);
  4. if (e instanceof UsernameDuplicateException) {
  5. result.setState(4000);
  6. } else if (e instanceof UserNotFoundException) {
  7. result.setState(4001);
  8. } else if (e instanceof PasswordNotMatchException) {
  9. result.setState(4002);
  10. } else if (e instanceof InsertException) {
  11. result.setState(5000);
  12. }
  13. return result;
  14. }

3.2 设计请求

设计用户提交的请求,并设计响应的方式:

请求路径:/users/login
请求参数:String username, String password
请求类型:POST
响应结果:JsonResult<User>

3.3 处理请求

1.在UserController类中添加处理登录请求的login(String username, String password)方法。

  1. @RequestMapping("login")
  2. public JsonResult<User> login(String username, String password) {
  3. // 调用业务对象的方法执行登录,并获取返回值
  4. // 将以上返回值和状态码OK封装到响应结果中并返回
  5. return null;
  6. }

2.处理登录请求的login(String username, String password)方法代码具体实现。

  1. @RequestMapping("login")
  2. public JsonResult<User> login(String username, String password) {
  3. // 调用业务对象的方法执行登录,并获取返回值
  4. User data = userService.login(username, password);
  5. // 将以上返回值和状态码OK封装到响应结果中并返回
  6. return new JsonResult<User>(OK, data);
  7. }

4.完成后启动项目,访问http://localhost:8080/users/login?username=Tom&password=1234请求进行登录。

4 用户-登录-前端页面

1.在login.html页面中body标签内部的最后,添加script标签用于编写JavaScript程序。

  1. <script type="text/javascript">
  2.    $("#btn-login").click(function() {
  3.    $.ajax({
  4.        url: "/users/login",
  5.        type: "POST",
  6.        data: $("#form-login").serialize(),
  7.        dataType: "json",
  8.        success: function(json) {
  9.            if (json.state == 200) {
  10.                alert("登录成功!");
  11.                location.href = "index.html";
  12.           } else {
  13.                alert("登录失败!" + json.message);
  14.           }
  15.       }
  16.   });
  17. });
  18. </script>

2.完成后启动项目,打开浏览器访问http://localhost:8080/web/login.html页面并进行登录。

拦截器

在Spring MVC中拦截请求是通过处理器拦截器HandlerInterceptor来实现的,它拦截的目标是请求的地址。在Spring MVC中定义一个拦截器,需要实现HandlerInterceptor接口。

1 HandlerInterceptor

1.1 preHandle()方法

该方法将在请求处理之前被调用。SpringMVC中的Interceptor是链式的调用,在一个应用或一个请求中可以同时存在多个Interceptor。每个Interceptor的调用会依据它的声明顺序依次执行,而且最先执行的都是Interceptor中的preHandle()方法,所以可以在这个方法中进行一些前置初始化操作或者是对当前请求的一个预处理,也可以在这个方法中进行一些判断来决定请求是否要继续进行下去。该方法的返回值是布尔值类型,当返回false时,表示请求结束,后续的Interceptor和Controller都不会再执行;当返回值true时,就会继续调用下一个Interceptor的preHandle方法,如果已经是最后一个Interceptor的时,就会调用当前请求的Controller方法。

1.2 postHandle()方法

该方法将在当前请求进行处理之后,也就是Controller方法调用之后执行,但是它会在DispatcherServlet进行视图返回渲染之前被调用,所以我们可以在这个方法中对Controller处理之后的ModelAndView对象进行操作。postHandle方法被调用的方向跟preHandle是相反的,也就是说先声明的Interceptor的postHandle方法反而会后执行。如果当前Interceptor的preHandle()方法返回值为false,则此方法不会被调用。

1.3 afterCompletion()方法

该方法将在整个当前请求结束之后,也就是在DispatcherServlet渲染了对应的视图之后执行。这个方法的主要作用是用于进行资源清理工作。如果当前Interceptor的preHandle()方法返回值为false,则此方法不会被调用。

2 WebMvcConfigurer

在SpringBoot项目中,如果想要自定义一些Interceptor、ViewResolver、MessageConverter,该如何实现呢?在SpringBoot 1.5版本都是靠重写WebMvcConfigurerAdapter类中的方法来添加自定义拦截器、视图解析器、消息转换器等。而在SpringBoot 2.0版本之后,该类被标记为@Deprecated。因此我们只能靠实现WebMvcConfigurer接口来实现。

WebMvcConfigurer接口中的核心方法之一addInterceptors(InterceptorRegistry registry)方法表示添加拦截器。主要用于进行用户登录状态的拦截,日志的拦截等。

  • addInterceptor:需要一个实现HandlerInterceptor接口的拦截器实例

  • addPathPatterns:用于设置拦截器的过滤路径规则;addPathPatterns("/**")对所有请求都拦截

  • excludePathPatterns:用于设置不需要拦截的过滤规则

  1. public interface WebMvcConfigurer {
  2.    // ...
  3.    default void addInterceptors(InterceptorRegistry registry) {
  4.   }
  5. }

3 项目添加拦截器功能

1.分析:项目中很多操作都是需要先登录才可以执行的,如果在每个请求处理之前都编写代码检查Session中有没有登录信息,是不现实的。所以应使用拦截器解决该问题。

2.创建拦截器类com.cy.store.interceptor.LoginInterceptor,并实现org.springframework.web.servlet.HandlerInterceptor接口。

  1. package com.cy.store.interceptor;
  2. import org.springframework.web.servlet.HandlerInterceptor;
  3. import javax.servlet.http.HttpServletRequest;
  4. import javax.servlet.http.HttpServletResponse;
  5. /** 定义处理器拦截器 */
  6. public class LoginInterceptor implements HandlerInterceptor {
  7.    @Override
  8.    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  9.        if (request.getSession().getAttribute("uid") == null) {
  10.            response.sendRedirect("/web/login.html");
  11.            return false;
  12.       }
  13.        return true;
  14.   }
  15. }

3.创建LoginInterceptorConfigurer拦截器的配置类并实现org.springframework.web.servlet.config.annotation.WebMvcConfigurer接口,配置类需要添加@Configruation注解修饰。

  1. package com.cy.store.config;
  2. import com.cy.store.interceptor.LoginInterceptor;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.servlet.HandlerInterceptor;
  5. import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
  6. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  7. import java.util.ArrayList;
  8. import java.util.List;
  9. /** 注册处理器拦截器 */
  10. @Configuration
  11. public class LoginInterceptorConfigurer implements WebMvcConfigurer {
  12.    /** 拦截器配置 */
  13.    @Override
  14.    public void addInterceptors(InterceptorRegistry registry) {
  15.        // 创建拦截器对象
  16.        HandlerInterceptor interceptor = new LoginInterceptor();
  17.        // 白名单
  18.        List<String> patterns = new ArrayList<String>();
  19.        patterns.add("/bootstrap3/**");
  20.        patterns.add("/css/**");
  21.        patterns.add("/images/**");
  22.        patterns.add("/js/**");
  23.        patterns.add("/web/register.html");
  24.        patterns.add("/web/login.html");
  25.        patterns.add("/web/index.html");
  26.        patterns.add("/web/product.html");
  27.        patterns.add("/users/reg");
  28.        patterns.add("/users/login");
  29.        patterns.add("/districts/**");
  30.        patterns.add("/products/**");
  31.        // 通过注册工具添加拦截器
  32.        registry.addInterceptor(interceptor).addPathPatterns("/**").excludePathPatterns(patterns);
  33.   }
  34. }

会话

1.重新构建login()方法,登录成功后将uid和username存入到HttpSession对象中。

  1. @RequestMapping("login")
  2. public JsonResult<User> login(String username, String password, HttpSession session) {
  3.    // 调用业务对象的方法执行登录,并获取返回值
  4.    User data = userService.login(username, password);
  5.    //登录成功后,将uid和username存入到HttpSession中
  6.    session.setAttribute("uid", data.getUid());
  7.    session.setAttribute("username", data.getUsername());
  8.    // System.out.println("Session中的uid=" + getUidFromSession(session));
  9.    // System.out.println("Session中的username=" + getUsernameFromSession(session));
  10.    // 将以上返回值和状态码OK封装到响应结果中并返回
  11.    return new JsonResult<User>(OK, data);
  12. }

2.在父类BaseController中添加从HttpSession对象中获取uid和username的方法,以便于后续快捷的获取这两个属性的值。

 

  1. /**
  2.  * 从HttpSession对象中获取uid
  3.  * @param session HttpSession对象
  4.  * @return 当前登录的用户的id
  5.  */
  6. protected final Integer getUidFromSession(HttpSession session) {
  7.     return Integer.valueOf(session.getAttribute("uid").toString());
  8. }
  9. /**
  10.  * 从HttpSession对象中获取用户名
  11.  * @param session HttpSession对象
  12.  * @return 当前登录的用户名
  13.  */
  14. protected final String getUsernameFromSession(HttpSession session) {
  15.     return session.getAttribute("username").toString();
  16. }

 

修改密码

1 用户-修改密码-持久层

1.1 规划需要执行的SQL语句

用户修改密码时需要执行的SQL语句大致是:

UPDATE t_user SET password=?, modified_user=?, modified_time=? WHERE uid=?

在执行修改密码之前,还应检查用户数据是否存在、并检查用户数据是否被标记为“已删除”、并检查原密码是否正确,这些检查都可以通过查询用户数据来辅助完成:

SELECT * FROM t_user WHERE uid=?

1.2 接口与抽象方法

在UserMapper接口添加updatePasswordByUid(Integer uid,String password,String modifiedUser,Date modifiedTime)抽象方法。

用注解来简化xml配置时,@Param注解的作用是给参数命名,参数命名后就能根据名字得到参数值,正确的将参数传入sql语句中。@Param("参数名")注解中的参数名需要和sql语句中的#{参数名}的参数名保持一致。

  1. /**
  2. * 根据uid更新用户的密码
  3. * @param uid 用户的id
  4. * @param password 新密码
  5. * @param modifiedUser 最后修改执行人
  6. * @param modifiedTime 最后修改时间
  7. * @return 受影响的行数
  8. */
  9. Integer updatePasswordByUid(
  10. @Param("uid") Integer uid,
  11. @Param("password") String password,
  12. @Param("modifiedUser") String modifiedUser,
  13. @Param("modifiedTime") Date modifiedTime);
  14. /**
  15. * 根据用户id查询用户数据
  16. * @param uid 用户id
  17. * @return 匹配的用户数据,如果没有匹配的用户数据,则返回null
  18. */
  19. User findByUid(Integer uid);

1.3 配置SQL映射

1.在UserMapper.xml中配置updatePasswordByUid()、findByUid()抽象方法的映射。

  1. <!-- 根据uid更新用户的密码:
  2. Integer updatePasswordByUid(
  3. @Param("uid") Integer uid,
  4. @Param("password") String password,
  5. @Param("modifiedUser") String modifiedUser,
  6. @Param("modifiedTime") Date modifiedTime) -->
  7. <update id="updatePasswordByUid">
  8. UPDATE
  9. t_user
  10. SET
  11. password = #{password},
  12. modified_user = #{modifiedUser},
  13. modified_time = #{modifiedTime}
  14. WHERE
  15. uid = #{uid}
  16. </update>
  17. <!-- 根据用户id查询用户数据:User findByUid(Integer uid) -->
  18. <select id="findByUid" resultMap="UserEntityMap">
  19. SELECT
  20. *
  21. FROM
  22. t_user
  23. WHERE
  24. uid = #{uid}
  25. </select>

2.在UserMapperTests中编写并执行单元测试。

  1. @Test
  2. public void updatePasswordByUid() {
  3. Integer uid = 7;
  4. String password = "123456";
  5. String modifiedUser = "超级管理员";
  6. Date modifiedTime = new Date();
  7. Integer rows = userMapper.updatePasswordByUid(uid, password, modifiedUser, modifiedTime);
  8. System.out.println("rows=" + rows);
  9. }
  10. @Test
  11. public void findByUid() {
  12. Integer uid = 7;
  13. User result = userMapper.findByUid(uid);
  14. System.out.println(result);
  15. }

2 用户-修改密码-业务层

2.1 规划异常

1.用户在修改密码前,需要检查用户数据是否存在及是否被标记为“已删除”。如果检查不通过则应抛出UserNotFoundException异常。

2.用户修改密码时,可能会因为输入的原密码错误导致修改失败,则应抛出PasswordNotMatchException异常。

3.在执行修改密码时,如果返回的受影响行数与预期值不同,则应抛出UpdateException异常。

4.创建com.cy.store.service.ex.UpdateException异常类,继承自ServiceException类。

  1. /** 更新数据的异常 */
  2. public class UpdateException extends ServiceException {
  3. // Override Methods...
  4. }

2.2 接口与抽象方法

在IUserService中添加changePassword(Integer uid, String username, String oldPassword, String newPassword)抽象方法。

  1. /**
  2. * 修改密码
  3. * @param uid 当前登录的用户id
  4. * @param username 用户名
  5. * @param oldPassword 原密码
  6. * @param newPassword 新密码
  7. */
  8. public void changePassword(Integer uid, String username, String oldPassword, String newPassword);

2.3 实现抽象方法

1.在UserServiceImpl类中实现changePassword()抽象方法。

  1. public void changePassword(Integer uid, String username, String oldPassword, String newPassword) {
  2. // 调用userMapper的findByUid()方法,根据参数uid查询用户数据
  3. // 检查查询结果是否为null
  4. // 是:抛出UserNotFoundException异常
  5. // 检查查询结果中的isDelete是否为1
  6. // 是:抛出UserNotFoundException异常
  7. // 从查询结果中取出盐值
  8. // 将参数oldPassword结合盐值加密,得到oldMd5Password
  9. // 判断查询结果中的password与oldMd5Password是否不一致
  10. // 是:抛出PasswordNotMatchException异常
  11. // 将参数newPassword结合盐值加密,得到newMd5Password
  12. // 创建当前时间对象
  13. // 调用userMapper的updatePasswordByUid()更新密码,并获取返回值
  14. // 判断以上返回的受影响行数是否不为1
  15. // 是:抛了UpdateException异常
  16. }

2.changePassword()方法的具体代码。

String中的equals与contentEquals方法,都可以用来比较String对象内容是否相同。

  1. @Override
  2. public void changePassword(Integer uid, String username, String oldPassword, String newPassword) {
  3. // 调用userMapper的findByUid()方法,根据参数uid查询用户数据
  4. User result = userMapper.findByUid(uid);
  5. // 检查查询结果是否为null
  6. if (result == null) {
  7. // 是:抛出UserNotFoundException异常
  8. throw new UserNotFoundException("用户数据不存在");
  9. }
  10. // 检查查询结果中的isDelete是否为1
  11. if (result.getIsDelete().equals(1)) {
  12. // 是:抛出UserNotFoundException异常
  13. throw new UserNotFoundException("用户数据不存在");
  14. }
  15. // 从查询结果中取出盐值
  16. String salt = result.getSalt();
  17. // 将参数oldPassword结合盐值加密,得到oldMd5Password
  18. String oldMd5Password = getMd5Password(oldPassword, salt);
  19. // 判断查询结果中的password与oldMd5Password是否不一致
  20. if (!result.getPassword().contentEquals(oldMd5Password)) {
  21. // 是:抛出PasswordNotMatchException异常
  22. throw new PasswordNotMatchException("原密码错误");
  23. }
  24. // 将参数newPassword结合盐值加密,得到newMd5Password
  25. String newMd5Password = getMd5Password(newPassword, salt);
  26. // 创建当前时间对象
  27. Date now = new Date();
  28. // 调用userMapper的updatePasswordByUid()更新密码,并获取返回值
  29. Integer rows = userMapper.updatePasswordByUid(uid, newMd5Password, username, now);
  30. // 判断以上返回的受影响行数是否不为1
  31. if (rows != 1) {
  32. // 是:抛出UpdateException异常
  33. throw new UpdateException("更新用户数据时出现未知错误,请联系系统管理员");
  34. }
  35. }

3.在UserServiceTests中编写并执行单元测试。

  1. @Test
  2. public void changePassword() {
  3.    try {
  4.        Integer uid = 5;
  5.        String username = "lower";
  6.        String oldPassword = "123456";
  7.        String newPassword = "888888";
  8.        userService.changePassword(uid, username, oldPassword, newPassword);
  9.        System.out.println("密码修改成功!");
  10.   } catch (ServiceException e) {
  11.        System.out.println("密码修改失败!" + e.getClass().getSimpleName());
  12.        System.out.println(e.getMessage());
  13.   }
  14. }

3 用户-修改密码-控制器

3.1 处理异常

在用户修改密码的业务中抛出了新的UpdateException异常,需要在BaseController类中进行处理。

  1. @ExceptionHandler(ServiceException.class)
  2. public JsonResult<Void> handleException(Throwable e) {
  3. JsonResult<Void> result = new JsonResult<Void>(e);
  4. if (e instanceof UsernameDuplicateException) {
  5. result.setState(4000);
  6. } else if (e instanceof UserNotFoundException) {
  7. result.setState(4001);
  8. } else if (e instanceof PasswordNotMatchException) {
  9. result.setState(4002);
  10. } else if (e instanceof InsertException) {
  11. result.setState(5000);
  12. } else if (e instanceof UpdateException) {
  13. result.setState(5001);
  14. }
  15. return result;
  16. }

3.2 设计请求

设计用户提交的请求,并设计响应的方式。

请求路径:/users/change_password
请求参数:String oldPassword, String newPassword, HttpSession session
请求类型:POST
响应结果:JsonResult<Void>

3.3 处理请求

1.在UserController类中添加处理请求的changePassword(String oldPassword, String newPassword, HttpSession session)方法。

  1. @RequestMapping("change_password")
  2. public JsonResult<Void> changePassword(String oldPassword, String newPassword, HttpSession session) {
  3. // 调用session.getAttribute("")获取uid和username
  4. // 调用业务对象执行修改密码
  5. // 返回成功
  6. return null;
  7. }

2.实现UserController控制器中的修改密码方法的代码。

  1. @RequestMapping("change_password")
  2. public JsonResult<Void> changePassword(String oldPassword, String newPassword, HttpSession session) {
  3. // 调用session.getAttribute("")获取uid和username
  4. Integer uid = getUidFromSession(session);
  5. String username = getUsernameFromSession(session);
  6. // 调用业务对象执行修改密码
  7. iUserService.changePassword(uid, username, oldPassword, newPassword);
  8. // 返回成功
  9. return new JsonResult<Void>(OK);
  10. }

3.启动项目先登录,再访问http://localhost:8080/users/change_password?oldPassword=xx&newPassword=xx进行测试。

4 用户-修改密码-前端页面

1.在password.html页面中body标签内部的最后,添加script标签用于编写JavaScript程序。

  1. <script type="text/javascript">
  2.    $("#btn-change-password").click(function() {
  3.        $.ajax({
  4.            url: "/users/change_password",
  5.            type: "POST",
  6.            data: $("#form-change-password").serialize(),
  7.            dataType: "json",
  8.            success: function(json) {
  9.                if (json.state == 200) {
  10.                    alert("修改成功!");
  11.               } else {
  12.                    alert("修改失败!" + json.message);
  13.               }
  14.           }
  15.       });
  16. });
  17. </script>

2.启动项目先登录,再访问http://localhost:8080/web/password.html页面并进行修改密码。

问题:如果无法正常将数据传递给后台,重启动系统和IDEA开发工具,登陆后便可修改密码。

3.问题:在操作前端页面时用户进入修改密码页面,长时间停留在当前页面未进行任何操作,将导致登录信息过期。此时点击修改按钮时,仍会向/users/change_password发送请求,会被拦截器重定向到登录页面。由于整个过程是由$.ajax()函数采用异步的方式处理的,所以重定向也是由异步任务完成的,在页面中没有任何表现就会出现“用户登录信息超时后点击按钮没有任何反应”的问题。

解决方案:可以在password.html页面的$.ajax()中补充error属性的配置,该属性的值是一个回调函数。当服务器未正常响应状态码时,例如出现302、400、404、405、500等状态码时,将会调用该函数。

  1. error: function (xhr) {
  2.    alert("您的登录信息已经过期,请重新登录!HTTP响应码:" + xhr.status);
  3.    location.href = "login.html";
  4. }

个人资料

1 用户-个人资料-持久层

1.1 规划需要执行的SQL语句

1.执行修改用户个人资料的SQL语句大致是:

UPDATE t_user SET phone=?, email=?, gender=?, modified_user=?, modified_time=? WHERE uid=?

2.在执行修改用户资料之前,当用户刚打开修改资料的页面时,就应把当前登录的用户信息显示到页面中。显示用户资料可以通过:

SELECT * FROM t_user WHERE uid=?

说明:

1.该查询功能已经实现,无需再次开发;

2.在执行修改用户资料之前,还应检查用户数据是否存在、是否标记为“已删除”,也可以通过以上查询来实现。

1.2 接口与抽象方法

在UserMapper接口中添加updateInfoByUid(User user)方法。

  1. /**
  2. * 根据uid更新用户资料
  3. * @param user 封装了用户id和新个人资料的对象
  4. * @return 受影响的行数
  5. */
  6. Integer updateInfoByUid(User user);

1.3 配置SQL映射

1.在UserMapper.xml中配置Integer updateInfoByUid(User user)抽象方法的映射。

  1. <!-- 根据uid更新用户个人资料:Integer updateInfoByUid(User user) -->
  2. <update id="updateInfoByUid">
  3. UPDATE
  4. t_user
  5. SET
  6. <if test="phone != null">phone = #{phone},</if>
  7. <if test="email != null">email = #{email},</if>
  8. <if test="gender != null">gender = #{gender},</if>
  9. modified_user = #{modifiedUser},
  10. modified_time = #{modifiedTime}
  11. WHERE
  12. uid = #{uid}
  13. </update>

2.在UserMapperTests中编写并执行单元测试。

  1. @Test
  2. public void updateInfoByUid() {
  3.    User user = new User();
  4.    user.setUid(20);
  5.    user.setPhone("17858802222");
  6.    user.setEmail("admin@cy.com");
  7.    user.setGender(1);
  8.    user.setModifiedUser("系统管理员");
  9.    user.setModifiedTime(new Date());
  10.    Integer rows = userMapper.updateInfoByUid(user);
  11.    System.out.println("rows=" + rows);
  12. }

2 用户-个人资料-业务层

2.1 规划异常

1.关于用户修改个人资料是由两个功能组成的。

  • 打开页面时显示当前登录的用户的信息;

  • 点击修改按钮时更新用户的信息。

2.关于打开页面时显示当前登录的用户的信息,可能会因为用户数据不存在、用户被标记为“已删除”而无法正确的显示页面,则抛出UserNotFoundException异常。

3.关于点击修改按钮时更新用户的信息,在执行修改资料之前仍需再次检查用户数据是否存在、用户是否被标记为“已删除”,则可能抛出UserNotFoundException异常。并且在执行修改资料过程中,还可能抛出UpdateException异常。

2.2 接口与抽象方法

在IUserService接口中添加两个抽象方法,分别对应以上两个功能。

  1. /**
  2. * 获取当前登录的用户的信息
  3. * @param uid 当前登录的用户的id
  4. * @return 当前登录的用户的信息
  5. */
  6. User getByUid(Integer uid);
  7. /**
  8. * 修改用户资料
  9. * @param uid 当前登录的用户的id
  10. * @param username 当前登录的用户名
  11. * @param user 用户的新的数据
  12. */
  13. void changeInfo(Integer uid, String username, User user);

2.3 实现抽象方法

1.在UserServiceImpl实现类中实现getByUid(Integer uid)和changeInfo(Integer uid, String username, User user)以上两个抽象方法。

  1. @Override
  2. public User getByUid(Integer uid) {
  3. // 调用userMapper的findByUid()方法,根据参数uid查询用户数据
  4. // 判断查询结果是否为null
  5. // 是:抛出UserNotFoundException异常
  6. // 判断查询结果中的isDelete是否为1
  7. // 是:抛出UserNotFoundException异常
  8. // 创建新的User对象
  9. // 将以上查询结果中的username/phone/email/gender封装到新User对象中
  10. // 返回新的User对象
  11. return null;
  12. }
  13. @Override
  14. public void changeInfo(Integer uid, String username, User user) {
  15. // 调用userMapper的findByUid()方法,根据参数uid查询用户数据
  16. // 判断查询结果是否为null
  17. // 是:抛出UserNotFoundException异常
  18. // 判断查询结果中的isDelete是否为1
  19. // 是:抛出UserNotFoundException异常
  20. // 向参数user中补全数据:uid
  21. // 向参数user中补全数据:modifiedUser(username)
  22. // 向参数user中补全数据:modifiedTime(new Date())
  23. // 调用userMapper的updateInfoByUid(User user)方法执行修改,并获取返回值
  24. // 判断以上返回的受影响行数是否不为1
  25. // 是:抛出UpdateException异常
  26. }

2.getByUid(Integer uid)和changeInfo(Integer uid, String username, User user)方法的具体代码实现。

  1. @Override
  2. public User getByUid(Integer uid) {
  3. // 调用userMapper的findByUid()方法,根据参数uid查询用户数据
  4. User result = userMapper.findByUid(uid);
  5. // 判断查询结果是否为null
  6. if (result == null) {
  7. // 是:抛出UserNotFoundException异常
  8. throw new UserNotFoundException("用户数据不存在");
  9. }
  10. // 判断查询结果中的isDelete是否为1
  11. if (result.getIsDelete().equals(1)) {
  12. // 是:抛出UserNotFoundException异常
  13. throw new UserNotFoundException("用户数据不存在");
  14. }
  15. // 创建新的User对象
  16. User user = new User();
  17. // 将以上查询结果中的username/phone/email/gender封装到新User对象中
  18. user.setUsername(result.getUsername());
  19. user.setPhone(result.getPhone());
  20. user.setEmail(result.getEmail());
  21. user.setGender(result.getGender());
  22. // 返回新的User对象
  23. return user;
  24. }
  25. @Override
  26. public void changeInfo(Integer uid, String username, User user) {
  27. // 调用userMapper的findByUid()方法,根据参数uid查询用户数据
  28. User result = userMapper.findByUid(uid);
  29. // 判断查询结果是否为null
  30. if (result == null) {
  31. // 是:抛出UserNotFoundException异常
  32. throw new UserNotFoundException("用户数据不存在");
  33. }
  34. // 判断查询结果中的isDelete是否为1
  35. if (result.getIsDelete().equals(1)) {
  36. // 是:抛出UserNotFoundException异常
  37. throw new UserNotFoundException("用户数据不存在");
  38. }
  39. // 向参数user中补全数据:uid
  40. user.setUid(uid);
  41. // 向参数user中补全数据:modifiedUser(username)
  42. user.setModifiedUser(username);
  43. // 向参数user中补全数据:modifiedTime(new Date())
  44. user.setModifiedTime(new Date());
  45. // 调用userMapper的updateInfoByUid(User user)方法执行修改,并获取返回值
  46. Integer rows = userMapper.updateInfoByUid(user);
  47. // 判断以上返回的受影响行数是否不为1
  48. if (rows != 1) {
  49. // 是:抛出UpdateException异常
  50. throw new UpdateException("更新用户数据时出现未知错误,请联系系统管理员");
  51. }
  52. }

3.在UserServiceTests类中进行单元测试。

  1. @Test
  2. public void getByUid() {
  3.    try {
  4.        Integer uid = 20;
  5.        User user = iUserService.getByUid(uid);
  6.        System.out.println(user);
  7.   } catch (ServiceException e) {
  8.        System.out.println(e.getClass().getSimpleName());
  9.        System.out.println(e.getMessage());
  10.   }
  11. }
  12. @Test
  13. public void changeInfo() {
  14.    try {
  15.        Integer uid = 20;
  16.        String username = "数据管理员";
  17.        User user = new User();
  18.        user.setPhone("15512328888");
  19.        user.setEmail("admin03@cy.cn");
  20.        user.setGender(2);
  21.        iUserService.changeInfo(uid, username, user);
  22.        System.out.println("OK.");
  23.   } catch (ServiceException e) {
  24.        System.out.println(e.getClass().getSimpleName());
  25.        System.out.println(e.getMessage());
  26.   }
  27. }

3 用户-个人资料-控制器

3.1 处理异常

说明:无需再次开发。

3.2 设计请求

1.设计用户提交显示当前登录的用户信息的请求,并设计响应的方式。

请求路径:/users/get_by_uid
请求参数:HttpSession session
请求类型:GET
响应结果:JsonResult<User>

2.设计用户提交执行修改用户信息的请求,并设计响应的方式。

请求路径:/users/change_info
请求参数:User user, HttpSession session
请求类型:POST
响应结果:JsonResult<Void>

3.3 处理请求

1.处理获取用户信息请求

1.在UserController类中添加处理请求的getByUid()方法,并导入org.springframework.web.bind.annotation.GetMapping包。

  1. @GetMapping("get_by_uid")
  2. public JsonResult<User> getByUid(HttpSession session) {
  3. // 从HttpSession对象中获取uid
  4. // 调用业务对象执行获取数据
  5. // 响应成功和数据
  6. return null;
  7. }

2.getByUid(HttpSession session)方法中具体代码实现为。

  1. @GetMapping("get_by_uid")
  2. public JsonResult<User> getByUid(HttpSession session) {
  3.    // 从HttpSession对象中获取uid
  4.    Integer uid = getUidFromSession(session);
  5.    // 调用业务对象执行获取数据
  6.    User data = userService.getByUid(uid);
  7.    // 响应成功和数据
  8.    return new JsonResult<User>(OK, data);
  9. }

3.完成后启动项目,打开浏览器先登录,再访问http://localhost:8080/users/get_by_uid请求进行测试。

2.处理修改用户个人信息请求

1.在UserController类中添加处理请求的changeInfo(User user, HttpSession session)方法。

  1. @RequestMapping("change_info")
  2. public JsonResult<Void> changeInfo(User user, HttpSession session) {
  3. // 从HttpSession对象中获取uid和username
  4. // 调用业务对象执行修改用户资料
  5. // 响应成功
  6. return null;
  7. }

2.changeInfo(User user, HttpSession session)方法中具体代码实现为。

  1. @RequestMapping("change_info")
  2. public JsonResult<Void> changeInfo(User user, HttpSession session) {
  3. // 从HttpSession对象中获取uid和username
  4. Integer uid = getUidFromSession(session);
  5. String username = getUsernameFromSession(session);
  6. // 调用业务对象执行修改用户资料
  7. userService.changeInfo(uid, username, user);
  8. // 响应成功
  9. return new JsonResult<Void>(OK);
  10. }

3.完成后启动项目,打开浏览器先登录,再访问http://localhost:8080/users/change_info?phone=17858800000&email=admin07@cy.com&gender=1进行测试。

4 用户-个人资料-前端页面

1.在userdata.html页面中body标签内部的最后,添加script标签用于编写JavaScript程序。

  1. <script type="text/javascript">
  2.    $(document).ready(function() {
  3.        $.ajax({
  4.            url: "/users/get_by_uid",
  5.            type: "GET",
  6.            dataType: "json",
  7.            success: function(json) {
  8.                if (json.state == 200) {
  9.                    console.log("username=" + json.data.username);
  10.                    console.log("phone=" + json.data.phone);
  11.                    console.log("email=" + json.data.email);
  12.                    console.log("gender=" + json.data.gender);
  13.                    $("#username").val(json.data.username);
  14.                    $("#phone").val(json.data.phone);
  15.                    $("#email").val(json.data.email);
  16.                    let radio = json.data.gender == 0 ? $("#gender-female") : $("#gender-male");
  17.                    radio.prop("checked", "checked");
  18.               } else {
  19.                    alert("获取用户信息失败!" + json.message);
  20.               }
  21.           }
  22.       });
  23. });
  24.    $("#btn-change-info").click(function() {
  25.        $.ajax({
  26.            url: "/users/change_info",
  27.            type: "POST",
  28.            data: $("#form-change-info").serialize(),
  29.            dataType: "json",
  30.            success: function(json) {
  31.                if (json.state == 200) {
  32.                    alert("修改成功!");
  33.                    location.href = "login.html";
  34.               } else {
  35.                    alert("修改失败!" + json.message);
  36.               }
  37.           },
  38.            error: function(xhr) {
  39.                alert("您的登录信息已经过期,请重新登录!HTTP响应码:" + xhr.status);
  40.                location.href = "login.html";
  41.           }
  42.       });
  43.   });
  44. </script>

2.完成后启动项目,打开浏览器先登录,再访问http://localhost:8080/web/userdata.html页面并进行用户个人资料的修改测试。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/860073
推荐阅读
相关标签
  

闽ICP备14008679号