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

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

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

1.业务流程

用户在login登录页输入用户名密码----->使用用户名和密码登陆验证------>验证成功,跳转欢迎页/验证失败,重新输入提示。

2.数据库设计

这里就用到了一张表User表。


img_ee81ab0de2a7ec01575938e8219ad477.png
image.png

3.项目架构(MVC)

img_ea5c8ee398c9385e709d0e1222c64f9e.png
image.png

4.效果预览

img_f6dd982a2a9dd29e4301897ae438b0c6.gif
预览.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表达式,如下图:


img_6147f5847987a950182430fcc6d27e8c.png
image.png

对应的代码为:

 欢迎,${sessionScope.username}

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

喜欢就给颗小吧~

相关文章
|
5月前
|
前端开发 API 数据安全/隐私保护
【JavaWeb】Cookie和Session解析
【1月更文挑战第26天】【JavaWeb】Cookie和Session解析
|
5月前
|
数据安全/隐私保护
Session 管理以及Cookie 应用最简单实例
Session 管理以及Cookie 应用最简单实例
|
5月前
|
存储 安全 数据安全/隐私保护
Session和Cookie的区别
Session和Cookie的区别
|
应用服务中间件 容器
Shiro配置cookie以及共享Session和Session失效问题
Shiro配置cookie以及共享Session和Session失效问题
417 1
|
Web App开发 JavaScript 前端开发
JavaWeb - Cookie、Session、SessionId 详解(上)
JavaWeb - Cookie、Session、SessionId 详解(上)
227 0
JavaWeb - Cookie、Session、SessionId 详解(上)
|
存储 缓存 Java
cookie和Session的区别与联系
cookie和Session的区别与联系
cookie和Session的区别与联系
|
存储 Web App开发 Java
JavaWeb - Cookie、Session、SessionId 详解(下)
JavaWeb - Cookie、Session、SessionId 详解(下)
586 0
JavaWeb - Cookie、Session、SessionId 详解(下)
|
存储 安全 JavaScript
69 session和cookie的区别
69 session和cookie的区别
152 0
|
存储 安全 Java
Session与Cookie的区别与联系
Session与Cookie的区别与联系
197 0