Layui实现登录

最新推荐文章于 2024-09-13 22:11:59 发布

wqww_1

最新推荐文章于 2024-09-13 22:11:59 发布

阅读量1.1k

点赞数

分类专栏：前端 java 项目文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/wqww_1/article/details/124982899

版权

java 同时被 3 个专栏收录

37 篇文章 2 订阅

订阅专栏

项目

12 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

前端

导入所有前端依赖

<link rel="icon" href="${ctx}/images/favicon.ico">
<link rel="stylesheet" href="${ctx}/lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" href="${ctx}/css/layuimini.css" media="all">
<link rel="stylesheet" href="${ctx}/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="${ctx}/css/formSelects-v4.css" media="all">
<link rel="stylesheet" href="${ctx}/css/public.css" media="all">
<script src="${ctx}/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="${ctx}/js/lay-config.js" charset="utf-8"></script>
<script type="text/javascript">
    var ctx="${ctx}";
</script>

用户登录页面

index.ftl

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理-登录</title>
    <!--导入所有依赖-->
    <#include "common.ftl">
    <link rel="stylesheet" href="${ctx}/css/index.css" media="all">
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>CRM后端登录</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="userName"></label>
                    <input type="text" name="userName" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="userPwd"></label>
                    <input type="password" name="userPwd" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 录</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--js编写-->
<script src="${ctx}/js/index.js" charset="utf-8"></script>
</body>
</html>

index.js

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

    /**
     * 用户登录 表单提交
     */
    form.on("submit(login)", function (data) {
        // console.log(data.elem);
        // console.log(data.form);
        console.log(data.field);
        var data = data.field;
        /**
         * 第一种写法
         */
        $.ajax({
            type: 'POST',
            url: ctx + "/crm/t-user/login",
            data: {
                userName: data.userName,
                userPwd: data.userPwd
            },
            success:function(res){
                console.log(res);
                if(res.code == 20000){
                    alert(res.message);
                    // 存储从后端获取的数据存储在本地，下次请求后端每次都带着
                    $.cookie("userIdStr", res.data.user.userIdStr);
                    $.cookie("userName", res.data.user.userName);
                    $.cookie("trueName",res.data.user.trueName);
                    //跳转
                    window.location.href = ctx + "/main";
                }else{
                    alert(res.message);
                }
            }
        })
        return false;
    });

});

后端

基础登录

public class BaseController {
    @ModelAttribute
    public void preHandler(HttpServletRequest request){
        System.out.println(request.getContextPath());
        System.out.println(request.getServletPath());
        request.setAttribute("ctx", request.getContextPath());
    }
}

返回前端ctx路径

用户登录

package com.shengun.crm.controller;

import com.shengun.crm.controller.base.BaseController;
import com.shengun.crm.entity.TUser;
import com.shengun.crm.entity.model.UserModel;
import com.shengun.crm.service.TUserService;
import com.shengun.crm.utill.LoginUserUtil;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class IndexConrtoller extends BaseController {

    @Autowired
    private TUserService tUserService;

    /**
     * 登录页面
     * @return
     */
    @GetMapping("/index")
    public String index(){
        return "index";
    }

    @GetMapping("/welcome")
    public String welcome(){
        return "welcome";
    }

    @GetMapping("/main")
    public String main(HttpServletRequest request){
        int i = LoginUserUtil.releaseUserIdFromCookie(request);
        System.out.println("########################" + i);
        TUser byId = tUserService.getById(i);
        UserModel userModel = new UserModel();
        BeanUtils.copyProperties(byId, userModel);
        request.getSession().setAttribute("user",userModel);
        return "main";
    }

    @GetMapping("user/toPasswordPage")
    public String passwrod(){
        return "user/password";
    }

}

登录拦截器

package com.shengun.crm.interceptor;

import com.shengun.crm.entity.TUser;
import com.shengun.crm.execption.ZkcExecption;
import com.shengun.crm.service.TUserService;
import com.shengun.crm.utill.LoginUserUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 拦截器
 */
@Slf4j
public class NoLoginInterceptor implements HandlerInterceptor{

    @Autowired
    private TUserService tUserService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //获取cook
        Integer userId = LoginUserUtil.releaseUserIdFromCookie(request);
        log.info("###################进入拦截器：" + userId);
        TUser byId = tUserService.getById(userId);
        if(null == userId || null == byId){
            throw new Exception("用户未注册");
        }
        return true;
    }
}

登录拦截器注册

package com.shengun.crm.config;

import com.shengun.crm.interceptor.NoLoginInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MvcConfig implements WebMvcConfigurer {


    @Bean
    public NoLoginInterceptor noLoginInterceptor(){
        return new NoLoginInterceptor();
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(noLoginInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/index","/crm/t-user/login",
                        "/css/**","/images/**","/js/**","/lib/**");
    }
}