servlet入門：前端操作結合資料庫，實現資料庫部門表單資料增，刪，改功能
阿新 • • 發佈：2018-12-16
第一個完整的web probject,值得記錄下來的一點心得；
還是老規矩，不囉嗦，直接上程式碼；
第一部分：建立一個web project ,匯入jar包，配置檔案等；
配置檔案部分：
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>deptMangage</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>dept</servlet-name> <servlet-class>com.emp.servlet.GeptServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>dept</servlet-name> <url-pattern>/dept.do</url-pattern> </servlet-mapping> </web-app>
**接著就是第二部分，前端頁面，我是直接匯入js檔案，之前有用jquery寫過一個表格元件，就直接拿過來用了，js，css部分（還要匯入一個js檔案，直接下載就好了） ** js部分：
;(function ($) { var myGridFun = function ($dom,opts) { this.$grid = $dom; this.$opts = opts; this.defaultOpt = { //斑馬線 zebraCrossing:true, width:'100%', //是否支援多選 multiple : false, //選擇列是否顯示 selectColumn:false, //是否支援編輯 edited:false } //合併引數 var setting = $.extend({}, this.defaultOpt, opts); this.setting = setting; this.init(); } myGridFun.prototype = { init:function () { this.initGridDom(); }, //初始化表格dom initGridDom : function () { this.loadGridHead(); var dataSource = this.setting.dataSource || []; this.loadDateDom(dataSource); gridEvent.editEvent(this); }, //初始化表頭 loadGridHead : function () { this.$grid.html(""); var columns = this.setting.columns || []; var codes = []; //拼接grid表頭 codes.push("<thead>"); /* <td class="select-column"><input type="checkbox" name="dataCheckbox"></td> */ codes.push("<tr>"); //載入多選框 if (this.setting.selectColumn === true && this.setting.multiple === true) { codes.push('<th class="select-column">'); codes.push('<input type="checkbox" name="checkboxAll">'); codes.push('</th>'); } for (var i = 0; i < columns.length; i++) { var c = columns[i]; //取出配置的欄位和標題 var field = c.field,title = c.title; codes.push("<th field='"+field+"'>"); codes.push(title); codes.push("</th>"); } codes.push("</tr>"); codes.push("</thead>"); //追加表頭 this.$grid.append(codes.join("")); //設定表格的寬度 this.$grid.css("width",this.setting.width); //載入列頭複選框事件 if (this.setting.selectColumn === true && this.setting.multiple === true) { var check = this.$grid.find('input[type="checkbox"][name="checkboxAll"]'); gridEvent.checkboxAllEvent(check,this); } }, //單行資料dom建立 createDataTrDom : function (data) { var _this = this; //獲取配置資訊 var columns = this.setting.columns || [] ; var ds = data;//{name:'秋香',age:'18',hobby:'唐伯虎'}, ds.field ds['name'] var $tr = $("<tr class='datagrid-row'>"); //在tr上快取當前行的記錄 $tr.data("row-data",ds); //載入多選框 if (this.setting.selectColumn === true && this.setting.multiple === true) { $tr.append('<td class="select-column"><input type="checkbox" name="dataCheckbox"></td>'); } //查詢grid所需要的欄位 for (var j = 0; j < columns.length; j++) { //獲取欄位 var field = columns[j].field; //獲取欄位在資料中所對應的值 var value = ds[field]; //判斷是否存在渲染函式 if ($.isFunction(columns[j].rendering)) { //執行渲染回撥函式 value = columns[j].rendering.call(_this,ds,$tr); //value = columns[j].rendering(ds,$tr) } //td新增到tr中 $tr.append("<td field='"+field+"'>"+value+"</td>"); } return $tr; }, //載入資料元素 loadDateDom : function (dataSource) { var _this = this; //獲取配置資訊 var set = this.setting; var columns = set.columns || [] ; //建立jquery tbody物件 var $tbody = $("<tbody>"); for (var i = 0; i < dataSource.length; i++) { $tbody.append(this.createDataTrDom(dataSource[i])); } //清空資料 this.$grid.find("tbody").remove(); //追加資料 this.$grid.append($tbody); //事件處理 this.rowDataEvent(); }, //資料行的事件處理 rowDataEvent : function () { var _this = this; //資料行TD點選事件 this.$grid.find("tbody tr.datagrid-row td[field]").unbind('click').bind('click', function(event) { //獲取行資料 var rowData =$(this).parents("tr.datagrid-row").data('row-data'); //獲取被點選的td所對應的欄位名 var field =$(this).attr("field"); var events = _this.setting.events || {}; //執行使用者自定義td點選事件 if ($.isFunction(events.tdClick)) { //執行td點選事件回撥函式 value = events.tdClick.call(_this,$(this),rowData[field],rowData); } }); //行點選，選擇資料 this.$grid.find("tbody tr.datagrid-row").unbind('click').bind('click', function(event) { gridEvent.trClick(this,event,_this); }); //多選框事件 if (this.setting.selectColumn === true && this.setting.multiple === true) { var checks = this.$grid.find('input[type="checkbox"][name="dataCheckbox"]'); gridEvent.dataCheckboxChange(checks,this); } }, //增加資料 addData : function (datas) { //獲取tbody物件 var $tbody = this.$grid.find("tbody"); for (var i = 0; i < datas.length; i++) { $tbody.append(this.createDataTrDom(datas[i])); } //事件處理 this.rowDataEvent(); }, //獲取選中的資料 getSelectDatas : function () { var selects = this.$grid.find("tbody tr.datagrid-row-selected"); var datas = []; selects.each(function(index, el) { datas.push($(this).data("row-data")) }); return datas; }, //重新整理資料 refreshData : function (data) { //如果傳進來的資料為空則重新整理原有資料，否則載入新的資料 if (!gridEvent.isNotNull(data)) { data = this.setting.dataSource || []; } this.loadDateDom(data); }, //根據行號修改欄位值 updateFieldByRowNo : function (rowNo,field,value) { //獲取指定行的物件 var $tr = this.$grid.find('tbody tr.datagrid-row:eq('+rowNo+')'); //修改顯示欄位 $tr.find("td[field='"+field+"']").text(value); //獲取資料 var rowData = $tr.data('row-data'); rowData[field] = value; //重新整理快取資料 $tr.data('row-data',rowData); }, //根據行號修改行資料 updateRowDataByRowNo : function (rowNo,rowData) { var _this = this; $.each(rowData,function(key, value) { _this.updateFieldByRowNo(rowNo,key,value); }); }, hideColumn : function (columnName) { this.$grid.find("th[field='"+columnName+"']").hide(); this.$grid.find("td[field='"+columnName+"']").hide(); }, showColumn : function (columnName) { this.$grid.find("th[field='"+columnName+"']").show(); this.$grid.find("td[field='"+columnName+"']").show(); }, //根據td刪除資料 deleteDataByTd : function ($td) { $($td).parents("tr.datagrid-row").remove(); } } var gridEvent = { //表格TD編輯事件 editEvent : function (pthis) { //如果表格配置不支援編輯，直接return if (pthis.setting.edited !== true) return ; pthis.$grid.find("tbody tr.datagrid-row td[field]").unbind("dblclick").bind('dblclick', function(event) { var _this = this; //獲取td field屬性值 var field = $(this).attr('field'); //hobby //查詢欄位的編輯配置（判斷具體的欄位是否支援編輯） for (var i = 0; i < pthis.setting.columns.length; i++) { var column = pthis.setting.columns[i]; if (field == column.field) { //如果欄位配置了不可編輯，則跳出事件 if (column.edited === false) { return ; } } } //this;//當前雙擊的TD物件 var text = $(this).text(); var input = $('<input type="text" style="width:calc(100% - 4px)">'); input.val(text); $(this).html(input); //讓input獲得焦點（編輯狀態） input.focus(); //輸入回車 提交修改值 input.keyup(function(event) { event.keyCode == 13 ? input.blur() : false; }); //input失去焦點事件 input.blur(function(event) { //獲取輸入框的值 var value = $(this).val(); //將輸入框的值填充到TD裡面 $(_this).html(value); //修改快取資料 var rowData = $(_this).parents("tr.datagrid-row").data("row-data"); rowData[field] = value; $(_this).parents("tr.datagrid-row").data("row-data",rowData); }); }); }, //資料行點選事件 trClick : function (_this,e,pthis) { //如果行沒有選中，則選中資料，如果已經選中，就取消選中 //獲取資料配置 var set = pthis.setting; set.multiple == false ? $(_this).siblings("tr.datagrid-row-selected").removeClass('datagrid-row-selected') : true; if ($(_this).hasClass("datagrid-row-selected")) { $(_this).removeClass('datagrid-row-selected'); } else { //新增選中資料項 $(_this).addClass('datagrid-row-selected'); } var check = $(_this).find('input[name="dataCheckbox"]'); if (null != check && check.length != 0 ){ if ($(check).is(':checked')) {//.removeAttr("checked") //$(check).attr('checked',false); $(check).prop("checked",false); } else { $(check).prop('checked',true); } } //阻止事件冒泡 e.stopPropagation(); }, //列頭多選框事件 checkboxAllEvent : function (_this,pthis) { $(_this).unbind('click').bind('click', function(event) { //判斷複選框是否選中 if ($(this).is(':checked')) { //全選 var dataCheckboxs = pthis.$grid.find('input[name="dataCheckbox"]'); dataCheckboxs.each(function(index, el) { if (!$(this).is(':checked')) { //模擬點選（勾選） $(this).click(); } }); } else {//全取消 //全選 var dataCheckboxs = pthis.$grid.find('input[name="dataCheckbox"]'); dataCheckboxs.each(function(index, el) { if ($(this).is(':checked')) { //模擬點選（取消勾選） $(this).click(); } }); } }); }, //資料列複選框事件 dataCheckboxChange : function (_this,pthis) { $(_this).unbind('click').bind('click', function(event) { if ($(this).is(':checked')) { //選中，增加資料選中標識 $(this).parents("tr.datagrid-row").addClass('datagrid-row-selected'); } else { //取消資料選擇（去除‘datagrid-row-selected’） $(this).parents("tr.datagrid-row").removeClass('datagrid-row-selected'); } //阻止事件冒泡 event.stopPropagation(); }); }, isNotNull : function (obj) { if (undefined != obj && null != obj && "" != obj) { return true; } else { return false; } } } //入口 $.fn.myGrid = function (opts) { var mg = new myGridFun(this,opts); return mg; } })(jQuery);
css部分：
.my-table { border-collapse: collapse; margin: 0 auto; text-align: center; } .my-table td, .my-table th { border: 1px solid #cad9ea; color: #666; height: 30px; } .my-table thead th { background-color: #CCE8EB; width: 100px; } .my-table tbody td{ font-size: 13px; } .my-table tbody tr:hover{ background: #eaf2ff; } .my-table .datagrid-row{ height:25px; } .my-table .datagrid-row td{ height: 25px; } .my-table .datagrid-row-selected{ background: #ffe48d !important; } .my-table .select-column{ width: 10px; } .my-table .select-column input[type='checkbox']{ margin:0px; padding: 0px; }
第三前端html頁面部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>挨踢教育部門管理</title>
<link rel="stylesheet" type="text/css" href="my-grid.css">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="my-grid.js"></script>
</head>
<body>
<h1 style="text-align : center;">挨踢教育部門管理</h1>
<h2>部門資訊</h2>
<p>部門名稱：<input id = "deptName" ></p>
<p>辦公地址：<input id= "loc"></p>
<p><button id="addDept">增加部門</button>
<h2>修改資訊</h2>
<p>部門編號：<input id="deptNoU" readonly = "readonly">
<p>部門名稱：<input id="deptNameU">
<p>辦公地址：<input id="locU">
<p><button id="updataDept">修改部門</button>
<table id="myGridTable" class="my-table" style="margin-top:-380px;"></table>
</body>
<script type="text/javascript">
//單擊事件新增
$("#addDept").click(function(){
var deptName = $("#deptName").val();
var loc = $("#loc").val();
//組裝物件
var dept = {
name : deptName,
loc: loc
}
//增加資料
$.ajax({
url:'http://localhost:8080/deptMangage/dept.do?method=add',
type:'POST',
data:dept,
success:function(datas){
var datas = JSON.parse(datas);
if(datas.issuccess == true){
//重新載入資料表格
findAllDeptInfos();
//alert("新增成功");
}else{
alert("新增失敗");
}
}
});
});
//部門修改
$("#updataDept").click(function (){
var deptName = $("#deptNameU").val();
var loc = $("#locU").val();
var no = $("#deptNoU").val();
//組裝物件
var dept = {
name : deptName,
loc :loc,
no : no
}
//增加資料
$.ajax({
url:'http://localhost:8080/deptMangage/dept.do?method=update',
type:'POST',
data:dept,
success:function(datas){
alert("資料修改成功");
//重新載入表格資料
findAllDeptInfos();
}
});
});
function findAllDeptInfos(){
//資料
$.ajax({
url:'http://localhost:8080/deptMangage/dept.do?method=findAll',
type:'GET',
success:function(datas){
initDeptGrid(datas);
}
});
}
//頁面載入時，載入部門表格資料
findAllDeptInfos();
//初始化部門表格
function initDeptGrid(datas){
var opt = {
zebraCrossing : false,
//資料來源
dataSource:datas,
//多選
multiple:false,
//選擇列是否顯示
selectColumn:false,
width:'60%',
//表格列頭
columns:[
{field:'no',title:'No',edited:false},
{field:'name',title:'部門名稱'},
{field:'loc',title:'辦公地址'},
{field:'option', title:'刪除',edited:false,rendering:function(data,tr){
var t = this;
return '<button onclick= dalectData(this)>刪除</button>';
}}
],
events:{
tdClick: function(td,value,rowData){
//將要修改的資料填充到輸入框
$("#deptNameU").val(rowData.name);
$("#locU").val(rowData.loc);
$("#deptNoU").val(rowData.no);
}
}
}
var grid = $("#myGridTable").myGrid(opt);
}
//刪除的點選事件
function dalectData($this){
//通過當前的button查詢它所在的tr父級物件
var tr = $($this).parents("tr.datagrid-row");
//獲取行資料
var rowData = tr.data("row-data");
var bool = confirm("確定刪除\""+rowData.name+"\"部門嗎？");
if(bool == false){//不能刪除
return;
}
//需要刪除的No
var no = rowData.no;
//刪除節點
tr.remove();
//刪除後臺資料
deleteDeptInfoByNo(no);
}
//根據No刪除部門資訊
function deleteDeptInfoByNo(no){
$.ajax({
url:'http://localhost:8080/deptMangage/dept.do?method=delete&no='+no,
type:'GET',
success:function(datas){
}
});
}
</script>
</html>
第四屬性類檔案部分：
package com.emp.bean;
public class DeptVO {
private String no;
private String Name;
private String loc;
public String getNo() {
return no;
}
public void setNo(String no) {
this.no = no;
}
public String getName() {
return Name;
}
public void setName(String name) {
Name = name;
}
public String getLoc() {
return loc;
}
public void setLoc(String loc) {
this.loc = loc;
}
}
第五執行層部分：
package com.emp.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.emp.bean.DeptVO;
import com.emp.util.DeptMysql;
public class GeptServlet extends HttpServlet{
public void init() {
}
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println("doGet");
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println("doPost");
//獲取放法標識
String method = request.getParameter("method");
switch(method) {
case "findAll":
this.findAllDeptList(request,response);
break;
case "add":
this.addDeptInfo(request,response);
break;
case "update":
this.updateDeptInfoByNo(request,response);
break;
case "delete":
this.deleteDeptInfoByNo(request,response);
break;
default:
break;
}
/*if(method.equals("findAll")) {
this.findAllDeptList(request,response);
}else if("add".equals(method)) {
this.addDeptInfo(request,response);
}*/
}
/**
* 根據編號修改資訊
* @throws SQLException
* @throws ClassNotFoundException
*/
public void updateDeptInfoByNo(HttpServletRequest request, HttpServletResponse response) {
//獲取增加的部門資訊
String name = request.getParameter("name");
String loc = request.getParameter("loc");
String no = request.getParameter("no");
//組裝部門對像
DeptVO deptVO = new DeptVO();
deptVO.setName(name);
deptVO.setLoc(loc);
deptVO.setNo(no);
DeptMysql deptMysql = new DeptMysql();
try {
deptMysql.updateDeptInfoByNo(deptVO);
} catch (ClassNotFoundException | SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//根據部門號刪除部門資訊
public void deleteDeptInfoByNo(HttpServletRequest request, HttpServletResponse response) {
String no = request.getParameter("no");
//刪除部門資訊
DeptMysql deptMysql = new DeptMysql();
try {
deptMysql.deleteDeptInfoByNo(no);
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
}
/**
*查詢所有部門資訊
* @param request
* @param response
* @throws IOException
*/
public void findAllDeptList(HttpServletRequest request, HttpServletResponse response)throws IOException {
//設定編碼
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
DeptMysql deptMysql = new DeptMysql();
List<DeptVO> depts= null;
//查詢出所有部門資料
try {
depts = deptMysql.findAllDeptList();
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
PrintWriter out = response.getWriter();
//將部門結果集轉換為JSON字串
String deptStr = JSONArray.toJSONString(depts);
System.out.println(deptStr);
out.write(deptStr);
}
public void addDeptInfo(HttpServletRequest request, HttpServletResponse response)throws IOException {
//獲取增加的部門資訊
String name = request.getParameter("name");
String loc = request.getParameter("loc");
//組裝部門物件
DeptVO deptVO = new DeptVO();
deptVO.setName(name);
deptVO.setLoc(loc);
//到DeptMysql類裡面新建addDeptInfo函式
DeptMysql deptMysql = new DeptMysql();
boolean bool = true;
try {
deptMysql.addDeptInfo(deptVO);
} catch (ClassNotFoundException | SQLException e) {
bool = false;
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
Map<String,Boolean> success = new HashMap<>();
//返回訊息告訴前臺資料是否增加成功
success.put("issuccess",bool);
PrintWriter out = response.getWriter();
out.write(JSONObject.toJSONString(success));
}
}
public void destroy() {
super.destroy();
}
}
第六連線資料庫部分：
package com.emp.util;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.emp.bean.DeptVO;
public class DeptMysql {
/**
* 查詢所有部門資料
* @return
* @throws SQLException
* @throws ClassNotFoundException
*/
public List<DeptVO> findAllDeptList() throws ClassNotFoundException, SQLException{
Connection connection = MySQLUtil.getConnectionInstance();
PreparedStatement ps = connection.prepareStatement("select t.deptno, t.dname, t.loc from deptone t ");
//獲取查詢結果
ResultSet result = ps.executeQuery();
List<DeptVO> depts = new ArrayList<DeptVO>();
while(result.next()) {
String deptno = result.getString("deptno");
String dname = result.getString("dname");
String loc = result.getString("loc");
DeptVO dept = new DeptVO();
dept.setNo(deptno);
dept.setName(dname);
dept.setLoc(loc);
depts.add(dept);
}
ps.close();
return depts;
}
//新增資料
public void addDeptInfo(DeptVO deptVO) throws ClassNotFoundException, SQLException {
Connection connection = MySQLUtil.getConnectionInstance();
PreparedStatement ps = connection.prepareStatement("insert into deptone (dname,loc) values (?,?)");
//設定SQL引數
ps.setString(1, deptVO.getName());
ps.setString(2, deptVO.getLoc());
//執行SQL
ps.executeUpdate();
ps.close();
}
//根據編號修改資訊
public void updateDeptInfoByNo(DeptVO deptVO) throws ClassNotFoundException, SQLException {
Connection connection = MySQLUtil.getConnectionInstance();
PreparedStatement ps = connection.prepareStatement("update deptone t set t.dname=?, t.loc=? where t.deptno = ?");
ps.setString(1, deptVO.getName());
ps.setString(2, deptVO.getLoc());
ps.setString(3, deptVO.getNo());
ps.executeUpdate();
ps.close();
}
//刪除資訊
public void deleteDeptInfoByNo(String no) throws ClassNotFoundException, SQLException {
Connection connection = MySQLUtil.getConnectionInstance();
PreparedStatement ps = connection.prepareStatement("delete from deptone where deptno=?");
//設定SQL引數
ps.setString(1, no);
//執行SQL
ps.executeUpdate();
ps.close();
}
}
最後的執行效果如圖：
