HTML以及J2EE简单编程：使用Java进行JSP、Servlet的编写web应用并将其部署到Tomcat上

“做中学”实验二

实验要求

安装配置好Tomcat应用服务器，使用Java进行JSP、Servlet的编写web应用并将其部署到Tomcat上，实验步骤为：

1. Tomcat应用服务器安装配置；
2. 编写web页面，完成对实验一数据库的操作。

实验过程

关于JSP、Servlet的编写可以跟着这个课程进行学习：JavaWeb视频教程

代码框架

注意需要导入的jar包。

ｅｎｔｉｔｙ

package com.mwx.entity;

public class Persons {
	private String username;
	private String name;
	private Integer age;
	private String teleno;
	public Persons(String username, String name, Integer age, String teleno) {
		super();
		this.username = username;
		this.name = name;
		this.age = age;
		this.teleno = teleno;
	}
	public Persons(String username,String name){
        this(username,name,null,"");
    }
    public Persons(String username,String name,Integer age){
        this(username,name,age,"");
    }
    public Persons(String username,String name,String teleno){
        this(username,name,null,teleno);
    }
	public Persons() {
		super();
		// TODO Auto-generated constructor stub
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getAge() {
		return age;
	}
	public void setAge(Integer age) {
		this.age = age;
	}
	public String getTeleno() {
		return teleno;
	}
	public void setTeleno(String teleno) {
		this.teleno = teleno;
	}

}

package com.mwx.entity;

public class Users {
	private String username;
	private String pass;
	
	public Users() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Users(String username, String pass) {
		super();
		this.username = username;
		this.pass = pass;
	} 
	
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}

}

ｄａｏ

package com.mwx.dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import com.mwx.entity.Persons;
import com.mwx.util.MysqlOp;

public class PersonDao {
	private MysqlOp con;
	
	public PersonDao(MysqlOp con) {
		super();
		this.con = con;
	}
	
	public boolean createTable() throws Exception {
        String sql ="create table persons("
				+"username varchar(10) not null,"
				+"name varchar(20) not null,"
				+"age int,"
				+"teleno char(11)," 
				+"primary key ( name )"
				+")";  
        Statement state=con.getCon().createStatement();
        state.executeUpdate(sql);
        state.close();
        System.out.println("创建persons表成功！");
        return true;
    } 
	
	public boolean delete(String mark,int  pattern) throws SQLException, Exception {
		Statement state=con.getCon().createStatement();
		if(pattern==1) {
			String sql = "delete from persons where username like '"+mark+"%'";//鍒犻櫎 
	        state.executeUpdate(sql);
		}
		if(pattern==2) {
			String sql="delete from persons where username = '"+mark+"'";
			state.executeUpdate(sql);
		}
        state.close();
		return true;
	}
	
	public int add(Persons person) throws SQLException, Exception {
		Statement state=con.getCon().createStatement();
		//person的信息
		String param="'"+person.getUsername()+"','"+person.getName()+"'";
		if(person.getAge()!=null) {
			param+=",'"+person.getAge()+"'";
		}
		if(person.getTeleno()!="") {
			param+=",'"+person.getTeleno()+"'";
		}
		//sql语句的信息
		String sql="insert into persons(username,name";
		if(person.getAge()!=null&&person.getTeleno()!="") {
			sql+=",age,teleno)";
		}
		else if(person.getAge()==null&&person.getTeleno()=="") {
			sql+=")";
		}
		else if(person.getAge()!=null&&person.getTeleno()=="") {
			sql+=",age)";
		}
		else {
			sql+=",teleno)";
		}
		sql+=" values ("+param+")";
	//	state.executeUpdate(sql);
		
		int flag=0;//用于判断是哪一种插入情况
		int panduan=-1;
		
		//查找persons表中是否已经又某个username
		String sql2 ="select * from persons where username ='"+person.getUsername()+"';";
		ResultSet rs=state.executeQuery(sql2);
		if(!rs.next()) {//如果没有则直接插入
			panduan=state.executeUpdate(sql);
			System.out.println("插入成功！");
			flag++; 
		}else {
			this.delete(person.getUsername(), 2);
			panduan=state.executeUpdate(sql);
			System.out.println("插入并更新数据成功！");
			flag--;
		}
		
		//查找user表中是否存在该username
		String temp ="select * from users where username ='"+person.getUsername()+"';";
		rs=state.executeQuery(temp);
		if(!rs.next()) {//不存在则创建一个
			panduan=state.executeUpdate("insert into users(username,pass) values ('"+person.getUsername()+"','888888')");
			System.out.println("插入person和user成功！");
			flag+=100;
		}
		
		rs.close();
		state.close();
		return flag;
		//若为1，则username存在user但不存在person；若为-1，则存在于person和user；若为101，则不存在person和user；若为99，则存在person，不存在user。
	}
	
	public void display() throws SQLException, Exception {
		Statement state =con.getCon().createStatement();
		state.executeUpdate("select ifnull(age,'') from persons;");
		ResultSet rs=state.getResultSet();
		String persons_head="*****************表persons***************";
		String persons_title="|username   name    age      teleno   |";
		System.out.println(persons_head);
		System.out.println(persons_title);
		String query="select * from persons";
		rs=state.executeQuery(query);
		while(rs.next()) {
			String s1=rs.getString(1);
			String s2=rs.getString(2);
			String s3=rs.getString(3);
			String s4=rs.getString(4);
			System.out.println("| "+s1+"  "+s2+"   "+s3+"     "+s4+"     |");
		}
		rs.close();
		state.close();
	}
	
	public boolean drop() throws SQLException, Exception {
		Statement state =con.getCon().createStatement();
		String sql="drop table persons;";
		state.executeUpdate(sql);
		state.close();
		System.out.println("已删除person表。");
		return true;
	}
}

package com.mwx.dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import com.mwx.entity.Users;
import com.mwx.util.MysqlOp;

public class UserDao {
	private MysqlOp con;
	
	
	public UserDao(MysqlOp con) {
		super();
		this.con = con;
	}
 

	public boolean createTable() throws Exception {
        String sql = "create table users"
                + "( "
                + "username varchar(10) not null,"
                + "pass varchar(8) not null,"
                + "primary key (username)"
                + ")"; 
        Statement state=con.getCon().createStatement();
        state.executeUpdate(sql);
        state.close();
        System.out.println("创建user表成功！");
        return true;
    }
	
	public int delete(String mark,int  pattern) throws SQLException, Exception {
		Statement state=con.getCon().createStatement();
		if(pattern==1) {
			String sql = "delete from users where username like '"+mark+"%'";
	        state.executeUpdate(sql);
		}
		int flag=-1;
		if(pattern==2) {
			String sql="delete from users where username = '"+mark+"'";
			flag=state.executeUpdate(sql);
			if(flag>0)
				System.out.println("删除"+mark+"成功！");
			else
				System.out.println("不存在，删除"+mark+"失败！");
			
		}
        state.close();
		return flag;
	}
	
	public boolean add(Users user) throws SQLException, Exception {
		Statement state=con.getCon().createStatement();
		String sql="insert into users(username,pass) values ('"+user.getUsername()+"','"+user.getPass()+"')";
		state.executeUpdate(sql);
		state.close();
		System.out.println("添加user成功！");
		return true;
	}
	
	public void display() throws SQLException, Exception {
		Statement state =con.getCon().createStatement();
		String users_head="*****************表users***************";
		String users_title="|username             pass|";
		System.out.println(users_head);
		System.out.println(users_title);
		String query="select * from users";
		ResultSet rs=state.executeQuery(query);
		while(rs.next()) {
			String s1=rs.getString(1);
			String s2=rs.getString(2);
			System.out.println("|        "+s1+"                 "+s2+"     |");
		//	System.out.println(" ");
		}
		rs.close();
		state.close();
	}
	public boolean drop() throws SQLException, Exception {
		Statement state =con.getCon().createStatement();
		String sql="drop table users;";
		state.executeUpdate(sql);
		state.close();
		System.out.println("已删除users表。");
		return true;
	}
}

ｕｔｉｌ

package com.mwx.util;


import java.io.InputStream;
import java.sql.Connection;
import java.util.Properties;

import javax.sql.DataSource;

import com.alibaba.druid.pool.DruidDataSourceFactory;

public class MysqlOp {
	
	private Connection con = null;
	
	public MysqlOp() throws Exception {
		
		// TODO Auto-generated constructor stub
		con=getCon();
	}
	
	public Connection getCon()throws Exception{
		Properties properties = new Properties();
        InputStream in = MysqlOp.class.getResourceAsStream("config.properties");
        properties.load(in);  
        DataSource ds = DruidDataSourceFactory.createDataSource(properties);  
        Connection conn = ds.getConnection(); 
        in.close(); 
		return conn;
	} 
	
	 
	public void CloseCon()throws Exception{
		if(this.con!=null) { 
			this.con.close();
			System.out.println("已断开与数据库的连接。");
		}
	}
	
	
	
	public void connect() {
		MysqlOp jdncConn;
		try {
			jdncConn = new MysqlOp();
			jdncConn.getCon();
			System.out.println("数据库连接成功！");
		} catch (Exception e) {
			// TODO Auto-generated catch block
			System.out.println("数据库连接失败！");
			e.printStackTrace();
		}
	}
}

配置文件

driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/lab2?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT
username=root
password=＊＊＊＊＊＊
maxActive=100
maxWait=2000
initialSize=3
minIdle=2

ｓｅｒｖｌｅｔ

package com.mwx.servlet;

import java.io.IOException;

import javax.servlet.ServletContext;
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 com.mwx.dao.PersonDao;
import com.mwx.entity.Persons;
import com.mwx.util.MysqlOp;


@WebServlet("/Addperson")
public class Addperson extends HttpServlet{
	
	public Addperson() {
        super();
        // TODO Auto-generated constructor stub
    }
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		ServletContext context = this.getServletContext();   
		String username = new String(request.getParameter("username").getBytes("iso-8859-1"),"UTF-8");
		String name = new String(request.getParameter("name").getBytes("iso-8859-1"),"UTF-8");
		String age1 = request.getParameter("age");
		Integer age;
		if(age1.length()>0) age = Integer.valueOf(age1);
		else age = null;
		String teleno = request.getParameter("teleno");
		MysqlOp conn;
		try {
			conn = new MysqlOp();
			PersonDao po = new PersonDao(conn);
			int flag = 0;
			try { 
				flag = po.add(new Persons(username,name,age,teleno));
				System.out.println(flag);
				context.setAttribute("username1",username);
				context.setAttribute("flag1",flag);
				response.sendRedirect("check-add.jsp");
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			conn.CloseCon();
		} catch (Exception e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		}
		
	} 

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		doGet(request, response);
	}

}

package com.mwx.servlet;

import java.io.IOException;

import javax.servlet.ServletContext;
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 com.mwx.dao.PersonDao;
import com.mwx.dao.UserDao;
import com.mwx.entity.Persons;
import com.mwx.util.MysqlOp;

@WebServlet("/Deleteuser")
public class Deleteuser extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		ServletContext context = this.getServletContext();   
		String username = request.getParameter("username");
		response.getWriter().append("Served at: ").append(request.getContextPath());
		MysqlOp conn;
		try {
			System.out.println("进入delete");
			conn = new MysqlOp();
			UserDao uo = new UserDao(conn);
			int flag = -1;
			try { 
				flag = uo.delete(username, 2);
				System.out.println(flag);
				context.setAttribute("username2", username);//保存上下文
				context.setAttribute("flag2", flag);//保存上下文
		        response.sendRedirect("check-delete.jsp");//重定向
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			conn.CloseCon();
		} catch (Exception e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

ｊｓｐ

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
		<title>首页</title>
	</head>
	<body>
		<div class="container">
			<section class="af-wrapper" >
		            <h3 style="text-align:center;">数据表Person插入信息</h3>
					<form class="af-form" id="af-form"  action = "Addperson" method="post">
						<div class="af-outer af-required">
							<div class="af-inner">
								<label for="input-name">username</label>
								<input id="input-name" 
									   placeholder="请输入10个以内字符" 
									   maxlength="10" 
									   type="text" 
									   name ="username" 
									   required="required"/>
							</div>
						</div>
						<div class="af-outer af-required">
							<div class="af-inner">
							  <label for="input-email">name</label>
							  <input id="input-email"
							  		 placeholder="请输入20个以内字符" 
									 maxlength="20" 
									 type="text" 
									 name ="name" 
									 required="required"/>
							</div>
						</div>
						<div class="af-outer">
							<div class="af-inner">
							  <label for="input-catname">age</label>
							  <input id="input-catname"
							  		 placeholder="请输入一个整数" 
									 type="text" 
									 name ="age"/>
							</div>
						</div>
						<div class="af-outer">
							<div class="af-inner">
							  <label for="input-phone">teleno</label>
							  <input id="input-phone" 
							  		 placeholder="请输入11个以内字符" 
									 type="text" 
									 maxlength="11"
									 name ="teleno"/>
							</div>
						</div>
						<input type="reset" value = "重置"/>
						<input type="submit" value="插入" /> 
					</form>
				</section>
				
				<section class="af-wrapper">
		            <h3 style="text-align:center;">数据表users删除信息</h3>
					<form class="af-form" id="af-form" action = "Deleteuser" onsubmit="return t_confirm();" method="GET">
						<div class="af-outer">
							<div class="af-inner">
							  <label for="input-phone">username</label>
							  <input id="input-phone"
									 required="required" 
									 placeholder="请输入10个以内字符" 
									 maxlength="10" 
									 type="text" 
									 name ="username" />
							</div>
						</div>
						<input type="reset" value = "重置"/>
						<input type="submit" value = "删除" />
					</form>
					<script type="text/javascript">
						function t_confirm()
						{
							var r=confirm("确认删除？");
							return r;
						}
					</script>
				</section>
				<a href = "showtables.jsp" style="font-size:18pt;position: absolute;left: 43%;">查看数据库数据</a>
        </div>	
        	
	</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "com.mwx.util.*" %>
<%@ page import = "com.mwx.servlet.*" %>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
		<title>数据库表</title>
	</head>
	<body>
		<% 
			MysqlOp conn = new MysqlOp();
		
		%>
		<div class="container" >
			<section class="af-wrapper">
				<h1 style="text-align:center;">数据表user信息</h1>
				<table class="customers">
					<tr>
						<th >username</th>
						<th >password</th>
					</tr>
				
				<%
					String sql = "select * from users";
					Statement state =conn.getCon().createStatement();
					ResultSet rs = state.executeQuery(sql);
					while(rs.next()) {
						String username = rs.getString("username");
				   	 	String password = rs.getString("pass");
				%>
				    	<tr class="alt">
				    		<td><%= username %></td>
				    		<td><%= password %></td>
				    	</tr>
				<%
					}
					rs.close();
					state.close();
				%>	
				</table>
			</section>
			<section class="af-wrapper">
				<h1 style="text-align:center;">数据表person信息</h1>
				<table class="customers">
					<tr >
						<th >username</th>
						<th >name</th>
						<th >age</th>
						<th >teleno</th>
					</tr>
				
				<%
					String sql1 = "select * from persons";
					Statement state1 =conn.getCon().createStatement();
					ResultSet rs1 = state1.executeQuery(sql1);
					while(rs1.next()) {
						String username = rs1.getString("username");
					    String name = rs1.getString("name");
					    Integer age = rs1.getInt("age");
					    int flag=0;
					    String str="";
					    if(age==0) flag=1;
					    String teleno = (rs1.getString("teleno")==null?"":rs1.getString("teleno"));
					    
					   // if(teleno.length()==0) teleno = null;		
				%>
				    	<tr class="alt">
				    		<td><%= username %></td>
				    		<td><%= name %></td>
				    		<td>
				    			<%if(flag==1) out.println(str);
				    			  else out.println(age);
				    			%>
				    		</td>
				    		<td><%= teleno %></td>
				    	</tr>
				<%
					}
					rs1.close();
					state1.close();
					conn.CloseCon();
				%>	
				</table> 
			</section>
			<a href = "index.jsp" style="font-size:18pt;position: absolute;left: 43%;">返回数据库操作</a>
		</div>
	</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>数据插入结果</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
	</head>
	<body>
		<div class="container">
			<section class="af-wrapper">
				<h1 style="text-align:center;">数据库操作结果</h1>
				<h2 style="text-align:center;">
					<%
						String username = (String)application.getAttribute("username1");
						Integer flag = (Integer)application.getAttribute("flag1");
						if(flag == 1) 
							out.println("已将"+username+"插入persons表中！");
						else if(flag==-1)
							out.println("已更新"+username+"在persons表中的信息！");
						else if(flag==101)
							out.println("已将"+username+"插入在persons表和users表中！");
						else if(flag==99) 
							out.println("已将"+username+"插入在uers表中，并更新了persons表中的数据！");
						else 
							out.println("插入"+username+"失败！");
					%>
				</h2>
				<a href = "showtables.jsp" style="font-size:16pt;position: relative;left: 37%;">查看数据库数据</a>
				<br>
				<a href = "index.jsp" style="font-size:16pt;position: relative;left: 37%;">返回数据库操作</a>
			</section>
		</div>
	</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
		<title>数据删除结果</title>
	</head>
	<body>
		<% 
			String username = (String)application.getAttribute("username2");
			Integer flag=(Integer)application.getAttribute("flag2");
			
		%>
		<div class="container">
			<section class="af-wrapper">
				<h1 style="text-align:center;">数据库操作结果</h1>
				<h2 style="text-align:center;">
					<%
						if(flag > 0) out.println(username+"删除成功!");
						else 
							out.println("删除失败，"+username+"不存在!");
					%>
				</h2>
				<a href = "index.jsp" style="font-size:16pt;position: relative;left: 37%;">返回数据库操作</a><br>
				<a href = "showtables.jsp" style="font-size:16pt;position: relative;left: 37%;">查看数据库数据</a>
			</section>
		</div>
	</body>
</html>

ｃｓｓ

在网上找的ｃｓｓ模板。

@import url('normalize.css');

/* General Demo Style */
body{
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	background: #fff url(../images/bg.jpg) repeat top left;
	font-weight: 400;
	font-size: 15px;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
a{
	color: #555;
	text-decoration: none;
}

.container{
	width: 100%;
	position: relative;
	min-height: 750px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}



audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}



audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}



html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}



html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}



body {
    margin: 0;
}




a:focus {
    outline: thin dotted;
}



a:hover,
a:active {
    outline: 0;
}



h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}



abbr[title] {
    border-bottom: 1px dotted;
}



b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}



dfn {
    font-style: italic;
}



mark {
    background: #ff0;
    color: #000;
}


p,
pre {
    margin: 1em 0;
}



pre,
code,
kbd,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}



pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}



q {
    quotes: none;
}



q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}



sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}




dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}


menu,
ol,
ul {
    padding: 0 0 0 40px;
}


nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}




img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}



svg:not(:root) {
    overflow: hidden;
}




figure {
    margin: 0;
}



form {
    margin: 0;
}


fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}



legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}



button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}



button,
input {
    line-height: normal; /* 1 */
}



button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */
}

/*
 * Re-set default cursor for disabled elements
 */

button[disabled],
input[disabled] {
    cursor: default;
}


input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}


input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}



input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}




table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* Addition */
/* apply a natural box layout model to all elements */
/* By Paul Irish: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.af-wrapper {
	width: 94%;
	max-width: 700px;
	min-width: 280px;
	margin: 0 auto 30px auto;
	position: relative;
	padding: 20px;
	box-shadow: 1px 2px 4px rgba(0,0,0,0.2);
}
.af-wrapper h3 {
	margin: 0px;
	color: #444;
	padding: 10px;
}
.af-show {
	position: absolute;
	top: 30px;
	right: 155px;
	cursor: pointer;
	padding: 3px 0px;
	width: 190px;
	text-align: center;
	font-weight: bold;
	border: 1px solid #A8BC65;
	color: #6d7649;
	border-radius: 4px;
	background: #e4efc0;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
	background: #cae082;
	background: -moz-linear-gradient(top, #cae082 0%, #abbd73 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cae082), color-stop(100%,#abbd73));
	background: -webkit-linear-gradient(top, #cae082 0%,#abbd73 100%);
	background: -o-linear-gradient(top, #cae082 0%,#abbd73 100%);
	background: -ms-linear-gradient(top, #cae082 0%,#abbd73 100%);
	background: linear-gradient(top, #cae082 0%,#abbd73 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae082', endColorstr='#abbd73',GradientType=0 );
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.af-show:hover {
	color: #535B31;
}
.af-show-input {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	width: 190px;
	height: 24px;
	opacity: 0;
}
.af-show-input:checked ~ .af-show {
	background: #cae082;
	color: #535B31;
	box-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

.af-form {
	padding: 10px 0px;
}
.af-form:before,
.af-form:after {
    content:"";
    display:table;
}
.af-form:after {
    clear:both;
}
.af-outer {
	box-shadow: 0 1px 0 #f5f5f5 inset;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.af-inner {
	padding: 15px 20px 15px 20px;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
#af-showreq:checked ~ .af-form .af-outer.af-required {
	background: #fffde3;
}
#af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner {
	opacity: 0.4;
}
.af-form label {
	display: block;
	display: -webkit-box;
	display: -moz-box;
	display: box;	
	-moz-box-orient: horizontal;
	-moz-box-pack: end;
	-moz-box-align: center;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: end;
	-webkit-box-align: center;
	box-orient: horizontal;
	box-pack: end;
	box-align: center;
	height: 40px;
	float: left;
	padding-right: 3%;
	width: 30%;
	min-width: 80px;
	font-size: 13px;
	color: #888;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: right;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}
.af-form .af-required label {
	color: #555;
}
.af-form input[type=text] {
	
	border: 1px solid #ddd;
	padding: 10px;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(255,255,255,0.8);
	color: #666;
	width: 64%;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 7%, #f7f7f7 22%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(7%,#f7f7f7), color-stop(22%,#f7f7f7), color-stop(100%,#ffffff));
	background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 7%,#f7f7f7 22%,#ffffff 100%);
	background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 7%,#f7f7f7 22%,#ffffff 100%);
	background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 7%,#f7f7f7 22%,#ffffff 100%);
	background: linear-gradient(top, #ffffff 0%,#f7f7f7 7%,#f7f7f7 22%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
	box-shadow: 0px 1px 1px rgba(255,255,255,0.7), 1px 1px 2px rgba(0,0,0,0.1) inset;
}
.af-form input:focus {
	background: #f9fcef;
	outline: none;
}
.af-form input[type="submit"],
.af-form input[type="reset"] {
	border: 1px solid #EF9309;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
	color: #724C04;
	display: inline-block;
	border-radius: 4px;
	margin-top: 10px;
	margin-left: 33%;
	padding: 6px 15px;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	font-weight: bold;
	background: #ffaf4b;
	background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a));
	background: -webkit-linear-gradient(top, #ffaf4b 0%,#ff920a 100%);
	background: -o-linear-gradient(top, #ffaf4b 0%,#ff920a 100%);
	background: -ms-linear-gradient(top, #ffaf4b 0%,#ff920a 100%);
	background: linear-gradient(top, #ffaf4b 0%,#ff920a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 );
	box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}
.af-form input[type="submit"]:active,
.af-form input[type="reset"]:active{
	box-shadow: 0px 1px 2px rgba(255,255,255,0.5);
	background: #ffaf4b;
}
::-webkit-validation-bubble{
	z-index: 100000;

}

.customers
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:100%;
	border-collapse:collapse;
}
.customers td, .customers th 
{
	font-size:1em;
	border:1px solid #000000;
	padding:5px 7px 5px 7px;
	text-align:center;
}
.customers th 
{
	font-size:1.3em;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	color:#000000;
}
.customers tr.alt td 
{
	color:#000000;
}

@media screen and (max-width: 780px) {
	.af-wrapper {
		background-position: 220px 60px;
	}
	.af-wrapper h3 {
		padding-bottom: 50px;
	}
	.af-show {
		top: 66px;
		right: auto;
		left: 30px;
	}
}
@media screen and (max-width: 385px) {
	.af-wrapper {
		background: #fff;
	}
}
@media screen and (max-width: 330px) {
	.af-form label,
	.af-form input[type=text],
	.af-form input[type=email],
	.af-form input[type=date]{
		width: 100%;
	}
	.af-form label{
		-moz-box-pack: center;
		-webkit-box-pack: center;
		box-pack: center;
		text-align: center;
	}
}

ｊｓ

/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-shiv-cssclasses-load
 */
;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return u(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,i){var j=b(a),l=j.autoCallback;j.url.split(".").pop().split("?").shift(),j.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]||h),j.instead?j.instead(a,e,f,g,i):(y[j.url]?j.noexec=!0:y[j.url]=1,f.load(j.url,j.forceCSS||!j.forceJS&&"css"==j.url.split(".").pop().split("?").shift()?"c":c,j.noexec,j.attrs,j.timeout),(d(e)||d(l))&&f.load(function(){k(),e&&e(j.origUrl,i,g),l&&l(j.origUrl,i,g),y[j.url]=2})))}function i(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var j,l,m=this.yepnope.loader;if(e(a))g(a,0,m,0);else if(w(a))for(j=0;j<a.length;j++)l=a[j],e(l)?g(l,0,m,0):w(l)?B(l):Object(l)===l&&i(l,m);else Object(a)===a&&i(a,m)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

运行截图

结尾

本次实验也是磨了挺长时间的，我觉得自己就是没有天赋的笨小孩儿555，不过最后参考着前辈的代码终于磨出来了，但其实还有一个ｂｕｇ，就是当操作次数过多时就会报500，显示数据库连接次数太多了。（我觉得可能是连接池的问题）
参考：前辈的博客