一、设计流程

  1. 采用分层架构: 基于接口
  • 表现层servlet| :主要是用于处理前后端的请求和响应
  • 业务层service :处理业务逻辑
  • 持久层dao :与数据库进行交互
  1. 多对一的关系.(表与表之间的关系)

在数据库中要创建员工表和部门表(多个员工会对应一个部门)
主表与从表的关系。

  1. 技术栈：servlet + jdbc + mysq1 + jsp+jstl + js + jquery+ajax

处理前后端逻辑 +链接数据库+数据库+前端数据渲染+数据规范化显示+前端业务逻辑+简化前端业务逻辑+ajax向后端提交数据

二、项目搭建

2.1 项目搭建流程
  1. 创建web工程，集成tomcat服务器（部署三部曲）。

  2. 创建对应的表，建立表与表的之间的关系（员工表和部门表、用户表）

    数据库中不采用驼峰命名，而是采用下划线连接。采用小写就行。

  3. 导入对应的第三方资源，我们要给工程导入第三种资源，还要给tomcat服务器也进行一资源的导入。导入资源时注意一方面要导入到类路径下，此外如果资源识别不成功则还需要导入到tomcat服务器下。

  4. 搭建分层架构 （符合企业规范 ）每一层去做指定的事情。

2.2 搭建分层架构（基于接口）
  • 表现层servlet| :主要是用于处理前后端的请求和响应
  • 业务层service :处理业务逻辑
  • 持久层dao :与数据库进行交互

image.png
创建注解：

  1. pojo包下对应创建所有表对应的实体类。

    1. 注意两个表的实体类的聚合问题（一个类内有一个属性为另一个类的实体        对象）

  2. 持久层：负责数据库相关操作的dao包对应的接口以及这个接口对应的实现注意创建

  • 1、持久层接口中也需要 创建 （getEmpList）来获取指定的数据
  • 2、在持久层的实现类来实现持久层的 （getEmpList）方法
  • 3、持久层写入jdbc的代码
  1. 业务层：负责业务逻辑相关操作的servic e包对应的接口以及这个接口对应的实现类；
  • 1、调用持久层:创建持久层类的接口对应的实体
  • 2、在业务层的接口中可以根据表现层的需要创建对应的方法
  • （getEmpList）。
  • 3、在业务层的实现类创建业务层接口对应的 （getEmpList）方法
  • 并通过在实现类的方法中通过return empDao.getEmpList();来向表现层返
  • 回持久层的获取的数据。
  1. 表现层：servlet 类继承HttpServlet
  • 1、重写·dopost getpost方法；
  • 2、创建一个业务层的实例； 实现对业务层的引用，通过该实例直接访问业务层。
  • 3、根据业务需要创建一个方法（getEmpList）；在改方法内通过业务层的实类名调用业务层的方法来借助业务层获取持久层的数据。
  • 4、将数据存到域中。
  1. 以及工具类utils包含jdbc工具类
  2. 在web.xml中注册资源路径；

2.3 设计前端（了解设计即可）

image.png

  1. 导入css样式；
  2. 导入jquery控件；
  3. 编写jsp页面

2.4 编写jsp

  1. 按路径引入jstl、css样式和jQuery控件

    1. <%--引入jstl标签库--%>
    2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    4.  <%
    5.     //获取当前工程的绝对路径
    6.     String path = request.getContextPath();
    7.     %>
    9.    <html>
    10.      <head>
    11.        <title>员工列表</title>
    12.      </head>
    13.      <%--引入css样式--%>
    14.        <link rel="stylesheet" href="<%=path%>/css/style.css">
    16.        <%--引入jquery控件--%>
    17. <script src="<%=path%>/jquery/jquery-1.7.2.js"></script>

三、添加功能

3.1 添加”添加员工“功能

设计： 完成部门下拉列表数据的追加 通过ajax向后端提交数据 -ajax是一个异步提交的技术 -可以局部向服务端发送请求

  1. 在jsp中添加功能按键；

    1. <td>
    2. <input type="button" value ="添加学生">
    3. </td>

  2. 通过jquery绑定功能按键，定义按键对应函数操作跳转到add.jsp页面

    1. $(function(){
    2.  $("[value = '添加学生']")
    3. })

    通过location可以跳转到任意页面 herf=”地址“

  3. 在emp_add.jsp编写设计中：

  • 首先按照添加员工的界面要求，设计界面。

    4. ajax相关操作

  • 在添加ajax服务，完成前端数据向后端（服务端）的回传操作。 ```html $(function(){ $.ajax({

    1.   url:"资源路径" ,
    2.   //注意属性之间用逗号隔开
    3.   //提交的方式
    4.   type:"post",
    5.   //提交到后端的数据
    6.   data:{},
    7.   //预期服务器会返回的数据
    8.   dataType:"json"
    9.       //请求成功后的回调函数,可以通过参数接收
    10.       sucess:function(obj){
    11.          //如果导入json串的方式传递数据obj可以之间看作集合对象操作
    12.       for(let i in obj){
    13.       obj[i].属性;   
    14.       //在select标签内追加option
    15.       //append可以在标签内部追加新的标签
    16.       $("select").apppend("<option>"+obj[i].属性+"</option>")
  1.         }
  2. })

})

  2. - 后端设计完成flag = finddeptall对应的逻辑判断，在设计对应方法以及向后面的逐级回调，通过持久层查询数据。
  3. <a name="K9mL9"></a>
  4. ###### 5. json数据格式
  6. - 导入fastjson的jar包，通过json风格来传递数据，可以把之前查询到的数据转为json串（json数据格式）将数据响应到前端在把文本格式/集合格式的转化为json串。
  7. ```html
  8. String string = JSON.toJSONString(集合对象)；

6. 表单序列化提交后端

获取的数据提交到服务端，通过

将提交的数据扩起来，之后直接引用该
表单。

  1.   //提交到后端的数据
  2.         data:$("form").serialize(),

注意在该部分,表单序列化。

四、完成数据的修改操作

4.1 数据的回显
  1. 在jsp中，由需要执行的操作定义的函数(按键绑定的函数操作)，在body

js中进行如下操作。

  1. function 需要执行函数名（参数）{
  2.      location.herf="跳转到servlet层操作"  
  3. }
  1. 通过调用持久层/业务层的方法获取包含所需数据的实例。
  2. jquery来操作数据来完成数据的回显

回显多选框或者下拉列表，相对较难。
先获取数据，遍历单选框，进行判断

  1. //获取遍历的数据；
  2. let sex = ${emp.sex};
  3. $("[name='sex']").each(function(){
  4.     //this指的是当前遍历到的对象；
  5.     if(this.value ==sex)
  6.     this.checked = true; 
  8. })

5. 数据无法正常回显问题

常见bug修复：
数据库中的数据调用出来，放在公共的区域，用来回显，但是jdbc会将开辟后的资源直接关闭，这些资源只有等垃圾回收机制回收过空间后，才能重新开辟空间。关闭到重新开辟空间这段时间会导致数据查询数据不到。

  1. 延时操作
    1. settimeout( $.ajax({
    2. })  
    3.         ,2000)
    4. //注意写入延迟时间的参数位置；

五、批量删除

5.1 全选/全不选操作

  1. 设置全选框

    全选/全不选

  2. id选择器绑定事件 ```java $(“#checkbox”).click(function()){ //获取当前多选框对象的状态 let checked = this.checked; //获取所有的多选框 $(.cks”).each(function(){ $(this).prop(“checked”,|this.checked
    })

})

  3. 3. 批量删除操作
  4. ```java
  5. //首先绑定按键
  6. $("[value ='批量删除']")。click(function(){
  7.    //获取被选中的多选框,组合选择器
  8.   if($(".cks:checked).length >0){
  9.        if(confirm("是否真的要删除，请谨慎考虑？")){
  10.            lrt ids = "";
  11.            $(".cks:checked").each(function(){
  12.               ids += ","+$(this).val()
  13.            })
  14.                ids = ids.substring(1)
  15.         //向后端提交需要删除的数据id 
  16.         $.ajax({
  17.         url:"资源路径" ,
  18.         //提交的方式
  19.         type:"post",
  20.         //提交到后端的数据
  21.         data:{ids:ids},
  22.         //预期服务器会返回的数据
  23.         dataType:"json"
  24.             //请求成功后的回调函数,可以通过参数接收
  25.             sucess:function(obj){
  26.              if(obj=="true"){
  27.                  alert("删除成功")
  28.                  location.herf == "跳转资源路径"
  29.              }else{
  30.                   alert("删除失败")
  31.              }
  32.             }
  33.     })   
  35.        }
  36.        }
  37. })
  1. 注意，删除操作时注意sql语句中

    delet from table in(?) 错误写法 delet from table in(“+ids+”) 正确写法