jsp+servlet做的报名表

最新推荐文章于 2021-11-19 09:49:39 发布

WindSearcher

最新推荐文章于 2021-11-19 09:49:39 发布

阅读量512

点赞数 1

分类专栏： Java Web 文章标签： jsp+servlet实现报名表

本文链接：https://blog.csdn.net/qq_40511966/article/details/86591267

版权

Java Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

页面如下：

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"/>&nbsp;
	                  <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和修改学生报名信息

WindSearcher

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jsp+servlet做的报名表

页面如下： 1.数据库设计这里直接使用Navicat数据库可视化工具来见表，表名为member 有如下字段： name class phone qq remarks2.login.jsp&lt;%@ page language="java" contentType="text/html; charset...
复制链接

扫一扫