JavaWeb之注册实战及数据管理操作

一、总言

暑假做了招新网站，主要就是报名，数据通过表单进入数据库，然后从前端提取数据库信息，并进行相关操作，下面我就具体说说相关实现。

二、实现

一、前端

一开始做的前端采用的是bootstrap框架，主要用栅格系统完成响应式的设计。设计一些js效果，比如滚动监听改变导航栏透明度，背景的雨滴特效，点击特效。表单验证用到了正则，和一个算数验证插件。开发工具为sublime。下面我简单的介绍一些js效果。

首先是雨水背景，先创建一滴雨水的各个属性，然后for循环不断生成，每次在同一水平线不同位置随机生成。期间也有参考他人代码。下面为雨水js代码。

		<script>
			var c=document.getElementById("c");
			var	ctx=c.getContext("2d");
				c.width=window.innerWidth;
				c.height=window.innerHeight;
				// c.height = 1160;
				// c.height=$(window).height();
//				ctx.fillRect(0,0,100,100);
//				a,b,c,d分别代表x方向偏移,y方向偏移,宽，高
			var string1 = "|";
				string1.split("");
			var fontsize=20;
				columns=c.width/fontsize;
			var drop = [];
			for(var x=0;x<columns;x++)
			{
				drop[x]=0;
			}
			function drap(){
				// ctx.fillStyle="rgba(0,0,0,0.07)";
				// ctx.fillStyle="rgba(255,251,240,0.07)";
				ctx.fillStyle="rgba(255,255,255,1)";
				ctx.fillRect(0,0,c.width,c.height);
				// ctx.fillStyle="#0F0";
				ctx.fillStyle="#A52A2A";
				ctx.font=fontsize+"px arial";
				for(var i=0;i<drop.length;i++){
					var text1=string1[Math.floor(Math.random()*string1.length)];
					ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
					drop[i]++;
					if(drop[i]*fontsize>c.height&&Math.random()>0.9){//90%的几率掉落
						drop[i]=0;
					}
				}
			}
			setInterval(drap,25);
		</script>

然后是滚动监听，这个比较简单，通过函数获取距离即可，然后获取导航栏的id改变样式。

   	<script>
	    function _scroll(){
            var scrollTop =$(window).scrollTop();
            // var widhe = $(window).height();
            if( scrollTop < 10 ){
            // if(scrollTop<widhe){
                $('.navbar').css('opacity',1);
                // $('.navbar').css('background','#F7F7F7');
            }else{
                // $('.navbar').css('background','#fff');
                $('.navbar').css('opacity',0.5);
            }
        }
        $(window).on('scroll',function() {
            _scroll()
        });
  	</script>

然后介绍一个简单的表单正则验证的js。

写个焦点函数，获取表单的输入值，然后进行验证，如果是对的则不会发生任何事情，否则会出现提示文本信息。

			function checkNameFocus(){  
				function $(id){  
    				return document.getElementById(id);  
				}				
    			var userNameId=$("username");  
    			var namePrompt=$("un");
   				var reg = /^[\u4e00-\u9fa5]{2,11}$/;
				if (reg.test(userNameId.value) != true) {
		    		namePrompt.innerHTML="名字必须为2-11个汉字！"; 
		    		flag1 = 0;
				}
				else{
					flag1 = 1;
					namePrompt.innerHTML=""; 
					return;
				}
			}  

前端的一些js就介绍到这里，然后前端的网页实现是bootstrap框架的栅格系统，有兴趣的可以自己去查一查，我就放一点代码作为参考。

<div class="col-sm-12">
<div class="col-sm-2">	</div>	
    <div class="col-xs-8 col-sm-4 bod col-sm-offset-0 col-xs-offset-2">
        <div class="web">
      	    <h3 style="text-align: center;font-weight: 600;">WEB组</h3>
      		<p class="lead">WEB组对每一届新成员的基本学习规划是：网站基本知识 -> HTML、CSS+DIV布局 -> 数据库 -> PHP编程基础 -> Javascript -> PHP Web2.0网站开发，同时涉及到前端和后端两个方向，经常有网站项目。</p>
      	</div>
    </div>
    <div class="col-xs-8 col-sm-4 bod col-sm-offset-0 col-xs-offset-2">
        <div class="pic">
            <img class="img-responsive" src="images/web-logo.jpg" alt="web">
        </div>
    </div>
</div>
<div class="col-sm-2">	</div>

前端就简单介绍到这里，下面介绍一下后台的实现。

二、后台

关于后台的实现，我用的是eclipse，首先要明白javaweb的一些概念，下面是一些概念的介绍。

DAO —— Data Access Object数据访问对象（接口）

DAOImpl 上面的实现类

entity —— 数据的对象

Service（不是Server）——就是中间层、逻辑层（接口）

ServiceImpl就是上面的实现类

util就是工具类的包

Servlet——JAVA WEB小应用。

连接数据库一般将自己的数据库信息配置好properties，包括用户名密码，用到的数据库的名字等信息。数据库我用的是mysql，建立数据库比较简单，配置好环境，学习了基本语法就可以了。

package sql;

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

//连接数据库
public class consql {

		private static String driver;
		private static String dburl;
		private static String user;
		private static String password;
		
		private static final consql factory = new consql();
		
		private Connection conn;
		
		static{
			Properties prop = new Properties();
			try {
				InputStream in = consql.class.getClassLoader()
						.getResourceAsStream("zxmysql.properties");
				prop.load(in);
				
			} catch (Exception e) {
				System.out.println("========配置文件读取错误=======");
			}
			
			driver = prop.getProperty("driver");
			dburl = prop.getProperty("dburl");
			user = prop.getProperty("user");
			password = prop.getProperty("password");
		}
		
		private consql () {
			
		}
		
		public static consql getInstance() {
			return factory;
		}
		
		public Connection makeConnection() {
			try {
				Class.forName(driver);
				conn = DriverManager.getConnection(dburl,user,password);
			} catch (Exception e) {
				e.printStackTrace();
			}
			return conn;
		}

	

}

连接完数据库可以自己写java类测试一下是否连接成功。

然后通过get、set方法实现一个类，编写entity层，这个比较简单。

然后编写dao接口和utils层。

先写dao接口然后写util，下面是dao接口代码。

package userdao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

import entersql.Getstudent;
import entersql.User;

public interface StudentDao {
	public void save(Connection conn,Getstudent user) throws SQLException ;
	
	public void update(Connection conn,Getstudent user) throws SQLException;

	public void delete(Connection conn,Getstudent user) throws SQLException;
	
	public ResultSet get(Connection conn, Getstudent user) throws SQLException;
	
	public List<Getstudent> getex(Connection conn) throws SQLException;
	
	public ResultSet getlogin(Connection conn , User user) throws SQLException;
	
//	ResultSet get(Getstudent user) throws SQLException;
}

util相对于比较简单，根据自己所需要的功能编写mysql语句，实现数据库的增删改查等功能即可，类似于下面这样。

	public void delete(Connection conn, Getstudent user) throws SQLException {
		java.sql.PreparedStatement ps = conn.prepareStatement("DELETE FROM student_tbl WHERE student_xh = ?");
		ps.setString(1, user.getXH());
		ps.execute();

	}

然后是servlet的编写，通过前端传回的数据，让数据进入数据库等，这里用到了很多，我就只拿删除数据库中的数据为例子。

package servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.SQLException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import entersql.Getstudent;
import sql.consql;
import sqlOpr.sqlcz;
import userdao.StudentDao;


public class DeleServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public DeleServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
		//response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html");  
        request.setCharacterEncoding("UTF-8");  
        response.setCharacterEncoding("UTF-8"); 

		String student_xh = request.getParameter("student_xh");
	
		RequestDispatcher rd = null;
		String forward = null;

		Getstudent user = new Getstudent();
		user.setXH(student_xh);
		StudentDao userDao = new sqlcz();
		Connection conn = consql.getInstance().makeConnection();
		try {
			userDao.delete(conn, user);
			} catch (SQLException e) {
				e.printStackTrace();
			}
			forward = "/WEB-INF/JieMian.jsp";
		
			rd = request.getRequestDispatcher(forward);
			rd.forward(request, response);
		
	}

	

}

在前端form表单中写好action，调用servlet即可，写了servlet之后web-xml一定要配置相应的信息。以以上为例。

  <servlet>
    <servlet-name>BmServlet</servlet-name>
    <servlet-class>servlet.BmServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>BmServlet</servlet-name>
    <url-pattern>/bmServlet</url-pattern>
  </servlet-mapping>

然后就是一些其他功能，查重什么的，实现也不是很难，我就不过介绍，主要还用到了ajax，用于学号查重，十分方便。

                var flag5 = false; //用户名验证
    
                $(function(){
                    var $xuehao = $("#xuehao"); //学号
                    $xuehao.blur(function(){                    //$xuehao.blur(function(){
                     var xuehao = $xuehao.val();
                        //console.log("hello")

                $.ajax({
                    //url : "./CheckXuehao",
                    url : "./CheckXuehao",
                    type : "post",
                    datatype : "json",
                    data : {
                        "xuehao" : xuehao
                    },
                    success : function(msg){
                        if (msg == 0) {
                            flag5 = false;
                            //var namePrompt=$("#xh");
                            //namePrompt.innerHTML="学号被占用";
                            $("#xh23").html("该学号已报名!");
                        } else {
                            flag5 = true;
                            //var namePrompt=$("#xh");
                            //namePrompt.innerHTML="";
                            $("#xh23").html("");
                            }
                        }
                    });
                });
            });

三、管理页面

这里做的比较简单，前端用的就是bootstrap的表单，然后连接数据库，用next（）函数扫描数据库，只要有数据，用表单打印一行即可。删除修改也是通过servlet实现，上面介绍的servlet实际上就是我删除所用到的servlet。下载数据表格，是通过poi实现，先导入所需要的jar包，然后编写servlet，配置好相对应的web-xml信息，这里借鉴了其他人的代码。

package servlet;

import java.io.IOException;
import java.io.OutputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFFont;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.hssf.util.HSSFColor;
import org.apache.poi.ss.usermodel.HorizontalAlignment;

import entersql.Getstudent;
import sql.consql;
import sqlOpr.sqlcz;
import userdao.StudentDao;

public class POI extends HttpServlet{
	/**
	 * 
	 */
	private static final long serialVersionUID = -8642375343202664090L;
	@SuppressWarnings("deprecation")
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		ArrayList fieldname = getFieldName();
		String fname = "student " + getTimeStamp();
		OutputStream os = resp.getOutputStream();
		Connection conn = consql.getInstance().makeConnection();
		StudentDao studentDao = new sqlcz();
		List<Getstudent> list = null;
		try {
			list = studentDao.getex(conn);
		} catch (SQLException e) {
			// TODO 自动生成的 catch 块
			e.printStackTrace();
		}
		resp.reset();
		resp.setHeader("Content-disposition", "attachment;filename = " + fname + ".xls");
		resp.setContentType("application/msexcel");
		HSSFWorkbook wb = new HSSFWorkbook();
		HSSFSheet sheet = wb.createSheet();
		HSSFRow row = sheet.createRow((short) 0);
		for(int j = 0;j<fieldname.size();j++){
			HSSFCell cell = row.createCell((short)j);
			cell.setCellType(HSSFCell.CELL_TYPE_STRING);
			sheet.setColumnWidth((short)j,(short)6000);
			HSSFCellStyle cellStyle = wb.createCellStyle();
			HSSFFont font = wb.createFont();
			font.setBold(true);
			short color = HSSFColor.RED.index;
			font.setColor(color);
			cellStyle.setFont(font);
			cell.setCellStyle(cellStyle);
			cell.setCellValue((String) fieldname.get(j));
		}
		int i = 0;
		Iterator<Getstudent> it = list.iterator();
		while(it.hasNext()){
			HSSFRow rowi = sheet.createRow((short)++i);
			Getstudent stu = it.next();
				HSSFCell cell0 = rowi.createCell((short)0);
				HSSFCell cell1 = rowi.createCell((short)1);
				HSSFCell cell2 = rowi.createCell((short)2);
				cell0.setCellValue((String) stu.getName());
				cell1.setCellValue((String) stu.getXH());
				cell2.setCellValue((String) stu.getPhone());

		}
		wb.write(os);
		os.flush();
		os.close();
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO 自动生成的方法存根
		super.doGet(req, resp);
	}
	public ArrayList getFieldName(){
		String str[]={"姓名","学号","电话"};
		ArrayList list=new ArrayList();
		for(int i=0;i<str.length;i++){
			list.add(str[i]);
		}
		return list;
	}
	public static String getTimeStamp() {
		SimpleDateFormat dateFormat = new SimpleDateFormat(
				"yyyy-MM-dd hh:MM:ss");
		Date date = new Date();
		return dateFormat.format(date);
	}
}

有些servlet引入到了我的其他包的类，所以代码不可直接套用。

我也处于学习阶段，有些地方写的不好或者解释不清楚还请见谅。