进行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 {@Overridepublic 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 {@Overridepublic 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配置类中注册它

  @Overridepublic 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的页面放进去即可。

SpringBoot前端页面设置相关推荐

springboot前端传参date类型后台处理方式
springboot前端传参date类型后台处理方式先说结论:建议大家直接使用@JsonFormat,原因如下: 1.针对json格式:在配置文件中加以下配置 spring.jackson.date ...
springboot 前端传来的参数是string 后台接受类型为date
前提: 前端传来string,采用ajax,post请求后端(springboot 采用@RequestBody 接受对象) 后台报错: JSON parse error: Cannot deser ...
SpringBoot前端模板
Springboot支持thymeleaf.freemarker.JSP,但是官方不建议使用JSP,因为有些功能会受限制,这里介绍thymeleaf和freemarker. 一.thymeleaf模板 ...
springboot+前端实现文件(图片)上传到指定目录
第一步前端写html的代码 <div class="layui-form-item"><label for="fi ...
mysql+java+springboot+前端实现前后端数据的交互的后台
目录后台配置一-五一. 新建模块二.添加依赖三.配置maven 四.在pom.xml添加如下五.配置文件 spring-Druid配置参数详解给一个接口类实现接口在控制器中接受返回值 ...
springboot前端长轮询使用多线程异步执行任务
1.springboot使用多线程任务时bean 不能使用@Autowired注入可以提供一个外部类去获取bean对象 @Component public class ApplicationProv ...
SpringBoot前端Ajax以JSON格式获取后台数据
最近在用Thymeleaf做一个项目,耳边总是飘过前后端分离的话语,不得不去了解一下,在Thymeleaf里如何获取后端的json串,这里进行详细的讲解一下(困扰了我好久/哭了) 首先我们需要一个Co ...
前端页面设置重置按钮或刷新按钮
下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom.html)两个页面组成,代 ...
SpringBoot在线考试系统源码：前端使用 VUE 和 Element-UI 组件库配合开发
Springboot+vue在线考试系统源码开发语言:Java 数据库:Mysql 开发工具:Eclipse 源码免费分享,需要源码参考学习的小伙伴可私信我. 使用技术: 后端:SpringBoot ...

SpringBoot前端页面设置