目标
- 登录页面login.html
- 登录后台
登录页面login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<style>
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
} /* 需要在一行的元素 */
.inline-style {
display: inline-block;
}
</style>
</head>
<body class="login">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand nb"><img src="imgs/logo.png" style="width: 258px;height: 36px;padding-top: 10px;"/></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">欢迎使用个人电子码</a></li>
</ul>
</div>
</nav>
<div class="container login">
<div class="row row-centered">
<div class="well col-md-6 col-centered">
<h2 style="color:#000000;margin-top: 0px;" class="text-center">个人电子码注册</h2>
<form id="fm" class="form-horizontal" method="post">
<div class="form-group col-sm-12">
<label for="telephone">手机号码：</label>
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="请输入手机号码" onblur="checkTel()"/>
</div>
<div class="form-group col-sm-12">
<label for="idcard">身份证号码：</label>
<input type="text" class="form-control" id="idcard" name="idcard" placeholder="请输入身份证号码" onblur="checkIdCard()"/>
</div>
<div class="form-group col-sm-12" id="msg" style="display: none">
</div>
<div class="form-group col-sm-12" style="padding-top: 10px">
<button type="button" onclick="getCard()" class="btn btn-block" style="background-color: green; color: white;">获取健康码</button>
<a href="index.html" class="btn btn-primary btn-block">注册健康码</a>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function checkTel() {
var telephone = $("#telephone").val();
if( telephone == null || telephone == "" ){
$("#msg").show().html("<font color='red'>手机号码不能为空</font>");
return false;
}
return true;
}
function checkIdCard() {
var idcard = $("#idcard").val();
if( idcard == null || idcard == "" ){
$("#msg").show().html("<font color='red'>身份证号码不能为空</font>");
return false;
}
return true;
}
function getCard(){
// 在提交表单之前，需要先判断表单数据填写了
if( checkTel() && checkIdCard() ){
// 通过ajax给服务器提交数据
$.post("/healthCode/login",$("#fm").serialize(),function (resp) {
if( resp == 0 ){
$("#msg").show().html("<font color='red'>手机号码不能为空</font>");
}else if( resp == 1 ){
$("#msg").show().html("<font color='red'>身份证号码不能为空</font>");
}else if( resp == 2 ){
$("#msg").show().html("<font color='red'>您还没有注册</font>");
}else if( resp == 4 ){
// 登录成功
window.location.href = "card.html";
}
});
}
}
</script>
</html>
登录后台
1)servlet(/healthCode/login)
package com.neusoft.servlet;
import com.neusoft.pojo.HealthCode;
import com.neusoft.service.HealthCodeService;
import org.apache.commons.lang3.StringUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author 屈博
* 陕西西安
* 联系方式：qubome@aliyun.com
*/
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获取提交的数据
String telephone = req.getParameter("telephone");
String idcard = req.getParameter("idcard");
// 判断数据
if( StringUtils.isBlank(telephone) ){
resp.getWriter().write("0");
return ;
}
if( StringUtils.isBlank(idcard) ){
resp.getWriter().write("1");
return ;
}
// 创建service层的对象
HealthCodeService healthCodeService = new HealthCodeService();
// 调用service中的方法，
HealthCode healthCode = healthCodeService.login(telephone , idcard);
// 如果返回的null，说明输入的手机号码或身份证号码在数据库中不存在
if( healthCode == null ){
resp.getWriter().write("2");
return ;
}
// 这里需要返回4，表示登录成功，需要将用户的个人信息放到session中
req.getSession().setAttribute("healthCode",healthCode);
resp.getWriter().write("4");
}
}
2)service
HealthCodeService 中增加login方法
public HealthCode login(String telephone, String idcard) {
try {
HealthCode healthCode = this.healthCodeDao.login(telephone, idcard);
return healthCode;
}catch (SQLException e){
e.printStackTrace();
}
return null;
}
3)dao
HealthCodeDao中增加login方法
public HealthCode login(String telephone, String idcard) throws SQLException {
String sql = "select * from tb_healthcard where telephone = ? and idcard = ?";
return queryRunner.query(sql , new BeanHandler<>(HealthCode.class) , telephone , idcard);
}
4）先编写一个简单的card.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
card
</body>
</html>
测试
image.png
image.png
网友评论