IDEA简单实现登录注册页面
更新时间：2020年12月18日 16:51:12 作者：非心木儿
这篇文章主要介绍了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 {
@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实现登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要讲解Dubbo的环境与配置，文中运用大量代码和图片讲解的非常详细，需要学习或用到相关知识的小伙伴可以参考这篇文章2021-09-09
idea 查看一个类的所有子类以及子类的子类并以层级关系显示
这篇文章主要介绍了idea 查看一个类的所有子类以及子类的子类并以层级关系显示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
Spring mvc Controller和RestFul原理解析
这篇文章主要介绍了Spring mvc Controller和RestFul原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了java 如何复制非空对象属性值的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-09-09
这篇文章主要介绍了jmeter接口测试-使用rsa加密解密算法,部分接口采用了rsa加密算法，我们的jmeter 也是可以直接拿来调用的，不需要开发配合去掉加密代码，需要的朋友可以参考下2022-03-03
大家好，本篇文章主要讲的是java线程池核心API源码详细分析，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下，方便下次浏览2022-01-01
Spring Boot2.0使用Spring Security的示例代码
这篇文章主要介绍了Spring Boot2.0使用Spring Security的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了Java静态方法和实例方法的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
MyBatisPlus自定义JsonTypeHandler实现自动转化JSON问题
这篇文章主要介绍了MyBatisPlus自定义JsonTypeHandler实现自动转化JSON问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
平常在编码的过程中,可能需要调用第三方Api接口,这个过程中可能涉及到不太熟悉第三方Api接口的返回值类型,平常在编码的过程中,可能需要调用第三方Api接口,这个过程中可能涉及到不太熟悉第三方Api接口的返回值类型,需要的朋友可以参考下2023-10-10
最新评论