Mybatis框架学习笔记(5)

您所在的位置：网站首页 › sql查两个表的关联查询怎么查 › Mybatis框架学习笔记(5)

Mybatis框架学习笔记(5)

2024-07-15 14:24| 来源: 网络整理| 查看: 265

之前在第四次笔记中完成了;对于关联查询的情况 Mybatis框架学习笔记(4)

当然,之前的数据基本都在控制台显示,那么我想让它显示到前端的页面,怎么去完成呢;

文章目录 1.首先解决一个问题;之前忘记创建web项目;怎么把普通的文件夹标记为能被识别的web文件夹2.员工查询展示,以及在搜索框输入Id后根据Id查询员工信息3.部门信息查询(查询显示所有部门,且显示员工信息);(根据输入框的Id查询部门的信息)

1.首先解决一个问题;之前忘记创建web项目;怎么把普通的文件夹标记为能被识别的web文件夹

首先得去找存放web文件的文件夹了;

啊这,之前创建这个项目的时候,没有选择是web项目,忘记了…

在这里插入图片描述

那么,就得手动添加创建了; 在这里添加创建

在这里插入图片描述

但是,目前它没在src目录下的main目录在这里插入图片描述

手动,搬过去,怎么说; 它的标记好像没了,变成了一个普通文件夹; 在这里插入图片描述

当然,为了让它和标准创建的web项目相同,我把文件夹web的名字改为webapp;也用不到jsp文件,那就删掉; 在这里插入图片描述

那么,首先得让它恢复标记; 在文件处点击项目结构;

在这里插入图片描述

这两处的路径需要手动改一下;双击文件,进行修改;

在这里插入图片描述

结束

在这里插入图片描述

这时,发现项目就已经被标记好了;

在这里插入图片描述

当然,要部署web项目,先去配置服务器在这里插入图片描述

在这里插入图片描述

然后,先去pom.xml文件导入需要的依赖jar坐标

org.mybatis mybatis 3.4.2 mysql mysql-connector-java 8.0.22 log4j log4j 1.2.17 junit junit 4.13 test com.google.code.gson gson 2.8.6 javax.servlet javax.servlet-api 4.0.1 provided

在xiaozhi包下创建servlet包; 在前几次的整理测试时,注意到,调用公共类的这部分代码;以及调用持久层的方法;还是比较多的, 若是直接放在servlet层中去直接写的话;也是可行的;;但是在项目的整体架构上来看,这个耦合度就比较高;那么为了能尽量降低耦合度;就得在持久层(dao数据交互访问层)和servlet(控制层)之间加一层(服务层service层);就是说,让持久层和控制层尽量不要直接接触, 比如说你要去租房子;一般来说;你不会直接去和房东进行沟通的;而是去找中介,然后中介在你和房东之间进行沟通;那么,添加的这个服务层就相当于一个中介;

在这里插入图片描述

在xiaozhi包下创建service包;

2.员工查询展示,以及在搜索框输入Id后根据Id查询员工信息

OK,查询员工的话,展示比较简单;那就先做员工的查询展示; mapper层的接口和配置文件这里就不重复去写了; Mybatis框架学习笔记(4)–>之中有整理

先在webapp文件夹下创建一个js文件夹;把jquery.1.8.3.min.js文件放入;

当然,先去创建一个简易的字符编码过滤器; 在xiaozhi包下创建filter包,创建EncodingFilter,进行字符编码过滤;

package com.xiaozhi.filter; import javax.servlet.*; import java.io.IOException; /** * @author by CSDN@小智RE0 * @date 2021-10-30 15:20 */ public class EncodingFilter implements Filter{ String encode; @Override public void init(FilterConfig filterConfig) throws ServletException { //接收初始化参数; encode = filterConfig.getInitParameter("encode"); } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { System.out.println("字符编码过滤中......................."); servletRequest.setCharacterEncoding(encode); filterChain.doFilter(servletRequest,servletResponse); } @Override public void destroy() { } }

在webapp下的WEB-INF的web.xml中配置过滤器;

EncodingFilter com.xiaozhi.filter.EncodingFilter encode utf-8 EncodingFilter /do/*

在service包下创建EmployeeService;员工类的服务层;

package com.xiaozhi.service; import com.xiaozhi.mapper.EmployeeMapper; import com.xiaozhi.pojo.Employee; import com.xiaozhi.utils.MyBatisUtils; import org.apache.ibatis.session.SqlSession; import java.util.List; /** * @author by CSDN@小智RE0 * @date 2021-10-29 21:55 * 员工类的服务层 */ public class EmployeeService { //查询所有的员工; public List getAllEmployees(){ //调用工具类; SqlSession sqlSession = MyBatisUtils.getSqlSession(); //获取代理对象; EmployeeMapper mapper = sqlSession.getMapper(EmployeeMapper.class); //调用方法; List allEmp = mapper.getAllEmp(); //关闭; sqlSession.close(); //传递到控制层; return allEmp; } //根据Id查询员工; public Employee getEmpById(Integer id){ //调用工具类; SqlSession sqlSession = MyBatisUtils.getSqlSession(); //获取代理对象; EmployeeMapper mapper = sqlSession.getMapper(EmployeeMapper.class); //调用方法; Employee employee = mapper.getEmpById(id); //关闭sqlSession; sqlSession.close(); return employee; } }

在servlet包下创建EmployeeServlet,获取前端的参数;这里会调用服务层的方法进行处理,

package com.xiaozhi.servlet; import com.google.gson.Gson; import com.xiaozhi.pojo.Employee; import com.xiaozhi.service.EmployeeService; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.util.List; /** * @author by CSDN@小智RE0 * @date 2021-10-29 21:56 * 员工管理的servlet处理 */ public class EmployeeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("-----在员工管理请求数据---"); PrintWriter out=null; //获取到标记参数; String mark = req.getParameter("mark"); //查询所有的员工 if(mark.equals("empList")){ try { //请求编码;响应解码; resp.setContentType("text/html;charset=utf-8"); //会以流的方式返回; out = resp.getWriter(); //这里会调用服务层进行处理; EmployeeService employeeService = new EmployeeService(); List allEmployees = employeeService.getAllEmployees(); //控制台输出测试; allEmployees.forEach(System.out::println); //不为空就发出去; if(!allEmployees.isEmpty()){ //以json格式发送到前端页面进行响应; out.print(new Gson().toJson(allEmployees)); }else { out.print(0);//-->抱歉,暂时没有员工 } } catch (IOException e) { e.printStackTrace(); out.print(500); } } //根据Id查询员工; else if(mark.equals("getEmpById")){ try{ //请求编码;响应解码; resp.setContentType("text/html;charset=utf-8"); //会以流的方式返回; out = resp.getWriter(); //获取传递的Id; String empId = req.getParameter("empId"); //这里会调用服务层进行处理; EmployeeService employeeService = new EmployeeService(); //根据ID查询员工; Employee emp = employeeService.getEmpById(Integer.parseInt(empId)); //控制台输出测试; System.out.println(emp); //不为空才发出去; if(emp!=null){ //以Json字符串格式返回; out.print(new Gson().toJson(emp)); }else { out.print(0);//-->抱歉,员工不存在 } }catch (Exception e){ e.printStackTrace(); out.print(500); } } } }

当然,还要在webapp下的WEB-INF的web.xml中配置servlet;

empServlet com.xiaozhi.servlet.EmployeeServlet empServlet /do/emp

在webapp文件夹下创建index.html,一个简易的跳转首页;

DOCTYPE html> 简易首页员工列表部门列表

员工的展示页面;

在webapp新建的employee.html作为员工的展示页面

这个页面就比较粗糙了

DOCTYPE html> 员工列表 //页面打开时发送请求; $(function () { $.get("do/emp", {mark: "empList"}, function (res) { //测试获取的数据; //console.log(res) if(res==500){ alert("抱歉,服务器出了点问题"); }else if(res==0){ //弹框提示; alert("抱歉,暂时没有员工!") }else { //拼接存入表格; var str2=""; for (var i = 0; i 编号员工姓名员工性别所属部门操作人

展示效果; 我在做这个显示列表时,给tr标签都加了一个类名allEmpClass

在这里插入图片描述

点击搜索时,会把之前的全部内容给清空;也就是说,会把类名class为allEmpClass的行清空;然后还在这时给查询到的显示的指定员工那行的tr标签携带定义了一个类名class为 oneEmpClass;

所以还要考虑到还想看全部的员工;那么我就添加了一个显示全部员工的按钮,比较粗糙了; 直接用location的刷新函数reload()把页面重新刷新了一次,然后再次请求查询全部的员工;

在这里插入图片描述

然后,在查不到员工的情况的时候;

当时做的时候,考虑的是,

删除所有显示的员工;就是清空定义了类名class为allEmpClass的tr标签;删除之前已经查询到的信息;也就是说,我要把之前可能查到的员工那一行信息删除掉 ;也就是类名class为oneEmpClass的tr标签;然后在表格上显示提示信息的字符串;

但是,经过频繁的测试;(先查询能查到的,然后查询查不到的;…往返试试有什么bug;)就是数据会覆盖; 暂时没想到怎么解决;

所以,就先用alert("该员工不存在!!!");的弹框进行提示; 然后效果就是,弹框提示; 还可以删除之前查询的存在的员工数据信息;

在这里插入图片描述

然后,这个刷新按钮就比较普通了;哈哈

在这里插入图片描述

3.部门信息查询(查询显示所有部门,且显示员工信息);(根据输入框的Id查询部门的信息)

先在service包下创建DeptService部门类服务层;

package com.xiaozhi.service; import com.xiaozhi.mapper.DeptMapper; import com.xiaozhi.pojo.Dept; import com.xiaozhi.utils.MyBatisUtils; import org.apache.ibatis.session.SqlSession; import java.util.List; /** * @author by CSDN@小智RE0 * @date 2021-10-29 21:54 * 部门类的服务层 */ public class DeptService { //查询所有的部门;会包括部门的员工; public List getAllDept(){ //调用工具类; SqlSession sqlSession = MyBatisUtils.getSqlSession(); //获取代理类对象; DeptMapper mapper = sqlSession.getMapper(DeptMapper.class); //调用方法; List allDept = mapper.getAllDept(); //关闭sqlSession; sqlSession.close(); return allDept; } //根据Id查询部门; public Dept getDeptById(Integer id){ //调用工具类; SqlSession sqlSession = MyBatisUtils.getSqlSession(); //获取代理类对象; DeptMapper mapper = sqlSession.getMapper(DeptMapper.class); //调用方法; Dept deptById = mapper.getDeptById(id); //关闭sqlSession; return deptById; } }

servlet包下创建DeptServlet,处理数据;

package com.xiaozhi.servlet; import com.google.gson.Gson; import com.xiaozhi.pojo.Dept; import com.xiaozhi.service.DeptService; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.util.List; /** * @author by CSDN@小智RE0 * @date 2021-10-29 21:55 * 部门类的servlet层处理 */ public class DeptServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out=null; //获取到标记参数; String mark = req.getParameter("mark"); //查询所有的部门; if(mark.equals("deptList")){ try{ //请求编码;响应解码; resp.setContentType("text/html;charset=utf-8"); //会以流的方式返回; out = resp.getWriter(); //调用; DeptService deptService = new DeptService(); List allDept = deptService.getAllDept(); //控制台输出; allDept.forEach(System.out::println); //不为空就响应; if(!allDept.isEmpty()){ //以json格式的字符串返回; out.print(new Gson().toJson(allDept)); }else { out.print(0);//->抱歉,部门不存在; } }catch (Exception e){ e.printStackTrace(); out.print(500); } } //根据ID查询部门; else if(mark.equals("getDeptById")){ try { //请求编码;响应解码; resp.setContentType("text/html;charset=utf-8"); //会以流的方式返回; out = resp.getWriter(); //获取传递的Id, String deptId = req.getParameter("deptId"); System.out.println("--测试->"+deptId); //调用; DeptService deptService = new DeptService(); Dept deptById = deptService.getDeptById(Integer.parseInt(deptId)); //若存在就响应数据; if(deptById!=null){ //以JSon字符串的格式返回; out.print(new Gson().toJson(deptById)); }else { out.print(0);//->抱歉,没有部门; } }catch (Exception e){ e.printStackTrace(); out.print(500); } } } }

需要在WEB-INF下的web.xml配置servlet

deptServlet com.xiaozhi.servlet.DeptServlet deptServlet /do/dept

刚才的员工查询是单个数据;而部门查询的话,还需要显示部门下的员工姓名; 所以在前端表格页面需要两层循环存放数据;

在webapp文件夹下创建dept.html,作为部门展示页面

DOCTYPE html> 部门列表 //页面加载时,就会显示所有的信息; $.get("do/dept",{mark:"deptList"},function (res){ //测试; //console.log(res) if(res==500){ alert("抱歉,服务器出了点问题"); }else if(res==0){ //弹框提示; alert("抱歉,暂时没有部门!") }else{ //拼接字符串; 这里会为这些行加上类名信息; //需要两层循环取到员工的姓名信息; var str=""; for (var i = 0; i ; ; ; ; ; ; ; 编号部门名称操作人部门员工

显示页面

同样地,我在拼接这些表格行的时候,给他们的tr标签定义共同的class类名为allDeptClass; 方便统一操作; 然后,由于一次性的查询到的部门对象中包含有员工的集合;所以要双层循环取到里面的员工姓名;

在这里插入图片描述

然后就是这个搜索框; 先说能查到部门的情况;

在显示数据之前,会清空class类名为allDeptClass的tr标签行;也就是清空数据; 当然还要考虑到用户在连续查询两次或多次的情况; 所以还要清除之前查询的数据; 那么,在显示这个查询数据的时候,我就给他定义了class类名为oneDeptClass; 查询的时候还会清除class类名为oneDeptClass的tr标签行

为啥要定义类名呢?;这个;我试过定义Id,但是;这个所谓的清空其实不是清空所有,而是清空里面的内容;也就是说结构还在;要是定义Id的话,我去调用empty()函数清空,由于Id是唯一的;它就只能清除出现的第一个;看起来只是一行数据,其实已经不知不觉存了多行tr标签;

在这里插入图片描述