IDEA简单实现登录注册页面

2024-08-09 08:51:41

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实现 springmvc的简单注册登录功能的示例代码

1.基本环境搭建 spring简介 SpringMVC框架是以请求为驱动,围绕Servlet设计,将请求发给控制器,然后通过模型对象,分派器来展示请求结果视图.其中核心类是DispatcherServlet,它是一个Servlet,顶层是实现的Servlet接口. project创建在图中填上项目名称即可,其他直接next 如上图所示,创建两个包,并且指定包的类型,如下图,java包指定为Sources Root,resouces包指定为Resources root 整个目录结构: pom依赖
如何利用IDEA搭建SpringBoot项目整合mybatis实现简单的登录功能

利用闲余时间想自己搭建一个springboot+mybatis的项目,提升一下自己对项目的了解,毕竟自己还是一个小白,在这里为自己创建项目的过程做一个记录,以便以后回忆.同时将搭建中遇到的问题也在这里做记录.如有遇到同样问题的同学,希望能给你一下借鉴. springboot的优势之一就是快速搭建项目,省去了自己导入jar包和配置xml的时间,使用非常方便. 一,搭建项目: 1.打开IDEA,点击File→New→Project...,如图1所示图1 搭建项目 2.当我们选择project..
IDEA简单实现登录注册页面

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 { @
使用JSP实现简单的用户登录注册页面示例代码解析

实验要求: 将实验2中的系统用户登录和注册页面改为JSP页面,并部署自己的Web应用于Tomcat服务器中具体要求: 完成登录JSP页面设计和注册页面设计在登录页面表单中使用request对象获取用户信息,建立新的JSP页面完成登录验证(用户名和密码自己指定即可). 验证结果显示(如登录成功/用户名密码错误,可以使用JavaScript,也可以使用新的JSP页面). 在注册页面表单中使用request对象获取用户注册信息(注册项目由自己指定),在新的JSP页面显示用户注册信息,并提示注册成功
JavaWeb简单用户登录注册实例代码(有验证码)

需求编写login登录界面(用户名,密码,验证码,登陆按钮,注册按钮) 设计关系数据库(编号,用户名,密码) 编写注册功能,将数据存储在数据库中.(姓名不能重复,设为主键,重复会注册失败) 编写登录功能 .首先获取验证码,先判断验证码是否正确,不正确则显示验证码错误.验证码正确后再获取用户名和密码,进行数据库的搜索比对,若正确则重定向到成功的界面,并且将用户名显示. jar包技术选型 Servlet + JSP + Mysql + JDBCTemplate + Druid + BeanUti
SpringBoot实现简单的登录注册的项目实战

目录第一步:建立简单的项目第二步:建一个简单的数据表第三步:配置文件如下: 第一步:建立简单的项目第二步:建一个简单的数据表第三步:配置文件如下: pom.xml文件配置: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/
Android实现登录注册页面(上)

简单的Android开发登录注册,这个是没有连数据库的. 首先,新建项目,新建一个登录页面LoginActivity和注册页面RegisterActivity. 下面是登录页面的代码:activity_login.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
node.js实现登录注册页面

本文实例为大家分享了node.js登录注册页面展示的具体代码,供大家参考,具体内容如下首先需要新建四个文件一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <
JavaScript实现简易登录注册页面

本文实例为大家分享了JavaScript实现简易登录注册页面的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>login</title> <!-- <link rel="stylesheet" type="text/css" hr
Android实现登录注册页面(下)

前面我们已经完成了登录注册页面的布局,下面我们实现验证登录和记住密码的功能. 我们这里还没用到数据库,所以我们的验证的账号密码,是写死的. 首先进入登录页面,可以从这里跳转到注册页面,注册成功后,账号密码的输入框会自动获取刚刚注册的账号密码,无需再次输入.登录成功后,页面跳转到首页,首页获取并显示刚刚注册的账号,点击首页的退出登录,则返回到登录页面. 接下来,先写首页activity_main.xml页面的内容: <?xml version="1.0" encoding=&quo
基于SSM框架实现简单的登录注册的示例代码

一.环境配置工程目录在pom.xml添加依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd&
ASP.NET登录注册页面实现

如何利用Visual studio 2010创建一个ASP网站? [文件]-->[新建]-->[网站]-->[ASP.Net网站]--[完成] 默认页面Default.aspx 创建以上界面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserLogin.aspx.cs" Inherits="UserLogin" %> <

IDEA简单实现登录注册页面

相关推荐

随机推荐