1.首页配置:
所有的页面静态资源都使用thymeleaf接管 th:href="@{/css/…}"
2.国际化:
- resources下创建一个i18n文件夹
- 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层处理