SpringBoot——web开发之Restful请求

1、Restful风格请求

请求的URI通过资源名称、资源标识以及HTTP请求的方式对资源进行CRUD操作，例如： /资源名称/{资源标识}

2、员工列表

html：

<a class="nav-link" href="#" 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>

Controller：向页面传递数据可以使用Model、Map或者ModelMap

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeDao employeeDao;

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

页面展示数据：

<table class="table table-striped table-sm">
	<thead>
		<tr>
			<th>ID</th>
			<th>姓名</th>
			<th>邮箱</th>
			<th>性别</th>
			<th>部门</th>
			<th>生日</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<tr th:each="emp:${emps}">
			<td th:text="${emp.id}"></td>
			<td>[[${emp.lastName}]]</td>
			<td th:text="${emp.email}"></td>
			<td th:text="${emp.gender} == 0 ? '女' : '男'"></td>
			<td th:text="${emp.department.departmentName}"></td>
			<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd')}"></td>
			<td>
				<button class="btn btn-sm btn-primary">编辑</button>
				<button class="btn btn-sm btn-danger">删除</button>
			</td>
		</tr>
	</tbody>
</table>

利用th:each遍历数据，${}获取后台传递过来的数据，也可以使用thymeleaf内置的对象#dates格式化时间

效果：

3、Thymeleaf抽取公共页面

①抽取公共片段：使用th:fragment属性

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

②引入公共片段：~{templatename::selector}：模板名::选择器或~{templatename::fragmentname}:模板名::片段名，如果使用th:insert等属性进行引入，可以不用写~{}，但行内写法必须加上~{}：[[~{}]]、[(~{})]

有三种引入方式：

th:insert：将公共片段整个插入到声明引入的元素中

<div th:insert="footer :: copy"></div>

效果：

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

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

<div th:replace="footer :: copy"></div>

效果：

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

th:include：将被引入的片段的内容包含进引入元素

<div th:include="footer :: copy"></div>

效果：

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

4、参数化的抽取公共页面：向引入的公共片段传入参数，然后在公共片段中用${}取出传过来的参数进行判断实现一些逻辑等

引入公共片段时：

<div th:replace="commons/bar::#sidebar(activeUri='main')"></div>
<div th:replace="commons/bar::#sidebar(activeUri='list')"></div>

在公共片段中获取引入时传的参数：

<a class="nav-link active" th:class="${activeUri == 'main' ? 'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}">
	<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-home">
		<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
		<polyline points="9 22 9 12 15 12 15 22"></polyline>
	</svg>
	Dashboard <span class="sr-only">(current)</span>
</a>

SpringBoot——web开发之Restful请求

猜你喜欢