一.分級建立專案包 1.建立department包（實作有關department表的操作） ① 建立dao包（實作資料庫中department的增刪改查操作 建立java和資料庫直接的聯系） （1）添加記錄 （2）根據主鍵洗掉 （3）根據查詢條件洗掉 （4）根據主鍵修改其它全部欄位 （5）根據主鍵修改部分其他欄位 （6）根據多條件模糊查詢記錄 （7）根據主鍵查詢一條記錄 ② 建立model包（創建有關department物體類） ③ 建立service包 ④ 建立servlet包 2.建立employee包（實作有關employee表的操作） ① 建立dao包（實作資料庫中employee的增刪改查操作 建立java和資料庫直接的聯系） （1）添加記錄 （2）根據主鍵洗掉 （3）根據查詢條件洗掉 （4）根據主鍵修改其它全部欄位 （5）根據主鍵修改部分其他欄位 （6）根據多條件模糊查詢記錄 （7）根據主鍵查詢一條記錄 ② 建立model包（創建有關employee物體類） ③ 建立service包 ④ 建立servlet包 3.建立project包（實作有關project表的操作） ① 建立dao包（實作資料庫中project的增刪改查操作 建立java和資料庫直接的聯系） （1）添加記錄 （2）根據主鍵洗掉 （3）根據查詢條件洗掉 （4）根據主鍵修改其它全部欄位 （5）根據主鍵修改部分其他欄位 （6）根據多條件模糊查詢記錄 （7）根據主鍵查詢一條記錄 ② 建立model包（創建有關project物體類） ③ 建立service包 ④ 建立servlet包 4.建立score包（實作有關score表的操作） ① 建立dao包（實作資料庫中score的增刪改查操作 建立java和資料庫直接的聯系） （1）添加記錄 （2）根據主鍵洗掉 （3）根據查詢條件洗掉 （4）根據主鍵修改其它全部欄位 （5）根據主鍵修改部分其他欄位 （6）根據多條件模糊查詢記錄 （7）根據主鍵查詢一條記錄 ② 建立model包（創建有關score物體類） ③ 建立service包 ④ 建立servlet包 5.建立until 工具包（封裝工具類簡化代碼） ① 建立JDBCUtil工具類（資料庫加載、資料庫連接、資料庫操作、資料庫關閉、） ② 建立FmtEmpty(判空) ③ 建立jdbc 組態檔 6.建立init 工具包（封裝工具類簡化代碼） ① 建立CharFilter工具類（解決資料庫中文亂碼的問題） 二、 整個系統的互動程序（開發流程） ①建立工具類 （1）hedaer 封裝路徑（java代碼獲取、EL運算式獲取） ②創建注冊界面（reg.jsp） css(base.css -- window樣式) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <!-- <meta charset="UTF-8"> --> <title>注冊頁面</title> <!-- <link rel="stylesheet" href="https://www.cnblogs.com/demo220111/web/base/layui/css/layui.css" > --> <!-- <script type="text/javascript" src="https://www.cnblogs.com/demo220111/web/base/layui/layui.js" ></script> --> <!-- 利用包含來簡化代碼（工具類） --> <%@ include file="/web/header.jsp" %> </head> <body > <div > <fieldset > <legend>注冊</legend> <div > <form > <div > <label >賬號</label> <div > <input type="text" name="code" required lay-verify="required" placeholder="請輸入賬號" autocomplete="off" > </div> </div> <div > <label >密碼</label> <div > <input type="password" name="pass" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" > </div> </div> <div > <label >姓名</label> <div > <input type="text" name="name" required lay-verify="required" placeholder="請輸入姓名" autocomplete="off" > </div> </div> <div > <div > <input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/注冊" lay-submit lay-filter="reg" > <input type="reset" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/重置" > </div> <input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/回傳登錄" onclick=""> </div> <!-- reg是傳遞給EmployeeServlet 引數 --> <input type="hidden" name="action" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/reg" > </form> </div> </fieldset> </div> <script type="text/javascript"> var form = layui.form; var $ = layui.jquery; var layer = layui.layer; form.on("submit(reg)",function(data){ //layer.msg("1111"); console.log(data.field) $.ajax({//四個屬性一個方法 url : base.app +"/EmployeeServlet", type : "post", data : data.field, //a=b&c=d /{a:b,c:d} dataType : "text",//text / json success : function(data){ console.log(data) // todo } }); }); </script> </body> </html> （1） <input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/注冊" lay-submit lay-filter="reg" > 輸入框不能為空 觸發回呼方法（測驗段） var form = layui.form; var layer = layui.layer; form.on("submit(reg)",function(data){ layer.msg("1111"); }); （2）注冊頁面請求，是請求到employee表中，注冊員工資訊 觸發回呼方法（應用段） <script type="text/javascript"> var form = layui.form; var $ = layui.jquery; var layer = layui.layer; form.on("submit(reg)",function(data){ //layer.msg("1111"); console.log(data.field) $.ajax({//四個屬性一個方法 url:"", data:"", type:"", dataType:"", success:function(data){ } }); }); </script> （3）撰寫EmployeeServlet類中的方法 （接受請求、獲取資料、封裝物件、呼叫方法、回傳結果） 注解@WebServlet("/EmployeeServlet") 實作ajax請求互動 private static final long serialVersionUID =1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String res = null; switch (req.getParameter("action")) { case "reg": res = reg(req); break; } // ajax 請求接收 PrintWriter writer = resp.getWriter(); writer.write(res); writer.flush(); writer.close(); writer = null ; } private String reg(HttpServletRequest req) { String code = req.getParameter("code"); String pass = req.getParameter("pass"); String name = req.getParameter("name"); EmployeeModel model = new EmployeeModel(code,name,pass); return service.insert(model); } （4） 實作員工注冊功能（主要測驗能否互動）
（5） 完善員工注冊功能（主要完善業務邏輯）
PS：
private static String table = "employee";
private static String cols = "code,name,pass,code_dept,image";
// 此處的資料庫表欄位 在方法中可以不使用某一個，但是不能在方法中使用沒有的表欄位
1.reg.jsp 檔案
form.on("submit(reg)",function(data){
//layer.msg("1111");
//console.log(data.field)
$.ajax({//四個屬性一個方法
url : base.app +"/EmployeeServlet",
type : "post",
data : data.field, //a=b&c=d /{a:b,c:d}
dataType : "text",//text / json
success : function(data){
// console.log(data) 測驗ajax請求是否可用
// todo
if(data=https://www.cnblogs.com/xmczrj/archive/2022/01/17/=1){
layer.msg("注冊成功")
}else if(data =https://www.cnblogs.com/xmczrj/archive/2022/01/17/="repeat"){
layer.msg("注冊失敗，賬號重復")
}else{
layer.msg("注冊失敗")
}
}
});
});
2.EmployeeServiceImpl 檔案
public String insert(EmployeeModel model) {
// return dao.insert(model) + ""; 測驗能否實作互動
// 完善業務邏輯
// 在EmployeeModel 創建code構造方法
EmployeeModel m1 = new EmployeeModel(model.getCode());
EmployeeModel mdb = dao.selectModel(m1);
if (mdb != null)
return "repeat";
return dao.insert(model) + "";
}
3.EmployeeModel 創建code 構造方法
public EmployeeModel(String code) {
super();
this.code = code;
}
4.給reg.jsp 頁面添加互動操作（判斷注冊是否成功）
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
form.on("submit(reg)",function(data){
//layer.msg("1111");
//console.log(data.field)
$.ajax({//四個屬性一個方法
url : base.app +"/EmployeeServlet",
type : "post",
data : data.field, //a=b&c=d /{a:b,c:d}
dataType:'text',//text / json
success : function(data){
//console.log(data) //測驗ajax請求是否可用
// todo
if(data=https://www.cnblogs.com/xmczrj/archive/2022/01/17/=1){
layer.msg("注冊成功")
}else if(datahttps://www.cnblogs.com/xmczrj/archive/2022/01/17/=="repeat"){
layer.msg("注冊失敗，賬號重復")
}else{
layer.msg("注冊失敗")
}
}
error:function(){// 例外處理
alert("注冊失敗，賬號重復");
}
});
});
5.使用工具類來簡化reg.jsp 頁面添加操作的代碼
header.jsp (將參考路徑進行封裝)
<!-- java代碼 獲取工程名 -->
<% String app=request.getContextPath(); %>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.cnblogs.com/xmczrj/archive/2022/01/17//web/base/css/base.css" >
<link rel="stylesheet" href="https://www.cnblogs.com/xmczrj/archive/2022/01/17//web/base/layui/css/layui.css" >
<script type="text/javascript" src="https://www.cnblogs.com/xmczrj/archive/2022/01/17//web/base/layui/layui.js" ></script>
<!-- EL運算式 獲取工程名 -->
<script>
var base={
app:"${pageContext.request.contextPath}"
}
</script>
<script type="text/javascript" src="https://www.cnblogs.com/xmczrj/archive/2022/01/17//web/base/js/base.js"></script>
base.js 工具類（將操作方法進行封裝）
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
// 添加監聽
function formSubmit(event,url,dataType,func){
//console.log(event) 除錯
form.on("submit(" +event+")",function(data){
// console.log(data.field)除錯
ajax(url,data.field,dataType,func)
})
}
function ajax(url,field,dataType,func){
//console.log(field)
$.ajax({//四個屬性一個方法
url : base.app + url,
type : "post",
data : field,
dataType : dataType, //后采用
//dataType : "text",//text / json
success : func
// error:function(){// 例外處理
// alert("注冊失敗，賬號重復");
// }
});
}
- 封裝 關于請求的 FmtRequest 類
（3）EmployeeServlet中操作代碼
one：先繼承HttpServlet
public class EmployeeServlet extends HttpServlet {}
two：定義程式 序列化ID
public class EmployeeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
}
three： 創建表單提交資料到服務器的方式
public class EmployeeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
（4） EmployeeServlet中建立業務邏輯分支
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String res = null;
switch (req.getParameter("action")) {
case "list":
res = list(req);
break;
default:
break;
}
}
list 通過隱藏域（hidden） 來傳遞到EmployeeServlet中 通過EmployeeServlet 中 'list' 分支來實作表格中資料的加載
lsit.jsp檔案
<input type="hidden" name="action" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/list">
這樣就可以實作list分支的方法了
常用套路：
1接受請求、
2獲取資料、
3封裝物件、
4呼叫方法、
5回傳結果
1接受請求、
String conextPath = req.getContextPath();
String path1 = "/web/success.jsp";
2獲取資料、
DepartmentModel model2 = new DepartmentModel();
req.getParameter("code");
req.getParameter("name");
可以利用工具類簡化
// 將所有請求的引數映射到物體類中
DepartmentModel model =FmtRequest.parseModel(req, DepartmentModel.class);
return null;
1和2 利用工具類簡化后：
private String list(HttpServletRequest req) {
// 將所有請求的引數映射到物體類中
DepartmentModel model =FmtRequest.parseModel(req, DepartmentModel.class);
return null;
}
3封裝物件（1）、
在介面（IDepartmentService）中定義方法（至少有這五個）
public interface IDepartmentService {
String insert(DepartmentModel model);
String delete(DepartmentModel model);
String update(DepartmentModel model);
List<DepartmentModel> selectList(DepartmentModel model);
DepartmentModel selectModel(DepartmentModel model);
}
3封裝物件（2）、
在實作類中（EmployeeServiceImpl）重寫方法 ，根據對應的方法去資料庫里查找
初始版本
public class DepartmentServiceImpl implements IDepartmentService{
private IDepartmentDao dao2 = new Department2DaoImpl();
@Override
public String insert(DepartmentModel model) {
return dao2.Insert(model)+"";
}
@Override
public String delete(DepartmentModel model) {
return dao2.delete(model)+"";
}
@Override
public String update(DepartmentModel model) {
return dao2.updateActive(model)+"";
}
@Override
public List<DepartmentModel> selectList(DepartmentModel model) {
return dao2.selectList(model);
}
@Override
public DepartmentModel selectModel(DepartmentModel model) {
return dao2.selectModel(model);
}
簡單實作查詢方法
@Override
public List<DepartmentModel> selectList(DepartmentModel model) {
String code = model.getCode();
model.setCode(code == null ? "%" : "%" + code + "%");
String name = model.getName();
model.setName(name == null ? "%" : "%" + name + "%");
return dao2.selectList(model);
}
4呼叫方法（通過呼叫IDepartmentService介面來呼叫實作方法）
List<DepartmentModel> selectList(DepartmentModel model);
5回傳結果
private String list(HttpServletRequest req) {
// 將所有請求的引數映射到物體類中
DepartmentModel model =FmtRequest.parseModel(req, DepartmentModel.class);
// service.selectList(model) 回傳的是集合
List<DepartmentModel> list = service.selectList(model);
return null;
}
簡化后：
private List<DepartmentModel> list(HttpServletRequest req) {
// 將所有請求的引數映射到物體類中
DepartmentModel model =FmtRequest.parseModel(req, DepartmentModel.class);
// service.selectList(model) 回傳的是集合
return service.selectList(model);
}
這里由于回傳的是集合 就不能用字串接收了 就需要 將doPost中的String型別的res 修改為Object型來接收（DepartmentServlet檔案下）
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Object res = null;
switch (req.getParameter("action")) {
case "list":
res = list(req);
break;
default:
break;
}
FmtRequest.write(resp.getWriter(), res);
// 難點：這里重寫了FmtRequest工具類中的write方法
}
至此完成一個 從 網頁到 java 再從java到資料庫 再資料庫回傳到java 最后從Java（傳遞）展示在網頁上
FmtRequest工具類中的write方法重寫代碼為：
public static void write(Writer wr,Object val) {
if (val instanceof Collection<?>) { // 判斷物件是否為線性集合
write(wr, new JSONArray((Collection<?>)val).toString());
//傳進去的線性集合，在傳過來的時候進行向下轉型(var 是Object型別 最大了),
//轉型完之后傳遞到JSONArray當中在呼叫toString方法得到json格式的字串,
//將json格式的字串再傳遞給write方法,再寫回給網頁，
} else if(val instanceof String){ // 判斷物件是否為字串
write(wr, val.toString());
}else if (val instanceof Map<?, ?>) { // 判斷物件是否為map集合
write(wr, new JSONObject((Map<?,?>)val).toString());
}else {// 判斷是否為（其它物件）物體類
write(wr, new JSONObject(val).toString());
}
}
（5） 完善javascript 功能
1 .
base.js 檔案添加
var laytpl = layui.laytpl;
list.js檔案
element.render();
formSubmit('search','/DepartmentServlet','json',function(data){
// console.log(data)
var html = "";
var tpl = $("#tradd").html();
$.方法 別忘了加 $.
$.each(data , function(i,dom){
var d = {id:i,code:dom.code,name:dom.name,tel:dom.tel}
html += laytpl(tpl).render(d);
})
$("tbody").html(html);
})
2.(只包含紫色部分)
// 實作一開的主體界面 不用點查詢 就可以顯示資料,為后續的添加操作和 洗掉操作奠基（相當于重繪吧）
function refresh(){
$("input[value='https://www.cnblogs.com/xmczrj/archive/2022/01/17/重置' ]").click();
$("input[value='https://www.cnblogs.com/xmczrj/archive/2022/01/17/查詢' ]").click();
}refresh();
</script>
<!-- 定義模板引擎 -->
<script type="text/html" id="tradd">
<tr>
<td>{{d.id}}</td><td>{{d.code}}</td><td>{{d.name}}</td><td>{{d.tel}}</td>
<td>
<a href="javascript:" >洗掉</a>
<a href="javascript:" >修改</a>
</td>
</tr>
</script>
8.主界面主體添加操作部分（彈出層）
添加（1）在base.js 定義彈出層 方法（主要測驗能否彈出 ，一步一步，慢慢來）
// layui 彈出層
function layerOpen(url , end){
layer.open({
type : 2, // 彈出視窗的形式
content : base.app + url, // 彈出視窗的內容（路徑，將路徑上的網頁展示在彈出視窗中）
area : ['650px','450px'], // 彈出視窗的大小尺寸
fixed : false, // 彈出視窗的 固定（不可拖動）
maxmin : true, // 彈出視窗的最大化
shade : 0.3, // 彈出視窗的陰影
closeBtn : 1, // 彈出視窗的關閉按鈕
shadeClose : false, // 點擊遮罩是否關閉
success : function(layero,index){ // 成功打開后要呼叫的方法
},
end : end // 關閉后要呼叫的方法
})
}
添加 （2）在list.jsp 檔案中 添加 靜態事件系結（html中），并且創建add.jap添加跳轉后的頁面
<input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/添加" onclick="openAdd()" >
添加 （3）在list.jsp 檔案中 給添加按鈕創建跳轉方法
// 實作 一開的主體界面 不用點查詢 就可以顯示資料 為后續的添加操作和 洗掉操作奠基（相當于重繪吧）
function refresh(){
$("input[value='https://www.cnblogs.com/xmczrj/archive/2022/01/17/重置' ]").click();
$("input[value='https://www.cnblogs.com/xmczrj/archive/2022/01/17/查詢' ]").click();
}refresh();
// 定義添加方法
function openAdd(){
// 測驗添加按鈕能否彈出
// layer.msg(123)
// 呼叫layerOpen方法
layerOpen("/web/page/department/add.jsp" , refresh);
}
關閉 （1） 在base.js檔案中 定義關閉方法
// 彈出層關閉
function layerClose(){ // 當你在iframe頁面關閉自身時
var index = parent.layer.getFrameIndex(window.name); // 先得到當前iframe層的索引
parent.layer.close(index); // 再執行關閉
}
關閉 （2） 在add.js檔案中添加關閉的靜態事件系結
<input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/關閉" onclick="layerClose()" >
實作資料添加操作 （1）html檔案 的操作
首先完善 add.jsp 頁面的html代碼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/header.jsp" %>
<meta charset="UTF-8">
<title>部門添加界面</title>
</head>
<body>
<fieldset >
<legend>部門添加界面</legend>
<div >
<form >
<div >
<label >編號</label>
<div >
<input type="text" name="code" required lay-verify="required"
placeholder="請輸入編號" autocomplete="off" >
</div>
</div>
<div >
<label >名稱</label>
<div >
<input type="text" name="name" required lay-verify="required"
placeholder="請輸入名稱" autocomplete="off" >
</div>
</div>
<div >
<label >電話</label>
<div >
<input type="text" name="tel" required lay-verify="required"
placeholder="請輸入聯系方式" autocomplete="off" >
</div>
</div>
<div >
<div >
// 添加動態事件系結 1
<input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/確定" lay-submit lay-filter="add" >
<input type="reset" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/重置" >
<input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/關閉" onclick="layerClose()" >
</div>
</div>
<!-- reg是傳遞給EmployeeServlet 引數 -->
<input type="hidden" name="action" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/reg" >
</form>
</div>
</fieldset>
<script type="text/javascript">
// 2 實作添加操作的JavaScript代碼
formSubmit("add","/DepartmentServlet",'text',function(data){console.log(data)
if(data=https://www.cnblogs.com/xmczrj/archive/2022/01/17/=1){
layer.msg("添加成功",layerClose)
}else if(datahttps://www.cnblogs.com/xmczrj/archive/2022/01/17/=="repeat"){
layer.msg("添加失敗，編號重復")
}else{
layer.msg("添加失敗")
}
})
</script>
</body>
</html>
實作資料添加操作 （2） 在DepartmentServlet類中 定義add 分支和 創建add方法
1. 定義 add 分支
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Object res = null;
switch (req.getParameter("action")) {
case "list":
res = list(req);
break;
case "add":
res = add(req);
break;
default:
break;
}
FmtRequest.write(resp.getWriter(), res);
}
2. 創建 add 方法
/**
* 定義上述分支中的 add方法
* @param req
* @return
*/
private String add(HttpServletRequest req) {
DepartmentModel model =FmtRequest.parseModel(req, DepartmentModel.class);
return service.insert(model);
}
實作資料添加操作 （3） 去IDepartmentService介面中 定義insert方法
String insert(DepartmentModel model);
實作資料添加操作 （4）在DepartmentServiceImpl中 通過介面（IDepartmentService） 重寫添加的業務邏輯
DepartmentServiceImpl類中
1. 重寫insert 業務邏輯
@Override
public String insert(DepartmentModel model) {
// 2 和 3 只是為了在這里查詢判斷時更嚴謹
if (selectModel(model) == null) {
Integer res = dao2.Insert(model);
return res == null ? null : res.toString();
}
return "repeat";
}
2.為了更嚴謹一點 先在 DepartmentModel 添加code 無參構造方法和有參構造方法
public DepartmentModel() {// 無參構造方法
}
public DepartmentModel(String code) { // 有參構造方法
this.code = code;
}
3. 在呼叫selectModel 方法查詢判斷 code欄位
@Override
public DepartmentModel selectModel(DepartmentModel model) {
return dao2.selectModel(new DepartmentModel(model.getCode()));
}
實作資料洗掉操作 （1）在 list.jsp中 實作洗掉的html代碼
<script type="text/html" id="tradd">
<tr>
<td>{{d.id}}</td><td>{{d.code}}</td><td>{{d.name}}</td><td>{{d.tel}}</td>
<td>
<a href="javascript:del('{{d.code}}')" >
<i class='layui-icon layui-icon-delete'></i>
</a>
<a href="javascript:" >修改</a>
</td>
</tr>
</script>
實作資料洗掉操作 （2）在 list.jsp中 實作洗掉的javascrip代碼
// 定義洗掉方法
function del(code){
// 測驗方法是否可用 1
//layer.msg(code)
layerConfirm(function(index){
// 測驗layerConfirm提示是否可用 2
// layer.msg(code);
// 通過呼叫 base.js 檔案的ajax請求 實作洗掉 注意： code是欄位 del 是DepartmentServlet的 del 分支
ajax("/DepartmentServlet",{code:code,action:'del'})
})
}
// 完善洗掉方法
function del(code){
// 測驗方法是否可用
//layer.msg(code)
layerConfirm(function(index){
// 測驗layerConfirm提示是否可用
// layer.msg(code);
ajax("/DepartmentServlet",{code:code,action:'del'},"text",function(data){
// 測驗ajax 呼叫是否可行
// console.log(data)
if(data =https://www.cnblogs.com/xmczrj/archive/2022/01/17/= 1){
layer.msg("洗掉成功",refresh)
}else{
layer.msg("洗掉失敗")
}
})
})
}
實作資料洗掉操作 （3）在DepartmentServlet中創建del 分支 并創建對應的del方法
DepartmentServlet 類中
1. 創建del 分支
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Object res = null;
switch (req.getParameter("action")) {
case "list":
res = list(req);
break;
case "add":
res = add(req);
break;
case "del":
res = del(req);
break;
default:
break;
}
FmtRequest.write(resp.getWriter(), res);
}
2. 創建del 方法
private Object del(HttpServletRequest req) {
return service.delete(FmtRequest.parseModel(req, DepartmentModel.class));
}
實作資料洗掉操作 （4）在IDepartmentService介面中創建del方法
public interface IDepartmentService {
String insert(DepartmentModel model);
String delete(DepartmentModel model);
String update(DepartmentModel model);
List<DepartmentModel> selectList(DepartmentModel model);
DepartmentModel selectModel(DepartmentModel model);
}
實作資料洗掉操作 （5）在IDepartmentServiceImpl中重寫del方法
@Override
public String delete(DepartmentModel model) {
Integer res = dao2.delete(model);
return res == null ? null : res.toString();
}
實作資料洗掉操作 （6）在IDepartment2DaoImpl中重寫del方法
@Override
public Integer delete(DepartmentModel model) {
StringBuffer sql = new StringBuffer(" delete from department ");
// 通過使用工具類JDBCUtil 簡化 根據查詢條件的洗掉操作代碼
List<Object> values = appendWhere(sql,model); // 這里呼叫了appendWhere去判斷是否對應
return JDBCUtil1.update(sql.toString(), values);
}
實作資料洗掉操作 （7）在IDepartment2DaoImpl中呼叫了appendWhere去判斷是否對應
private List<Object> appendWhere(StringBuffer sql, DepartmentModel model) {
sql.append("where 1=1");
List<Object> values = new ArrayList<>();
try {
String code = model.getCode();
if (!FmtEmpty.isEmpty(code)) {
sql.append(" and code like ? ");
values.add(code);
}
String name = model.getName();
if (!FmtEmpty.isEmpty(name)) {
sql.append(" and name like ? ");
values.add(name);
}
String tel = model.getTel();
if (!FmtEmpty.isEmpty(tel)) {
sql.append(" and tel like ? ");
values.add(tel);
}
} catch (Exception e) {
e.printStackTrace();
}
return values;
}
實作資料洗掉操作 （8）將結果回傳到DepartmentServlet中 的del 方法中去 在回到 分支里面去判斷
private Object del(HttpServletRequest req) {
return service.delete(FmtRequest.parseModel(req, DepartmentModel.class));
}
實作資料洗掉操作 （9）如果 res = del（req） 則在資料庫中洗掉成功
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Object res = null;
switch (req.getParameter("action")) {
case "list":
res = list(req);
break;
case "add":
res = add(req);
break;
case "del":
res = del(req);
break;
default:
break;
}
FmtRequest.write(resp.getWriter(), res);
}
實作資料洗掉操作 （10）回傳到 list.jsp檔案中 執行if判斷做出相應的提示
// 定義洗掉方法
function del(code){
// 測驗方法是否可用
//layer.msg(code)
layerConfirm(function(index){
// 測驗layerConfirm提示是否可用
// layer.msg(code);
ajax("/DepartmentServlet",{code:code,action:'del'},"text",function(data){
console.log(data)
if(data =https://www.cnblogs.com/xmczrj/archive/2022/01/17/= 1){
layer.msg("洗掉成功",refresh)
}else{
layer.msg("洗掉失敗")
}
})
})
}
ajax請求實作資料修改操作（前半部分 回顯） （1） 在list.jsp 創建修改頁面的跳轉 方法
1.創建修改按鈕
<script type="text/html" id="tradd">
<tr>
<td>{{d.id}}</td><td>{{d.code}}</td><td>{{d.name}}</td><td>{{d.tel}}</td>
<td>
<a href="javascript:del('{{d.code}}')" >
<i class='layui-icon layui-icon-delete'></i>
</a>
<a href="javascript:openUpd('{{d.code}}')" >修改</a>
</td>
</tr>
</script>
2.
// 定義修改方法
function openUpd(code){
// 通過修改頁面的路徑 傳引數
layerOpen("/web/page/department/upd.jsp?code="+code , refresh);
}
ajax請求實作資料修改操作（前半部分 回顯） （2） 創建修改頁面 upd.jsp 獲取引數
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/header.jsp" %>
<meta charset="UTF-8">
<title>修改頁面</title>
</head>
<body>
<fieldset >
<legend>部門修改界面</legend>
<div >
<form >
<div >
<label >編號</label>
<div >
<input type="text" name="code" required lay-verify="required"
placeholder="請輸入編號" autocomplete="off" >
</div>
</div>
<div >
<label >名稱</label>
<div >
<!-- readonly 不可修改 -->
<input type="text" name="code" required lay-verify="required" readonly
placeholder="請輸入編號" autocomplete="off" >
</div>
</div>
<div >
<label >電話</label>
<div >
<input type="text" name="tel" required lay-verify="required"
placeholder="請輸入聯系方式" autocomplete="off" >
</div>
</div>
<div >
<div >
<input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/確定" lay-submit lay-filter="get" >
<input type="reset" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/重置" >
<input type="button" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/關閉" onclick="layerClose()" >
</div>
</div>
<!-- reg是傳遞給EmployeeServlet 引數 -->
<input type="hidden" name="action" value="https://www.cnblogs.com/xmczrj/archive/2022/01/17/get" >
</form>
</div>
</fieldset>
<script type="text/javascript">
// 得到傳入的引數 code
var code = '<%=request.getParameter("code")%>';
// layer.msg(code)
function init(){
ajax("/DepartmentServlet",{code:code,action:'get'},'json',function(data){
console.data(data)
})
}
</script>
</body>
</html>
ajax請求實作資料修改操作（前半部分 回顯） （3） 創建DepartmentServlet 類中的 get 分支 和 get方法
1. 創建get 分支
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Object res = null;
switch (req.getParameter("action")) {
case "list":
res = list(req);
break;
case "add":
res = add(req);
break;
case "del":
res = del(req);
break;
case "get":
res = get(req);
break;
default:
break;
}
FmtRequest.write(resp.getWriter(), res);
}
2.創建get 方法
/**
* 定義上述分支中的 get方法
* @param req
* @return
*/
private DepartmentModel get(HttpServletRequest req) {
return service.selectModel(FmtRequest.parseModel(req, DepartmentModel.class));
}
ajax請求實作資料修改操作（前半部分 回顯） （3） 通過IDepartmentService介面呼叫DepartmentServiceImpl實作的方法
IDepartmentService介面
DepartmentModel selectModel(DepartmentModel model);
DepartmentServiceImpl實作類
@Override
public DepartmentModel selectModel(DepartmentModel model) {
return dao2.selectModel(new DepartmentModel(model.getCode()));
}
再次通過dao2在呼叫Department2DaoImpl中的selectModel重寫方法
@Override
public DepartmentModel selectModel(DepartmentModel model) {
StringBuffer sql = new StringBuffer("select id,code,name,tel from ");
sql.append(table).append(" where code =? ");
// 通過使用工具類JDBCUtil 簡化根據主鍵查詢一條記錄的代碼
List<Object> values = Arrays.asList(model.getCode());
return JDBCUtil1.queryModel(sql.toString(), values, DepartmentModel.class);
}
ajax請求實作資料修改操作（前半部分 回顯） （4） 將結果回傳到 DepartmentServlet中
先回傳給 get 方法
再回傳給 get分支判斷 是否 相等 如果相等 將資料以json的形式傳回到upd.jsp網頁中 執行回顯方法
ajax請求 實作資料修改操作（前半部分 回顯） （5） 如果分支判斷相等 ，就將資料以json的形式傳回網頁 執行回顯方法 完成操作
// 得到傳入的引數 code
var code = '<%=request.getParameter("code")%>';
// 測驗點擊修改是否能得到相應的code
// layer.msg(code)
function init(){
ajax("/DepartmentServlet",{code:code,action:'get'},'json',function(data){
console.log(data)
$("input[name='code']").val(data.code)
$("input[name='name']").val(data.name)
$("input[name='tel']").val(data.tel)
form.val("formA",{code:data.code,name:data.name,tel:data.tel});
// form.val("formA",data);
})
}
// 不呼叫 init方法 它怎么執行！！！
init();
ajax請求實作資料修改操作（后半部分 更新） （6） upd.jsp 頁面創新 upd 方法
formSubmit("upd","/DepartmentServlet",'text',function(data){//console.log(data)
if(data=https://www.cnblogs.com/xmczrj/archive/2022/01/17/=1){
layer.msg("修改成功",layerClose)
}else{
layer.msg("修改失敗")
}
})
ajax請求實作資料修改操作（后半部分 更新） （7） 去DepartmentServlet 檔案創建upd 分支 和 upd 執行方法
1. upd 分支
case "upd":
res = upd(req);
break;
2. upd 方法
/**
* 定義上述分支中的 upd方法 修改的前半部分 更新
* @param req
* @return
*/
private Object upd(HttpServletRequest req) {
return service.update(FmtRequest.parseModel(req, DepartmentModel.class));
}
ajax請求實作資料修改操作（后半部分 更新） （8） 通過 介面 和實作類 執行 update 方法
1. 先呼叫IDepartmentService介面
public interface IDepartmentService {
String update(DepartmentModel model);
}
2. 在呼叫DepartmentServiceImpl實作類重寫方法
@Override
public String update(DepartmentModel model) {
return dao2.updateActive(model)+"";
}
3. 呼叫DepartmentServiceImpl 中的updateActive方法（先呼叫IDepartmentDao介面）
public interface IDepartmentDao {
Integer updateActive(DepartmentModel model);
}
4. 呼叫DepartmentServiceImpl 中的updateActive方法（再呼叫Department2DaoImpl實作類中的updateActive 方法）
public class Department2DaoImpl implements IDepartmentDao {
@Override
public Integer updateActive(DepartmentModel model) {
StringBuffer sql = new StringBuffer("update "); // 字串的拼接一定要會
sql.append(table).append(" set id = id ");
// 通過使用工具類JDBCUtil 簡化根據主鍵修改部分其他欄位操作的代碼
List<Object> values = appendSet(sql, model); // 這里又呼叫了appendSet方法執行后回傳
return JDBCUtil1.update(sql.toString(), values);
}
private List<Object> appendSet(StringBuffer sql, DepartmentModel model) { // 定義字串拼接方法
List<Object> values = new ArrayList<Object>();
String name = model.getName();
if (FmtEmpty.isEmpty(name)) { // 判斷有沒有物件以及是否為空 str == null || str.trim().isEmpty()
sql.append(",name=? ");// 字串的拼接一定要會
values.add(name);
}
String tel = model.getTel();
if (tel != null) {
sql.append(" ,tel=? ");// 字串的拼接一定要會
values.add(tel);
}
sql.append("where code = ? ");
values.add(model.getCode());
return values;
}
}
ajax請求實作資料修改操作（后半部分 更新） （8） 將 結果再依次回傳 并將引數傳回到 upd.jsp 檔案中 繼續執行if 判斷 顯示相應提示 完成 更新操作，
// 修改的后半部分 更新資料
formSubmit("upd","/DepartmentServlet",'text',function(data){//console.log(data)
if(data=https://www.cnblogs.com/xmczrj/archive/2022/01/17/=1){
layer.msg("修改成功",layerClose)
}else{
layer.msg("修改失敗")
}
})
分頁的實作
為了減少時間 暫時去掉了防盜鏈功能UserFilter類上面的注解 注釋了 最后記得取消掉啊！！！！！！！！！
三、互動程序
接受請求： web-->servlet-->service-->dao-->sql
回應請求： table-->model-->dao( *jdbc - 資料庫和Java*）-->web-->servlet（*網頁和Java*）-->service
servlet （每個分支的程序（1接受請求、2獲取資料、3封裝物件、4呼叫方法、5回傳結果））
四、未實作錯誤點
- dataType : "text",//text / json 可以
2.
六、解決報錯 問題的步驟
1.網頁 控制臺報 500 就是java端代碼報錯了
2.回到java控制臺
3.先去 FmtRequest方法中 用控制臺輸出可能產生為空的變數的值 如果沒有輸出
4. 去DepartmentServlet 中 輸出add分支中 可能為空的變數（req） 如果 還沒輸出就是 分支根本沒有執行 是jsp檔案中的錯誤
5.隱藏域中的方法和 java中 不對應導致的
6.修改后又包sql陳述句錯誤 然后去Department2DaoImpl 找insert 陳述句 發放插入sql陳述句錯誤 欄位對應不起來 修改后 成功添加
拼接容易出錯就用完整的sql陳述句 一點一點來實作
七、使用debug 方式來除錯
F5：跳入方法
F6：向下逐行除錯
F7：跳出方法
F8：直接跳轉到下一個斷點
debug 詳解 https://blog.csdn.net/chao430/article/details/65443449
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/412912.html
標籤：其他
上一篇：常用快捷鍵和dos命令
下一篇：Javaweb后端學習筆記