计算机毕业设计|基于SpringBoot+MyBatis框架的电脑商城的设计与实现（用户资料修改）

该项目分析着重于设计和实现基于SpringBoot+MyBatis框架的电脑商城。首先，通过深入分析项目所需数据，包括用户、商品、商品类别、收藏、订单、购物车、收货地址，建立了数据模型。关于SpringBoot+MyBatis框架的电脑商城的设计与实现，我会按照系统概述与环境搭建、用户注册登录、用户资料修改、用户上传头像、-用户收货管理、商品、购物车、订单、AOP的顺序依次更新。本文内容主要是项目用户资料修改部分。

修改密码

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语句中的#{参数名}的参数名保持一致。

/*** 根据uid更新用户的密码* @param uid 用户的id* @param password 新密码* @param modifiedUser 最后修改执行人* @param modifiedTime 最后修改时间* @return 受影响的行数*/
Integer updatePasswordByUid(@Param("uid") Integer uid, @Param("password") String password, @Param("modifiedUser") String modifiedUser, @Param("modifiedTime") Date modifiedTime);/*** 根据用户id查询用户数据* @param uid 用户id* @return 匹配的用户数据，如果没有匹配的用户数据，则返回null*/
User findByUid(Integer uid);

1.3 配置SQL映射

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

<!-- 根据uid更新用户的密码：Integer updatePasswordByUid(@Param("uid") Integer uid, @Param("password") String password, @Param("modifiedUser") String modifiedUser, @Param("modifiedTime") Date modifiedTime) -->
<update id="updatePasswordByUid">UPDATEt_user SETpassword = #{password},modified_user = #{modifiedUser},modified_time = #{modifiedTime} WHEREuid = #{uid}
</update><!-- 根据用户id查询用户数据：User findByUid(Integer uid) -->
<select id="findByUid" resultMap="UserEntityMap">SELECT*FROMt_userWHEREuid = #{uid}
</select>

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

@Test
public void updatePasswordByUid() {Integer uid = 7;String password = "123456";String modifiedUser = "超级管理员";Date modifiedTime = new Date();Integer rows = userMapper.updatePasswordByUid(uid, password, modifiedUser, modifiedTime);System.out.println("rows=" + rows);
}@Test
public void findByUid() {Integer uid = 7;User result = userMapper.findByUid(uid);System.out.println(result);
}

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

2.1 规划异常

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

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

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

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

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

2.2 接口与抽象方法

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

/*** 修改密码* @param uid 当前登录的用户id* @param username 用户名* @param oldPassword 原密码* @param newPassword 新密码*/
public void changePassword(Integer uid, String username, String oldPassword, String newPassword);

2.3 实现抽象方法

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

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

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

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

@Override
public void changePassword(Integer uid, String username, String oldPassword, String newPassword) {// 调用userMapper的findByUid()方法，根据参数uid查询用户数据User result = userMapper.findByUid(uid);// 检查查询结果是否为nullif (result == null) {// 是：抛出UserNotFoundException异常throw new UserNotFoundException("用户数据不存在");}// 检查查询结果中的isDelete是否为1if (result.getIsDelete().equals(1)) {// 是：抛出UserNotFoundException异常throw new UserNotFoundException("用户数据不存在");}// 从查询结果中取出盐值String salt = result.getSalt();// 将参数oldPassword结合盐值加密，得到oldMd5PasswordString oldMd5Password = getMd5Password(oldPassword, salt);// 判断查询结果中的password与oldMd5Password是否不一致if (!result.getPassword().contentEquals(oldMd5Password)) {// 是：抛出PasswordNotMatchException异常throw new PasswordNotMatchException("原密码错误");}// 将参数newPassword结合盐值加密，得到newMd5PasswordString newMd5Password = getMd5Password(newPassword, salt);// 创建当前时间对象Date now = new Date();// 调用userMapper的updatePasswordByUid()更新密码，并获取返回值Integer rows = userMapper.updatePasswordByUid(uid, newMd5Password, username, now);// 判断以上返回的受影响行数是否不为1if (rows != 1) {// 是：抛出UpdateException异常throw new UpdateException("更新用户数据时出现未知错误，请联系系统管理员");}
}

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

@Test
public void changePassword() {try {Integer uid = 5;String username = "lower";String oldPassword = "123456";String newPassword = "888888";userService.changePassword(uid, username, oldPassword, newPassword);System.out.println("密码修改成功！");} catch (ServiceException e) {System.out.println("密码修改失败！" + e.getClass().getSimpleName());System.out.println(e.getMessage());}
}

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

3.1 处理异常

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

@ExceptionHandler(ServiceException.class)
public JsonResult<Void> handleException(Throwable e) {JsonResult<Void> result = new JsonResult<Void>(e);if (e instanceof UsernameDuplicateException) {result.setState(4000);} else if (e instanceof UserNotFoundException) {result.setState(4001);} else if (e instanceof PasswordNotMatchException) {result.setState(4002);} else if (e instanceof InsertException) {result.setState(5000);} else if (e instanceof UpdateException) {result.setState(5001);}return result;
}

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)方法。

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

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

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

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

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

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

<script type="text/javascript">$("#btn-change-password").click(function() {$.ajax({url: "/users/change_password",type: "POST",data: $("#form-change-password").serialize(),dataType: "json",success: function(json) {if (json.state == 200) {alert("修改成功！");} else {alert("修改失败！" + json.message);}}});});
</script>

2.启动项目先登录，再访问

http://localhost:8080/web/password.html

页面并进行修改密码。

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

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

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

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

个人资料

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)方法。

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

1.3 配置SQL映射

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

<!-- 根据uid更新用户个人资料：Integer updateInfoByUid(User user) -->
<update id="updateInfoByUid">UPDATEt_user SET<if test="phone != null">phone = #{phone},</if><if test="email != null">email = #{email},</if><if test="gender != null">gender = #{gender},</if>modified_user = #{modifiedUser},modified_time = #{modifiedTime}WHEREuid = #{uid}
</update>

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

@Test
public void updateInfoByUid() {User user = new User();user.setUid(20);user.setPhone("17858802222");user.setEmail("admin@cy.com");user.setGender(1);user.setModifiedUser("系统管理员");user.setModifiedTime(new Date());Integer rows = userMapper.updateInfoByUid(user);System.out.println("rows=" + rows);
}

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

2.1 规划异常

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

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

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

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

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

2.2 接口与抽象方法

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

/*** 获取当前登录的用户的信息* @param uid 当前登录的用户的id* @return 当前登录的用户的信息*/
User getByUid(Integer uid);/*** 修改用户资料* @param uid 当前登录的用户的id* @param username 当前登录的用户名* @param user 用户的新的数据*/
void changeInfo(Integer uid, String username, User user);

2.3 实现抽象方法

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

@Override
public User getByUid(Integer uid) {// 调用userMapper的findByUid()方法，根据参数uid查询用户数据// 判断查询结果是否为null// 是：抛出UserNotFoundException异常// 判断查询结果中的isDelete是否为1// 是：抛出UserNotFoundException异常// 创建新的User对象// 将以上查询结果中的username/phone/email/gender封装到新User对象中// 返回新的User对象return null;
}@Override
public void changeInfo(Integer uid, String username, User user) {// 调用userMapper的findByUid()方法，根据参数uid查询用户数据// 判断查询结果是否为null// 是：抛出UserNotFoundException异常// 判断查询结果中的isDelete是否为1// 是：抛出UserNotFoundException异常// 向参数user中补全数据：uid// 向参数user中补全数据：modifiedUser(username)// 向参数user中补全数据：modifiedTime(new Date())// 调用userMapper的updateInfoByUid(User user)方法执行修改，并获取返回值// 判断以上返回的受影响行数是否不为1// 是：抛出UpdateException异常}

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

@Override
public User getByUid(Integer uid) {// 调用userMapper的findByUid()方法，根据参数uid查询用户数据User result = userMapper.findByUid(uid);// 判断查询结果是否为nullif (result == null) {// 是：抛出UserNotFoundException异常throw new UserNotFoundException("用户数据不存在");}// 判断查询结果中的isDelete是否为1if (result.getIsDelete().equals(1)) {// 是：抛出UserNotFoundException异常throw new UserNotFoundException("用户数据不存在");}// 创建新的User对象User user = new User();// 将以上查询结果中的username/phone/email/gender封装到新User对象中user.setUsername(result.getUsername());user.setPhone(result.getPhone());user.setEmail(result.getEmail());user.setGender(result.getGender());// 返回新的User对象return user;
}@Override
public void changeInfo(Integer uid, String username, User user) {// 调用userMapper的findByUid()方法，根据参数uid查询用户数据User result = userMapper.findByUid(uid);// 判断查询结果是否为nullif (result == null) {// 是：抛出UserNotFoundException异常throw new UserNotFoundException("用户数据不存在");}// 判断查询结果中的isDelete是否为1if (result.getIsDelete().equals(1)) {// 是：抛出UserNotFoundException异常throw new UserNotFoundException("用户数据不存在");}// 向参数user中补全数据：uiduser.setUid(uid);// 向参数user中补全数据：modifiedUser(username)user.setModifiedUser(username);// 向参数user中补全数据：modifiedTime(new Date())user.setModifiedTime(new Date());// 调用userMapper的updateInfoByUid(User user)方法执行修改，并获取返回值Integer rows = userMapper.updateInfoByUid(user);// 判断以上返回的受影响行数是否不为1if (rows != 1) {// 是：抛出UpdateException异常throw new UpdateException("更新用户数据时出现未知错误，请联系系统管理员");}
}

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

@Test
public void getByUid() {try {Integer uid = 20;User user = iUserService.getByUid(uid);System.out.println(user);} catch (ServiceException e) {System.out.println(e.getClass().getSimpleName());System.out.println(e.getMessage());}
}@Test
public void changeInfo() {try {Integer uid = 20;String username = "数据管理员";User user = new User();user.setPhone("15512328888");user.setEmail("admin03@cy.cn");user.setGender(2);iUserService.changeInfo(uid, username, user);System.out.println("OK.");} catch (ServiceException e) {System.out.println(e.getClass().getSimpleName());System.out.println(e.getMessage());}
}

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包。

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

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

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

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

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

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

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

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

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

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

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

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

<script type="text/javascript">$(document).ready(function() {$.ajax({url: "/users/get_by_uid",type: "GET",dataType: "json",success: function(json) {if (json.state == 200) {console.log("username=" + json.data.username);console.log("phone=" + json.data.phone);console.log("email=" + json.data.email);console.log("gender=" + json.data.gender);$("#username").val(json.data.username);$("#phone").val(json.data.phone);$("#email").val(json.data.email);let radio = json.data.gender == 0 ? $("#gender-female") : $("#gender-male");radio.prop("checked", "checked");} else {alert("获取用户信息失败！" + json.message);}}});});$("#btn-change-info").click(function() {$.ajax({url: "/users/change_info",type: "POST",data: $("#form-change-info").serialize(),dataType: "json",success: function(json) {if (json.state == 200) {alert("修改成功！");location.href = "login.html";} else {alert("修改失败！" + json.message);}},error: function(xhr) {alert("您的登录信息已经过期，请重新登录！HTTP响应码：" + xhr.status);location.href = "login.html";}});});
</script>

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

<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "/users/get_by_uid",
type: "GET",
dataType: "json",
success: function(json) {
if (json.state == 200) {
console.log("username=" + json.data.username);
console.log("phone=" + json.data.phone);
console.log("email=" + json.data.email);
console.log("gender=" + json.data.gender);
$("#username").val(json.data.username);
$("#phone").val(json.data.phone);
$("#email").val(json.data.email);
let radio = json.data.gender == 0 ? $("#gender-female") :
$("#gender-male");
radio.prop("checked", "checked");
} else {
alert("获取用户信息失败！" + json.message);
}
}
});
});
$("#btn-change-info").click(function() {
$.ajax({
url: "/users/change_info",
type: "POST",
data: $("#form-change-info").serialize(),
dataType: "json",
success: function(json) {
if (json.state == 200) {
alert("修改成功！");
location.href = "login.html";
} else {
alert("修改失败！" + json.message);
}
},
error: function(xhr) {
alert("您的登录信息已经过期，请重新登录！HTTP响应码：" + xhr.status);
location.href = "login.html";
}
});
});
</script>

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