进行css等静态资源加载的时候 需要由thymeleaf来接管 所以要在每个html文件中引入thymeleaf的命名空间
因为引用css样式是一个url连接 所以用@{}来对url进行取值
<link th:href="@{/css/bootstrap.min.css}"
必要的时候 可以清除一下thymeleaf的缓存
spring.thymeleaf.cache=false
- 设置首页
- 可以通过创建controller类 然后返回到index.html
- 可以创建在java类路径下创建config目录 创建myconfig类 实现WebMvcconfig接口 重写接口的方法来定制首页的url
@Configuration
public class Myconfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
}
}
第一个括号填定制的url定制 第二个括号填 定制的页面
- 默认情况下 只要类路径下由index.html,视图解析器就会自动加载为首页
使用th:if 判断返回的消息是否显示
<!--判断msg是不是为空 空的话 就不用显示-->
<span style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" ></span>
登录拦截器的设置
在java类路径下的config包下创建Interecptor类 继承HandlerInterceptor接口 重写public boolean preHandle(xxxx)方法
public class Interceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Object user = request.getSession().getAttribute("user");
if (user == null){
request.setAttribute("msg","权限不足");
response.sendRedirect("");
return false;
}else {
return true;
}
}
}
然后在config下的Myconfig配置类中注册它
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new Interceptor()).addPathPatterns("/**").excludePathPatterns("/index.html","/","/login","/css/**","/js/**","/img/**");
}
addPathPatterns:拦截哪些路径下的请求
excludePathPatterns:除了哪些路径下的请求
展示用户列表
工共部分提取
- 首先 将页面的公共部分提出(基本上就是导航栏和侧边栏) 以实现代码的复用
找到公共部分 使用==th:fragment=“xxxx”==标签 进行标记 xxxx即自定义名称 ,尽量是见名知意
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar"> 侧边栏
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar"> //导航栏
注意:提出时 将
标签折叠 以免提出时 内容有出入
- 将提出的页面 存放在一个新的html文件中 以便使用
- 在需要使用的地方(一般都是和提取代码重复的地方)插入
使用==th:replace="~{comments::sidebar}“==标签 进行公共部分的替换
<div th:replace="~{comments::sidebar}"></div>
注意:使用==~==符号来进行取值 {文件夹的路径::fragment标签的名字}
展示用户
- 将后台的信息传入 使用th:each标签进行遍历
th:each="emp:${emps}"
emp:遍历后每一项的名字 emps:后端传的集合名字
- 判断输出
如果有需要判断输出的内容 使用三目运算符
<td th:text="${emp.getGender()==0?'男':'女'}"></td>
取出的值等于0 结果是男 否则是女
- 日期格式转换
使用#data.formate()工具类
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}"></td>
- 侧边栏高亮
使用active属性 实现侧边栏高亮显示
思考?如何在我们点哪一个的时候哪一个高亮
- 在每一个公共部分替换的标签中 传递一个参数==(active=‘xxx’)==
<div th:replace="~{comments::topbar(active='list')}"></div>
注意:使用单引号
- 在存放公共部分的页面中 进行三目运算的判断
<a th:class="${active=='main'?'nav-link active':'nav-link'}"></a><a th:class="${active=='list'?'nav-link active':'nav-link'}" ></a>
这样的话 当我们点击哪个页面 那个页面就会实现高亮显示
新增用户
- 找一个form表单 将用户列表页复制 并将其中的内容换成from表单
- springboot默认的日期格式是:yyyy/MM/dd
- 如果想要切换格式为:yyyy-MM-dd 需要在配置文件中设置
spring.mvc.format.date=yyyy-MM-dd
修改用户
与新增用户功能共用一个页面 当我们点击编辑按钮时 会跳到修改页面 并携带这个修改用户的id
<a th:href="@{/toupdate/{id}(id=${emp.getId()})}"> <button class="btn btn-sm btn-primary" >编辑</button></a>
前面是restful风格的传参 后面括号里是表明id的值
然后编写controller 接收参数 并跳转 @PathVariable这个注解是来表明restful风格传的参数 就是这个参数
@GetMapping("/toupdate/{id}") public String toupdate(@PathVariable("id") Integer id,Model model){ Employee employee = employeeDao.getEmployee(id); model.addAttribute("emp",employee); Collection<Department> departments = departmentDao.getDepartments(); model.addAttribute("dept",departments); return "update";
将修改页面默认显示的值改成这个用户的值
th:value="${emp.getLastName()}"
对应的框填入对应的emp.getxxx()
th:value="${emp.getEmail()}"th:value="${emp.getGender()=='0'}"th:value="${emp.getGender()=='1'}"部门框比较特殊 需要显示的应该是这个人部门编号对应的部门名称th:selected="${emp.getDepartment().getId()==department.getId()}"日期格式也需要进行调整 springboot默认的格式是yyyy/MM/ddth:value="${#dates.format(emp.getBirth(),'yyyy/MM/dd')}"
删除功能
删除功能不需要新的页面 在本来的页面即可完成
思路:前台传参 后台接受 然后执行删除操作后 跳转到新的页面
th:href="@{/delete/{id}(id=${emp.getId()})}"
@GetMapping("/delete/{id}") public String delete(@PathVariable("id") Integer id){ employeeDao.detelById(id); return "redirect:/emps"; }
错误页面
404 500 这些错误页面 我们只需要在temleate路径下 创建error文件 将文件名为404 和500的页面放进去即可。