SpringBoot-7：SpringBoot与Web_员工列表_员工添加_员工修改

本文链接：https://blog.csdn.net/qq_42764468/article/details/104461591

文章目录

- 6、RestfulCRUD（员工列表）

6、RestfulCRUD（员工列表）

RestfulCRUD：CRUD满足Rest风格；
URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作

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

实验的请求架构;

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

5. 员工列表

1.查询所有员工

（1）给员工管理设置超链接，发送请求/emps
在这里插入图片描述
（2）请求/emps通过Conteoller层视图解析器到templates/tem/list.html页面，并展示

@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;

    //查询所有员工返回员工列表页面
    @GetMapping("/emps")
    public String list(Map<String,Object> modelMap){
        Collection<Employee> employees = employeeDao.getAll();
        modelMap.put("emps",employees);
        return "emp/list";
    }
}

注意：只要修改dashboard.html中css的引入为thymeleaf，list.html页面的不要修改
我因为修改了导致后面浪费了较长时间
在这里插入图片描述

2. thymeleaf公共片段抽取语法

1、抽取公共片段

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

2、引入公共片段

~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

<div th:insert="~{footer :: copy}"></div>

3、默认效果

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

4、三种引入公共片段的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>

3. dashboard.html 和 list.html公共页面元素的抽取

在这里插入图片描述
将公共片段的代码抽取到templates/commons/bar.html

</head>
<body>
    <!--topbar 顶栏公共片段-->
    <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/#">Company name</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>

    <!--sidebar 侧栏公共片段-->
    <nav class="col-md-2 d-none d-md-block bg-light sidebar"
         id="sidebar">
        <div class="sidebar-sticky">

在dashboard.html中引入顶栏和侧栏的公共片段：

<body>
	<!--引入topbar-->
	<div th:replace="commons/bar::topbar"></div>
	<div class="container-fluid">
		<div class="row">
			<!--引入sidebar-->
			<div th:replace="commons/bar::#sidebar"></div>

在list.html中引入顶栏和侧栏的公共片段：

<body>
	<!--引入bar.html中抽取的topbar-->
	<!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
	<div th:replace="~{commons/bar::topbar}"></div>
	<div class="container-fluid">
		<div class="row">
			<!--引入sidebar-->
			<div th:replace="~{commons/bar::#sidebar(activeUri='emps')}"></div>

4. th:class 实现员工管理和Dashboard动态高亮

class属性：class属性的值对应的就是你定义的css的名字，它和class的属性值相对应。

给Dashboard添加动态class：

如果activeUri==‘main.html’，使用class='nav-link active’的css样式

<a th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
   th:href="@{/main.html}">
</a>

在dashboard.html页面中带上activeUri：

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

给员工管理的添加动态class:

如果activeUri==‘emps’，使用class='nav-link active’的css样式

 <a th:class="${activeUri=='emps'?'nav-link active':'nav-link'}"
    th:href="@{/emps}">
</a>

在list.html页面中带上activeUri：

<div th:replace="~{commons/bar::#sidebar(activeUri='emps')}"></div>

在这里插入图片描述

5. 遍历集合显示员工信息

<body>
	<div th:replace="~{commons/bar::topbar}"></div>
	<div class="container-fluid">
		<div class="row">
			<div th:replace="~{commons/bar::#sidebar(activeUri='emps')}"></div>
			<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
				<!--添加员工添加按钮-->
				<h2><button class="btn btn-sm btn-success">员工添加</button></h2>
				<div class="table-responsive">
					<table class="table table-striped table-sm">
						<thead>
							<tr>
								<th>#</th>
								<th>lastName</th>
								<th>email</th>
								<th>gender</th>
								<th>department</th>
								<th>birth</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="emp:${emps}">
								<td th:text="${emp.id}"></td>
								<td th:text="${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>
				</div>
			</main>
		</div>
	</div>

在这里插入图片描述

6. 员工添加

1. 来到员工添加页面

1.将员工添加按钮变成超链接，提交请求路径：

<!--员工添加为get方式提交，超链接本身就是get方式，因此不用谢提交方式-->
<h2><a class="btn btn-sm btn-success" th:href="@{/emp}">员工添加</a></h2>

2.编写Controller层处理请求：

 //来到员工添加页面
 @GetMapping("/emp")
 public String toAddPage(Map<String,Object> modelMap){
     //查询出所有的部门在页面显示
     Collection<Department> departments = departmentDao.getDepartments();
     modelMap.put("depts",departments);
     return "emp/add";
 }

3.修改add.html页面：

<form>
	<div class="form-group">
		<label>LastName</label>
		<input type="text" class="form-control" placeholder="zhangsan">
	</div>
	<div class="form-group">
		<label>Email</label>
		<input type="email" class="form-control" placeholder="zhangsan@qq.com">
	</div>
	<div class="form-group">
		<label>Gender</label><br/>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" name="gender"  value="1">
			<label class="form-check-label">男</label>
		</div>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" name="gender"  value="0">
			<label class="form-check-label">女</label>
		</div>
	</div>
	<div class="form-group">
		<label>department</label>
		<select class="form-control">
			<!--提交的是部门id，根据部门id显示部门名称信息-->
			<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
		</select>
	</div>
	<div class="form-group">
		<label>Birth</label>
		<input type="text" class="form-control" placeholder="zhangsan">
	</div>
	<button type="submit" class="btn btn-primary">添加</button>
</form>

效果：
在这里插入图片描述
补充知识：
问题：option标签中属性value的值和标签体中的内容有何区别？

2. 点击添加按钮完成员工添加功能

1.设置表单提交的请求路径，添加的请求方式为post方式：

<form th:action="@{/emp}" method="post">

2.编写Controller层处理请求：

   //员工添加功能
    @PostMapping("/emp")
    public String addEmp(Employee employee){
        employeeDao.save(employee);
        //来到员工列表页面
        //redirect:重定向一个地址（request）
        //forward：转发到一个地址（response）
        return "redirect:/emps";
    }

3.如何获取请求参数的值绑定到Employee对象的属性上呢？

SpringMvc可以实现自动封装，前提是前端传递的参数名和 JavaBean对象的属性名必须一致，否则就是null

因此给没给要提交的请求参数加上name属性，并且属性名称要和JavaBean对象的属性名称一致，这个就可以从后端直接获取到前端提交的请求参数的值了。

<form th:action="@{/emp}" method="post">
	<div class="form-group">
		<label>LastName</label>
		<input type="text" name="lastName" class="form-control" placeholder="zhangsan">
	</div>
	<div class="form-group">
		<label>Email</label>
		<input type="email" name="email" class="form-control" placeholder="zhangsan@qq.com">
	</div>
	<div class="form-group">
		<label>Gender</label><br/>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" name="gender"  value="1">
			<label class="form-check-label">男</label>
		</div>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" name="gender"  value="0">
			<label class="form-check-label">女</label>
		</div>
	</div>
	<div class="form-group">
		<label>department</label>
		<select class="form-control" name="department.id">
			<!--提交的是部门id，根据部门id显示部门名称信息-->
			<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
		</select>
	</div>
	<div class="form-group">
		<label>Birth</label>
		<input type="text" class="form-control" name="birth" placeholder="zhangsan">
	</div>
	<button type="submit" class="btn btn-primary">添加</button>
</form>

4.修改添加生日时的日期格式：

系统默认的日期格式为2011/12/12，可以在application.properties文件中自己指定想要的日期格式：

# 设置日期格式
spring.mvc.date-format=yyyy-MM-dd

在这里插入图片描述
补充知识：

问题1：标签中的name属性有什么用？
在这里插入图片描述
例子：

<form action="/example/html/form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <input type="submit" value="Submit" />
</form>

在这里插入图片描述
提交的参数为：

fullname=zhangsan&email=zhangsan.com

问题2：如何实现提交的请求参数和JavaBean对象的属性进行自动封装？

注意：name属性的值为请求参数的名称

<form action="book" method="post">
	书名： <input type="text" name="bookName"/><br>
	作者： <input type="text" name="author"/><br>
	库存： <input type="text" name="stock"/><br>
	价格： <input type="text" name="price"/><br>
	销量： <input type="text" name="sales"/><br>
	<input type="submit" value="添加一本图书"/>
</form>

javaBean对象以及里面的属性，请求参数要和属性名一致

public class Book {
    private String bookName;
    private String author;
    private Integer stock;
    private Integer price;
    private Integer sales;
}

@Controller
public class PojoController {
    @RequestMapping("/book")
    public String test(Book book){
        System.out.println("我要保存的图书:"+book);
        return "success";
    }
}

如果使用get方式提交，会看到提交的参数为：
bookName=jianai&author=hh&stock=12&price=34&sales=45
在这里插入图片描述

7. 员工修改

1. 来到员工修改页面

1.在list.html页面设置点击编辑的请求：

<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>

2.在Controller处理请求：

 //来到员工修改页面
 @GetMapping("/emp/{id}")
 public String toEditPage(@PathVariable("id")Integer id,Map<String,Object> modelMap){
     Employee employee = employeeDao.get(id);
     modelMap.put("emp",employee);

     //页面要显示所有我的部门列表
     Collection<Department> departments = departmentDao.getDepartments();
     modelMap.put("depts",departments);

     //回到修改页面（即使修改页面也是添加页面）
     return "emp/add";
 }

3.修改修改页面add.html：

<!--区分是员工添加还是员工修改,员工修改页面emp!=null-->
<form th:action="@{/emp}" method="post">
	<!--发送put请求修改员工数据-->
	<!--1.SpringMvc中配置HiddenHTTPMethodFilter(SpringBoot已经配置好了)
		2.页面创建一个post表单
		3.创建一个input选项，name="_method";值value就是我们制定的跟你去方式-->
	<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
	<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}"/>

	<div class="form-group">
		<label>LastName</label>
		<input type="text" name="lastName" class="form-control" th:value="${emp!=null}?${emp.lastName}">
	</div>
	<div class="form-group">
		<label>Email</label>
		<input type="email" name="email" class="form-control" th:value="${emp!=null}?${emp.email}">
	</div>
	<div class="form-group">
		<label>Gender</label><br/>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" name="gender" value="1"  th:checked="${emp!=null}?${emp.gender==1}">
			<label class="form-check-label">男</label>
		</div>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
			<label class="form-check-label">女</label>
		</div>
	</div>
	<div class="form-group">
		<label>department</label>
		<select class="form-control" name="department.id">
			<!--提交的是部门id，根据部门id显示部门名称信息-->
			<option  th:selected="${emp!=null}?${dept.id==emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
		</select>
	</div>
	<div class="form-group">
		<label>Birth</label>
		<input type="text" class="form-control" name="birth" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-MM-dd')}">
	</div>
	<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>

在这里插入图片描述
效果：

补充：

问题1：inpu标签中的value属性？
在这里插入图片描述

<form action="/example/html/form_action.asp" method="get">
  First name: <input type="text" name="fname" value="George" /><br />
  Last name: <input type="text" name="lname" value="Bush" /><br />
  <input type="submit" value="Submit form" />
</form>

在这里插入图片描述
提交后：name提交的请求参数名称，value代表提交的请求参数的值

fname=George&lname=Bush

问题2 ：select标签中的selected属性？
在这里插入图片描述

<select>
  <option>Volvo</option>
  <option selected="selected">Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

在这里插入图片描述

2. 点击修改按钮完成员工修改功能

    //员工修改
    @PutMapping("/emp")
    public String updateEmployee(Employee employee){
    	System.out.println(employee);
        employeeDao.save(employee);
        return "redirect:/emps";
    }

在这里插入图片描述
遗留问题：在控制台打印employee对象，但是却打印不出来，修改数据能修改成功

原因：原来是springboot2.2.x后默认不支持put、delete请求。

需在配置文件里手动配置：

spring.mvc.hiddenmethod.filter.enabled=true

8. 员工删除

<form th:action="@{/emp/}+${emp.id}" method="post">
	<input type="hidden" name="_method" value="delete"/>
	<button type="submit" class="btn btn-sm btn-danger">删除</button>
</form>

 //员工删除
    @DeleteMapping("/emp/{id}")
    public String deleteEmp(@PathVariable("id")Integer id){
        employeeDao.delete(id);
        return "redirect:/emps";
    }

在这里插入图片描述
报错405：

原因：原来是springboot2.2.x后默认不支持put、delete请求。

需在配置文件里手动配置：

spring.mvc.hiddenmethod.filter.enabled=true

在这里插入图片描述

SpringBoot-7：SpringBoot与Web_员工列表_员工添加_员工修改_员工删除

文章目录

6、RestfulCRUD（员工列表）

5. 员工列表

1.查询所有员工

2. thymeleaf公共片段抽取语法

3. dashboard.html 和 list.html公共页面元素的抽取

4. th:class 实现员工管理和Dashboard动态高亮

5. 遍历集合显示员工信息

6. 员工添加

1. 来到员工添加页面

2. 点击添加按钮完成员工添加功能

7. 员工修改

1. 来到员工修改页面

2. 点击修改按钮完成员工修改功能

8. 员工删除