（三）首页配置、国际化、登录功能、拦截器、员工列表展示、添加员工、修改员工信息、删除员工信息、404处理、注销页面

1.首页配置:

所有的页面静态资源都使用thymeleaf接管 th:href="@{/css/…}"

2.国际化：

1. resources下创建一个i18n文件夹
2. i18n下创建login.properties文件

再创建

3.登录功能

1.index.html页面添加

2.页面跳转到正式的页面

3.注意防止用户名密码展示做了映射

4.拦截器

5.员工列表展示

首页提取加高亮（active）显示

员工列表展示

6.添加员工

注意部门这里需要展示的是 th:text="KaTeX parse error: Expected '}', got 'EOF' at end of input: …，提交的是th:value="{dept.getId()

还有提交表单的方式是post ，获取表单信息是get


过程
1)点击添加按钮

2）跳转到add页面（注意部门需要显示的部门名称）

3）设置表单页面

4）底层提交

7.修改员工信息

1）编辑按钮获取准跳转到该id的员工修改页面（update.html，经过add.html修改）,中间需要controller层

2）controller层需要获取需要编辑的员工信息，并携带员工信息转到update.html页面（注意部门信息需要单独处理）

3）update.html接收传来的员工表单信息，并且通过post方式上传前端（中间经过controllor层）

注意1：员工id不能变，所以id隐藏域携带过来，性别通过判断选定获取

注意2：部门通过判断选定获取，生日日期需要格式化

<!--	插入顶部导航栏-->
		<div th:replace="~{commons/commons::topbar}"></div>
		<div class="container-fluid">
			<div class="row">
<!--			插入侧边栏-->
				<div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<form th:action="@{/updateEmp}" method="post">
<!--						id隐藏域携带过来  并且提交上去(覆盖原来的，id未改变)，相当于修改当前用户的数据-->
						<input type="hidden" name="id" th:value="${emp.getId()}">
						<div class="form-group">
							<lable>LastName</lable>
							<input th:value="${emp.getLastName()}" type="text" class="form-control" name="lastName" placeholder="张三">
						</div>
						<div class="form-group">
							<lable>Email</lable>
							<input th:value="${emp.getEmail()}" type="email" class="form-control" name="email" placeholder="123456@qq.com">
						</div>
						<div class="form-group">
							<lable>Gender</lable>
							<div class="form-check form-check-inline">
								<input th:checked="${emp.getGender()==1}" class="form-check-input" type="radio" name="gender" value="1">
								<lable class="form-check-label">男</lable>
							</div>
							<div class="form-check form-check-inline">
								<input th:checked="${emp.getGender()==0}" class="form-check-input" type="radio" name="gender" value="0">
								<lable class="form-check-label">女</lable>
							</div>
						</div>
						<div class="form-group">
							<label>department</label>
<!--							controller接受的是一个employee ，提交的应该是其中一个属性-->
							<select class="form-control" name="department.id">
								<option th:checked="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
							</select>
						</div>
						<div class="form-group">
							<label>Birth</label>
							<input type="text" th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}" class="form-control" name="birth" placeholder="2020-5-22">
						</div>
						<button type="submit" class="btn btn-primary">修改</button>
					</form>
				</main>
			</div>
		</div>

8.删除员工信息

1）list.html 删除按钮转向controller层，通过controller层进行删除操作（注意id传递）

9.404处理

直接添加

10.注销页面

1）注销位于头部栏 所以修改commons.html

2）controller层处理