项目实战(P3)（Day 31）

poppingQQ星

已于 2022-02-23 22:26:51 修改

阅读量362

点赞数

分类专栏：项目实战程序员成长之路每日博客文章标签： jquery javascript 前端

于 2022-02-23 22:26:33 首次发布

本文链接：https://blog.csdn.net/weixin_50178621/article/details/123089578

版权

程序员成长之路同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

每日博客

36 篇文章 0 订阅

订阅专栏

项目实战

19 篇文章 0 订阅

订阅专栏

这篇博客介绍了前端用户登录的实现，包括在index.js中添加表单提交函数，使用layui的form模块处理登录逻辑，以及利用cookie保存用户信息。为增强安全性，对userId进行了加密处理。此外，还探讨了修改密码的后端实现，涉及参数校验、密码加密和数据库更新。学习过程中，博主还实践了项目上传至Gitee并分享了学习心得。

摘要由CSDN通过智能技术生成

学习内容：

用户登录前端实现

在index.js中加入表单提交的函数

接受到传入的参数后传给后端在接受到ResultInfo对象，根据ResultInfo的Code值来判断登录是否成功

细节更改

在UserModel中添加加密后的userId，利用UserIDBase64类中的方法

学习内容：

用户登录前端实现

在index.js中加入表单提交的函数

form.on('submit(*)', function(data){ });

接受到传入的参数后传给后端在接受到ResultInfo对象，根据ResultInfo的Code值来判断登录是否成功

layui.use(['form','jquery','jquery_cookie'], function () {
    var form = layui.form,
        layer = layui.layer,
        $ = layui.jquery,
        $ = layui.jquery_cookie($);


    /**
     * 表单submit提交
     *  form.on('submit(按钮的lay-filter属性值)', function(data){
     *
     *       return false; //阻止表单跳转。
     *  });
     */
    form.on('submit(login)', function(data){

        console.log(data.field) // 当前容器的全部表单字段，名值对形式：{name: value}

        /* 表单元素的非空校验  已经在layui中完成了校验 */

        /* 发送ajax请求，传递用户姓名与密码，执行用户登录操作 */
        $.ajax({
            type:"post",
            url: ctx + "/user/login",
            data:{
                userName:data.field.username,
                userPwd:data.field.password
            },
            success:function (result) { // result是回调函数，用来接收后端返回的数据
                console.log(result);
                // 判断是否登录成功 如果code=200，则表示成功，否则表示失败
                if (result.code == 200) {
                     /**
                     * 设置用户是登录状态
                     *  1. 利用session会话
                     *      保存用户信息，如果会话存在，则用户是登录状态；否则是非登录状态
                     *      缺点：服务器关闭，会话则会失效
                     *  2. 利用cookie
                     *      保存用户信息，cookie未失效，则用户是登录状态
                     */
                    layer.msg("登录成功！", function () {
                            // 将用户信息设置到cookie中
                            $.cookie("userId",result.result.userId);
                            $.cookie("userName",result.result.userName);
                            $.cookie("trueName",result.result.trueName);
                        // 登录成功后，跳转到首页
                        window.location.href = ctx + "/main";
                    });

                } else {
                    // 登录失败
                    layer.msg(result.msg, {icon:5});
                }
            }
        });

        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });


});

新思想：利用cookie来保存客户信息

细节更改

浏览器上可以直接看到用户cookie信息不安全，需要进行加密操作

在UserModel中添加加密后的userId，利用UserIDBase64类中的方法

修改三处地方

UserModel.java

private String userIdStr;

public String getUserIdStr() { return userIdStr; }

public void setUserIdStr(String userIdStr) { this.userIdStr = userIdStr; }

index.js

$.cookie("userIdStr",result.result.userIdStr);

UserService.java

userModel.setUserIdStr(UserIDBase64.encoderUserID(user.getId()));

修改之后：

在浏览器上每个界面都显示用户名

利用LoginUserUtil中方法来获取cookie中的uesrIdStr，并且解密，得到userId

然后根据userId来查询user对象

 @Resource
    private UserService userService;
@RequestMapping("main")
    public String main(HttpServletRequest request) {
        //获取cookie中的用户id
        Integer userId = LoginUserUtil.releaseUserIdFromCookie(request);
        //查询用户对象，设置session作用域
        User user = userService.selectByPrimaryKey(userId);
        request.getSession().setAttribute("user",user);
        return "main";
    }

新思想：需要对信息的保护，在web界面的一些重要的用户信息需要加密之后，再放到cookie中

修改密码

整理思路确认如何实现

二、修改密码
    后端实现
        Controller层
            1. 通过形参接收前端传递的参数 （原始密码、新密码、确认密码）
            2. 通过request对象，获取设置在cookie中的用户ID
            3. 调用Service层修改密码的功能，得到ResultInfo对象
            4. 返回ResultInfo对象

        Service层
            1. 接收四个参数 （用户ID、原始密码、新密码、确认密码）
            2. 通过用户ID查询用户记录，返回用户对象
            3. 参数校验
                待更新用户记录是否存在 （用户对象是否为空）
                判断原始密码是否为空
                判断原始密码是否正确（查询的用户对象中的用户密码是否原始密码一致）
                判断新密码是否为空
                判断新密码是否与原始密码一致 （不允许新密码与原始密码）
                判断确认密码是否为空
                判断确认密码是否与新密码一致
            4. 设置用户的新密码
                需要将新密码通过指定算法进行加密（md5加密）
            5. 执行更新操作，判断受影响的行数

        Dao层
            通过用户ID修改用户密码

学习了Gitee，并idea项目上传进了gitee

https://pan.baidu.com/s/1nJdMq9DnOhsHvKHFVB0Edg

学习时间：

2022-2-23 14：23-17：52、18：33-20：00、20:30-22:15

学习心得：

昨天学的有点晚，洗漱完睡觉前看看抖音，一下就两点了，今天甚至早上都没有起来，有点笨拙了，下午收到通知，明天有个面试，我也不知道自己可不可以升任程序员这份工作，反正尽力就好，没过就学着总结自己哪里不对，哪些知识没有掌握，过了也希望可以在，新的公司里面学习到更多东西来强化自己。今天就先到这儿，要去休息了，以崭新的，充满活力的自己去面试！