功能实现
以Employee实例为例
具体的字段： emp_id , emp_name , age , gender , email
对应属性： empId , empName , age , gender , email
列表功能
实现详解：
- 当服务器启动时，首先加载出index.html页面，我们进行点击进入列表页面时。此时前端就会发送一个请求到我们的controller层。
- 此时controller层组件就会匹配相对应的控制器方法，我们的请求为“/employee” ， 匹配到后控制层就进行操作
- 因为控制层实现了service的自动装箱，所以通过就可以直接调用service层的方法处理需求
- 同时因为我们再Spring.xml中实现了对mapper接口的扫描，我们就不需要再进行调用DAO层，直接就可以操作数据库(已经通过SqlSession创建代理实现类对象)
- 同样的service层实现了对mapper的自动装箱，此时就可以直接调用mapper接口中的方法，对数据库进行操作，实现查询所有用户的功能返回给Controller层的方法中
- 在控制层我们就可以调用Model来实现数据向request域对象中共享数据
model.addAttribute("list",list);
最后将数据返回到前端
前端代码：
//Controller层 @RequestMapping(value = "/employee",method = RequestMethod.GET) public String getAllEmployee(Model model){ List<Employee list = employeeService.getAllEmployee(); model.addAttribute("list",list); return "employee_list"; } //Service层 @Autowired private EmployeeMapper mapper; @Override public List<Employee getAllEmployee() { return mapper.getAllEmployee(); } //mapper接口 List<Employee getAllEmployee(); //EmployeeMapper.xml <select id="getAllEmployee" resultType="Employee" select emp_id, emp_name,age,gender,email from t_emp </select
分页功能
实现详解：
- 前面的步骤基本一样，前端发送请求到控制器层，Controller匹配相应的控制器方法进行实现
- 在前端传回的pageNum时，我们需要将Num交给service层，在service层开启分页功能，然后继续再service层查询到所有员工信息，再将数据交给PageInfo，通过他来获取分页相关的数据，最后返回pageInfo对象
- 最后将数据通过Model共享到Request域中，实现数据分页的显示
前端代码
<body <table <tr <th colspan="6"员工列表</th </tr <tr <th编号</th <th姓名</th <th年龄</th <th性别</th <th邮箱</th <th操作</th <td<a th:href="@{/to/add}"添加员工</a</td </tr <tr th:each="employee : ${page.list}" <td th:text="${employee.empId}"</td <td th:text="${employee.empName}"</td <td th:text="${employee.age}"</td <td th:text="${employee.gender}"</td <td th:text="${employee.email}"</td <td <a th:href="@{'/delete/'+${employee.empId}}"删除</a <a th:href="@{'/update/'+${employee.empId}}"修改</a </td </tr </table <div style="text-align: center" <!-- <a th:if="${page.hasPreviousPage}" th:href="@{/employee/page/1}"首页</a-- <!-- <a th:if="${page.hasPreviousPage}" th:href="@{'/employee/page/' + ${page.prePage}}"上一页</a-- <span th:if="${page.hasPreviousPage}"<a th:href="@{/employee/page/1}"首页</a <a th:href="@{'/employee/page/'+${page.prePage}}"上一页</a </span <span th:each="num : ${page.navigatepageNums}" <a th:if="${page.pageNum==num}" th:href="@{'/employee/page/'+${num}}" th:text="'['+${num}+']'" style="color:#d51313;"</a <a th:if="${page.pageNum!=num}" th:href="@{'/employee/page/'+${num}}" th:text="${num} "</a </span <span th:if="${page.hasNextPage}" <a th:href="@{'/employee/page/'+${page.nextPage}}"下一页</a <a th:href="@{'/employee/page/'+${page.pages}}"末页</a </span </div </body
后端代码
//Controller层 @RequestMapping(value = "/employee/page/{pageNum}",method = RequestMethod.GET) public String getAllEmployeeByDev(@PathVariable("pageNum") Integer pageNum, Model model){ PageInfo<Employee page =employeeService.getAllEmployeeByDev(pageNum); model.addAttribute("page",page); return "employee_list"; } //Service层 @Override public PageInfo<Employee getAllEmployeeByDev(Integer pageNum) { //开启分页公能 PageHelper.startPage(pageNum,4); //查询所有的员工信息 List<Employee list = mapper.getAllEmployee(); //获取分页相关的数据 PageInfo<Employee pageInfo = new PageInfo<(list,3); return pageInfo; } //mapper接口 List<Employee getAllEmployee(); //EmployeeMapper.xml <select id="getAllEmployee" resultType="Employee" select emp_id, emp_name,age,gender,email from t_emp </select
添加功能
实现详解
前端通过点击添加功能的标签，将页面跳转到添加页面，添加页面通过form表单将数据input完成后回响给控制层，控制层通过匹配action的值匹配到相应的控制器方法
控制器方法将得到的数据封装到Employee类中，然后再通过service将数据保存到数据库
最后通过重定向将页面跳转到列表页面
前端代码
<td<a th:href="@{/to/add}"添加员工</a</td <body <form th:action="@{/addEmp}" method="post" <!-- 修改添加上去 <input type="hidden" name="_method" value="put"-- 姓名: <input type="text" name="empName" value="AA"<br 年龄: <input type="text" name="age" value="11" <br 性别: <input type="radio" name="gender" value="M"M <input type="radio" name="gender" value="F"F <br email: <input type="text" name="email" value="XXX@qq.com" <br <input type="submit" value="addEmp" </form </body
后端代码
//Controller层 @RequestMapping (value = "/addEmp",method = RequestMethod.POST) public String addEmp(Employee employee){ employeeService.addEmp(employee); //重定向至原来的页面 return "redirect:/"; } //Service层 @Override public int addEmp(Employee employee) { return mapper.insert(employee); } //mapper接口 int insert(Employee employee); //EmployeeMapper.xml <!-- int insert(Employee record);-- <insert id="insert" insert into t_emp(emp_name,age,gender,email) values(#{empName},#{age},#{gender},#{email}) </insert
修改功能
实现详解
- 前端通过点击对应用户后面的修改按钮将所要修改的数据传到控制层由相关的控制层方法接收后开始在数据库中查询用户
- 将查询到的用户信息通过Model共享到request域中，然后通过请求转发到修改页面将需要修改的数据显示出来
- 修改完成后通过form表单提交数据，通过action匹配控制层中的相应控制器方法，再通过service将数据修改后保存，实现数据的修改
- 最后重定向回当初的页面
前端代码
<a th:href="@{'/update/'+${employee.empId}}"修改</a <!DOCTYPE html <html lang="en" xmlns:th="http://www.thymeleaf.otg" <head <meta charset="UTF-8" <title修改</title </head <body <form th:action="@{/updateEmp}" method="post" <input type="hidden" name="_method" value="put" <input type="hidden" name="empId" th:field="${employee.empId}" 姓名: <input type="text" name="empName" th:field="${employee.empName}"<br 年龄: <input type="text" name="age" th:field="${employee.age}" <br 性别: <input type="radio" name="gender" value="M" th:field="${employee.gender}"M <input type="radio" name="gender" value="F" th:field="${employee.gender}" F <br email: <input type="text" name="email" th:field="${employee.email}" <br <input type="submit" value="update" </form </body </html
后端代码
//Controller层 @RequestMapping("/update/{empId}") public String getEmpById(@PathVariable("empId") Integer empId,Model model){ //首先查询到id为要删除的人的id，然后将数据共享到add页面 ，最后实现的添加 //employeeService.updateEmp(); Employee employee = employeeService.getById(empId); System.out.println(employee); model.addAttribute("employee",employee); // 将数据共享到add页面显示出来，然后进行修改 return "/update"; } //Service层 @Override public Employee getById(Integer id) { return mapper.selectByPrimaryKey(id); } //mapper接口 Employee selectByPrimaryKey(Integer empId); //EmployeeMapper.xml <!-- Employee selectByPrimaryKey(Integer empId);-- <select id="selectByPrimaryKey" resultType="Employee" select emp_id, emp_name,age,gender,email from t_emp where emp_id = #{empId} </select //修改回显的数据Controller层 @RequestMapping(value = "/updateEmp", method = RequestMethod.PUT) public String updateEmployee(Employee employee){ employeeService.save(employee); return "redirect:/employee/page/1"; } //service层 @Override public void save(Employee employee) { mapper.save(employee); } <!-- Employee save(Employee employee);-- <update id="save" update t_emp set emp_name = #{empName} ,age = #{age} ,gender = #{gender},email = #{email} where emp_id = #{empId} </update
删除功能
实现详解
- 前端通过点击对应用户后面的删除按钮，将要删除的用户的id传入Contrller层，找到对应的控制器方法，通过service调用mapper接口中的方法实现在数据库中删除用户信息
- 通过重定向返回对应的页面
前端代码
<a th:href="@{'/delete/'+${employee.empId}}"删除</a
后端代码
//Controller层 @RequestMapping(value = "/delete/{empId}") public String deleteEmp(@PathVariable("empId") Integer empId){ employeeService.deleteEmp(empId); return "redirect:/employee/page/1"; } //service层 @Override public void deleteEmp(Integer empId) { mapper.deleteEmp(empId); } //mapper方法 void deleteEmp(Integer empId); <!-- void deleteEmp(Integer empId);-- <delete id="deleteEmp" delete from t_emp where emp_id = #{empId} </delete>
