Java web项目01 停车管理系统登陆界面(一)
(一)界面源码javascript
<%@include file="/common/sub_header.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--basePath=http:localhost:8080/tcc -->
<base href="<%=basePath%>">
<title>系统登陆</title>
<style type="text/css"> html { overflow-y: scroll; vertical-align: baseline; } body { font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 12px; color: #fff; height: 100%; line-height: 1; background: #999 } * { margin: 0; padding: 0 } ul,li { list-style: none } h1 { font-size: 30px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .2) } .login-box { width: 410px; margin: 120px auto 0 auto; text-align: center; padding: 30px; background: url(images/mask.png); border-radius: 10px; } .login-box .name,.login-box .password,.login-box .code,.login-box .remember { font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, .1) } .login-box .remember input { box-shadow: none; width: 15px; height: 15px; margin-top: 25px } .login-box .remember { padding-left: 40px } .login-box .remember label { display: inline-block; height: 42px; width: 70px; line-height: 34px; text-align: left } .login-box label { display: inline-block; width: 100px; text-align: right; vertical-align: middle } .login-box #code { width: 120px } .login-box .codeImg { float: right; margin-top: 26px; } .login-box img { width: 148px; height: 42px; border: none } input[type=text],input[type=password] { width: 270px; height: 42px; margin-top: 25px; padding: 0px 15px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; color: #fff; letter-spacing: 2px; font-size: 16px; background: transparent; } button { cursor: pointer; width: 100%; height: 44px; padding: 0; background: #ef4300; border: 1px solid #ff730e; border-radius: 6px; font-weight: 700; color: #fff; font-size: 24px; letter-spacing: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, .1) } input:focus { outline: none; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2) } button:hover { box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0 rgba(0, 0, 0, .2) } .screenbg { position: fixed; bottom: 0; left: 0; z-index: -999; overflow: hidden; width: 100%; height: 100%; min-height: 100%; } .screenbg ul li { display: block; list-style: none; position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; z-index: -1000; float: right; } .screenbg ul a { left: 0; top: 0; width: 100%; height: 100%; display: inline-block; margin: 0; padding: 0; cursor: default; } .screenbg a img { vertical-align: middle; display: inline; border: none; display: block; list-style: none; position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; z-index: -1000; float: right; } .bottom { margin: 8px auto 0 auto; width: 100%; position: fixed; text-align: center; bottom: 0; left: 0; overflow: hidden; padding-bottom: 8px; color: #ccc; word-spacing: 3px; zoom: 1; } .bottom a { color: #FFF; text-decoration: none; } .bottom a:hover { text-decoration: underline; } </style>
<script type="text/javascript" src="limg/jquery-1.8.2.min.js"> </script>
<script type="text/javascript"> $(function() { $(".screenbg ul li").each(function() { $(this).css("opacity", "0"); }); $(".screenbg ul li:first").css("opacity", "1"); var index = 0; var t; var li = $(".screenbg ul li"); var number = li.size(); function change(index) { li.css("visibility", "visible"); li.eq(index).siblings().animate( { opacity : 0 }, 3000); li.eq(index).animate( { opacity : 1 }, 3000); } function show() { index = index + 1; if (index <= number - 1) { change(index); } else { index = 0; change(index); } } t = setInterval(show, 8000); //1.根据窗口宽度生成图片宽度 var width = $(window).width(); $(".screenbg ul img").css("width", width + "px"); }); </script>
</head>
<body>
<div class="login-box">
<h1>
停车场信息管理系统
</h1>
<form method="post" action="">
<div class="name">
<label>
帐号：
</label>
<input type="text" name="username" id="username" tabindex="1" autocomplete="off">
</div>
<div class="password">
<label>
密 码：
</label>
<input type="password" name="userpwd" id="userpwd" maxlength="16" id="" tabindex="2">
</div>
<div class="code">
<br/>
<select tabindex="3" name="type">
<option value="用户">用户</option>
<option value="管理员">管理员</option>
</select>
</div>
<!-- div class="code"> <label>验证码：</label> <input type="text" name="" maxlength="4" id="code" tabindex="3"> <div class="codeImg"> <img src="<%=path%>/limg/captcha.jpeg.jpg"> </div> </div -->
<div class="code"><br/></div>
<div class="login">
<button type="button" tabindex="5" onclick="login();">
登陆
</button><div class="code"><br/></div>
<button type="button" tabindex="5" onclick="reg();">
注册
</button>
</div>
</form>
</div>
<div class="screenbg">
<ul>
<li style="opacity: 1; visibility: visible;">
<a href="javascript:;"><img src="<%=path%>/limg/2.jpg" style="width: 1350px;">
</a>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript"> function login(){ if($("#username").val() == ""){ alert('请输入用户名！'); return; } if( $("#userpwd").val() == ""){ alert('请输入密码！'); return; } //2.输入有帐号密码跳转到LoginAction处理 document.forms[0].action= "<%=path%>/LoginAction"; document.forms[0].submit(); } //3.注册处理函数 function reg(){ document.forms[0].action= "<%=path%>/userinfo/regUserinfo.jsp"; document.forms[0].submit(); } </script>
1.1登陆处理Sevlet程序css
package com.wang.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.biyeseng.db.DBManager;
public class LoginAction extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
this.doPost(request, response);
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String userpwd = request.getParameter("userpwd");
String type = request.getParameter("type");
DBManager dbm = new DBManager();
request.getSession().setAttribute("fei", dbm.getSF());
if (type.equals("用户")) {
int uid = dbm.loginYH(username, userpwd);
if (uid > 0) {
request.getSession().setAttribute("user", username);
request.getSession().setAttribute("uid", uid+"");
request.getSession().setAttribute("type", "用户");
//1.帐号密码正确跳转到首页
response.sendRedirect("index.jsp");
} else {
out.println("<script>alert('用户名或密码有误！');window.location.href='login.jsp'</script>");
}
} else if (type.equals("管理员")) {
boolean login = dbm.login(username, userpwd);
if (login) {
request.getSession().setAttribute("user", username);
request.getSession().setAttribute("type", "管理员");
response.sendRedirect("index.jsp");
} else {
out.println("<script>alert('用户名或密码有误！');window.location.href='login.jsp'</script>");
}
} else {
out.println("<script>alert('用户名或密码有误！');window.location.href='login.jsp'</script>");
}
out.flush();
out.close();
}
}
效果演示：
html
(二)注册界面java
<%@include file="/common/sub_header.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
</head>
<body>
<div class="main-wrap1">
<div class="crumb-wrap">
<div class="crumb-list">
<i class="icon-font"></i><span>用户注册</span>
</div>
</div>
<div class="result-wrap">
<div class="result-content">
<form method="post" id="myform" name="myform">
<table class="insert-tab" width="100%">
<tbody>
<tr>
<th>
<i class="require-red"></i>登陆名：
</th>
<td>
<input class="common-text required" id="name" name="name" size="50" value="" type="text">
</td>
</tr>
<tr>
<th>
<i class="require-red"></i>密码：
</th>
<td>
<input class="common-text required" id="pwd" name="pwd" size="50" value="" type="text">
</td>
</tr>
<tr>
<th>
<i class="require-red"></i>年龄：
</th>
<td>
<input class="common-text required" id="age" name="age" size="50" value="" type="text">
</td>
</tr>
<tr>
<th>
<i class="require-red"></i>电话：
</th>
<td>
<input class="common-text required" id="tel" name="tel" size="50" value="" type="text">
</td>
</tr>
<tr>
<th></th>
<td>
<input class="btn btn-primary btn6 mr10" onclick="save();" value="提交" type="button">
<input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<!--/main-->
</div>
</body>
</html>
<script> function save() { if ($("#name").val() == "") { $.messager.alert('警告', '姓名不能为空！', 'warning'); return; } if ($("#pwd").val() == "") { $.messager.alert('警告', '密码不能为空！', 'warning'); return; } document.forms[0].action = "<%=path%>/RegUserinfoAction"; document.forms[0].submit(); } </script>
1.2注册Servlet程序mysql
package com.wang.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.biyeseng.db.DBManager;
public class RegUserinfoAction extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
String age=request.getParameter("age");
String tel=request.getParameter("tel");
DBManager dbm = new DBManager();
//用户注册
String sql = "insert into userinfo(name,pwd,age,tel,jine) values('"+name+"','"+pwd+"','"+age+"','"+tel+"','0')";
Statement stat = null;
Connection conn=null;
try {
conn=dbm.getConnection();
stat = conn.createStatement();
System.out.println(sql);
stat.execute(sql);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
try {
if(stat!=null)
stat.close();
if(conn!=null)
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
out.println("<script>alert('注册成功请登陆！');window.location.href='login.jsp'</script>");
out.flush();
out.close();
}
}
效果演示：
jquery
(三)DBUtils程序web
package com.wang.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Properties;
/** * 数据库管理类 * * */
public class DBManager {
public static final String DEFAULT_DRIVER_NAME = "com.mysql.jdbc.Driver";
public static final String DEFAULT_DB_URL = "jdbc:mysql://localhost:3306/tcc";
public static String DB_URL = null;
public static Properties prop = null;
//1.获取数据链接
public Connection getConnection() {
Connection coon = null;
try {
Class.forName(DEFAULT_DRIVER_NAME);
coon = DriverManager.getConnection(DEFAULT_DB_URL, "root", "root");
} catch (Exception e) {
e.printStackTrace();
}
return coon;
}
/* public static void main(String[] args) { DBManager manager = new DBManager(); manager.getConnection(); }*/
//2.管理员登陆验证
public boolean login(String username, String pwd) {
Connection coon = getConnection();
ResultSet rs = null;
PreparedStatement pstmt = null;
try {
pstmt = coon.prepareStatement("select * from admin where userName='"
+ username + "' and userPw='" + pwd + "'");
rs = pstmt.executeQuery();
while (rs.next()) {
return true;
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (coon != null)
coon.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return false;
}
//3.用户登陆验证
public int loginYH(String username, String pwd) {
Connection coon = getConnection();
ResultSet rs = null;
PreparedStatement pstmt = null;
try {
String sql="select * from userinfo where name='"
+ username + "' and pwd='" + pwd + "'";
pstmt = coon.prepareStatement(sql);
rs = pstmt.executeQuery();
while (rs.next()) {
return rs.getInt("id");
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (coon != null)
coon.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return -1;
}
//4.获取费用
public String getSF() {
Connection coon = getConnection();
ResultSet rs = null;
PreparedStatement pstmt = null;
try {
pstmt = coon.prepareStatement("select * from fei ");
rs = pstmt.executeQuery();
if (rs.next()) {
return rs.getString("price");
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (coon != null)
coon.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return "0";
}
//5.经过id获取车的信息
public String getChe(int uid) {
Connection coon = getConnection();
ResultSet rs = null;
PreparedStatement pstmt = null;
try {
pstmt = coon.prepareStatement("select * from che where uid= " + uid);
rs = pstmt.executeQuery();
if (rs.next()) {
return rs.getString("hao");
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (coon != null)
coon.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return null;
}
//6.经过车牌号获取车位信息
public String isDing(String hao) {
Connection coon = getConnection();
ResultSet rs = null;
PreparedStatement pstmt = null;
try {
pstmt = coon.prepareStatement("select * from chewei where chepai='"
+ hao + "'");
rs = pstmt.executeQuery();
if (rs.next()) {
return rs.getString("hao");
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (coon != null)
coon.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return null;
}
public String getYue(String hao) {
Connection coon = getConnection();
ResultSet rs = null;
PreparedStatement pstmt = null;
try {
pstmt = coon.prepareStatement("select ui.jine as jine from che ch,userinfo ui where ch.uid=ui.id and ch.hao='"+hao+"'");
rs = pstmt.executeQuery();
if (rs.next()) {
return rs.getString("jine");
}
} catch (SQLException e) {
e.printStackTrace();
System.out.println("数据库链接失败");
} finally {
try {
if (pstmt != null)
pstmt.close();
if (coon != null)
coon.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return null;
}
//7.计算时间
public long calcHour(String bdate, String edate) {
String dateStart = bdate;
String dateStop = edate;
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date d1 = null;
Date d2 = null;
try {
d1 = format.parse(dateStart);
d2 = format.parse(dateStop);
// 毫秒ms
long diff = d2.getTime() - d1.getTime();
long diffSeconds = diff / 1000 % 60;
long diffMinutes = diff / (60 * 1000) % 60;
long diffHours = diff / (60 * 60 * 1000) % 24;
long diffDays = diff / (24 * 60 * 60 * 1000);
System.out.print("两个时间相差：");
System.out.print(diffDays + " 天, ");
System.out.print(diffHours + " 小时, ");
System.out.print(diffMinutes + " 分钟, ");
System.out.print(diffSeconds + " 秒.");
return diffHours;
} catch (Exception e) {
e.printStackTrace();
}
return -1;
}
//8.转换文本格式
public static String TextToHtml(String sourcestr) {
int strlen;
String restring = "", destr = "";
strlen = sourcestr.length();
for (int i = 0; i < strlen; i++) {
char ch = sourcestr.charAt(i);
switch (ch) {
case '<':
destr = "<";
break;
case '>':
destr = ">";
break;
case '\"':
destr = "\"";
break;
case '&':
destr = "&";
break;
case 13:
destr = "<br>";
break;
case 32:
destr = " ";
break;
default:
destr = "" + ch;
break;
}
restring = restring + destr;
}
return "" + restring;
}
}