SpringBoot进行web的crud开发：显示列表页面

以你之姓@ 2023-06-30 10:45 10阅读 0赞

实验要求：

1）、RestfulCRUD：CRUD满足Rest风格；

URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作

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

2）、实验的请求架构;

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

# 跳转到list页面【假数据】 #

## 修改链接 ##

![在这里插入图片描述][20200117093635248.png]

## 增加控制器方法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]

## list.html页面 ##

<!DOCTYPE html>
    
    <html lang="en">
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    		<meta name="description" content="">
    		<meta name="author" content="">
    
    		<title>Dashboard Template for Bootstrap</title>
    		
    		<link href="asserts/css/bootstrap.min.css" rel="stylesheet">
    
    		
    		<link href="asserts/css/dashboard.css" rel="stylesheet">
    		<style type="text/css">
    			/* Chart.js */
    			
    			@-webkit-keyframes chartjs-render-animation {
         
    				from {
         
    					opacity: 0.99
    				}
    				to {
         
    					opacity: 1
    				}
    			}
    			
    			@keyframes chartjs-render-animation {
         
    				from {
         
    					opacity: 0.99
    				}
    				to {
         
    					opacity: 1
    				}
    			}
    			
    			.chartjs-render-monitor {
         
    				-webkit-animation: chartjs-render-animation 0.001s;
    				animation: chartjs-render-animation 0.001s;
    			}
    		</style>
    	</head>
    
    	<body>
    		<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
    			<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>
    
    		<div class="container-fluid">
    			<div class="row">
    				<nav class="col-md-2 d-none d-md-block bg-light sidebar">
    					<div class="sidebar-sticky">
    						<ul class="nav flex-column">
    							<li class="nav-item">
    								<a class="nav-link active" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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>
    							</li>
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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-file">
    										<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
    										<polyline points="13 2 13 9 20 9"></polyline>
    									</svg>
    									Orders
    								</a>
    							</li>
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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-shopping-cart">
    										<circle cx="9" cy="21" r="1"></circle>
    										<circle cx="20" cy="21" r="1"></circle>
    										<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
    									</svg>
    									Products
    								</a>
    							</li>
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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>
    									Customers
    								</a>
    							</li>
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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-bar-chart-2">
    										<line x1="18" y1="20" x2="18" y2="10"></line>
    										<line x1="12" y1="20" x2="12" y2="4"></line>
    										<line x1="6" y1="20" x2="6" y2="14"></line>
    									</svg>
    									Reports
    								</a>
    							</li>
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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-layers">
    										<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
    										<polyline points="2 17 12 22 22 17"></polyline>
    										<polyline points="2 12 12 17 22 12"></polyline>
    									</svg>
    									Integrations
    								</a>
    							</li>
    						</ul>
    
    						<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                  <span>Saved reports</span>
                  <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <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-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
                  </a>
                </h6>
    						<ul class="nav flex-column mb-2">
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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-file-text">
    										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
    										<polyline points="14 2 14 8 20 8"></polyline>
    										<line x1="16" y1="13" x2="8" y2="13"></line>
    										<line x1="16" y1="17" x2="8" y2="17"></line>
    										<polyline points="10 9 9 9 8 9"></polyline>
    									</svg>
    									Current month
    								</a>
    							</li>
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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-file-text">
    										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
    										<polyline points="14 2 14 8 20 8"></polyline>
    										<line x1="16" y1="13" x2="8" y2="13"></line>
    										<line x1="16" y1="17" x2="8" y2="17"></line>
    										<polyline points="10 9 9 9 8 9"></polyline>
    									</svg>
    									Last quarter
    								</a>
    							</li>
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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-file-text">
    										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
    										<polyline points="14 2 14 8 20 8"></polyline>
    										<line x1="16" y1="13" x2="8" y2="13"></line>
    										<line x1="16" y1="17" x2="8" y2="17"></line>
    										<polyline points="10 9 9 9 8 9"></polyline>
    									</svg>
    									Social engagement
    								</a>
    							</li>
    							<li class="nav-item">
    								<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
    									<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-file-text">
    										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
    										<polyline points="14 2 14 8 20 8"></polyline>
    										<line x1="16" y1="13" x2="8" y2="13"></line>
    										<line x1="16" y1="17" x2="8" y2="17"></line>
    										<polyline points="10 9 9 9 8 9"></polyline>
    									</svg>
    									Year-end sale
    								</a>
    							</li>
    						</ul>
    					</div>
    				</nav>
    
    				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    					<h2>Section title</h2>
    					<div class="table-responsive">
    						<table class="table table-striped table-sm">
    							<thead>
    								<tr>
    									<th>#</th>
    									<th>Header</th>
    									<th>Header</th>
    									<th>Header</th>
    									<th>Header</th>
    								</tr>
    							</thead>
    							<tbody>
    								<tr>
    									<td>1,001</td>
    									<td>Lorem</td>
    									<td>ipsum</td>
    									<td>dolor</td>
    									<td>sit</td>
    								</tr>
    								<tr>
    									<td>1,002</td>
    									<td>amet</td>
    									<td>consectetur</td>
    									<td>adipiscing</td>
    									<td>elit</td>
    								</tr>
    								<tr>
    									<td>1,003</td>
    									<td>Integer</td>
    									<td>nec</td>
    									<td>odio</td>
    									<td>Praesent</td>
    								</tr>
    								<tr>
    									<td>1,003</td>
    									<td>libero</td>
    									<td>Sed</td>
    									<td>cursus</td>
    									<td>ante</td>
    								</tr>
    								<tr>
    									<td>1,004</td>
    									<td>dapibus</td>
    									<td>diam</td>
    									<td>Sed</td>
    									<td>nisi</td>
    								</tr>
    								<tr>
    									<td>1,005</td>
    									<td>Nulla</td>
    									<td>quis</td>
    									<td>sem</td>
    									<td>at</td>
    								</tr>
    								<tr>
    									<td>1,006</td>
    									<td>nibh</td>
    									<td>elementum</td>
    									<td>imperdiet</td>
    									<td>Duis</td>
    								</tr>
    								<tr>
    									<td>1,007</td>
    									<td>sagittis</td>
    									<td>ipsum</td>
    									<td>Praesent</td>
    									<td>mauris</td>
    								</tr>
    								<tr>
    									<td>1,008</td>
    									<td>Fusce</td>
    									<td>nec</td>
    									<td>tellus</td>
    									<td>sed</td>
    								</tr>
    								<tr>
    									<td>1,009</td>
    									<td>augue</td>
    									<td>semper</td>
    									<td>porta</td>
    									<td>Mauris</td>
    								</tr>
    								<tr>
    									<td>1,010</td>
    									<td>massa</td>
    									<td>Vestibulum</td>
    									<td>lacinia</td>
    									<td>arcu</td>
    								</tr>
    								<tr>
    									<td>1,011</td>
    									<td>eget</td>
    									<td>nulla</td>
    									<td>Class</td>
    									<td>aptent</td>
    								</tr>
    								<tr>
    									<td>1,012</td>
    									<td>taciti</td>
    									<td>sociosqu</td>
    									<td>ad</td>
    									<td>litora</td>
    								</tr>
    								<tr>
    									<td>1,013</td>
    									<td>torquent</td>
    									<td>per</td>
    									<td>conubia</td>
    									<td>nostra</td>
    								</tr>
    								<tr>
    									<td>1,014</td>
    									<td>per</td>
    									<td>inceptos</td>
    									<td>himenaeos</td>
    									<td>Curabitur</td>
    								</tr>
    								<tr>
    									<td>1,015</td>
    									<td>sodales</td>
    									<td>ligula</td>
    									<td>in</td>
    									<td>libero</td>
    								</tr>
    							</tbody>
    						</table>
    					</div>
    				</main>
    			</div>
    		</div>
    
    		
    		
    		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
    		<script type="text/javascript" src="asserts/js/popper.min.js"></script>
    		<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
    
    		
    		<script type="text/javascript" src="asserts/js/feather.min.js"></script>
    		<script>
    			feather.replace()
    		</script>
    
    		
    		<script type="text/javascript" src="asserts/js/Chart.min.js"></script>
    		<script>
    			var ctx = document.getElementById("myChart");
    			var myChart = new Chart(ctx, {
         
    				type: 'line',
    				data: {
         
    					labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    					datasets: [{
         
    						data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
    						lineTension: 0,
    						backgroundColor: 'transparent',
    						borderColor: '#007bff',
    						borderWidth: 4,
    						pointBackgroundColor: '#007bff'
    					}]
    				},
    				options: {
         
    					scales: {
         
    						yAxes: [{
         
    							ticks: {
         
    								beginAtZero: false
    							}
    						}]
    					},
    					legend: {
         
    						display: false,
    					}
    				}
    			});
    		</script>
    
    	</body>
    
    </html>

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]  
可以将各个公共区抽取出来

## 抽取公共部分 ##

### 操作 ###

1、基本

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]  
然后ctrl+F9，就可以看到效果了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]  
然后ctrl+F9，就可以看到效果了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]

2、将刚刚的那些公共部分放到一个公共文件夹下，然后重新引入

![在这里插入图片描述][2020011710153735.png]  
![在这里插入图片描述][20200117101832173.png]

### 理论 ###

1、抽取公共片段
    <div th:fragment="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属性：
> 
>  *  **th:insert**：将公共片段整个插入到声明引入的元素中
>  *  **th:replace**：将声明引入的元素替换为公共片段
>  *  **th:include**：将被引入的片段的内容包含进这个标签中

<footer th:fragment="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>
        © 2011 The Good Thymes Virtual Grocery
        </footer>
    </div>
    
    <footer>
    © 2011 The Good Thymes Virtual Grocery
    </footer>
    
    <div>
    © 2011 The Good Thymes Virtual Grocery
    </div>

# dao层编写 #

1、bean

package com.oceanstar.entities;
    
    public class Department {
        
    
    	private Integer id;
    	private String departmentName;
    
    	public Department() {
        
    	}
    	
    	public Department(int i, String string) {
        
    		this.id = i;
    		this.departmentName = string;
    	}
    
    	public Integer getId() {
        
    		return id;
    	}
    
    	public void setId(Integer id) {
        
    		this.id = id;
    	}
    
    	public String getDepartmentName() {
        
    		return departmentName;
    	}
    
    	public void setDepartmentName(String departmentName) {
        
    		this.departmentName = departmentName;
    	}
    
    	@Override
    	public String toString() {
        
    		return "Department [id=" + id + ", departmentName=" + departmentName + "]";
    	}
    	
    }

package com.oceanstar.entities;
    
    import java.util.Date;
    
    public class Employee {
        
    
    	private Integer id;
        private String lastName;
    
        private String email;
        //1 male, 0 female
        private Integer gender;
        private Department department;
        private Date birth;
    
        public Integer getId() {
        
            return id;
        }
    
        public void setId(Integer id) {
        
            this.id = id;
        }
    
        public String getLastName() {
        
            return lastName;
        }
    
        public void setLastName(String lastName) {
        
            this.lastName = lastName;
        }
    
        public String getEmail() {
        
            return email;
        }
    
        public void setEmail(String email) {
        
            this.email = email;
        }
    
        public Integer getGender() {
        
            return gender;
        }
    
        public void setGender(Integer gender) {
        
            this.gender = gender;
        }
    
        public Department getDepartment() {
        
            return department;
        }
    
        public void setDepartment(Department department) {
        
            this.department = department;
        }
    
        public Date getBirth() {
        
            return birth;
        }
    
        public void setBirth(Date birth) {
        
            this.birth = birth;
        }
        public Employee(Integer id, String lastName, String email, Integer gender,
                        Department department) {
        
            super();
            this.id = id;
            this.lastName = lastName;
            this.email = email;
            this.gender = gender;
            this.department = department;
            this.birth = new Date();
        }
    
        public Employee() {
        
        }
    
        @Override
        public String toString() {
        
            return "Employee{" +
                    "id=" + id +
                    ", lastName='" + lastName + '\'' +
                    ", email='" + email + '\'' +
                    ", gender=" + gender +
                    ", department=" + department +
                    ", birth=" + birth +
                    '}';
        }
    	
    	
    }

2、dao

package com.oceanstar.dao;
    
    import java.util.Collection;
    import java.util.HashMap;
    import java.util.Map;
    
    import com.oceanstar.entities.Department;
    import org.springframework.stereotype.Repository;
    
    
    
    @Repository
    public class DepartmentDao {
        
    
    	private static Map<Integer, Department> departments = null;
    	
    	static{
        
    		departments = new HashMap<Integer, Department>();
    		
    		departments.put(101, new Department(101, "D-AA"));
    		departments.put(102, new Department(102, "D-BB"));
    		departments.put(103, new Department(103, "D-CC"));
    		departments.put(104, new Department(104, "D-DD"));
    		departments.put(105, new Department(105, "D-EE"));
    	}
    	
    	public Collection<Department> getDepartments(){
        
    		return departments.values();
    	}
    	
    	public Department getDepartment(Integer id){
        
    		return departments.get(id);
    	}
    	
    }

package com.oceanstar.dao;
    
    import java.util.Collection;
    import java.util.HashMap;
    import java.util.Map;
    
    import com.oceanstar.entities.Employee;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Repository;
    
    
    
    @Repository
    public class EmployeeDao {
        
    
    	private static Map<Integer, Employee> employees = null;
    	
    	@Autowired
    	private DepartmentDao departmentDao;
    	
    	static{
        
    		employees = new HashMap<Integer, Employee>();
    
    		employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1, new Department(101, "D-AA")));
    		employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1, new Department(102, "D-BB")));
    		employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0, new Department(103, "D-CC")));
    		employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0, new Department(104, "D-DD")));
    		employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1, new Department(105, "D-EE")));
    	}
    	
    	private static Integer initId = 1006;
    	
    	public void save(Employee employee){
        
    		if(employee.getId() == null){
        
    			employee.setId(initId++);
    		}
    		
    		employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
    		employees.put(employee.getId(), employee);
    	}
    	
    	public Collection<Employee> getAll(){
        
    		return employees.values();
    	}
    	
    	public Employee get(Integer id){
        
    		return employees.get(id);
    	}
    	
    	public void delete(Integer id){
        
    		employees.remove(id);
    	}
    }

# 编写控制层 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 5]

# 修改list页面 #

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
    
        <title>Dashboard Template for Bootstrap</title>
        
        <link href="asserts/css/bootstrap.min.css" rel="stylesheet">
    
        
        <link href="asserts/css/dashboard.css" rel="stylesheet">
        <style type="text/css">
            /* Chart.js */
    
            @-webkit-keyframes chartjs-render-animation {
         
                from {
         
                    opacity: 0.99
                }
                to {
         
                    opacity: 1
                }
            }
    
            @keyframes chartjs-render-animation {
         
                from {
         
                    opacity: 0.99
                }
                to {
         
                    opacity: 1
                }
            }
    
            .chartjs-render-monitor {
         
                -webkit-animation: chartjs-render-animation 0.001s;
                animation: chartjs-render-animation 0.001s;
            }
        </style>
    </head>
    
    <body>
    <div th:replace="~{commons/bar::topbar}"></div>
    
    <div class="container-fluid">
        <div class="row">
            <div th:replace="~{commons/bar::#sidebar}"></div>
    
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <h2><a class="btn btn-sm btn-success" href="emp" th:href="@{/emp}">员工添加</a></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>[[${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 class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
                                <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </main>
        </div>
    </div>
    
    
    
    <script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
    <script type="text/javascript" src="asserts/js/popper.min.js"></script>
    <script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
    
    
    <script type="text/javascript" src="asserts/js/feather.min.js"></script>
    <script>
        feather.replace()
    </script>
    
    
    <script type="text/javascript" src="asserts/js/Chart.min.js"></script>
    <script>
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
         
            type: 'line',
            data: {
         
                labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                datasets: [{
         
                    data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
                    lineTension: 0,
                    backgroundColor: 'transparent',
                    borderColor: '#007bff',
                    borderWidth: 4,
                    pointBackgroundColor: '#007bff'
                }]
            },
            options: {
         
                scales: {
         
                    yAxes: [{
         
                        ticks: {
         
                            beginAtZero: false
                        }
                    }]
                },
                legend: {
         
                    display: false,
                }
            }
        });
    </script>
    
    </body>
    
    </html>

[20200117093635248.png]: https://img-blog.csdnimg.cn/20200117093635248.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200117093724111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200117095237187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200117095840252.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200117100659242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200117101037978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[2020011710153735.png]: https://img-blog.csdnimg.cn/2020011710153735.png
[20200117101832173.png]: https://img-blog.csdnimg.cn/20200117101832173.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200117102549533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70