SpringBoot(12)thymeleaf组件化，遍历和三元运算符

最新推荐文章于 2023-12-03 17:51:41 发布

OVO_LQ_Start

最新推荐文章于 2023-12-03 17:51:41 发布

阅读量510

点赞数

分类专栏： SpringBoot 文章标签： spring boot

本文链接：https://blog.csdn.net/OVO_LQ_Start/article/details/107510377

版权

SpringBoot 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

组件化

1.相同的代码可以组件化可以提高代码的复用，th:fragment="topbar"将代码组件化，单独放到一个目录下

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

<!--头部导航栏-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">退出</a>
        </li>
    </ul>
</nav>


</html>

2.使用组件，commons/commons表示路径，topbar表示使用的组件

<div th:insert="~{commons/commons::topbar}"></div>

三元运算符

实现连接点击过后高亮
1.给组件传递一个参数

<div th:insert="~{commons/commons::topbar(active='main.html')}"></div>

2.判断组件参数是否正确

<li class="nav-item">
				<!-- 判断active的值是否为main.html,正确高亮，错误不高亮-->
                <a th:class="${active=='main.html'?'nav-link active':'nav-link '}" th:href="@{/index.html}">
                    首页 <span class="sr-only">(current)</span>
                </a>
            </li>

遍历

1.后台获取数据传递到前台

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeDao employeeDao;

    @RequestMapping("/emps")
    public String list(Model model){

        Collection<Employee> employees = employeeDao.find();
        model.addAttribute("employees",employees);
        return "emp/list";
    }
}

2.前台获取数据进行遍历

		<tr th:each="emp:${employees}">
			<td th:text="${emp.getId()}"></td>
			<td th:text="${emp.getLastName()}"></td>
			<td th:text="${emp.getEmail()}"></td>
			<td th:text="${emp.getGender()==0?'女':'男'}"></td>
			<td th:text="${emp.getDepartment().getDepartmentName()}"></td>
			<td th:text="${#dates.format(emp.getBrith(),'yyyy-MM-dd HH:mm')}"></td>
			<td>
			<button class="btn btn-sm btn-primary"> 编辑</button>
			<button class="btn btn-sm btn-danger"> 删除</button>
			</td>
		</tr>

OVO_LQ_Start

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot(12)thymeleaf组件化，遍历和三元运算符

组件化1.相同的代码可以组件化可以提高代码的复用，th:fragment="topbar"将代码组件化，单独放到一个目录下<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar
复制链接

扫一扫