页面如下:
1.数据库设计
这里直接使用Navicat数据库可视化工具来见表,表名为member
有如下字段:
name
class
phone
remarks
2.login.jsp
<%@ 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">
<title>2018年技术交流协会网上报名</title>
<style>
input{
display:inline-block;
height:30px;
}
</style>
</head>
<body>
<br>
<!-- form里面的action属性是用来把表单的数据提交这个属性所指定的地方,也就是提交到User这个HttpServlet中(需要在wweb.xml中配置相关User信息) -->
<form id="form1" name="form1" method="post" action="User" class="targetCopy">
<table border="0" align="center" style="border-collapse:separate; border-spacing:0px 10px;">
<caption style="margin-bottom:20px">2018年技术交流协会网上报名</caption>
<tr>
<td width="100">姓名:</td>
<td width="220"><input name = "Name" id="uname" type="text" maxlength="10" placeholder="请输入用户名"/>
</td>
</tr>
<tr>
<td >班级:</td>
<td width="195"><input name="Classes" id="uclasses" type="text" maxlength="10" placeholder="请输入班级"/>
</td>
</tr>
<tr>
<td >手机:</td>
<td width="195"><input name="Phone" id="uphone" type="text" maxlength="11" placeholder="请输入手机号"/>
</td>
</tr>
<tr>
<td >QQ:</td>
<td width="195"><input name="QQ" id="uqq" type="text" maxlength="11" placeholder="请输入QQ"/>
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<img src="" id="code" onclick="change(this)" alt="图片不存在" height="30px"/>
<a href="#" onclick="javascript:show();return false;">看不清,换一张!</a>
</td>
</tr>
<tr>
<td>输入验证码:</td>
<td width="195">
<input type="text" name="captcha" maxlength="11" id="inputVerifyCode" placeholder="请输入验证码"/>
</td>
</tr>
<tr>
<td >备注:</td>
<td width="195">
<textarea name="Remarks" id="remarks" rows="3" cols="20" style="padding:0px" placeholder="请在此处介绍自己..."></textarea>
</td>
</tr>
<tr align="center" valign="center" cellpadding="5px">
<td></td>
<td style="margin-top:20px;">
<div id="btps">
<input onclick="SubmitForm()" type="button" value="提交" />
<input type="reset" name="Submit" value="重置" />
<a href=""></a>
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var code ; //在全局 定义验证码
var form1 = document.getElementById("form1");
var name = document.getElementById("uname");
var classes = document.getElementById("uclasses");
var phone = document.getElementById("uphone");
var qq = document.getElementById("uqq");
var inputVerifyCode = document.getElementById("inputVerifyCode");
var remarks = document.getElementById("remarks");
//这里我选择在js中生成一个验证码,然后在传给服务器,也就是ValidateCodeServlet,专门用来生成动态验证码
function createCode(){
code = "";
var codeLength = 4;//验证码的长度
//所有候选组成验证码的字符,可以用中文
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C',
'D','E','F','G','H','I','J','K','L','M','N','O','P',
'Q','R','S','T','U','V','W','X','Y','Z','a','b','c',
'd','e','f','g','h','i','j','k','l','m','n','o','p',
'q','r','s','t','u','v','w','x','y','z');
for(var i=0;i<codeLength;i++){
var charIndex = Math.floor(Math.random()*60);
code +=selectChar[charIndex];
}
return code;
}
function checkName(){
var tname = name.value;
console.log(name);
console.log(tname);
if (tname.length < 4) {
name.value="";
name.placeholder = "用户名不能为空且不能少于4位";
name.style.border="2px solid red";
name.onkeydown = function(){
name.style.border="2px solid #ccc";
}
return false;
}
else
return true;
}
function checkClasses(){
var tclasses = classes.value;
if (tclasses.length == 0) {
classes.value="";
classes.placeholder = "班级不能为空";
classes.style.border="2px solid red";
classes.onkeydown = function(){
classes.style.border="2px solid #ccc";
}
return false;
}
else
return true;
}
function checkRemarks(){
var tremarks = remarks.value;
if (tremarks.length <= 10) {
remarks.value="";
remarks.placeholder = "备注不能少于10个字";
remarks.style.border="2px solid red";
remarks.onkeydown = function(){
remarks.style.border="2px solid #ccc";
}
return false;
}
else
return true;
}
function validate (){
var inputCode = inputVerifyCode.value;
if(inputCode.length <=0){
inputVerifyCode.value="";
inputVerifyCode.placeholder = "请输入验证码";
inputVerifyCode.style.border="2px solid red";
inputVerifyCode.onkeydown = function(){
inputVerifyCode.style.border="2px solid #ccc";
}
return false;
}
else if(inputCode != code){
inputVerifyCode.value="";
inputVerifyCode.placeholder = "验证码错误";
inputVerifyCode.style.border="2px solid red";
inputVerifyCode.onkeydown = function(){
inputVerifyCode.style.border="2px solid #ccc";
}
show();//刷新验证码
return false;
}else{
//alert("^-^ OK");
return true;
}
}
function show(){
//显示验证码
document.getElementById("code").src="validatecode?code="+createCode();
}
window.onload = function() {
//document.onload=show();
show();//页面加载时加载验证码
//这时无论在ie还是在firefox中,js没有加载完,页面的东西是不会被执行的;
}
//检测手机号
function checkPhone(){
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(phone.value)) {
phone.value="";
phone.placeholder = "手机号格式错误";
phone.style.border="2px solid red";
phone.onkeydown = function(){
phone.style.border="2px solid #ccc";
}
return false;
}
else
return true;
}
function checkQQ(){
var bValidate = RegExp(/^[1-9][0-9]{4,9}$/).test(qq.value);
if (bValidate){
return true;
}
else{
qq.value="";
qq.placeholder = "QQ号格式错误";
qq.style.border="2px solid red";
qq.onkeydown = function(){
qq.style.border="2px solid #ccc";
}
return false;
}
}
//检查验证码
function checkVerifyCode(){
//console.log(inputVerifyCode.value);
if(inputVerifyCode.equal(verifyCode))
return true;
else
return false;
}
function SubmitForm() {
if( checkClasses() && checkRemarks() && checkPhone() && checkQQ() && validate()){
form1.submit();
}
else{
}
}
</script>
</body>
</html>
3.动态验证码生成(ValidateCodeServlet.java)
package com.liqiang.Servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValidateCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
/*
* 由于服务器端的Servlet生成图像首先放在缓存里,为使客户端得到最新的图像,避免客户端通过缓存得到图片
* 所以这里这里通过以下三条语句来设置特定HTTP响应头来禁止客户端缓存页面
*/
resp.setHeader("Prama","No-cache");
resp.setHeader("Cache-Control", "No-cache");
resp.setDateHeader("Expires", 0);
resp.setContentType("image/jpeg"); //设置相应正文的MIME类型图片
int width = 60, height = 20;
/*
创建一个位于缓冲区的图像,宽度60,高度20
*/
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
Random random = new Random();
g.setColor(getRandomColor(200, 250));
g.fillRect(0, 0, width, height);
g.setFont(new Font("Times New Roman", Font.PLAIN, 18)); // 字体格式
g.setColor(getRandomColor(160,200));
for (int i=0; i<130; i++){
int x=random.nextInt(width);
int y=random.nextInt(height);
int x1=random.nextInt(12);
int y1=random.nextInt(12);
g.drawLine(x,y,x+x1,y+y1); //在图像的坐标(x,y)和坐标(x+x1, y+y1)之间画干扰线
}
//获取login.jsp中生成的验证码,然后将之加工成图片形式
String code = req.getParameter("code");
String strCode = code;
for (int i=0; i<strCode.length(); i++){
String strNumber = strCode.substring(i, i + 1);
//设置字体颜色
g.setColor(new Color(15+random.nextInt(120), 15+random.nextInt(120), 15+random.nextInt(120)));
g.drawString(strNumber, 13*i+6, 16);
}
g.dispose(); //释放图像的上下文以及使用的所有系统资源
ImageIO.write(image,"JPEG",resp.getOutputStream()); //输出JPEG格式的图像
resp.getOutputStream().flush(); //刷新输出流
resp.getOutputStream().close();
}
public Color getRandomColor(int fc,int bc) {
Random random = new Random();
Color randomColor = null;
if(fc > 255) fc = 255;
if(bc > 255) bc = 255;
int r = fc+random.nextInt(bc-fc);
int g = fc+random.nextInt(bc-fc);
int b = fc+random.nextInt(bc-fc);
randomColor = new Color(r,g,b);
return randomColor;
}
}
4.JavaBean技术(Member类的目的把注册信息保存到这里,方便数据库插入)
package com.liqiang.Report;
public class Member {
public String name;
public String classes;
public String phone;
public String qq;
public String remarks;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getClasses() {
return classes;
}
public void setClasses(String classes) {
this.classes = classes;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getQq() {
return qq;
}
public void setQq(String qq) {
this.qq = qq;
}
public String getRemarks() {
return remarks;
}
public void setRemarks(String remarks) {
this.remarks = remarks;
}
}
5.用于数据插入数据库
package com.liqiang.Dao;
import java.sql.*;
import com.liqiang.Report.Member;
import com.liqiang.util.DBUtil;
public class memberDao {
private String sql="";
private int intResult=-1;
public memberDao(){
}
public void memberInsert(Member mbr) { // TODO Auto-generated method stub
DBUtil db = new DBUtil();
Connection con = db.getCon();
Statement stmt = db.getStmed();
sql = "insert into member (name,class,phone,qq,remarks) "
+ "values('"+mbr.getName()+"','"+mbr.getClasses()+"','"+mbr.getPhone()+"','"+mbr.getQq()+"','"+mbr.getRemarks()+"')";
db.dosql(sql);
}
}
6.表单提交后所访问的页面(User.java)
package com.liqiang.Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.liqiang.Dao.memberDao;
import com.liqiang.Report.Member;
public class User extends HttpServlet {
private Member mbr = new Member();
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
mbr.setName(request.getParameter("Name").trim());
mbr.setClasses(request.getParameter("Classes").trim());
mbr.setPhone(request.getParameter("Phone").trim());
mbr.setQq(request.getParameter("QQ").trim());
mbr.setRemarks(request.getParameter("Remarks").trim());
memberDao md = new memberDao();
md.memberInsert(mbr);
response.sendRedirect(request.getContextPath()+"/success.jsp");
//响应输出流
//request.getRequestDispatcher("index.jsp").forward(request, response);
}
public void init() throws ServletException {
// Put your code here
}
}
7.DBUtil.java(工具类)
package com.liqiang.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import com.mysql.jdbc.Statement;
public class DBUtil {
// 获取数据库连接
private static Connection conn;
private static Statement stmt;
private static String url = "jdbc:mysql://127.0.0.1:3306/student?characterEncoding=utf8&useSSL=false&serverTimezone=Hongkong";
private static String root = "root";
private static String pass = "asdasd456789";
public static Connection getConnection(){
try
{
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,root,pass);//大家分享代码的时候也不要暴露自己的数据库密码,这样是非常不安全的
}
catch(ClassNotFoundException e)
{
e.printStackTrace();
System.out.println("数据库驱动加载出错");
}
catch(SQLException e)
{
e.printStackTrace();
System.out.println("数据库出错");
}
return conn;
}
public static Statement getStmted() {
conn = getConnection();
try {
stmt = (Statement) conn.createStatement();
}catch(Exception e) {
e.printStackTrace();
}
return stmt;
}
//关闭相关通道
public static void close()
{
try
{
if(conn != null)
conn.close();
if(stmt != null)
stmt.close();
}
catch(SQLException e)
{
e.printStackTrace();
System.out.println("数据关闭出错");
}
}
public void dosql(String sql)
{
stmt = getStmted();
try {
stmt.executeUpdate(sql);
}catch(Exception e) {
e.printStackTrace();
}
}
}
8.注册成功(success.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.net.URLEncoder" %>
<!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>Insert title here</title>
</head>
<body>
<b>恭喜你报名成功</b>
</body>
</html>
9.web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>Demo1</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>ValidateCodeServlet</servlet-name>
<servlet-class>com.liqiang.servlet.ValidateCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ValidateCodeServlet</servlet-name>
<url-pattern>/validatecode</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>User</servlet-name>
<servlet-class>com.liqiang.servlet.User</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>User</servlet-name>
<url-pattern>/User</url-pattern>
</servlet-mapping>
</web-app>
后期将对这个demo进行二次修改,添加管理员权限,主要可以导出excel和修改学生报名信息