springsecurity前端代码

野性酷女 2023-09-25 14:02 114阅读 0赞

## 登录页面 ##

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

*  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">
              
              <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; width: 108px; }
        .mouth-circle {
               position: relative; width: 46px; height: 48px; border-style: solid; border-width: 0 1px 6px 4px; border-color: #000; border-radius: 50%; transform: rotate(-10deg) scale(-1,1); box-sizing: border-box; z-index: 5; }
        .mouth-circle:first-of-type {
               transform: rotate(10deg); }
        .mouth-circle:hover {
               top: -2px; transform: rotate(-20deg) scale(-1,1); }
        .mouth-circle:first-of-type:hover {
               transform: rotate(20deg); }
        .nose {
               position: absolute; left: 50%; height: 40px; border-style: solid; border-color: #422A17 transparent transparent transparent; border-width: 14px 14px 0px 14px; border-radius: 50%; box-sizing: border-box; transform: translate(calc(-50% - 8px),22%); z-index: 5; }
        .tongue {
               position: relative; left: -54px; }
        .tongue .tongue-hidden {
               display: none; }
        .tongue .tongue-hidden:checked + .tongue-visible {
               border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 22px solid #f00; }
        .tongue .tongue-hidden:checked + .tongue-visible::before {
               content: ''; position: absolute; top: 18px; left: -10px; width: 20px; height: 20px; background-color: #f00; border-radius: 0 0 50% 50%; }
        .tongue .tongue-visible {
               position: absolute; top: 20px; left: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 22px solid rgba(0,0,0,0); border-radius: 30%; z-index: 0; }
        
        .body {
               position: relative; top: 84px; left: 50%; width: 300px; height: 300px; background-color: #dea76f; z-index: 1; transform: translateX(-50%); border: 4px solid #000; border-radius: 130% 130% 50% 50% / 120% 120% 50% 50%; }
        .body .body-inner {
               position: relative; top: 100px; left: 50%; width: 260px; height: 200px; background-color: #f3e8ca; transform: translateX(-50%); border-radius: 100px 100px 40px 40px / 70px 70px 40px 40px; }
        
        .tail {
               position: relative; top: -170px; left: 150px; width: 280px; height: 244px; background-color: #dea76f; z-index: 0; border: 3px solid #000; border-radius: 50%; }
        .tail:hover {
              
          transform: rotate(-10deg);
        }

资源页面 free.html （任意权限都可访问）

*  free.html
    
        <!DOCTYPE html>
        <html lang="en" xmlns:th="https://www.thymeleaf.org">
        <head>
            <base th:href="@{/}">
            <meta charset="UTF-8">
            <title>free</title>
        
            <link rel="stylesheet" href="../../static/css/free.css" th:href="@{/css/free.css}">
        </head>
        <body>
        
        <div class="wrapper">
            <div class="roof">
                <div class="roofShadow1"></div>
                <div class="roofShadow2"></div>
                <div class="roofPatch1"></div>
                <div class="roofPatch2"></div>
                <div class="roofPatch3"></div>
                <div class="roofPatch4"></div>
                <div class="roofPatch5"></div>
                <div class="roofPatch6"></div>
                <div class="roofInner"></div>
            </div>
            <div class="building">
                <div class="topPart">
                    <div class="window1"></div>
                </div>
                <div class="bottomPart">
                    <div class="path"></div>
                    <div class="leftPart">
                        <div class="windowsMiddle">
                            <div class="window1"></div>
                            <div class="window2"></div>
                        </div>
                    </div>
                    <div class="rightPart">
                        <div class="door"></div>
                        <div class="windowsBottom">
                            <div class="window1"></div>
                            <div class="window2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grass">
                <div class="tree">
                    <div class="treeBody">
                        <div class="treeTop"></div>
                        <div class="treeMiddle"></div>
                        <div class="treeBottom"></div>
                    </div>
                    <div class="treeTrunk"></div>
                </div>
            </div>
            <div class="road"></div>
        </div>
        
        </body>
        </html>
 *  free.css
    
        * {
              
          box-sizing: border-box;
        }
        
        .wrapper {
              
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          height: 100vh;
          width: 100%;
          background: #cbe0f4;
        }
        
        .road {
              
          height: calc(4 * 1vmin);
          width: 100%;
          background: #575757;
        }
        
        .grass {
              
          height: calc(2 * 1vmin);
          width: 100%;
          background: #859e53;
        }
        
        .building {
              
          width: calc(1vmin * 29);
          height: calc(1vmin * 32.5);
          border-left: calc(1.5 * 1vmin) solid #fff;
          border-right: calc(1.5 * 1vmin) solid #fff;
          background: #fff;
          position: relative;
        }
        
        .roof {
              
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 calc(14.5 * 1vmin) calc(12 * 1vmin) calc(14.5 * 1vmin);
          border-color: transparent transparent #fff transparent;
          position: relative;
        }
        
        .roofInner {
              
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 calc(13 * 1vmin) calc(11 * 1vmin) calc(13 * 1vmin);
          border-color: transparent transparent transparent transparent;
          position: absolute;
          top: calc(2 * 1vmin);
          left: 0;
          transform: translateX(-50%);
        }
        
        .roofPatch1 {
              
          width: calc(2 * 1vmin);
          height: 1vmin;
          background: #fff;
          position: absolute;
          left: calc(-13.5 * 1vmin);
          top: calc(12 * 1vmin);
        }
        
        .roofPatch2 {
              
          width: calc(2 * 1vmin);
          height: 1vmin;
          background: #fff;
          position: absolute;
          right: calc(-13.5 * 1vmin);
          top: calc(12 * 1vmin);
        }
        
        .roofPatch3 {
              
          width: 1vmin;
          height: calc(3 * 1vmin);
          background: #fff;
          position: absolute;
          left: calc(-14.05 * 1vmin);
          top: calc(13 * 1vmin);
          z-index: 6;
        }
        
        .roofPatch4 {
              
          width: 1vmin;
          height: calc(3 * 1vmin);
          background: #fff;
          position: absolute;
          right: calc(-14.05 * 1vmin);
          top: calc(13 * 1vmin);
          z-index: 6;
        }
        
        .roofPatch5 {
              
          width: 1vmin;
          height: calc(3 * 1vmin);
          background: #fff;
          position: absolute;
          z-index: 7;
          top: 1vmin;
          left: calc(0.5 * 1vmin);
          transform: rotate(-51deg);
        }
        
        .roofPatch6 {
              
          width: 1vmin;
          height: calc(3 * 1vmin);
          background: #fff;
          position: absolute;
          z-index: 7;
          top: 1vmin;
          left: calc(-1.7 * 1vmin);
          transform: rotate(51deg);
        }
        
        .roofShadow1 {
              
          background: #8f5549;
          height: calc(1.5 * 1vmin);
          width: calc(18.5 * 1vmin);
          transform: rotate(140deg);
          position: absolute;
          top: calc(7.9 * 1vmin);
          left: calc(-15.7 * 1vmin);
          z-index: 5;
        }
        
        .roofShadow2 {
              
          background: #8f5549;
          height: calc(1.5 * 1vmin);
          width: calc(18.5 * 1vmin);
          transform: rotate(-140deg);
          position: absolute;
          top: calc(7.9 * 1vmin);
          right: calc(-15.7 * 1vmin);
          z-index: 5;
        }
        
        .topPart {
              
          width: 100%;
          height: calc(21.5 * 1vmin);
          background-image: linear-gradient(0deg, #af6356 4.55%, #aa5e51 4.55%, #aa5e51 50%, #af6356 50%, #af6356 54.55%, #aa5e51 54.55%, #aa5e51 100%);
          background-size: calc(5 * 1vmin) calc(5 * 1vmin);
          position: absolute;
          top: -8vmin;
          -webkit-clip-path: polygon(50% 0, 50% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%);
                  clip-path: polygon(50% 0, 50% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%);
        }
        .topPart .window1 {
              
          position: absolute;
          top: calc(9 * 1vmin);
          left: calc(4.5 * 1vmin);
          width: calc(4.4 * 1vmin);
          height: calc(9.5 * 1vmin);
          border: calc(0.4 * 1vmin) solid #fff;
          background: linear-gradient(180deg, #51a8c2 50%, #51a8c2 50%, #1e3e48 50%);
        }
        .topPart .window1:before {
              
          content: "";
          width: 100%;
          height: 100%;
          background: linear-gradient(-64deg, transparent 20%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.15) 26%, transparent 26%, transparent 60%, rgba(255, 255, 255, 0.15) 60%, rgba(255, 255, 255, 0.15) 66%, transparent 66%);
          position: absolute;
        }
        
        .bottomPart {
              
          width: 100%;
          height: calc(19 * 1vmin);
          background: pink;
          position: relative;
          top: 13.5vmin;
          display: flex;
        }
        
        .leftPart {
              
          width: 50%;
          height: 100%;
          background: #edebe7;
          border-bottom: calc(2 * 1vmin) solid #7d7874;
        }
        
        .rightPart {
              
          width: 50%;
          height: 100%;
          background: linear-gradient(to bottom, #b6b6b6 0vmin, #b6b6b6 calc(2.5 * 1vmin), #d9d7d6 calc(2.5 * 1vmin));
        }
        
        .door {
              
          width: calc(5.5 * 1vmin);
          height: calc(12 * 1vmin);
          background: #4f4132;
          position: absolute;
          bottom: 0;
          right: calc(5.7 * 1vmin);
        }
        .door:before {
              
          content: "";
          position: absolute;
          top: 1vmin;
          bottom: 1vmin;
          left: 1vmin;
          right: 1vmin;
          border: calc(0.0675 * 1vmin) solid #5d4f40;
        }
        .door:after {
              
          content: "";
          position: absolute;
          top: calc(4.5 * 1vmin);
          right: calc(0.8 * 1vmin);
          width: calc(0.4 * 1vmin);
          height: calc(3.5 * 1vmin);
          background: #d7d8d5;
        }
        
        .windowsBottom {
              
          width: calc(4.8 * 1vmin);
          height: calc(12 * 1vmin);
          background: #fff;
          position: absolute;
          bottom: 0;
          right: calc(1 * 1vmin);
        }
        .windowsBottom .window1 {
              
          height: calc(5.4 * 1vmin);
          width: calc(4 * 1vmin);
          background: #51a8c2;
          position: relative;
          top: calc(0.4 * 1vmin);
          left: calc(0.4 * 1vmin);
        }
        .windowsBottom .window1:before {
              
          content: "";
          width: 100%;
          height: 100%;
          background: linear-gradient(-64deg, #51a8c2 10%, rgba(255, 255, 255, 0.15) 10%, rgba(255, 255, 255, 0.15) 16%, #51a8c2 16%, #51a8c2 70%, rgba(255, 255, 255, 0.15) 70%, rgba(255, 255, 255, 0.15) 76%, #51a8c2 76%);
          position: absolute;
        }
        .windowsBottom .window2 {
              
          height: calc(5.6 * 1vmin);
          width: calc(4 * 1vmin);
          background: #1e3e48;
          position: relative;
          top: calc(1 * 1vmin);
          left: calc(0.4 * 1vmin);
        }
        .windowsBottom .window2:before {
              
          content: "";
          width: 100%;
          height: 100%;
          background: linear-gradient(-64deg, #1e3e48 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 56%, #1e3e48 56%);
          position: absolute;
        }
        
        .windowsMiddle {
              
          left: 0;
          top: 0;
          width: calc(10 * 1vmin);
          height: calc(4.5 * 1vmin);
          background: #fff;
        }
        .windowsMiddle .window1 {
              
          position: relative;
          top: calc(0.4 * 1vmin);
          left: calc(0.4 * 1vmin);
          width: calc(3.3 * 1vmin);
          height: calc(3.7 * 1vmin);
          background: linear-gradient(180deg, #51a8c2 50%, #51a8c2 50%, #1e3e48 50%);
        }
        .windowsMiddle .window1:before {
              
          content: "";
          width: 100%;
          height: 100%;
          background: linear-gradient(-64deg, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 58%, transparent 58%);
          position: absolute;
        }
        .windowsMiddle .window2 {
              
          position: absolute;
          top: calc(0.4 * 1vmin);
          left: calc(4.2 * 1vmin);
          width: calc(5.3 * 1vmin);
          height: calc(3.7 * 1vmin);
          background: linear-gradient(180deg, #51a8c2 50%, #51a8c2 50%, #1e3e48 50%);
        }
        .windowsMiddle .window2:before {
              
          content: "";
          width: 100%;
          height: 100%;
          background: linear-gradient(-64deg, transparent 30%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.15) 36%, transparent 36%, transparent 80%, rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.15) 86%, transparent 86%);
          position: absolute;
        }
        
        .path {
              
          width: calc(5.5 * 1vmin);
          height: calc(2 * 1vmin);
          position: absolute;
          right: calc(5.7 * 1vmin);
          bottom: calc(-2 * 1vmin);
          background: #575757;
          z-index: 6;
        }
        
        .tree {
              
          --width: 20vmin;
          --margin: 0 12vmin;
          --trunk: #523b36;
          --green1: #1a4b27;
          --green2: #26713b;
          --green3: #32994e;
          height: calc(var(--width) * 1.666);
          width: var(--width);
          position: absolute;
          bottom: calc(1vmin * 6);
          left: calc(50% + 12vmin);
          margin: var(--margin);
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;
        }
        
        .treeBody {
              
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;
        }
        
        .treeTrunk {
              
          height: calc(var(--width)/3);
          width: calc(var(--width)/7.5);
          background-color: var(--trunk);
        }
        
        .treeTop {
              
          position: absolute;
          width: calc(var(--width)/1.2);
          height: calc(var(--width)/1.2);
          bottom: calc(var(--width)/4);
          border-radius: 50%;
          left: calc(var(--width)/1.2/3);
          background: var(--green1);
          z-index: 5;
        }
        
        .treeMiddle {
              
          position: absolute;
          width: calc(var(--width)/1.2);
          height: calc(var(--width)/1.2);
          bottom: calc(var(--width)/4);
          border-radius: 50%;
          right: calc(var(--width)/1.2/3);
          background: var(--green2);
          z-index: 4;
        }
        
        .treeBottom {
              
          position: absolute;
          width: calc(var(--width)/1.2);
          height: calc(var(--width)/1.2);
          bottom: calc(var(--width)/1.5);
          border-radius: 50%;
          background: var(--green3);
          z-index: 3;
        }