springboot基础——控制器crud+thymeleaf

最新推荐文章于 2024-02-20 12:45:25 发布

空中追风sk

最新推荐文章于 2024-02-20 12:45:25 发布

阅读量299

点赞数 1

分类专栏： spring

本文链接：https://blog.csdn.net/weixin_43667990/article/details/105355155

版权

spring 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.接口

功能	请求URI	请求方式
查询所有员工	emps	GET
查询某个员工(来到修改页面)	emp/1	GET
来到添加页面	emp	GET
添加员工	emp	POST
来到修改页面（查出员工进行信息回显）	emp/1	GET
修改员工	emp	PUT
删除员工	emp/1	DELETE

2.控制器
controller\EmployeeController

@Controller  // 申明这是一个控制器
public class EmployeeController {
    @Autowired  // 注入，从ioc容器中获取对象
    EmployeeDao employeeDao;

    @Autowired
    DepartmentDao departmentDao;
	
	// 获取员工列表
    @GetMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getAll();
        // 将员工信息放入model中，供视图层使用
        model.addAttribute("emps", employees);
        return "emp/list";  // 自动匹配视图
    }

    // 添加员工
    //SpringMVC自动将请求参数和入参对象的属性进行一一绑定；要求请求参数的名字和javaBean入参的对象里面的属性名是一样的
    @PostMapping("/emp")
    public String addEmp(Employee employee){
        employeeDao.save(employee);
        // redirect: 表示重定向到一个地址
        // forward: 表示转发到一个地址
        return "redirect:/emps";
    }

    // 修改员工信息的页面
    @GetMapping("/emp/{id}")
    // 从请求路径中获取参数
    public String updateEmpPage(@PathVariable("id") Integer id,Model model){
        Employee employee = employeeDao.get(id);
        model.addAttribute("emp",employee);
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments",departments);
        // 修改和新增共用一个页面，视图层通过判断是否有employee对象区别显示
        return "emp/add";
    }
}

3.thymeleaf

引入

	<properties>
		<!--设置版本-->
        <thymeleaf-spring5.version>3.0.9.RELEASE</thymeleaf-spring5.version>
        <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
    </properties>

		<dependency>
			<!--引入依赖-->
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
		
		<!--使用webjars管理静态资源-->
		<dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.1.3</version>
        </dependency>

页面中导入thymeleaf的名称空间

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

抽取公共片段 templates/commons/bar.html

<!--公共的html片段，定义id，复用时通过id获取-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" id="topBar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0"
       href="" th:href="@{/index}">
        <!-- 从session中取值 -->
        [[${session.loginUser}]] </a>
</nav>

<!--抽取公共部分的html片段，定义一个参数用来判断哪个侧边栏高亮-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sideBar(activeUri)">
    <li class="nav-item">
        <!--复用html片段时传入一个参数，根据这个参数来设置是否active-->
        <a class="nav-link active"
           th:class="${activeUri=='index'?'nav-link active':'nav-link'}"
           href="" th:href="@{/index}">
            Dashboard <span class="sr-only">(current)</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link"
           th:class="${activeUri=='emps'?'nav-link active':'nav-link'}"
           href="" th:href="@{/emps}">
            员工列表
        </a>
    </li>
</nav>

复用html片段

		<!-- 复用html标签   模板名::选择器 -->
		<nav th:replace="commons/bar::#topBar"></nav>
		
		<!--复用html标签  模板名::片段名(参数)-->
		<nav th:replace="commons/bar::sideBar(activeUri='emps')"></nav>

遍历 th:each

<tbody>
	<!--th:each 每次遍历都会产生一个标签-->
	<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 HH:mm')}"></td>
		<td>
			<!--两种不同的标签，使用+拼接路径-->
			<a th:href="@{/emp/}+${emp.id}" class="btn btn-sm btn-primary">修改</a>
			<!--th:attr 自定义一个标签属性del_uri 用来拼接出删除员工的url-->
			<button th:attr="del_url=@{/emp/}+${emp.id}" type="submit" class="btn btn-sm btn-danger deleteBtn">删除</button>
		</td>
	</tr>
</tbody>

PUT和DELETE请求

<!--定义一个单独的form表单，用来提交删除员工的请求-->
<form method="post" id="deleteForm">
	<!--发送delete请求删除员工数据
	   form表单默认只支持get和post，使用put和delete提交表单需要：
	     1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
	     2、页面创建一个post表单
	     3、创建一个input项，name="_method";值就是我们指定的请求方式
     -->
	<input type="hidden" name="_method" value="delete">
</form>

<script>
	$(".deleteBtn").click(function () {
		var del_url = $(this).attr("del_url");
		console.log(del_url);
		// 给表单设置提交url后提交
		$("#deleteForm").attr("action",del_url).submit();
		// return false，取消默认的表单提交行为
		return false;
          })
</script>

新增和修改页面的区分

<!--判断是否有emp对象，有则为修改，增加隐藏的id的input框-->
<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">

<!--如果有emp参数，那么就是修改页面，给value赋值-->
<input type="text" name="lastName" th:value="${emp!=null}?${emp.lastName}" class="form-control">

<!--复选框通过checked属性判断是否选中-->
<input class="form-check-input" th:checked="${emp!=null}?${emp.gender==1}" type="radio" name="gender" value="1">

<!--下拉选择框-->
<select class="form-control" name="department.id">
   <!--在遍历下拉框的数据时，判断如何设置selected属性-->
   <option th:selected="${emp!=null}?${emp.department.id==department.id}" th:text="${department.departmentName}"
           th:value="${department.id}"
           th:each="department:${departments}">1</option>
</select>

静态资源引用

<!--引入webjars管理的静态资源-->
<link href="#" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.min.css}" rel="stylesheet">
<!--引入static目录下的静态资源-->
<link href="#" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">

参考：https://www.bilibili.com/video/BV1Et411Y7tQ

空中追风sk

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springboot基础——控制器crud+thymeleaf

1.接口功能请求URI请求方式查询所有员工empsGET查询某个员工(来到修改页面)emp/1GET来到添加页面empGET添加员工empPOST来到修改页面（查出员工进行信息回显）emp/1GET修改员工empPUT删除员工emp/1DELETE2.控制器controller\EmployeeCont...
复制链接

扫一扫

专栏目录