商城秒杀学习之路

最新推荐文章于 2021-06-27 21:44:19 发布

qq_40945838

最新推荐文章于 2021-06-27 21:44:19 发布

阅读量163

点赞数

分类专栏：学习笔记文章标签： java

本文链接：https://blog.csdn.net/qq_40945838/article/details/106327090

版权

学习同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

本文介绍了如何构建商城秒杀系统的登录页面，包括使用js/css、jquery、bootstrap、layer和MD5等技术创建Login.html页面，详细讲解了前端页面的布局和功能实现，如登录和重置按钮。接着，文章描述了后端处理，如LoginVo对象的创建，Controller中接收参数的方法，以及与数据库交互的User类和Dao层的设计。最后，提到了在Service中实现登录验证的逻辑。

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

商城秒杀：登录页面

1.添加Login.html页面，内容由js/css构建的前端页面，应用了jquery，bootstrap，layer，MD5，common。代码如下：

然后进行页面内容编写，基于bootstrap编写的，代码如下：

<body>

<form name="loginForm" id="loginForm" method="post"  style="width:50%; margin:0 auto">

    <h2 style="text-align:center; margin-bottom: 20px">用户登录</h2>

    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入手机号码</label>
            <div class="col-md-5">
                <input id="mobile" name = "mobile" class="form-control" type="text" placeholder="手机号码" required="true"  minlength="11" maxlength="11" />
            </div>
            <div class="col-md-1">
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入密码</label>
            <div class="col-md-5">
                <input id="password" name="password" class="form-control" type="password"  placeholder="密码" required="true" minlength="6" maxlength="16" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-5">
            <button class="btn btn-primary btn-block" type="reset" οnclick="reset()">重置</button>
        </div>
        <div class="col-md-5">
            <button class="btn btn-primary btn-block" type="submit" οnclick="login()">登录</button>
        </div>
    </div>

</form>
</body>

其中包含了登录按钮，重置按钮等。接下来继续编写页面输入的一些要求，代码如下：

其中function login（）收集用户点击登录跳转的请求；利用ajax来发送回件，success时返回一个页面，error时返回一个页面；然后对password经行一次MD5加密。

function login(){
    $("#loginForm").validate({
        submitHandler:function(form){
            doLogin();
        }
    });
}
function doLogin(){
    g_showLoading();

    var inputPass = $("#password").val();
    var salt = g_passsword_salt;
    var str = ""+salt.charAt(0)+salt.charAt(2) + inputPass +salt.charAt(5) + salt.charAt(4);
    var password = md5(str);

    $.ajax({
        url: "/login/do_login",
        type: "POST",
        data:{
            mobile:$("#mobile").val(),
            password: password
        },
        success:function(data){
            layer.closeAll();
            if(data.code == 0){
                layer.msg("成功");
            }else{
                layer.msg(data.msg);
            }
        },
        error:function(){
            layer.closeAll();
        }
    });
}

运行Mainapplication，查看页面效果，结果如下：

然后我们创建一个LoginVo,在里面定义mobile和password并加入get，set方法；

private String mobile;
@NotNull
@Length(min=32)
private String password;

public String getMobile() {
    return mobile;
}

public void setMobile(String mobile) {
    this.mobile = mobile;
}

public String getPassword() {
    return password;
}

public void setPassword(String password) {
    this.password = password;
}

然后我们在Controller中添加一个方法，接收LinginVo中传来的参数

public Result<Boolean> doLogin(HttpServletResponse response, @Valid LoginVo loginVo) {
    log.info(loginVo.toString());
    //登录
    miaoshaUserService.login(response,loginVo);
    return Result.success(true);
}

接下来，我们该与数据库的内容相连接，就要创建User类了，我们在domain文件夹下创建一个MiaoshaUser；添加相应的对象，并添加 get（）方法和 set（）方法；

public class MiaoshaUser {
    private Long id;
    private String nickname;
    private String password;
    private String salt;
    private String head;
    private Date registerDate;
    private Date lastLoginDate;
    private Integer loginCount;
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getNickname() {
        return nickname;
    }
    public void setNickname(String nickname) {
        this.nickname = nickname;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getSalt() {
        return salt;
    }
    public void setSalt(String salt) {
        this.salt = salt;
    }
    public String getHead() {
        return head;
    }
    public void setHead(String head) {
        this.head = head;
    }
    public Date getRegisterDate() {
        return registerDate;
    }
    public void setRegisterDate(Date registerDate) {
        this.registerDate = registerDate;
    }
    public Date getLastLoginDate() {
        return lastLoginDate;
    }
    public void setLastLoginDate(Date lastLoginDate) {
        this.lastLoginDate = lastLoginDate;
    }
    public Integer getLoginCount() {
        return loginCount;
    }
    public void setLoginCount(Integer loginCount) {
        this.loginCount = loginCount;
    }
}

Uers写好后，我们就可以写Dao层的方法了，创建一个MiaoshaDao,再添加一个方法，其中id为用户手机号；

秒杀Dao写好后，我们就可以开始写一个秒杀的Service了，创建一个MiaoshaService，然后把写好的MiaoshaUserDao，自动连接进来；

public class MiaoshaUserService {


    public static final String COOKIE_TOKEN_NAME="token";
    @Autowired
    MiaoshaUserDao miaoshaUserDao;
    @Autowired
    RedisSevice redisSevice;
    public MiaoshaUser getById(long id){
        return miaoshaUserDao.getById(id);
    }

    public boolean login(HttpServletResponse response,LoginVo loginVo) {
        if(loginVo==null){
            throw new GlobalException(CodeMsg.SERVER_ERROR);
        }
        String moblie=loginVo.getMobile();
        String formPass=loginVo.getPassword();
        //判断手机号是否为空
        MiaoshaUser user=getById(Long.parseLong(moblie));
        if(user==null){
            throw new GlobalException(CodeMsg.MOBILE_NOT_EXIST);

        }
        //验证密码
        String salt = user.getSalt();
        String dbPass = user.getPassword();
        String md5Pass = Md5Util.formPassToDbPass(formPass, salt);
        System.out.println(salt);
        System.out.println(dbPass);
        System.out.println(md5Pass);
        if(!dbPass.equals(md5Pass)){
            throw new GlobalException(CodeMsg.PASSWORD_ERROR);
        }
        String token = UUIDUtil.uuid();
        redisSevice.set(MiaoshaUserKey.token, token, user);
        Cookie cookie = new Cookie(COOKIE_TOKEN_NAME, token);
        cookie.setMaxAge(MiaoshaUserKey.token.expireSecconds());
        cookie.setPath("/");

        response.addCookie(cookie);
        return true;

    }

中间的login方法是用来判断用户输入的手机号是否符合规定，视频中该步骤在controller中实现，而本文中的判断内容在service中进行实现。

qq_40945838

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商城秒杀学习之路

商城秒杀：登录页面1.添加Login.html页面，内容由js/css构建的前端页面，应用了jquery，bootstrap，layer，MD5，common。代码如下：然后进行页面内容编写，基于bootstrap编写的，代码如下：<body><form name="loginForm" id="loginForm" method="post" style="width:50%; margin:0 auto"> <h2 style="text.
复制链接

扫一扫