Java十天上手做一个自己的web商城笔记-个人资料（6）

 该系列博客主要记录笔者的开发过程，参考B站系列视频：【SpringBoot项目实战完整版】SpringBoot+MyBatis+MySQL电脑商城项目实战_哔哩哔哩_bilibili

所用的一些版本信息：

IDEA开发、JDK1.8版本以上、maven3.61版本以上，springboot，DataGrip管理数据库

修改个人资料页面如下：

​

1.个人资料-持久层

1.1 规划执行的SQL语句

1.更新用户信息的SQL语句

2.根据uid查询用户数据（保证系统鲁棒性）

1.2 接口与抽象方法

在store\src\main\java\com\cy\store\mapper\UserMapper.java中编写如下接口

    /**
     * 修改用户个人资料
     * @param user
     * @return 影响行数
     */
    Integer updateInfo(User user);

1.3 方法映射

在store\src\main\resources\mapper\UserMapper.xml编写映射方法

    <update id="updateInfo">
        UPDATE  t_user SET
            <!--if判断字段不为空才进行更新-->
            <if test="phone!=null">phone = #{phone},</if>
            <if test="email!=null">email = #{email},</if>
            <if test="gender!=null">gender = #{gender},</if>
            modified_user = #{modifiedUser},
            MODIFIER_TIME = #{modifiedTime}
        WHERE uid=${uid}
    </update>

1.4 单元测试

在store\src\test\java\com\cy\store\mapper\UserMapperTests.java编写单元测试

    @Test
    public void updateInfo(){
        User user = new User();
        user.setUid(29);
        user.setPhone("123456");
        user.setEmail("1234@qq.com");
        user.setGender(1);
        Integer rows = userMapper.updateInfo(user);
    }

2.个人资料-业务层

2.0 功能设计

1.打开页面后返回用户信息

2.修改用户信息

2.1 异常规划

1.用户数据不存在

2.修改时用户数据不存在

在store\src\main\java\com\cy\store\service\ex 中添加异常：

package com.cy.store.service.ex;

/** 用户未找到异常 */
public class UserNotFoundException extends ServiceException{
    public UserNotFoundException() {
        super();
    }

    public UserNotFoundException(String message) {
        super(message);
    }

    public UserNotFoundException(String message, Throwable cause) {
        super(message, cause);
    }

    public UserNotFoundException(Throwable cause) {
        super(cause);
    }

    protected UserNotFoundException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
        super(message, cause, enableSuppression, writableStackTrace);
    }
}

2.2 设计接口和抽象方法

1.打开页面后返回用户信息

2.修改用户信息

在store\src\main\java\com\cy\store\service\IUserService.java设计接口：

    /**
     * 根据Uid查询用户
     * @param uid
     * @return
     */
    User getByUid(Integer uid);

    /**
     * 更新用户资料
     * @param uid
     * @param username
     * @param user
     */
    void changeInfo(Integer uid, String username, User user);

在store\src\main\java\com\cy\store\service\impl\UserServiceImpl.java实现方法：

    @Override
    public User getByUid(Integer uid) {
        User result = userMapper.findByUid(uid);
        if(result == null || result.getIsDelete()==1){
            throw new UserNotFoundException("用户数据不存在");
        }
        //提高数据传输效率
        User user = new User();
        user.setUsername(result.getUsername());
        user.setPhone(result.getPhone());
        user.setEmail(result.getEmail());
        user.setGender(result.getGender());
        return user;
    }

    @Override
    public void changeInfo(Integer uid, String username, User user) {
        User result = userMapper.findByUid(uid);
        if(result == null || result.getIsDelete()==1){
            throw new UserNotFoundException("用户数据不存在");
        }
        user.setUid(uid);
        user.setModifiedUser(username);
        user.setModifiedTime(new Date());
        Integer rows = userMapper.updateInfoByUid(user);
        if(rows!=1){
            throw new UpdateException("更新数据时产生未知异常");
        }
    }

2.3 单元测试

在store\src\test\java\com\cy\store\service\UserServiceTests.java进行单元测试

    @Test
    public void changeInfo(){
        User user = new User();
        user.setPhone("999999999999");
        user.setEmail("9999@qq.com");
        user.setGender(0);
        userService.changeInfo(29, "管理员", user);
    }

3.个人资料-控制层

3.1 处理异常

store\src\main\java\com\cy\store\controller\BaseController.java 中修改如下代码

​

 

3.2 设计请求

1.打开页面就发送当前用户数据查询

url: users/get_by_uid
参数:HttpSession
请求方式:GET
响应结果:JsonResult<User>

2.点击修改按钮进行用户数据修改

url: users/change_info
参数:User user, HttpSession
请求方式:POSET
响应结果:JsonResult<Void>

3.3 处理请求

在store\src\main\java\com\cy\store\controller\UserController.java处理请求

    @RequestMapping("get_by_uid")
    public JsonResult<User> getByUid(HttpSession session) {
        User data = userService.getByUid(getuidFromSession(session));
        return new JsonResult<User>(OK, data);
    }

    @RequestMapping("change_info")
    public JsonResult<Void> changeInfo(User user, HttpSession session){
        //User 对象有四部分数据
        userService.changeInfo(getuidFromSession(session), getusernameFromSession(session), user);
        return new JsonResult<Void>(OK);
    }

4.个人资料-前端页面

1.打开页面，自动发送ajax请求

2.在检测点击修改按钮后，发送ajax请求

在store\src\main\resources\static\web\userdata.html添加如下代码：

		<script type="text/javascript">
			// 一旦检测当前页面被加载就会触发ready方法
			$(document).ready(function(){
				$.ajax({
					url:"/users/get_by_uid",
					type: "POST",
					data: $('#form-change-info').serialize(),
					dataType:"JSON",
					success:function (json){
						console.log(json)
						if(json.state == 200){
							//将查询数据重新设置到控件中
							$("#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");
							//prop表示给某个元素添加属性及属性的值
							radio.prop("checked", "checked")
						}else{
							alert("用户数据不存在" + json.message);
						}
					},
					error: function(xhr){
						alert("查询用户信息产生未知异常" + xhr.message)
					}
				});
			})
		</script>
		<script type="text/javascript">
			$("#btn-change-info").click(function(){
				$.ajax({
					url:"/users/change_info",
					type: "POST",
					data: $('#form-change-info').serialize(),
					dataType:"JSON",
					success:function (json){
						console.log(json)
						if(json.state == 200){
							alert("修改信息成功");
						}else{
							alert("修改信息失败" + json.message);
						}
					},
					error: function(xhr){
						alert("修改信息时产生未知异常" + xhr.message)
					}
				});
			});
		</script>

测试：

成功修改！