17 | SpringBoot + thymeleaf的CRUD-员工列表满足Rest风格

最新推荐文章于 2023-10-27 17:42:18 发布

༺鲸落༻

最新推荐文章于 2023-10-27 17:42:18 发布

阅读量315

点赞数

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/nsx_truth/article/details/107741286

版权

SpringBoot 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

1、按URI区分普通CRUD和RESTFULCRUD

	普通CRUD（URI来区分操作）	RESTFULCRUD
查询	getEmp	emp—GET
添加	addEmp?xxx	emp—POST
修改	emp—POST修改updateEmp?id=xxx&xxx=xx	emp/{id}—PUT
删除	deleteEmp?id=1	emp/{id}—DELETE

2、实验——获得员工列表

（1）新建一个EmployeeController

@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;

    @GetMapping("/emps")
    public String getEmps(Model model) {
        Collection<Employee> employees = employeeDao.getAll();
        model.addAttribute("emps", employees);
        return "emp/list";
    }
}

（2）在dashboard中修改其中一段

<li class="nav-item">
                        <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"
                           th:href="@{/emps}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-users">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                <circle cx="9" cy="7" r="4"></circle>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                            </svg>
                            员工管理
                        </a>
                    </li>

访问页面
在这里插入图片描述

ok，当你点击这个员工管理跳到这个界面
在这里插入图片描述

但是，你有没有发现左边栏没有之前的东西，所以我们得使用thymeleaf公共页面元素抽取

3、thymeleaf公共页面元素抽取

（1）使用方法

1、抽取公共片段
<div th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</div>

2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

3、默认效果：
insert的公共片段在div标签中
如果使用th:insert等属性进行引入，可以不用写~{}：
行内写法可以加上：[[~{}]];[(~{})]；

除了th：insert还有其他引入公共片段的th属性：
th:insert：将公共片段整个插入到声明引入的元素中

th:replace：将声明引入的元素替换为公共片段

th:include：将被引入的片段的内容包含进这个标签中

具体效果

<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

引入方式
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

效果
<div>
    <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

（2）修改页面

dashboard.html

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="top">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"
       th:text="${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/#">Sign out</a>
        </li>
    </ul>
</nav>

<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">

list.html

<body>
<div th:replace="dashboard :: top"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="dashboard :: #sidebar"></div>

在这里插入图片描述

༺鲸落༻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17 | SpringBoot + thymeleaf的CRUD-员工列表满足Rest风格

1、按URI区分普通CRUD和RESTFULCRUD普通CRUD（URI来区分操作）RESTFULCRUD查询getEmpemp—GET添加addEmp?xxxemp—POST修改emp—POST修改updateEmp?id=xxx&xxx=xxemp/{id}—PUT删除deleteEmp?id=1emp/{id}—DELETE2、实验——获得员工列表（1）新建一个EmployeeController@Controllerpub
复制链接

扫一扫

专栏目录