當前位置：首頁 > 运维知识 > windows >内容正文

windows

我的第一个项目（员工绩效管理系统步骤超级详细---未完待更...）

發布時間：2024/8/1 windows 42 豆豆

生活随笔收集整理的這篇文章主要介紹了我的第一个项目（员工绩效管理系统步骤超级详细---未完待更...）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一.分級建立項目包 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>  <title>注冊頁面</title>    <%@ include file="/web/header.jsp" %> </head> <body style="background: #f1f1f1"> <div class="window"> ?????<fieldset class="layui-elem-field" style="margin: 10px"> ???????<legend>注冊</legend> ???????<div class="layui-field-box"> ?????????<form class="layui-form layui-form-pane" > ???????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">賬號</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="text" name="code" required???lay-verify="required" ???????????????????????????placeholder="請輸入賬號"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">密碼</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="password" name="pass"??required??lay-verify="required" ???????????????????????????placeholder="請輸入密碼"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">姓名</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="text" name="name" required???lay-verify="required" ???????????????????????????placeholder="請輸入姓名"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="button" value="注冊"??class="layui-btn" lay-submit lay-filter="reg" > ?????????????????????????<input type="reset" value="重置"??class="layui-btn layui-btn-primary"> ??????????????????????</div> ??????????????????????<input type="button" value="返回登錄"??class="layui-btn" οnclick=""> ????????????????</div> ?? ??? ??? ??? ??? ? ????????????????<input type="hidden" name="action" value="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="注冊" class="layui-btn" 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==1){ ?????????????????????layer.msg("注冊成功") ????????????????}else if(data == "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==1){ ?????????????????????layer.msg("注冊成功") ????????????????}else if(data=="repeat"){ ?????????????????????layer.msg("注冊失敗，賬號重復") ????????????????}else{ ?????????????????????layer.msg("注冊失敗") ????????????????} ???????????} ???????????error:function(){// 異常處理 ????????????????alert("注冊失敗，賬號重復"); ???????????} ?????}); }); 5.使用工具類來簡化reg.jsp 頁面添加操作的代碼 header.jsp (將引用路徑進行封裝)  <% String app=request.getContextPath(); %> <meta charset="UTF-8"> <link rel="stylesheet" href="<%=app %>/web/base/css/base.css" > <link rel="stylesheet" href="<%=app??%>/web/base/layui/css/layui.css" > <script type="text/javascript" src="<%=app??%>/web/base/layui/layui.js" ></script>  <script> var base={ ???????????app:"${pageContext.request.contextPath}" ??????????? } </script> <script type="text/javascript" src="<%=app??%>/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 類

public class FmtRequest { ????? ????? ?????/** ??????* 根據傳過來的所有參數得到實體類的對象 ??????* 根據請求的參數情況反射實體類的對象???(請求的參數名與實體類的屬性名一致 ,并且一個參數名對應一個參數值 ) ??????* ??????* @param <T> 反射 ??????* @param req ??????* @param clazz ??????* @return ??????*/ ?????public static <T> T parseModel(HttpServletRequest??req,Class<T> clazz) { ???????????T obj = null; ???????????try { ????????????????obj = clazz.newInstance(); ???????????} catch (InstantiationException |??IllegalAccessException e) { ????????????????e.printStackTrace(); ????????????????return null; ???????????} ???????????Map<String, String[]> map = req.getParameterMap(); //??傳過來的所有參數 ???????????for (Entry<String, String[]> entry : map.entrySet())??{ ????????????????String name = entry.getKey(); ????????????????if("action".equals(name)) ?????????????????????continue; ????????????????try { ?????????????????????Field field =??clazz.getDeclaredField(name); ?????????????????????field.setAccessible(true); ?????????????????????field.set(obj,entry.getValue()[0]); ????????????????} catch (NoSuchFieldError | SecurityException |??NoSuchFieldException | IllegalArgumentException |??IllegalAccessException e) { ?????????????????????e.printStackTrace(); ????????????????} ???????????} ??????????? ???????????return obj; ?????} ????? ????? ?????/** ??????* 根據所傳過來的映射關系得到實體類對象 ??????* 根據映射關系反射得到實體類的對象 ??????* ??????* @param <T> ??????* @param req ??????* @param clazz ??????* @param fields key=屬性名???value=參數名 ??????*/ ?????private static <T> T parseModel(HttpServletRequest??req,Class<T> clazz,Map<String,String> fields) { ???????????T obj = null; ???????????try { ????????????????obj = clazz.newInstance(); ???????????} catch (InstantiationException |??IllegalAccessException e) { ????????????????e.printStackTrace(); ????????????????return null; ???????????} ???????????for (Entry<String, String> entry : fields.entrySet())??{ // 根據所傳過來的映射關系 ????????????????String name = entry.getKey();??// 得到實體類的屬性名 ????????????????String val =req.getParameter(entry.getValue());???// 得到實體類的參數名 ????????????????try { ?????????????????????Field field =??clazz.getDeclaredField(name); ?????????????????????field.setAccessible(true); ?????????????????????field.set(obj,val); ????????????????} catch (NoSuchFieldError | SecurityException |??NoSuchFieldException | IllegalArgumentException |??IllegalAccessException e) { ?????????????????????e.printStackTrace(); ????????????????} ???????????} ??????????? ???????????return obj; ?????} ????? ????? ????? ?????/** ??????* 將 ajax 請求進行封裝 ??????* @param wr ??????* @param val ??????*/ ?????public static void write(Writer wr,String val) { ???????????try { ????????????????wr.write(val); ????????????????wr.close(); ????????????????wr.flush(); ???????????} catch (IOException e) { ????????????????e.printStackTrace(); ???????????} ???????????wr = null; ??????????? ?????} } 7.通過應用FmtRequest 類簡化EmployeeServlet中的代碼簡化EmployeeServlet中的代碼 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); ??????????? ???????????// 利用FmtRequest類中 parseModel方法進行簡化 ???????????// 將請求當中的參數得到，映射到對應的實體類中。 ???????????EmployeeModel model =??FmtRequest.parseModel(req,EmployeeModel.class); ???????????return service.insert(model); ????? （6）實現員工登錄功能（主要完善業務邏輯） <input type="button" value="登錄" class="layui-btn" lay-submit??lay-filter="login" > 這里的login 決定了對應的js代碼怎么實現 <input type="hidden" name="action" value="login" > 這里的login 決定了servlet文件中的分支怎么實現 1. 創建登錄界面 <%@ page language="java" contentType="text/html; charset=UTF-8" ????pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head>  <title>登錄頁面</title>    <%@ include file="/web/header.jsp" %> </head> <body style="background: #f1f1f1"> <div class="window" > ?????<fieldset class="layui-elem-field" style="margin: 10px"> ???????<legend>注冊</legend> ???????<div class="layui-field-box"> ?????????<form class="layui-form layui-form-pane" > ???????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">賬號</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="text" name="code" required???lay-verify="required" ???????????????????????????placeholder="請輸入賬號"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">密碼</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="password" name="pass"??required??lay-verify="required" ???????????????????????????placeholder="請輸入密碼"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="button" value="登錄"??class="layui-btn" lay-submit lay-filter="login" > ?????????????????????????<input type="reset" value="重置"??class="layui-btn layui-btn-primary"> ??????????????????????</div> ??????????????????????<input type="button" value="返回注冊"??class="layui-btn" οnclick=""> ????????????????</div>  ????????????????<input type="hidden" name="action" value="login"??> ?????????</form> ???????</div> ?????</fieldset> ????? </div> <script type="text/javascript"> 調用servlet中的分支? formSubmit("login","/EmployeeServlet",'text',function(data){//console.log(data) ?????if(data==1){ ???????????layer.msg("登錄成功") ?????}else if(data=="repeat"){ ???????????layer.msg("登錄失敗，賬號重復") ?????}else{ ???????????layer.msg("登錄失敗") ?????} }) </script> </body> </html> 2. 在servlet中建立分支?? 一、創建login分支（1） ?@Override ?????protected void doPost(HttpServletRequest req,??HttpServletResponse resp) throws ServletException, IOException { ???????????String res = null; ???????????switch (req.getParameter("action")) { ????????????????case "reg": ?????????????????????res = reg(req); ?????????????????????break; ????????????????case "login": ?????????????????????res = login(req); ?????????????????????break; ???????????} ???????????// ajax 請求接收 ???????????// 利用FmtRequest 工具類中write方法進行簡化 ???????????FmtRequest.write(resp.getWriter(), res); ??????????? ?????} 二、生成對應的 login 方法（2） ?????private String login(HttpServletRequest req) { ???????????EmployeeModel model =??FmtRequest.parseModel(req,EmployeeModel.class); ???????????String res = service.login(model); ???????????return null; ?????} 實現后（7） ?????private String login(HttpServletRequest req) { ???????????EmployeeModel model = FmtRequest.parseModel(req,??EmployeeModel.class); ???????????String res = service.login(model); // res 就是EmployeeServiceImpl中 login方法中的 0、1、2 ???????????if ("1".equals(res)) { ????????????????req.getSession().setAttribute("user",??service.selectModel(model)); ???????????} ???????????return res; ?????} 3.先在IEmployeeService接口中創建用于登錄的方法參考文章地址：接口和抽象類詳解（接口繼承、實現接口、抽象類繼承）_lemo_ice的博客-CSDN博客_類繼承接口用到了抽象類的注入 --暫不確定自己理解的小明有添加的功能可以通過接口實現小明擁有按人名添加的功能小紅有添加的功能可以通過接口實現小明擁有按id添加的功能 IEmployeeService類（3） String login(EmployeeModel model); 實現后（6） /** ??????* 登錄功能 ??????* ??????* @param model ??????* @return String 0=賬號不存在???1=登錄成功???2=密碼錯誤 ??????*/ ?????String login(EmployeeModel model); 4.IEmployeeService接口新加了login方法它的實現類（EmployeeServiceImp）也需要對添加方法進行實現（重寫） EmployeeServiceImpl類（4） @Override ?????public String login(EmployeeModel model) { ???????????// TODO Auto-generated method stub ???????????return null; ?????} 實現后：（5） @Override ?????public String login(EmployeeModel model) { ???????????EmployeeModel mdb = selectModel(model); ???????????if (mdb == null) ????????????????return "0"; ???????????String pass = MD5.encode(model.getPass()); ???????????return mdb.getPass().equals(pass) ? "1" : "2"; ?????} 5. 將密碼MD5加密（此處在service中加密MD5）將注冊后加密結果和登錄時加密結果進行比較判斷是否正確注冊加碼 @Override ?????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"; ???????????model.setPass(MD5.encode(model.getPass())); ???????????return dao.insert(model) + "";?? ?????} 登錄加密 @Override ?????public String login(EmployeeModel model) { ???????????EmployeeModel mdb = selectModel(model); ???????????if (mdb == null) ????????????????return "0"; ???????????String pass = MD5.encode(model.getPass()); ???????????return mdb.getPass().equals(pass) ? "1" : "2"; ?????} 6.在登錄界面添加跳轉注冊界面，在注冊界面添加跳轉登錄界面注冊界面跳轉登錄界面?? ? html: <input type="button" value="返回登錄" class="layui-btn"??οnclick="toHref()"> javascript function toHref(){ ?????location.href = base.app + "/web/login.jsp"; } 登錄界面跳轉注冊界面 html: <input type="button" value="返回注冊" class="layui-btn"??οnclick="toHref()"> javascript function toHref(){ ?????location.href = base.app + "/web/reg.jsp"; } 簡化代碼在base.js 文件中添加 function toHref(url){ ?????location.href = base.app + url; } 修改注冊界面代碼 <input type="button" value="返回注冊" class="layui-btn"??οnclick="toHref('/web/reg.jsp')"> 修改登錄界面代碼 <input type="button" value="返回登錄" class="layui-btn"??οnclick="toHref('/web/login.jsp')"> （7）實現主界面功能 1.創建page文件夾（登錄之后的操作 --- 防盜鏈）? ? ? 2.從登錄界面跳轉（layui 彈出層） formSubmit("login","/EmployeeServlet",'text',function(data){//console.log(data) ?????if(data == 1){ ???????????layer.msg("登錄成功哦!!!",{time:1000},function(){ ????????????????toHref("/web/page/main.jsp") ???????????}) ?????}else if(data == 2){ ???????????layer.msg("登錄失敗,密碼錯誤!!!") ?????}else if(data == 0){ ???????????layer.msg("登錄失敗,賬號不存在!!!") ?????} }) 3.創建主界面（layui） <%@ 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> <body> <div class="layui-layout layui-layout-admin"> ??<div class="layui-header"> ????<div class="layui-logo layui-hide-xs layui-bg-black">員工績效管理系統</div> ???? ????<ul class="layui-nav layui-layout-left"> ?????? ??????<li class="layui-nav-item layui-show-xs-inline-block??layui-hide-sm" lay-header-event="menuLeft"> ????????<i class="layui-icon layui-icon-spread-left"></i> ??????</li> ?????? ??????<li class="layui-nav-item layui-hide-xs"><a href="">部門信息</a></li> ??????<li class="layui-nav-item layui-hide-xs"><a href="">員工信息</a></li> ??????<li class="layui-nav-item layui-hide-xs"><a href="">項目信息</a></li> ??????<li class="layui-nav-item"> ????????<a href="javascript:;">績效信息</a> ????????<dl class="layui-nav-child"> ??????????<dd><a href="">menu 11</a></dd> ??????????<dd><a href="">menu 22</a></dd> ??????????<dd><a href="">menu 33</a></dd> ????????</dl> ??????</li> ????</ul> ????<ul class="layui-nav layui-layout-right"> ??????<li class="layui-nav-item layui-hide??layui-show-md-inline-block"> ????????<a href="javascript:;"> ??????????<img src="<%=app %>/web/base/img/1.jpeg"??class="layui-nav-img"> ????????????用戶&nbsp[&nbsp&nbsp&nbsp${user.name}&nbsp&nbsp&nbsp] ????????</a> ????????<dl class="layui-nav-child"> ??????????<dd><a href="">修改個人資料</a></dd> ??????????<dd><a href="">修改個人密碼</a></dd> ??????????<dd><a href="">修改個人博客</a></dd> ????????</dl> ??????</li> ??????<li class="layui-nav-item" lay-header-event="menuRight"??lay-unselect> ????????<a href="javascript:;"> ??????????<i class="layui-icon layui-icon-more-vertical"></i> ????????</a> ??????</li> ????</ul> ??</div> ?? ??<div class="layui-side layui-bg-black"> ????<div class="layui-side-scroll"> ?????? ??????<ul class="layui-nav layui-nav-tree" lay-filter="test"> ????????<li class="layui-nav-item layui-nav-itemed"> ??????????<a class="" href="javascript:;">信息維護</a> ??????????<dl class="layui-nav-child"> ????????????<dd><a href="javascript:;"??data-url="/web/page/department/list.jsp"??class="site-demo-active">部門信息維護</a></dd> ????????????<dd><a href="javascript:;"??data-url="/web/page/employee/list.jsp"??class="site-demo-active">員工信息維護</a></dd> ????????????<dd><a href="javascript:;"??data-url="/web/page/employee/list.jsp"??class="site-demo-active">項目信息維護</a></dd> ????????????<dd><a href="javascript:;"??data-url="/web/page/department/list.jsp">績效信息維護</a></dd> ??????????</dl> ????????</li> ????????<li class="layui-nav-item"> ??????????<a href="javascript:;">menu group 2</a> ??????????<dl class="layui-nav-child">  ????????????<dd><a??href="javascript:openurl('/web/page/department/list.jsp');">list??1</a></dd> ????????????<dd><a href="javascript:;">list 2</a></dd> ????????????<dd><a href="">超鏈接</a></dd> ??????????</dl> ????????</li> ??????</ul> ????</div> ??</div> ?? ??<div class="layui-body"> ???? ????<iframe name="framA" width="99%" height="97%"></iframe> ??</div> ?? ??<div class="layui-footer"> ???? ??????有問題請聯系我們！0000-0000000 ??</div> </div> <script type="text/javascript"> //JS // 使用 H5（jQuery）提供的 data-url實現打開后顯示主體網頁?????data-url="/web/page/department/list.jsp" $('.site-demo-active').click(function(){ ?????window.open(base.app + $(this).data("url"),"framA") }) $('.site-demo-active').click() // 默認打開第一個 //  function openurl(url){ ?????window.open(base.app + url,'framA') } </script> </body> </body> </html> 4.主界面退出操作（layui）（1）.mian.jsp html <li class="layui-nav-item"> ???????????<a href="javascript:toLogout()">退出</a> </li> js function toLogout(){ ?????layerConfirm(function(){ ???????????toHref('/EmployeeServlet?action=logout') ?????},"您確定要離開了嗎？") } base.js function layerConfirm(func,title){ ?????layer.confirm(title ? title : "確定要進行該操作？",{ ???????????icon:3, ???????????title:"提示" ?????},func) } （2）.?EmployeeServlet 實現分支 ?????case "logout": ????????????????req.getSession().removeAttribute("user"); ????????????????resp.sendRedirect(req.getContextPath()+"/web/login.jsp"); ????????????????break; 5.防盜鏈的功能（UserFilter類來實現，用戶退出后或未登錄情況下，無法訪問page文件下的界面） @WebFilter(urlPatterns =??{"/web/page/*","/EmployeeServlet","/DepartmentServlet","/ProjectServlet","/ScoreServlet"}) public class UserFilter implements Filter { // 防盜鏈??確認當前地址欄用戶是否登錄 ?????@Override ?????public void doFilter(ServletRequest request,??ServletResponse response, FilterChain chain) ????????????????throws IOException, ServletException { ???????????HttpServletRequest req = (HttpServletRequest)??request; ???????????String action = req.getParameter("action"); ???????????if("reg".equals(action)||"login".equals(action)) { //??將注冊請求和登錄請求單獨放行 ????????????????chain.doFilter(request, response); ????????????????return; ???????????} ????????????Object user = req.getSession().getAttribute("user"); ????????????if (user == null) { ????????????????req.getRequestDispatcher("/web/login.jsp").forward(request,??response);// 進行頁面跳轉（請求轉發） ???????????} else ????????????????chain.doFilter(request, response); ?????} ????? } 6.? 右側邊欄操作展示功能 html <li class="layui-nav-item" lay-header-event="menuRight"??lay-unselect> ????????<a href="javascript:openRight();">請求處理 ??????????<i class="layui-icon layui-icon-more-vertical"></i> ????????</a>? </li> js function openRight(){ ?????layer.open({ ???????????type:1 ???????????,content:'<div style="padding:15px;">處理右側面板的操作</div>' ???????????,area:['260px','100%'] ???????????,offset:'rt'//右上角 ???????????,anim:5 ???????????,shadeClose:true ?????}); } 7.主界面主體查詢操作部分（layui 面板）（1）html 操作代碼面板上半部分 html： <div class="layui-collapse"> ??<div class="layui-colla-item"> ????<h2 class="layui-colla-title" >部門信息--查詢條件</h2> ????<div class="layui-colla-content layui-show"> ???????? ?????????<fieldset class="layui-elem-field layui-field-title"??style="margin: 10px"> ?????????????<legend>部門信息--查詢條件</legend> ?????????????<div class="layui-field-box"> ???????????????<form class="layui-form" > ?????????????????<div class="layui-form-item"> ????????????????????????????<label class="layui-form-label">編號</label> ???????????????????????<div class="layui-input-inline"> ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input type="text" name="code" placeholder="請輸入編號"??autocomplete="off" class="layui-input "> ????????????????????????????</div> ????????????????????????????<label class="layui-form-label">名稱</label> ???????????????????????<div class="layui-input-inline"> ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input type="text" name="name"??placeholder="請輸入名稱" autocomplete="off" class="layui-input "> ????????????????????????????</div> ?????????????????????????????         ????????????????????????????<span> ????????????????????????????????<input type="button" value="查詢" class="layui-btn layui-btn-sm" lay-submit lay-filter="search"??> ???????????????????????????????<input type="reset" value="重置"??class="layui-btn layui-btn-sm layui-btn-primary"> ????????????????????????????????<input type="button" value="添加" class="layui-btn layui-btn-sm" lay-submit lay-filter="search"??> ????????????????????????????</span> ??????????????????????</div>   ???????????????</form> ?????????????</div> ???????????</fieldset> ????</div> ??</div> </div> 面板下半部分 HTML：  <table class="layui-table">  ?????<colgroup> ???????????<col width="10&" ><col width="15%" ><col width="15%"??><col width="20%" ><col width="40%" > ?????</colgroup> ?????<thead> ???????????<tr> ???????????<th>序號</th><th>編號</th><th>名稱</th><th>電話</th><th>操作</th> ???????????</tr> ?????</thead> ?????<tbody> ??????????? ?????</tbody> ????? </table> <script type="text/javascript"> // base文件要先在base.js文件中定義出來 // var element =layui.element; // 折疊面板不好用記得用渲染 // element.render(); </script> （2）JavaScript操作代碼 script 實現部分代碼解釋： //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) //???}) //} // 調用了base.js 文件??取出查詢行中（ <input type="button"??value="查詢" class="layui-btn layui-btn-sm" lay-submit??lay-filter="search" >）的search //??此處 search是網頁查詢行的方法? ? //? EmployeeServlet是實現業務邏輯的類 //??json??是請求傳遞的參數類型以json形式傳遞 formSubmit('search','/EmployeeServlet','json',function(data){}) formSubmit 類比base.js 文件（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="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='重置' ]").click(); ?????$("input[value='查詢' ]").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:" class="layui-btn layui-btn-sm" >刪除</a> ???????????<a href="javascript:" class="layui-btn layui-btn-sm" >修改</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="添加" class="layui-btn layui-btn-sm"??οnclick="openAdd()" > 添加? ?（3）在list.jsp 文件中給添加按鈕創建跳轉方法? // 實現一開的主體界面不用點查詢就可以顯示數據???為后續的添加操作和??刪除操作奠基（相當于刷新吧） function refresh(){ ?????$("input[value='重置' ]").click(); ?????$("input[value='查詢' ]").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="關閉" class="layui-btn"??οnclick="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 class="layui-elem-field" style="margin: 10px"> ???????<legend>部門添加界面</legend> ???????<div class="layui-field-box"> ?????????<form class="layui-form layui-form-pane" > ???????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">編號</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="text" name="code" required???lay-verify="required" ???????????????????????????placeholder="請輸入編號"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">名稱</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="text" name="name" required???lay-verify="required" ???????????????????????????placeholder="請輸入名稱"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">電話</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="text" name="tel" required???lay-verify="required" ???????????????????????????placeholder="請輸入聯系方式"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ?????????????????<div class="layui-input-black"> ?? ??? ??? ??? ??? ?? ? // 添加動態事件綁定? ?1 ?????????????????????<input type="button" value="確定"??class="layui-btn" lay-submit lay-filter="add" > ?????????????????????????<input type="reset" value="重置"??class="layui-btn layui-btn-primary"> ?????????????????????????<input type="button" value="關閉"??class="layui-btn" οnclick="layerClose()" > ??????????????????????</div> ????????????????</div> ???????????????? ????????????????<input type="hidden" name="action" value="reg" > ?????????</form> ???????</div> ?????</fieldset> ????? ????? <script type="text/javascript"> // 2 實現添加操作的JavaScript代碼 formSubmit("add","/DepartmentServlet",'text',function(data){console.log(data) ?????if(data==1){ ???????????layer.msg("添加成功",layerClose) ?????}else if(data=="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}}')"??class="layui-btn layui-btn-sm layui-btn-danger " > ????????????????<i class='layui-icon layui-icon-delete'></i> ???????????</a> ???????????<a href="javascript:" class="layui-btn layui-btn-sm"??>修改</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 == 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 == 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}}')"??class="layui-btn layui-btn-sm layui-btn-danger " > ????????????????<i class='layui-icon layui-icon-delete'></i> ???????????</a> ??????????<a href="javascript:openUpd('{{d.code}}')" class="layui-btn??layui-btn-sm" >修改</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 class="layui-elem-field" style="margin: 10px"> ???????<legend>部門修改界面</legend> ???????<div class="layui-field-box"> ?????????<form class="layui-form layui-form-pane" > ???????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">編號</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="text" name="code" required???lay-verify="required" ???????????????????????????placeholder="請輸入編號"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">名稱</label> ?????????????????<div class="layui-input-inline"> ?? ??? ??? ?? ??? ??? ?? ?????????????????????<input type="text" name="code" required???lay-verify="required" readonly ???????????????????????????placeholder="請輸入編號"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ??????????????????????<label class="layui-form-label">電話</label> ?????????????????<div class="layui-input-inline"> ?????????????????????<input type="text" name="tel" required???lay-verify="required" ???????????????????????????placeholder="請輸入聯系方式"??autocomplete="off" class="layui-input"> ??????????????????????</div> ????????????????</div> ????????????????<div class="layui-form-item"> ?????????????????<div class="layui-input-black"> ?????????????????????<input type="button" value="確定"??class="layui-btn" lay-submit lay-filter="get" > ?????????????????????????<input type="reset" value="重置"??class="layui-btn layui-btn-primary"> ?????????????????????????<input type="button" value="關閉"??class="layui-btn" οnclick="layerClose()" > ??????????????????????</div> ????????????????</div> ???????????????? ????????????????<input type="hidden" name="action" value="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==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==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? 可以

? ??dataType : "json",? ? 不可以--- 原因是EmployeeServlet 中返回類型不對應，不是json類型，暫時采用異常拋出的方式 dataType：'text' 只能是文本 dataType：'json' 可以是文本也可以是json 網上尋找的方法：通過建立異常拋出將錯誤信息展示出來（只能是湊合，不嚴謹 -- 屬于只能是勉強看上去是正確的！） function ajax(url,field,func){ ?????//console.log(field) ?????$.ajax({//四個屬性一個方法 ???????????url : base.app + url, ???????????type : "post", ???????????data : field, ???????????//dataType : "json",//text / json ???????????success : func, ? ? ? ? ?error:function(){// 異常處理 ? ? ? ? ? ? ? alert("注冊失敗，賬號重復"); ? ? ? ? ?} ??????????? ?????}); } 后來采用： 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 ?????}); } 2.使用請求轉發的方式實現回顯（get2）方法? ?未實現報方法不可用五、已解決錯誤點判斷注冊輸入賬號是否存在? 老師用的是反射? EmployeeDaoImpl類中? //???private static String cols = "code,name,pass"; ?????private static String cols =??"code,name,pass,code_dept,image"; ?????// 此處的數據庫表字段在方法中可以不使用某一個，但是不能在方法中使用沒有的表字段控制臺報 SQL語句錯誤? ?code=‘網頁你輸入的數’ 關于字符串拼接（沒搞明白）===》（苦思冥想終于解決，但是原因居然是因為空格? ，append的空格沒對起來? ? 還要記得里面有符號時要加轉義字符? ?\? ? ?重要！！！！！重要！！！！? 重要！！！！） StringBuffer sql = new StringBuffer("select id,code,name,tel??from ").append(table); 不可以（沒看出為什么來） StringBuffer sql = new StringBuffer("select id,code,name,tel??from ").append(table).append(" ");? 改成這樣就可以了? ? append 拼接時一定不要忘了語句間的空格（切記！！！）? ?不要忘了空格（重要重要！！！）? ?不要忘了空格！！！? ?不要忘了空格！！！不要忘了空格！！！不要忘了空格！！！ ??????????? ? StringBuffer sql = new StringBuffer("select??id,code,name,tel from department ");? 可以 append? 未解之謎（不是未解了，搞定了！！！）為什么?StringBuffer sql = new StringBuffer("select id,code,name,tel??from ").append(table); 取到的值為空? 但是StringBuffer sql = new StringBuffer("select??id,code,name,tel from department "); 就能取到? 初步懷疑是因為 JDBCUtil工具類中的selectList遍歷有問題五、NullPointerException 有可能是緩存的問題 1. 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 詳解??Eclipse debug：F5、F6、F7、F8 作用_chao430的博客-CSDN博客_debug f5 f6 f7 f8

總結

以上是生活随笔為你收集整理的我的第一个项目（员工绩效管理系统步骤超级详细---未完待更...）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： vbs脚本截取字符
下一篇：惠普服务器做虚拟化,节省成本立竿见影惠

windows

我的第一个项目（员工绩效管理系统 步骤超级详细---未完待更...）

總結

我的第一个项目（员工绩效管理系统步骤超级详细---未完待更...）