springsecurity前端代码

Posted 364.99°

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了springsecurity前端代码相关的知识，希望对你有一定的参考价值。

登录页面

登录页面，不许登录就可访问

  • login.html

    <!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
  <base th:href="@/">
  <meta charset="UTF-8">
  <title>登录</title>
  <link rel="stylesheet" href="../../static/css/login.css" th:href="@/css/login.css"/>
</head>
<body>

<div class="main">

  <div class="title">
    <span>密码登录</span>
  </div>

  <div class="title-msg">
    <span>请输入登录账户和密码</span>
  </div>

  <form class="login-form" method="post" novalidate th:action="@/myLogin">
    <!--输入框-->
    <div class="input-content">
      <!--autoFocus-->
      <div>
        <input type="text"
               autocomplete="off"
               placeholder="用户名"
               name="name"
               required/>
      </div>

      <div style="margin-top: 16px">
        <input type="password"
               autocomplete="off"
               placeholder="登录密码"
               name="password"
               required
               maxlength="32"/>
      </div>
    </div>

    <!--登入按钮-->
    <div style="text-align: center">
      <button type="submit" class="enter-btn" >登录</button>
      <br>
      <label th:if="$fail == true " style="color: red;">登陆失败</label>
    </div>
  </form>

</div>
</body>

</html>

  • login.css

    body
    background: #426258;

*
    padding: 0;
    margin: 0;


.main 
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 15px;
    width: 350px;
    height: 350px;
    background: #FFFFFF;
    /*以下css用于让登录表单垂直居中在界面,可删除*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -175px auto 0 -175px;


.title 
    width: 100%;
    height: 40px;
    line-height: 40px;


.title span 
    font-size: 18px;
    color: #353f42;


.title-msg 
    width: 100%;
    height: 64px;
    line-height: 64px;


.title:hover
    cursor: default	;


.title-msg:hover
    cursor: default	;


.title-msg span 
    font-size: 12px;
    color: #707472;


.input-content 
    width: 100%;
    height: 120px;


.input-content input 
    width: 330px;
    height: 40px;
    border: 1px solid #dad9d6;
    background: #ffffff;
    padding-left: 10px;
    padding-right: 10px;


.enter-btn 
    width: 350px;
    height: 40px;
    color: #fff;
    background: #0bc5de;
    line-height: 40px;
    text-align: center;
    border: 0px;


.enter-btn:hover 
    cursor:pointer;
    background: #1db5c9;

主页

主页，登录成功之后就可访问

  • main.html

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@/">
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="../../static/css/main.css" th:href="@/css/main.css">
</head>
<body>
<div class="con">
    <h1><span style="color: #67865d">登陆成功</span></h1>
    <br>
    <div class="component">
        <a class="button" href="/resource">resource</a>
        <a class="button" href="/free">free</a>
    </div>
    <br>
</div>
</body>
</html>

  • main.css

    body 
    background-color: #c1d3d0;

.con 
    text-align: center;

.component div 
    font-size: 32px;

.component span 
    text-align: center;
    color: #FFFFFF;
    font-size: 32px;


a
    position: relative;
    display: inline-block;
    padding: 25px 30px;
    margin: 40px 0;
    color: #68875e;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
    overflow: hidden;
    margin-right: 50px;

a:hover
    background: #adcca3;
    color: #050801;
    box-shadow: 0 0 5px #85be70,
    0 0 25px #a6ee8c,
    0 0 50px #c3fdae,
    0 0 200px #a2da8d;
    -webkit-box-reflect:below 1px linear-gradient(transparent, #adcca3);

资源页面

资源页面 resource.html（只有权限为 all 的用户才可以访问）

  • resource.html

    <!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <base th:href="@/">
    <meta charset="UTF-8">
    <title>dog</title>
    <link rel="stylesheet" href="../../static/css/dog.css" th:href="@/css/dog.css">
</head>
<body>

<main class="bonresu">

    <div class="ear">
        <div class="ear-inner">
            <div class="ear-hole"></div>
        </div>
    </div>
    <div class="ear">
        <div class="ear-inner">
            <div class="ear-hole"></div>
        </div>
    </div>

    <div class="face">
        <label for="tongue" class="face-label">

            <div class="face-left">
                <div class="eyeblow">
                </div>
                <div class="eye">
                </div>
            </div>

            <div class="face-right">
                <div class="eyeblow">
                </div>
                <div class="eye">
                </div>
            </div>

            <div class="mouth">
                <div class="mouth-circle">
                </div>
                <div class="mouth-circle">
                </div>
                <div class="nose">
                </div>
                <div class="tongue">
                    <input type="checkbox" id="tongue" class="tongue-hidden">
                    <div class="tongue-visible">
                    </div>
                </div>
            </div>
    </div>

    </label>
    </div>

    <div class="body">
        <div class="body-inner">
        </div>
    </div>
    <div class="tail">
    </div>
</main>

</body>
</html>

  • resource.css

    @charset "UTF-8";
.text  position: absolute; top: 10px; left: 10px; 
.bonresu  position: relative; width: 480px; height: 480px; margin: auto; 

.ear,
.ear .ear-inner  width: 88px; height: 84px; border-style: solid; border-color: #000 #000 transparent #000; border-width: 4px; border-radius: 100px 20px 10px 100px / 100px 100px 26px 26px; box-sizing: border-box; background-color: #dea76f; 
.ear  position: absolute; top: 108px; left: 290px; transform: rotate(10deg); z-index: 10; 
.ear:first-of-type  transform: rotate(-10deg) scale(-1,1); left: 100px; 
.ear .ear-inner  position: relative; top: 20px; transform: scale(.4,.4) rotate(-152deg); border-width: 8px 8px 10px 0; border-radius: 100px 40px 10px 100px / 40px 30px 26px 0; 
.ear .ear-inner::before  content: ''; 

.face  position: relative; top: 50%; left: 40%; width: 93px; z-index: 10; 
.face .face-left,
.face .face-right  position: absolute; bottom: 38px; 
.face .face-left  left: -17px; 
.face .face-right  right: -22px; 

.face-left .eyeblow,
.face-right .eyeblow  bottom: 8px; 
.face-left .eyeblow  left: 30px; 
.face-right .eyeblow  right: 34px; 

.eye  position: relative; width: 20px; height: 26px; background-color: #341f11; border-radius: 50%; z-index: 1; 
.eye::after  content: ''; position: absolute; border: 3px solid #000; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; z-index: 10; 
.eyeblow  position: relative; width: 26px; height: 26px; background-color: #f3e8ca; border-radius: 50%; z-index: 1; 
.eyeblow::after  content: ''; position: absolute; box-shadow: 0px 0px 4px 2px #d7904d; border-radius: 50%; width: 100%; height: 100%; z-index: 10; 

.mouth  position: relative; display: flex以上是关于springsecurity前端代码的主要内容，如果未能解决你的问题，请参考以下文章
     

     Java 之SpringBoot+SpringSecurity+Vue实现后台管理系统的开发一前端
    

     Spring Security：无法在前端进行身份验证
    

     关于配置Nginx反向代理后SpringSecurity认证失败的问题解决
    

     使用SpringSecurity
    

     Spring Security在前端后端分离项目中的使用
    

     SpringBoot整合SpringSecurity实现权限控制：菜单管理