基于Spring+SpringMVC+MyBatis博客系统的开发教程（六）

最新推荐文章于 2022-05-12 21:00:00 发布

exodus3

最新推荐文章于 2022-05-12 21:00:00 发布

阅读量1.2w

点赞数

分类专栏：博客系统文章标签：博客系统

本文链接：https://blog.csdn.net/exodus3/article/details/101056927

版权

博客系统专栏收录该内容

20 篇文章 1 订阅

订阅专栏

第06课：登录之账号登录（验证码）

之前搭建框架时，pom.xml 中只依赖了可以启动项目的 jar 包。本文将会使用到更多的依赖，方便起见，请同学们将文末百度网盘中提供的 dreamland\dreamland-web 目录下的 pom.xml 中的依赖添加到项目中去。

前期准备

基类 BaseController 的封装

上一篇中，我们每次都要写很长一串来代码来获取 Request 对象，比较麻烦，现在把通用的方法进行抽取，放在 BaseController.java 文件中，其他 Controller 只需要继承 BaseController 即可使用。

通用方法主要包括：获取 Request、获取 Response、获取 Session、查询分页等方法。在 Controller 包下导入 BaseController.java 文件，BaseController.java 文件我会放在文末的百度网盘链接中。

BaseController.java 中类上的 @Component 注解，是指如果不知道该类属于哪一层的时候，就把该类交给 Spring 管理。

引入前端页面

像登录、注册页面，任何人都可以访问的页面放在 webapp 下，其他需要安全访问的页面放在 WEB-INF 下。

在 index.jsp 页面加入“点我登录”临时链接：

<a href="register.jsp">点我注册</a><br/>
<a href="login.jsp">点我登录</a>

验证码功能在上一篇已讲过，这里就不再赘述了。主要有一点样式上的区别，为了协调将验证码的 input 框改成和用户名、密码框相同的样式：

<div class="form-group">
      <label for="code" class="sr-only">验证码</label>
      <input type="text" id="code"  name="code"  class="form-control" placeholder="验证码" onblur="checkCode()" >
</div>

<div>
      <img id="captchaImg" style="CURSOR: pointer" onclick="changeCaptcha()" title="看不清楚?请点击刷新验证码!" align='absmiddle' src="${ctx}/captchaServlet" height="18" width="55">
    <a href=";" onClick="changeCaptcha()" style="color: #666;">看不清楚</a> <span id="code_span" style="color: red"></span>
</div>

主要将验证码 input 框加了一个 div，并将它的 class 属性设置为 form-group，其他基本没变。

启动项目后点击 index 页面的“点我登录”链接，查看效果：

账号登录流程

账号登录的基本流程为：

校验用户名是否为空，为空提示输入用户名，返回 false，否则返回 true。
校验密码，为空或者低于6位，提示请输入密码或者密码长度低于6位，返回 false，否则返回 true。
检验验证码，为空或者不正确，提示验证码不能为空或者验证码不正确，返回 false，否则返回 true。
登录按钮点击事件，如果以上都为 true，则提交表单给后台，否则返回对应错误信息。

这里的校验方法和注册页面类似，就不再赘述了。

前台页面

接下来，我们开始搭建前台页面。

登录页面 form 标签

代码如下：

<form id="normal_form" name="form" role="form" class="login-form" action="${ctx}/doLogin" method="post">

action 对应后台映射 URL 为 /doLogin，请求方式是 post 请求，form 标签的 id 为 normal_form。

登录按钮

相应的 HTML 代码如下：

<button type="button" id="btn" class="btn btn-primary btn-block" onclick="normal_login();">登录</button>

登录按钮对应的点击事件 normal_login 方法如下：

function normal_login() {
  if(checkUserName() && checkPassword() && checkCode()) {
            $("#normal_form").submit();
  }
}

如果用户名、密码、验证码都校验正确之后，通过from 表单对象的 submit 方法提交表单。

普通登录的密码框和手机快捷登录的验证码框回车事件，如下：

//密码框回车事件
$("#password").bind('keypress',function(event){
    if(event.keyCode == 13)
    {
       normal_login();
    }
});

//验证码框回车事件
$("#code").bind('keypress',function(event){

    if(event.keyCode == 13)
    { 
       normal_login();
    }
});

keyCode == 13 代表的是回车按键，如果点击回车按键则调用登录方法提交表单。注意，是在普通登录的密码框或者在手机快捷登录的验证码框按回车才触发（根据 id 可看出）。

Java 后台

前台页面写好后，我们开始搭建 Java 后台。

在 controller 包下新建 LoginController.java 并继承 BaseController，创建映射 URL 为 /doLogin的方法，如下：

@Controller
public class loginController extends BaseController {
    private final static Logger log = Logger.getLogger( loginController.class);

    @Autowired
    private UserService userService;

    @RequestMapping("/doLogin")
    public String doLogin(Model model, @RequestParam(value = "username",required = false) String email,
                          @RequestParam(value = "password",required = false) String password,
                          @RequestParam(value = "code",required = false) String code,
                          @RequestParam(value = "state",required = false) String state,
                          @RequestParam(value = "pageNum",required = false) Integer pageNum ,
                          @RequestParam(value = "pageSize",required = false) Integer pageSize) {
        if (StringUtils.isBlank(code)) {
            model.addAttribute("error", "fail");
            return "../login";
        }
        int b = checkValidateCode(code);
        if (b == -1) {
            model.addAttribute("error", "fail");
            return "../login";
        } else if (b == 0) {
            model.addAttribute("error", "fail");
            return "../login";
        }
        password = MD5Util.encodeToHex(Constants.SALT+password);
        User user =  userService.login(email,password);
        if (user!=null){
           if("0".equals(user.getState())){
               //未激活
               model.addAttribute("email",email);
               model.addAttribute("error","active");
               return "../login";
           }
          log.info("用户登录登录成功");
           model.addAttribute("user",user);
           return "/personal/personal";
       }else{
           log.info("用户登录登录失败");
           model.addAttribute("email",email);
           model.addAttribute( "error","fail" );
           return "../login";
       }
    }

    // 匹对验证码的正确性
    public int checkValidateCode(String code) {
        Object vercode = getRequest().getSession().getAttribute("VERCODE_KEY");
        if (null == vercode) {
            return -1;
        }
        if (!code.equalsIgnoreCase(vercode.toString())) {
            return 0;
        }
        return 1;
    }

    }

代码解读如下：

（1）判断验证码是否为空，为空则把“fail”添加到 model 中，并返回到登录页面。

（2）调用匹配验证码正确性的方法，根据不同结果，给出相应提示，和上一篇文章中介绍的相似。

（3）注册时使用了 MD5 对密码进行加密，所以登陆这里也要用同样的方式对密码进行加密，然后再去数据库进行匹配。其中 salt “加盐”，提高密码复杂度，和注册时的 salt 要一致。项目常量一般都放在一个类里，便于项目其他包之间相互调用，在 common 包下新建 Constants.java:

public class Constants {
  public static final String SALT = "salt";
}

（4）根据用户名和加密后的密码查询用户是否存在。

（5）如果用户存在，则判断用户是否已激活，如果未激活则把 email 和 active 添加到 model 中并返回登录页面，提示用户激活，如果用户已激活则把用户 user 添加到 model 中，返回到个人中心页面。

（6）如果用户不存在，则把 email 和 fail 添加到 model 中并返回登录页面。

重启 Tomcat，点击登陆，输入错误的用户名或密码，会跳转到登录页面，显示错误信息，并回显用户名，通过 EL 表达式 ${email} 获取并赋值给 value。

value="${email}"

执行结果页面如下：

输入正确的用户名、密码（未激活的账号），也会跳转到登录页面，会提示您的账号未激活，请先激活！如下图所示：

输入正确的用户名和密码（已激活账号），跳转到个人主页。如下图所示：

通过EL表达式 ${user.nickName} 获取用户昵称：剑随风。

15分钟内免登录

现在重新访问：http://localhost:8080/，并点击登录发现还是跳转到了登录页面，而我们并未退出登录。

15分钟内免登录实现原理：用户登录成功后，将用户信息保存在 Session 中，并设置失效时间为15分钟，是指15分钟内用户没有操作浏览器，如果15分钟内操作浏览器后重新计时。用户退出登录则删除 Session 保存的信息。

实现过程主要包括以下6步。

1.在 web.xml 的最后我们配置了 Session 的失效时间：

<!-- session配置 -->
<session-config>
    <session-timeout>15</session-timeout>
</session-config>

2.在 /doLogin 映射方法内，用户登录成功后，return 语句之前将用户信息保存到 Session 中：

getSession().setAttribute( "user",user ); model.addAttribute("user",user);

3.增加 /login 映射 URL 方法:

@RequestMapping("/login")
public String login(Model model) {
    User user = (User)getSession().getAttribute("user");
    if(user!=null){
        return "/personal/personal";
    }
    return "../login";
}

获取 Session 中的User，如果 User 不为 null 则直接跳转到个人主页，如果为 null，则跳转到 login.jsp 登录页面。

4.修改 index.jsp 页面的登录链接：

<a href="/login">点我登录</a>

5.重新启动 Tomcat，点击“点我登录”链接，输入用户名密码后跳转到个人主页。

6.重新访问：http://localhost:8080/，再次点击“点我登录”链接，发现直接跳转到了个人主页。15分钟内免登录成功！

本课程所开发的项目，大部分功能已经完成并发布，大家可以访问下面链接查看：http://www.dreamland.wang/。

第06课百度网盘地址：

链接：https://pan.baidu.com/s/1m4OPZ-Gb96ZeC0ImwRiS0Q 密码：gl17

exodus3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于Spring+SpringMVC+MyBatis博客系统的开发教程（六）

第06课：登录之账号登录（验证码）之前搭建框架时，pom.xml 中只依赖了可以启动项目的 jar 包。本文将会使用到更多的依赖，方便起见，请同学们将文末百度网盘中提供的 dreamland\dreamland-web 目录下的 pom.xml 中的依赖添加到项目中去。前期准备基类 BaseController 的封装上一篇中，...
复制链接

扫一扫