IDEA简单实现登录注册页面

程序员文章站 2022-06-24 22:37:40

application.ymlspring: datasource: username: root password: 123456 url: jdbc:mysql://localhost:33...

application.yml

spring:
 datasource:
  username: root
  password: 123456
  url: jdbc:mysql://localhost:3306/bd1906?servertimezone=gmt%2b8
  driver-class-name: com.mysql.cj.jdbc.driver
server:
  port: 8080

controller层

@controller
public class logincontroller {

  @autowired
  private jdbctemplate jdbctemplate;

  @requestmapping("/index")
  public string border(){
    return "/index.html";
  }

  @requestmapping("/login")
  public string getuserfront(){
    return "/login.html";
  }

  @requestmapping(value = "/log",method = requestmethod.post)
  @responsebody
  public string log(string name,string psd){
    string sql = "select * from user where username = '"+ name +"' and password = '"+psd+"'";
    list<map<string,object>> list = jdbctemplate.queryforlist(sql);
    if(list.size() == 0){
      return "0";
    }
    else{
      return "1";
    }
  }
}

登录页面

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="./js/jquery-3.4.1.min.js"></script>
  <title>login</title>
  <style>
    html,body{
      width: 100%;height: 100%;margin: 0;padding: 0;
    }
    body{
      background-image: url('./img/bg1.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    /* 标题 */
    .head{color: whitesmoke;font-size: 30px;text-align: center;margin-top: 10px;margin-bottom: 10px;}
    /* 刀盘图片 */
    .cutter{text-align: center;margin-bottom: 10px;}
    body .login_fields {
      margin-top: 40px;
      margin-left: 45%;
      height: 208px;
      position: absolute;
      left: 0;
    }
    body .login_fields .icon {
      position: absolute;
      z-index: 1;
      left: 36px;
      top: 8px;
      opacity: .5;
    }
    body .login_fields input[type='password'],body .login_fields input[type='text'] {
      color: #61bfff !important;
    }
    body .login_fields input[type='text'], body .login_fields input[type='password'] {
      color: #afb1be;
      width: 190px;
      margin-top: -2px;
      background: rgba(57, 61, 82, 0);
      left: 0;
      padding: 10px 65px;
      border-top: 2px solid rgba(57, 61, 82, 0);
      border-bottom: 2px solid rgba(57, 61, 82, 0);
      border-right: none;
      border-left: none;
      outline: none;
      font-family: 'gudea', sans-serif;
      box-shadow: none;
    }
    body .login_fields__user, body .login_fields__password {
      position: relative;
    }
    body .login_fields__submit {
      position: relative;
      top: 17px;
      left: 0;
      width: 80%;
      right: 0;
      margin: auto;
    }
    body .login_fields__submit .forgot a {
      color: #606479;
    }
    body .login_fields__submit input {
      border-radius: 50px;
      background: transparent;
      padding: 10px 50px;
      border: 2px solid #4fa1d9;
      color: #4fa1d9;
      text-transform: uppercase;
      font-size: 11px;
      -webkit-transition-property: background,color;
      transition-property: background,color;
      -webkit-transition-duration: .2s;
      transition-duration: .2s;
    }
    body .login_fields__submit input:focus {
      box-shadow: none;
      outline: none;
    }
    body .login_fields__submit input:hover {
      color: white;
      background: #4fa1d9;
      cursor: pointer;
      -webkit-transition-property: background,color;
      transition-property: background,color;
      -webkit-transition-duration: .2s;
      transition-duration: .2s;
    }
  </style>
</head>
<body>
<div class="head">
  智能互联装备协同管理平台
</div>
<div class="cutter">
  <img src="./img/cutter.png" alt="" id="img" width="450px" height="450px">
</div>
<div class='login_fields'>
  <div class='login_fields__user'>
    <div class='icon' >
      <img alt="" src='./img/user.png'>
    </div>
    <input id="username" name="username" placeholder='请输入用户名' maxlength="16" type='text' autocomplete="off" >
  </div>
  <div class='login_fields__password'>
    <div class='icon' >
      <img alt="" src='./img/lock.png'>
    </div>
    <input id="userpsd" name="userpsd" placeholder='请输入密码' maxlength="16" type='text' autocomplete="off" >
  </div>
  <div class='login_fields__submit'>
    <input type='button' value='登录' id="btlogin">
  </div>
</div>
</body>
</html>

<script type="text/javascript">
  //刀盘旋转
  var rotateval = 0 // 旋转角度
  var interval // 定时器
  window.onload = function () {
    // 网页加载完成后即运行rotate函数
    rotate()
  }
  // 设置定时器
  function rotate () {
    interval = setinterval(function () {
      var img = document.getelementbyid('img')
      rotateval += 1
      // 设置旋转属性(顺时针)
      img.style.transform = 'rotate(' + rotateval + 'deg)'
      // 设置旋转时的动画 匀速0.1s
      img.style.transition = '0.1s linear'
    }, 100)
  }

  //判断及请求
  $(function () {
    $("#btlogin").click(function () {
      var name = $("#username").val();
      var psd = $("#userpsd").val();
      console.log(name,psd);
      if (name == "" || name == null){
        alert("用户名不能为空！")
        return;
      }
      if (psd == "" || psd == null){
        alert("密码不能为空！")
        return;
      }
      $.ajax({
        type: "post",
        url: "/log",
        data: {name: name,psd: psd},
        success:function(data){
          if(data == "1"){
            window.location.href="./index" rel="external nofollow" ;
          }else{
            alert("登录失败，账号密码不匹配！")
          }
        }
      })
    })
  })
</script>

到此这篇关于idea简单实现登录注册页面的文章就介绍到这了,更多相关idea实现登录页面内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

IDEA简单实现登录注册页面

Python Tkinter 简单登录界面的实现

PHP 实现超简单的SESSION与COOKIE登录验证功能示例

jsp+servlet+mysql简单实现用户登陆注册

express+vue+mongodb+session 实现注册登录功能

JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册

require.js与bootstrap结合实现简单的页面登录和页面跳转功能

Python登录注册验证功能实现

纯粹的使用html5实现账号注册页面

Android Walker登录记住密码页面功能实现

Laravel框架基于中间件实现禁止未登录用户访问页面功能示例