Session和EL表达式实现登陆验证

现在多系统的登陆都采用单点登陆了,emmmm……后期再更单点登陆的,这次由于只是个小demo,所以我们采用Session和EL表达式实现登陆验证。

###1.业务流程
用户在login登录页输入用户名密码—–>使用用户名和密码登陆验证——>验证成功,跳转欢迎页/验证失败,重新输入提示。

###2.数据库设计
这里就用到了一张表User表。
image.png

###3.项目架构(MVC)
image.png

###4.效果预览
预览.gif

###5.代码实现
View层:
Login.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>法律法规管理系统</title>
    <link rel="stylesheet" href="/public/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/public/frame/static/css/style.css">

</head>

<body background="/public/frame/static/image/1.jpg">

<div class="login-main">
    <header class="layui-elip">
        <h3 style="color: bisque">法律法规管理系统</h3>
    </header>
    <form class="layui-form">
        <div class="layui-input-inline">
            <input id="username" type="text" name="username" required lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input id="password" type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline login-btn">
            <button type="button" class="layui-btn">登录</button>
        </div>
        <hr/>
    </form>
</div>


<script src="/public/frame/layui/layui.js"></script>
<script type="text/javascript">
    var path = '<%=basePath%>';
    layui.use(['form', 'layer'], function() {

        // 操作对象
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;

        // you code ...
        function dologin() {


            var username = $('input[name="username"]').val();

            if(username==null||username==""){
                layer.tips('用户名不可为空', '#username');
                return ;
            }

            var password = $('input[name="password"]').val();
            if( password==null||password==""){
                layer.tips('密码不可为空', '#password');
                return ;
            }
            if (!/[a-zA-Z0-9]{2,}/g.test(username)) {
                layer.tips('请输入正确的账号', '#username');
            } else if (!/[a-zA-Z0-9_]{4,}/g.test(password)) {
                layer.tips('请输入正确的密码', '#password');
            } else {
                var url = path+"Login/dologin";
                var data = {
                    code: username,
                    password: password
                }
                $.post(url, data, function(data) {
                    if (data.code == 1) {
                        window.location.href = path+"Index/index";
                    } else {
                        layer.msg('用户名或密码输入错误', {
                            icon: 5
                        });
                    }
                }, "json");
            }
        }

        //点击登录
        $('button[type="button"]').click(function() {
            dologin();
        });
        $('input').keydown(function(e) {
            if (e.keyCode == 13) {
                dologin();
            }
        });
    });
</script>
</body>

</html>

Controller层:
LoginController.java:

@Controller
@RequestMapping(value="Login")
public class LoginController {

    @Autowired
    private UserService userService;
    Api api=new Api();

    @RequestMapping(value="/login")
    @ResponseBody
    public ModelAndView login(){

        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("/login.jsp");
        return modelAndView;
    }

    @RequestMapping(value="/dologin")
    @ResponseBody
    public Map<String,Object> dologin(HttpServletRequest request){
        String username = request.getParameter("code");
        String password = request.getParameter("password");
        if ("".equals(username)){
            return api.returnJson(2,"登陆失败,账号密码不能为空");
        }
        User user=new User();
        user.setUsername(username);
        user.setPassword(password);

        User user1=new User();
        user1=userService.findByNameAndPs(user);
        if (user1!=null) {
            HttpSession session = request.getSession();
            session.setAttribute(Const.SESSION_USERNAME, user1.getUsername());
            session.setAttribute(Const.SESSION_ID, user1.getUserId());
            session.setAttribute(Const.SESSION_USERPASSWORD, user1.getPassword());
            return api.returnJson(1,"登陆成功");
        }
        return api.returnJson(2,"登陆失败");
    }
}

用户点击登陆按钮,请求到dologin方法。使用账号密码查询数据库数据,看是否有匹配。

以下DAO层:
UserMapper:

package com.example.sl.layer.dao;

import com.example.sl.layer.model.User;
import java.util.List;

public interface UserMapper {
    int deleteByPrimaryKey(String userId);

    int insert(User record);

    User selectByPrimaryKey(String userId);

    List<User> selectAll();

    int updateByPrimaryKey(User record);

    User selectByUnameAndPs(User record);
}

Service层:
UserService:

package com.example.sl.layer.service;

import com.example.sl.layer.model.User;

public interface UserService {

    public User findByNameAndPs(User user);
}

UserServiceImpl:

package com.example.sl.layer.service;

import com.example.sl.layer.dao.LayerMapper;
import com.example.sl.layer.dao.UserMapper;
import com.example.sl.layer.model.User;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;

@Service("userService")
@Transactional
public class UserServiceImpl  implements UserService{

    @Resource
    private UserMapper userMapper;

    @Override
    public User findByNameAndPs(User user) {
        return userMapper.selectByUnameAndPs(user);
    }
}

最后对应到mybatis的UserMapper.xml的sql:

  <select id="selectByUnameAndPs" resultMap="BaseResultMap" parameterType="com.example.sl.layer.model.User" >
    select user_id, username, password
    from user
    where username = #{username,jdbcType=VARCHAR}
    AND password=#{password,jdbcType=VARCHAR}
  </select>

然后登陆的时候,我们存入了Session

  HttpSession session = request.getSession();
            session.setAttribute(Const.SESSION_USERNAME, user1.getUsername());
            session.setAttribute(Const.SESSION_ID, user1.getUserId());
            session.setAttribute(Const.SESSION_USERPASSWORD, user1.getPassword());

这是为了方便我们在JSP中使用EL表达式,如下图:
image.png

对应的代码为:

 欢迎,${sessionScope.username}

如果登出的话,将Session清空即可。

喜欢就给颗小💗💗吧~

发表评论

电子邮件地址不会被公开。 必填项已用*标注