Thymeleaf和Jsp一样是一个模板引擎,但是它有几个特点:
1.动静结合,就算没有服务器对页面进行解析(解析也就解析th:xxx),它也一样可以运行,比较友好;
2.支持html,后台的数据展示只需要在html中的标签加入额外属性,就可以达到模板+数据的展示方式;
3.对于表单的提交绑定数据,属性的编辑,国际化功能都可以比较快的完成;
4.通常情况下,前端如果想要获取后端的数据,一般都是通过Ajax发送异步请求来获取后台传输的数据,然后通过Js去处理这些数据,最后通过html方法或者是其他的将其拼接成字符串传入html标签中,最后被浏览器解析,从而更新页面数据;
而使用thymeleaf后,可以直接一步到位;
1.首先导入依赖spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-starter-thymeleaf
2.thymeleaf的参数配置:
如果你需要重新定义thymeleaf的属性,可以去ThymeleafAutoConfiguration类中,然后和之前一样的操作(像xxxAutoConfiguration这种,一般都是放组件的,一些执行流程,执行方法),然后里面的值就由对应的xxxProperties(也可以理解为实体类)来解决,然后里面绑定的值根据@ConfigurationProperties(prefix="xxx")就知道了:
@ConfigurationProperties(
prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean checkTemplate = true;
private boolean checkTemplateLocation = true;
private String prefix = "classpath:/templates/";
private String suffix = ".html";
private String mode = "HTML";
private Charset encoding;
private boolean cache;
private Integer templateResolverOrder;
private String[] viewNames;
private String[] excludedViewNames;
private boolean enableSpringElCompiler;
private boolean renderHiddenMarkersBeforeCheckboxes;
private boolean enabled;
private final ThymeleafProperties.Servlet servlet;
private final ThymeleafProperties.Reactive reactive;
3.控制层(简单逻辑):
1.当访问对应请求时,返回到login页面
/**
* 来登录页
* @return
*/
@GetMapping(value = {"/","/login"})
public String loginPage(){
return "login";
}
输入表单信息userName与password,利用th:action="@{/login}":也就是得到一个当前项目的login请求替换前面默认的action;
4.接下来我们处理这个请求:对于这个这个请求我们首先要有逻辑判断,进行简单的验证(这里不作数据库验证处理): 利用StringUtils的方法hasLength()与equals对userName与password进行验证,符合就放入session中,并且重定向到main页面,否则将错误提示信息传入请求域中并返回login页面;
@PostMapping("/login")
public String main(User user, HttpSession session, Model model){ //RedirectAttributes
if(StringUtils.hasLength(user.getUserName()) && "123456".equals(user.getPassword())){
//把登陆成功的用户保存起来
session.setAttribute("loginUser",user);
//登录成功重定向到main.html; 重定向防止表单重复提交
return "redirect:/main.html";
}else {
model.addAttribute("msg","账号密码错误");
//回到登录页面
return "login";
}
}
@GetMapping("/main.html")
public String mainPage(HttpSession session,Model model){
log.info("当前方法是:{}","mainPage");
return "main";
}
用thymeleaf处理前端时,我们常常需要将页面中的共同部分拿出来放到一个单独的页面中,这样我们可以利用thymeleaf对共同部分进行拿取;
1.th:fragment="xxx":说明这是个片段,可以在其他页面中被调用插入替换;
2.th:href="@{/css/style.css}":意思就是当前项目下的静态资源路径,static下...
th:src="@{xx/xxx}":与上述差不多,也是路径的
....
Thymeleaf中的语意还需要根据具体标签来判断,像标签这种里面的th:href,th:src...都只是引入资源;
像如果在标签中的th:href,那就是点击请求,让服务器处理请求的;
Data Tables
当点击这些a标签后,控制器中对应的方法会接收到对应的请求,然后显示对应页面;
这里提一下@RequestParam中的参数:defaultValue:有0、1两种形式,0:地址不需要参数,1:需要带参数;默认defaultValue为1;
@GetMapping("/dynamic_table")
public String dynamic_table(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model){
//简单遍历表单内容
Listuser=Arrays.asList(new User("zhangsan","12345"),
new User("Fairy","1233"));
model.addAttribute("users",users);
return "table/dynamic_table";//因为thymeleaf的suffix与prefix已经设定好了,而这个页面是在Template下面一个等级的
}
@GetMapping("/responsive_table")
public String responsive_table() {
return "table/responsive_table";
}
@GetMapping("/editable_table")
public String editable_table() {
return "table/editable_table";
}
}
一般来说,我们对公共代码代码块需要使用thymeleaf进行统一命名:th:fragment="xxx",或者在标签中用id
其他页面中插入公共部分:
三种方式:代替:整个标签容器连同内容一起代替
包括:只替换内容,不替换标签
插入:将公共部分的标签及其内容插入到当前页面标签下(可能会多出不要的标签)
1.当前请求被目标方法处理的过程中,所有数据分为了两个部分:数据and视图地址。他们会被放在·ModelAndViewContainer中;
2.任何方法执行完后都会返回ModelAndView,然后processDispatcherResult会处理派发结果(页面如何响应)
最关键的:render()方法,进行页面渲染逻辑,根据方法的返回值得到View对象;
1.然后遍历所有的视图解析器看能否根据返回值得到View对象
2.得到redirect:/main.html
3.内容协商视图解析器ContentNegotiationViewResolver里面包含了所有视图解析器,利用视图解析器得到视图对象(可以自定义)
4.view.render(modelAndview,req,resp):首先获取请求的url地址,然后resp.sendRedirect(url);