【store商城项目02】登录功能的开发

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

1.个人资料-持久层

1.1规划SQL语句

获取用户信息的SQL语句

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

根据uid查询用户数据(已开发完)

select * from t_user where uid=?
1

1.2设计接口

*
     * 根据id更改用户数据
     * @param user（也可以传入三个String的参数，比较麻烦）
     * @return 受影响的行说
     */
    Integer updateUserById(User user);
1
2
3
4
5
6

1.3编写映射

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

    <!--updateUserById-->
    <update id="updateUserById" >
        update t_user 
        set
            <if test="phone!=null">phone = #{phone},
            <if test="email!=null">email = #{email},
            <if test="gender!=null">gender = #{gender},
            modified_user=#{modifiedUser},
            modified_Time=#{modifiedTime}
        where uid=#{uid}
    </update>
1
2
3
4
5
6
7
8
9
10
11

1.4单元测试

   @Test
    public void updateInfoByUid(){
        User user = new User();
        user.setUid(36);
        user.setPhone("15678905432");
        user.setEmail("678234567@qq.com");
        user.setGender(1);
        user.setModifiedUser(user.getUsername());
        user.setModifiedTime(new Date());
        userMapper.updateUserById(user);
    }
1
2
3
4
5
6
7
8
9
10
11

2.个人资料-业务层

设计两个功能:
1.当打开页面时显示当前登录的用户的信息
2.点击修改按钮时更新用户的信息

2.1规划异常

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

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

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

    /**
     * 根据id进行检索
     * @param uid
     * @return 返回User数据
     */
    User selectUserById(Integer uid);

    /**
     * 根据uid更改用户个人资料
     * @param uid
     * @param user
     */
    void changeInfoById(Integer uid,User user);
1
2
3
4
5
6
7
8
9
10
11
12
13

3.个人资料-控制层

3.1处理异常

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

3.2设计请求

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

/users/get_by_uid
GET
HttpSession session(用于获取uid)
JsonResult
2.点击修改按钮发送用户的数据修改操作

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

3.3处理请求

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

    @RequestMapping("getUserByUid")
    public JsonResult<User> getUserByUid(HttpSession session){
        User user = userService.selectUserById(getUidFromSession(session));
        return new JsonResult<User>(ok,user);
    }
1
2
3
4
5

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

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

@RequestMapping("changeInfo")
    public JsonResult<Void> updateUserByUid(User user,HttpSession session){
        Integer uidFromSession = getUidFromSession(session);
        userService.changeInfoById(uidFromSession,user);
        return new JsonResult<Void>(ok);
    }
1
2
3
4
5
6

启动服务,先登录账号然后在地址栏输入http://localhost:8080/web/users/change_info?phone=175726&email=6695@qq.com&username=张9&gender=1观察状态码是否为200

4.个人资料-前段

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

	<script>
		$(document).ready(function () {
			$.ajax({
				url: "/store/users/getUserByUid",
				type: "GET",
				data: $("#form-change-info").serialize(),
				dataType: "JSON",
				success: function(json){
					if(json.state==200){
						$("#username").val(json.data.username);
						$("#phone").val(json.data.phone);
						$("#email").val(json.data.email);

						var radio = json.data.gender == 0 ?
								$("#gender-female") : $("#gender-male");
						//prop()表示给某个元素添加属性及属性的值
						radio.prop("checked","checked");
					}else{
						alert("用户数据不存在");
					}
				},
				error: function (xhr) {
					alert("查询用户信息时产生未知的异常"+xhr.message)
				}
			})
		})
	script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

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

$("#btn-change-info").click(function () {
			$.ajax({
				url: "/store/users/changeInfo",
				type: "POST",
				data: $("#form-change-info").serialize(),
				dataType: "JSON",
				success: function (json) {
					if(json.state==200){
						alert("修改成功")
						location.href="userdata.html"
					}else{
						alert("修改失败")
					}
				},
				error: function (xhr) {
					alert("位置错误"+xhr.message)
				}
			})
		})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19