layui使⽤html+servlet+ajax实现登录验证
我们⼀般使⽤的都是form表单提交到Servlet来实现前端和后端的交互的。这次我使⽤的是ajax提交数据，实现登录操作。⾸先我们需要的是⼀套layui模板，这⾥⽤到layui的js和css界⾯。
第⼀步⾃⼰建⽴数据表，这⾥只需要username 和password。我使⽤的是主要使⽤的是mysql。
这边是我的⼯程⽬录，来看⼀下我的⽬录结构吧。
这⾥就主要写⼀下servlet和前端html的交互。
Servlet
login.java
package com.Serlvet;
import com.Bean.User;
import com.Dao.mannger;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name ="login", value = "/login")
public class login extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String Parameter("action");//action'是html传来的⼀个字段
if(action.equals("doLogin")){
doLogin(request,response);
}
}
protected void doLogin(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");//设置相应的⽂本类型
response.setContentType("text/html;charset=utf-8");//设置响应类型，并防⽌中⽂乱码
String username = Parameter("username");
String password = Parameter("password");
String fangshi = Parameter("fangshi");
mannger dao = new mannger();//dao层对象
User student = new User();//实体类对象
User admin = new User();//实体类对象
student.setUsername(username);//获取前端传来的数据
student.setPassword(password);
html怎么实现登录验证功能admin.setUsername(username);
admin.setPassword(password);
int i = 0;
if ("0".equals(fangshi)) { //判断登录⽅式
i = dao.loginstu(student); //执⾏登录操作
if (i==0) {
request.setAttribute("msg", "⽤户名或者密码错误");
System.out.println("⽤户名或者密码错误");
} else {
System.out.println("ok");
System.out.println("登陆成功");
}
}
else if ("1".equals(fangshi)) {
i = dao.loginadmin(admin);
System.out.println(i);
if (i == 0) {
request.setAttribute("msg", "⽤户名或者密码错误");
System.out.println("⽤户名或者密码错误");
} else {
System.out.println("ok");
System.out.println("登陆成功");
}
}
}
}
dao层，这个代码是封装的⼀些进⾏数据库操作的⽅法。
mannger.java
package com.Dao;
import com.Bean.User;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.Util.utils;
public class mannger {
public int registerstu(User stu){
int i=0;
try {
Connection connection = Connection();
String sql = "insert into stuuser(username,password,email,name,tel,gender,birthday) values(?,?,?,?,?,?,?)";
PreparedStatement ps = null;
ps = connection.prepareStatement(sql);
ps.setString(Username());
ps.setString(2, Password());
ps.setString(Email());
ps.setString(Name());
ps.setString(5, Tel());
ps.setString(6, Gengder());
ps.setString(7, Birthday());
i = ps.executeUpdate();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
public int registeradimn(User admin){
int i=0;
try {
Connection connection = Connection();
String sql = "insert into adminuser(username,password,email,name,tel,gender,birthday) values(?,?,?,?,?,?,?)";
PreparedStatement ps = null;
ps = connection.prepareStatement(sql);
ps.setString(Username());
ps.setString(2, Password());
ps.setString(Email());
ps.setString(Name());
ps.setString(5, Tel());
ps.setString(6, Gengder());
ps.setString(7, Birthday());
i = ps.executeUpdate();
} catch (ClassNotFoundException e) {
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
public int loginstu(User stu){
int i = 1;
try {
Connection connection = Connection();
String sql="select * from stuuser where username=? and password=?";
PreparedStatement ps = null;
ps = connection.prepareStatement(sql);
ps.setString(Username());
ps.setString(2, Password());
ResultSet rs = ps.executeQuery();
()==false){
i = 0;
}
rs.close();
ps.close();
connection.close();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
public int loginadmin(User admin){
int i = 1;
try {
Connection connection = Connection();
String sql="select * from adminuser where username=? and password=?"; PreparedStatement ps = null;
ps = connection.prepareStatement(sql);
ps.setString(Username());
ps.setString(2, Password());
ResultSet rs = ps.executeQuery();
()==false){
i = 0;
}
rs.close();
ps.close();
connection.close();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return i;
}
}
下⾯是界⾯
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理-登陆</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="WebContent/layui/css/layui.css"
media="all">
<!--[if lt IE 9]>
<script src="/html5shiv/r29/html5.min.js"></script>
<script src="/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
<style>
body {
background-image: url("WebContent/layuimini/images/bg.jpg");
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
}
input:-webkit-autofill {
-webkit-box-shadow: inset 0 0 0 1000px #fff;
background-color: transparent;
}
.admin-login-background {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -150px;
margin-top: -100px;
}
.admin-header {
text-align: center;
margin-bottom: 20px;
color: #ffffff;
font-weight: bold;
font-size: 40px
}
.admin-input {
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
height: 50px;
width: 300px;
padding-bottom: 0px;
}
.
admin-input::-webkit-input-placeholder {
color: #a78369
}
.layui-icon-username {
color: #a78369 !important;
}
.layui-icon-username:hover {
color: #9dadce !important;
}
}
.layui-icon-password {
color: #a78369 !important;
}
.layui-icon-password:hover {
color: #9dadce !important;
}
.admin-input-username {
border-top-style: solid;
border-radius: 10px 10px 0 0;
}
.admin-input-verify {
border-radius: 0 0 10px 10px;
}
.admin-button {
margin-top: 20px;
font-weight: bold;
font-size: 18px;
width: 300px;
height: 50px;
border-radius: 5px;
background-color: #a78369;
border: 1px solid #d8b29f
}
.
admin-icon {
margin-left: 260px;
margin-top: 10px;
font-size: 30px;
}
i {
position: absolute;
}
.admin-captcha {
position: absolute;
margin-left: 205px;
margin-top: -40px;
}
</style>
</head>
<body>
<div id="container">
<div></div>
<div class="admin-login-background">
<div class="admin-header">
<span>login</span>
</div>
<form class="layui-form">
<div>
<i class="layui-icon layui-icon-username admin-icon"></i><input
type="text"
name="username"
id="username"
placeholder="请输⼊⽤户名"
autocomplete="off"
class="layui-input admin-input admin-input-username">
</div>
<div>
<i class="layui-icon layui-icon-password admin-icon"></i><input
type="password"
name="password"
id="password"
placeholder="请输⼊密码"
autocomplete="off"
class="layui-input admin-input">
</div>
<div class="layui-form-item">
<div class="layui-show-sm-inline">
<select name="fangshi" id="fangshi">
<option value="0">学⽣</option>
<option value="1" selected>管理员</option>
</select>
</div>
</div>
<button type="button" class="layui-btn admin-button" id="login">登陆</button>
<br><br>
</form>
<div class="layui-col-md-offset7">没有账户?
<a href="register.html" class="layui-btn-warm">注册</a>
</div>
</div>
</div>
<script src="WebContent/layui/layui.all.js" charset="utf-8"></script>
<script>
layui.use([ 'form','jquery','layer' ], function() {
var form = layui.form,
layer = layui.layer,
$= layui.jquery;
$("#login").click(function(){
var $1= $.trim($("#username").val());
var $2= $.trim($("#password").val());
var $3= $.trim($("#fangshi").val());
if($1==''){
layer.msg('⽤户名不能为空',function() {time:2000});
return false;
}
if($2==''){
layer.msg('密码不能为空',function() {time:2000});
return false;
}
$.ajax({
url:'login?action=doLogin',//发出请求
type:'post',
data:{"username":$1,"password":$2,"fangshi":$3},
success:function (data) {
console.log(data)
if(data=="ok"){//ok说明登录成功
layer.msg('登陆成功!',function() {time:2000})
window.location.href="layui-doc-master/web/demo/admin.html";//然后跳转到你系统的主界⾯ }else if(data=="error"){
layer.msg('⽤户名或密码错误!',function() {time:2000});
}
}
});
});
});
</script>
</body>
</html>
实现效果
实现效果
如果有什么问题，欢迎交流！欢迎交流！欢迎交流！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论