Thymeleaf框架的使用

Thymeleaf框架的使用

文件形式html即可

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"

>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #thyempTable{
            width: 80%;
            border: 1px solid blue;
            background-color: antiquewhite;
            margin: 0px auto;
        }
        #thyempTable,th,td{
            border: 1px solid green;
            text-align: center;
        }
    </style>

</head>
<body>
<!--员工个人信息：-->
<!--查询第一个元素-->
<!--<span th:if="${emp}!=null">
    &lt;!&ndash;<span th:each="emp,i:${empList}">
    工号:<span th:text="${emp.empno}"></span><br/>
    姓名:<span th:text="${emp.ename}"></span><br/>
    职务:<span th:text="${emp.job}"></span><br/>
    上级:<span th:text="${emp.mgr}"></span><br/>
    入职日期:<span th:text="${emp.hiredate}"></span><br/>
    工资:<span th:text="${emp.sal}"></span><br/>
    补助:<span th:text="${emp.comm}"></span><br/>
    部门号:<span th:text="${emp.deptno}"></span><br/>
    <hr/>
    </span>&ndash;&gt;
    <span th:if="${empList}!=null">
        <span th:text="${empList[0].empno}"></span><br/>
        <span th:text="${empList[0].ename}"></span><br/>
        <span th:text="${empList[0].job}"></span><br/>
        <span th:text="${empList[0].mgr}"></span><br/>
        <span th:text="${empList[0].hiredate}"></span><br/>
        <span th:text="${empList[0].sal}"></span><br/>
        <span th:text="${empList[0].comm}"></span><br/>
        <span th:text="${empList[0].deptno}"></span><br/>
    </span>
</span>-->

<!--<span th:if="${emp}!=null">

    工号:<span th:text="${emp.empno}"></span><br/>
    姓名:<span th:text="${emp.ename}"></span><br/>
    职务:<span th:text="${emp.job}"></span><br/>
    上级:<span th:text="${emp.mgr}"></span><br/>
    入职日期:<span th:text="${emp.hiredate}"></span><br/>
    工资:<span th:text="${emp.sal}"></span><br/>
    补助:<span th:text="${emp.comm}"></span><br/>
    部门号:<span th:text="${emp.deptno}"></span><br/>
</span>-->
<table id="thyempTable" cellspacing="0px" cellpadding="0px">
    <tr>
        <th>排序</th>
        <th>工号</th>
        <th>姓名</th>
        <th>岗位</th>
        <th>上级编号</th>
        <th>入职日期</th>
        <th>薪资</th>
        <th>补助</th>
        <th>部门号</th>
        <th>操作</th>
    </tr>
    <tr th:each="emp,i:${empList}" th:class="${i.odd}?a:b" >
        <td th:text="${i.count}" ></td>
        <td th:text="${emp.empno}"></td>
        <td th:text="${emp.ename}"></td>
        <td th:text="${emp.job}"></td>
        <td th:text="${emp.mgr} eq null ? 'boss':${emp.mgr}"></td>
        <td th:text="${emp.hiredate}"></td>
        <td th:text="${emp.sal}"></td>
        <td th:text="${emp.comm}eq null?0:${emp.comm}"></td>
        <td th:text="${emp.deptno}"></td>
        <td >
            <!--向后端传入empno，ename-->
            <!--<a th:href="@{/removeEmp(empno=${emp.empno},ename=${emp.ename})}">删除</a>-->
            <!--<a href="javascript:viod(0)"  th:onclick="'del('+${emp.empno}+')'">删除</a>  这个不支持字符串类型-->
            <!--[[${emp.empno}]],[[${emp.ename}]]会报错，但不影响执行-->
            <a href="javascript:void(0)" th:onclick="removeEmp([[${emp.empno}]],[[${emp.ename}]])">删除</a>
        </td>
    </tr>
</table>
<script>
    function removeEmp(empno,ename){
        var resulet=confirm("确认要删除的编号为："+empno+"姓名为："+ename);
        if (resulet){
            /*这里是一个数据转发路径  注意 &ename */
            window.location.href="removeEmp?empno="+empno+"&ename="+ename;
        }
    }
</script>
</body>
</html>

查询数据库和对数据删除

package com.msb.controller;

import com.msb.pojo.Emp;
import com.msb.service.EmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;
import java.util.Map;

@Controller
public class ThyEmpController {
    @Autowired
    private EmpService empService;
    @RequestMapping("/showThyEmp")
    public String thyEmpController(Map<String,Object>map){
        List<Emp> empList = empService.findemp();
        map.put("empList",empList);
        map.put("emp",empList.get(0));
        return "showThyEmp";
    }
    @RequestMapping("/removeEmp")
    public String removeEmp(Integer empno,String ename){
        empService.removeEmp(empno, ename);
        return "redirect:showThyEmp";//保持路径不变，请求转发url地址栏不变
    }
}

Mapper查询配置

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.msb.mapper.EmpMapper">
    <!-- List<Emp> findAll();-->
    <select id="findAll" resultType="emp">
        select * from emp
    </select>
    <!--int removeEmp(inter empno, String ename);-->
    <delete id="removeEmp"  >
        delete from emp where empno=#{param1} and ename=#{param2}
    </delete>
</mapper>
posted @ 2022-06-29 11:45  爱豆技术部  阅读(79)  评论(0)    收藏  举报
TOP