SpringBoot项目--电脑商城【用户个人信息修改】

1.基本介绍

其中用户名是不可修改的并且是在进个人资料页面时就从session获取值并将值加入到控件中

2.持久层[Mapper]

1 规划SQL语句

• 获取用户信息的SQL语句

update t_user set python=?,email=?,gender=?,modified_user=?,modified_time=? where uid=?

根据uid查询用户数据

select * from t_user where uid=?

根据uid查询用户数据不需要再重复开发

2. 设计接口和抽象方法

更新用户的信息方法的定义

    /**
     * 参数为user的方法
     * @param user 用户的数据
     * @return 返回值为受影响的行数
     */
    Integer updateInfoByUid(User user);//也可以用三个String的形参接收电话,邮箱,性别,但不如直接写个user省事

3. 编写映射

在UserMapper.xml文件中进行映射编写

    <update id="updateInfoByUid">
        update t_user
        set
            <!--if是条件判断标签,属性test接受的是一个返回值为boolean类型的条件,
            如果test条件的结果为true则执行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},
            modified_time = #{modifiedTime}
        where uid=#{uid}
    </update>

4. 单元测试

@Test
public void updateInfoByUid() {
    User user = new User();
    user.setUid(11);
    user.setPhone("13333688");
    user.setEmail("1454@qq.com");
    user.setGender(1);
    userMapper.updateInfoByUid(user);
}

3.业务层【Service】

设计两个功能:

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

2.点击修改按钮时更新用户的信息

规划异常

• 点击个人资料页面时可能找不到用户的数据
• 点击修改按钮时可能找不到用户数据,也可能修改时出现未知错误

设计接口和抽象方法及实现

1.业务层有两个功能模块,对应的是两个抽象方法的设计,并且这两个功能都涉及到用户是否存在的查询操作,所以需要在业务层设计根据用户uid查询数据的方法(持久层已经设计过该方法,但是没有在业务层实现该方法的调用)

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

    /**
     * uid通过控制层在session中获取然后传递给业务层,并在业务层封装到User对象中
     * */
    void changeInfo(Integer uid,User user);

2.在实现类中实现当前的抽象方法

    /**
     * 根据用户的id查询用户的数据
     * @param uid
     * @return
     */
    @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.setGender(result.getGender());
        user.setEmail(result.getEmail());
        return user;
    }

    /**
     * 更新用户的数据操作【SpringBoot实现依赖注入时，自动提交表单的数据，所以我们手动将用户的uid和username加入到user中】
     * User中的数据phone email gender 手动将uid,username进行封装
     * @param uid 用户的id
     * @param username 用户的名称
     * @param 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.setUsername(username);
        //潜在参数
        user.setModifiedTime(new Date());
        user.setModifiedUser(username);
        Integer rows = userMapper.updateInfoByUid(user);
        if(rows!=1){
            throw new UpdateException("更新数据时产生未知的异常");
        }
    }

3单元测试

    @Test
    public void getByUid() {
        //err是为了让输出信息为红色
        System.err.println(userService.getByUid(11).getUsername());
    }

    @Test
    public void changeInfo() {
        User user = new User();
        //这四个属性值在真实开发中都是在控制层就已经自动封装在User对象中了
        //而uid需要由控制层传给业务层并在业务层封装到user中
        user.setPhone("123456789");
        user.setEmail("123@qq.com");
        user.setUsername("mxy");
        user.setGender(0);
        userService.changeInfo(11,user);
    }

4.控制层【Controller】

处理异常

没有新的异常,所以这里不需要有操作

设计请求

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

• /users/get_by_uid
• GET
• HttpSession session(用于获取uid)
• JsonResult<User>

2.点击修改按钮发送用户的数据修改操作

• users/change_info
• POST
• User user,HttpSession session(用于获取uid)
• JsonResult<Void>

3处理请求

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

    /**
     * 根据uid查询用户信息，并展示在页面
     * @param session
     * @return
     */
    @GetMapping("/get_by_uid")
    public JsonResult<User> getByUid(HttpSession session){
        User data = userService.getByUid(getuidFromSession(session));
        return new JsonResult<>(OK,data);
    }

启动服务,先登录账号然后在地址栏输入http://localhost:8080/users/get_by_uid看看状态码是否为200并且看data值是否不为null

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

    /**
     * 点击更新按钮，修改用户信息
     * @param user
     * @param session：这里使用session是为了获取用户的uid和username
     * @return
     */
    @PostMapping("/change_info")
    public JsonResult<Void> changeInfo(User user,HttpSession session){
        //user对象有四部分数据：username,phone,email,gender
        //uid数据需要再次封装到user中【SpringBoot实现依赖注入时，自动提交表单的数据，所以我们手动将用户的uid加入到user中】
        Integer uid = getuidFromSession(session);
        String username = getUsernameFromSession(session);
        userService.changeInfo(uid,username,user);
        return new JsonResult<>(OK);
    }

5. 前端页面

1.在打开userdata.html(个人资料)页面自动发送ajax请求(get_by_uid),查询到的数据填充到这个页面

		<!--页脚结束-->
	<script type="text/javascript">
		/*一旦检测到当前的页面被加载就会触发ready方法
$(document).ready(function() {
   //业务代码

})*/
		$(document).ready(function() {
			$.ajax({
				url: "/users/get_by_uid",
				type: "GET",
				dataType: "JSON",
				success: function(json) {
					if (json.state == 200) {
						//将查询到的数据重新设置到控件中
						//$("#控件名称")
						//val表示给元素赋值，以参数的形式传递到文本框
						$("#username").val(json.data.username);
						$("#phone").val(json.data.phone);
						$("#email").val(json.data.email);
						$("#gender").val(json.data.gender);
						let radio = json.data.gender == 0 ? $("#gender-female") : $("#gender-male");
						//表示给某个元素添加属性和属性值[checked=checked]
						radio.prop("checked", "checked");
					} else {
						alert("用户数据不存在 -> 原因：" + json.message);
					}
				},
				error: function (xhr) {
					alert("查询用户数据时产生未知的异常" + xhr.message);
				}
			});
		});
	</script>

2.在检测到用户点击了修改按钮后发送一个ajax请求(change_info)

该ajax函数需要和上一个ajax同级

		$("#btn-change-info").click(function() {
			$.ajax({
				url: "/users/update_information",
				type: "POST",
				data: $("#form-change-info").serialize(),
				dataType: "JSON",
				success: function(json) {
					if (json.state == 200) {
						alert("用户信息修改成功");
						location.href = "userdata.html";//修改完重新加载当前页面
					} else {
						alert("修改失败 -> 原因：" + json.message);
					}
				},
				error: function (xhr) {
					alert("未知的异常 在 修改用户信息" + xhr.message);
					alert("....")
					location.href = "login.html";
				}
			});