java编程
搜索
分类

IDEA简单实现登录注册页面

作者：非心木儿 时间：2023-08-06 19:10:37　

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>

来源：https://blog.csdn.net/weixin_43699770/article/details/111244836

标签：idea,登录,页面
0
投稿

猜你喜欢

  • Spring Boot 2.0.0 终于正式发布-重大修订版本

    2021-08-12 08:25:51

  • 修改Android签名证书keystore的密码、别名alias以及别名密码

    2022-03-07 04:22:42

  • Android7.0中关于ContentProvider组件详解

    2023-10-30 19:48:29

  • Android开发实现Files文件读取解析功能示例

    2021-06-15 04:56:37

  • Android开发：微信授权登录与微信分享完全解析

    2023-03-20 14:08:10

  • C#中ManualResetEvent用法总结

    2023-01-21 23:41:41

  • kill命令在Java应用中使用的注意事项小结

    2023-11-11 13:01:55

  • Scala方法与函数使用和定义详解

    2021-10-05 06:34:12

  • Java多线程读写锁ReentrantReadWriteLock类详解

    2023-03-09 07:01:54

  • 关于WPF异步MVVM等待窗体的介绍

    2022-08-03 00:54:19

  • 详解Java发送HTTP请求

    2022-01-09 14:53:57

  • C#几种截取字符串的方法小结

    2023-07-16 09:55:10

  • 关于weblogic部署Java项目的包冲突问题的解决

    2023-07-19 19:02:59

  • 带你了解Java的类和对象

    2022-05-08 09:10:21

  • Java经典面试题最全汇总208道(四)

    2023-11-08 23:59:26

  • C#读写INI文件的方法

    2023-12-08 15:31:10

  • C#开发的人脸左右相似度计算软件源码分析

    2023-08-26 05:18:41

  • springboot添加https服务器的方法

    2022-08-19 06:14:31

  • C++强制类型转换的四种方式

    2023-03-29 04:00:49

  • C#使用DLLImport调用外部DLL的方法

    2022-07-17 04:41:18
    • asp之家 软件编程 m.aspxhome.com