2. 程式人生 > >JavaWeb之註冊實戰及資料管理操作

JavaWeb之註冊實戰及資料管理操作

阿新 • • 發佈：2018-12-09

一、總言

暑假做了招新網站，主要就是報名，資料通過表單進入資料庫，然後從前端提取資料庫資訊，並進行相關操作，下面我就具體說說相關實現。

二、實現

一、前端

一開始做的前端採用的是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引入到了我的其他包的類，所以程式碼不可直接套用。

我也處於學習階段，有些地方寫的不好或者解釋不清楚還請見諒。

相關推薦

JavaWeb之註冊實戰及資料管理操作

一、總言 暑假做了招新網站，主要就是報名，資料通過表單進入資料庫，然後從前端提取資料庫資訊，並進行相關操作，下面我就具體說說相關實現。 二、實現 一、前端 一開始做的前端採用的是bootstrap框架，主要用柵格系統完成響應式的設計。設計一些js效果，比如滾動監聽改變

python資料分析處理庫-Pandas之Series結構及Series常用操作方法

我上上篇部落格說過：Pandas資料結構為DataFrame，裡面可以同時是int、float、object（string型別時）、datatime、bool資料型別。而構成DataFrame結構的每一

linux 檔案及資料夾操作總結

文章目錄 檔案基本操作 檢視 複製刪除移動 建立 其他 許可權（包括資料夾） 檢視許可權 許可權含義 修改許可權 修改許可權（數字）

Python檔案及資料夾操作

轉載自：http://www.cnblogs.com/feeland/  　　 　　　　我們經常會與檔案和目錄打交道，對於這些操作，python可以使用 os 及 shutill 模組，其中包含了很多操作檔案和目錄的函式。 　　　　os 可以執行簡單的資料夾及檔案操作，引入用 &n

Linux基礎02：磁碟操作，檔案許可權、檔案及資料夾操作、網路服務

1.Linux磁碟與U盤操作 1.1 顯示系統的磁碟空間用量 ##du命令也是檢視使用空間的，但是與df命令不同的是Linux du命令是對檔案和目錄磁碟使用的空間的檢視 du -sh ##查目錄使用大小(-s表示總結) ## du -sh /bin ##df命令用於顯示磁碟分割槽

【Linux】---基本的使用者管理命令及系統管理操作

---------常用的使用者管理命令 ********建立一個使用者的命令:  1.useradd    beat ********需要為其設定一個密碼： 2.passwd    beat 預設建立的使用者在root許可權下的

JavaWeb 之 JSP簡介及Cookie Session

## JSP的簡介 EL的表示式 ## **JSP的簡介**          1.先學習Servlet技術，為什麼還要學習JSP的技術呢？         * 缺點：讓你使用Servlet的技術動態生成的網頁？response.getWriter("<form ac

Qt學習之路_12(簡易資料管理系統)

前言 　　最近從大陸來到臺灣，之間雜事很多，擠不出時間來更新部落格… 　　這次主要是通過做一個簡易的資料庫管理系統，來學習在Qt中對資料庫，xml，介面的各種操作，進一步熟悉Qt。一般而言資料通常存在檔案，資料庫，xml中，本文主要是介紹了sqlite，xml這2種儲存資料的方法，實現了一個家用電器產

EEPROM讀寫及資料管理

http://bbs.elecfans.com/jishu_452559_1_1.html有關E2PROM操作、保護、失效等一些問題，（才疏學淺，路過的英雄記得補刀）1）有關 晶片內部自帶的E2PROM有的資深的工程師可能不是很願意用MCU自帶的E2PROM，大概是這些傢伙上

每日學點python之十(檔案以及資料夾操作)

open() 方法 Python open() 方法用於開啟一個檔案，並返回檔案物件，在對檔案進行處理過程都需要使用到這個函式，如果該檔案無法被開啟，會丟擲 OSError。 注意：使用 open() 方法一定要保證關閉檔案物件，即呼叫 close() 方法。 open() 函式常用

Spring之—ApplicationListener 介面及事務管理

想在spring啟動時自動呼叫一些db操作作快取，於是在service實現ApplicationListener 介面。 並重寫onApplicationEvent操作。這樣就實現了要求，程式碼如下： @Service @Scope("singleton") publi

Android中的AOP程式設計之AspectJ實戰實現資料埋點

文章背景 最近在給某某銀行做專案的時，涉及到了資料埋點，效能監控等問題，那我們起先想到的有兩種方案，方案之一就是藉助第三方，比如友盟、Bugly等，由於專案是部署在銀行的網路框架之內的，所以該方案不可行。另外一種方案是就是給每一個方法裡面資料打點，然後寫入S

linux下移植wifi之安裝wpa_supplicant及wpa_supplicant其操作(六)

第五節：安裝wpa_supplicant及wpa_supplicant其操作 概念：      wpa_supplicant : 可用於下述"認證/加密"            All security modes have been verified to work (a

HTML5新特性之檔案和二進位制資料的操作

歷史上，JavaScript無法處理二進位制資料。如果一定要處理的話，只能使用charCodeAt()方法，一個個位元組地從文字編碼轉成二進位制資料，還有一種辦法是將二進位制資料轉成Base64編碼，再進行處理。這兩種方法不僅速度慢，而且容易出錯。ECMAScript5引入了Blob物件，允許直接操作二進位制

檔案及資料夾操作

下面的程式碼段可以為當前路徑下的所有檔案建立一個同名資料夾，並將這些檔案移動到其同名資料夾中。 import os, shutil l = os.listdir() for i in l: j = i.split('.')[0] os.makedirs(j) shuti

【Vue實戰之路】一、Vue-cli全面詳解及進階操作。

image 腳本 js基礎 這一 命令執行 bsp row 編譯 服務器 全面的Vue-cli學習，這一篇就夠了！ 一、下載 使用vue-cli前，需先安裝node.js,node的安裝就不贅述，不過在此需要註意： 1. node版本需在4.x以上，首推6.x以上版本

mysql-資料（記錄）相關操作（增刪改查）及許可權管理

一、介紹 在MySQL管理軟體中，可以通過SQL語句中的DML語言來實現資料的操作，包括 使用INSERT實現資料的插入 UPDATE實現資料的更新 使用DELETE實現資料的刪除 使用SELECT查詢資料以及。 二、插入資料 1. 插入完整資料（順序插入） 語法一：

Python之路（組合資料型別及操作）

Python之路（組合資料型別及操作） 集合型別 集合型別的定義 集合是多個元素的無序組合 集合型別與數學中的集合概念一致 集合型別之間無序，每個元素唯一，不存在相同元素 集合元素之間不可或更改，不是可變資料型別 集合用大括號 {} 表示，元素間用逗號分隔 建立集合型別用 {}

深度學習之TFRecord資料集讀、寫的製作、讀取及驗證 具體操作過程

如題，TensorFlow官方為我們提供了資料讀取的標準格式：TFRecord，本文主要闡述了該資料格式的製作、讀取及驗證三個具體操作過程。簡要介紹：tfrecord資料檔案是一種將影象資料和標籤統一儲存的二進位制檔案，能更好的利用記憶體，在tensorflow中快速的複製，

JavaWeb之DBUtils（一）QueryRunner類對資料表的增、刪、查（8種結果集處理方式）、改操作

一、使用QueryRunner類,實現對資料表的 insert delete update  package com.shuhuadream.queryrunner; import java.sql.Connection; import java.sql.SQLExce