vue页面里可以使用thymeleaf吗_Thymeleaf学习

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

落步惊风

4075人浏览 · 2021-01-26 03:29:05

落步惊风 · 2021-01-26 03:29:05 发布

1.是什么

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。

2.feature

　　　　1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
　　　2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
　　　3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

1.引入依赖

springboot直接引入：

　<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>

非springboot项目使用如下依赖：

<dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>2.1.4</version> </dependency>

默认的模板映射路径是：src/main/resources/templates，

springboot1.4之后，可以使用thymeleaf3来提高效率，并且解决标签闭合问题，配置方式：

<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>  <java.version>1.8</java.version> </properties>

之前的model/modelMap/modelAndView等页面数据传递参考之前随笔：点击查看

　　　　快速回顾：

model/modelMap/modelAndView

2.配置thymeleaf视图解析器

这点与springMVC是相类似的：

#thymeleaf start spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html #开发时关闭缓存,不然没法看到实时页面 spring.thymeleaf.cache=false #thymeleaf end

实际项目中可能会有不太严格的HTML格式，此时设置mode=HTML5将会对非严格的报错，可以参考以下配置：

spring.thymeleaf.mode=LEGACYHTML5

你可能会发现在默认配置下，thymeleaf对.html的内容要求很严格，比如<meta charset="UTF-8" />，
如果少最后的标签封闭符号/，就会报错而转到错误页。也比如你在使用Vue.js这样的库，然后有<div v-cloak></div>这样的html代码，
也会被thymeleaf认为不符合要求而抛出错误。因此，建议增加下面这段： spring.thymeleaf.mode = LEGACYHTML5 spring.thymeleaf.mode的默认值是HTML5，其实是一个很严格的检查，改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。需要注意的是，LEGACYHTML5需要搭配一个额外的库NekoHTML才可用。

<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>

最后重启项目就可以感受到不那么严格的thymeleaf了。

这样，需要的配置项如下：

# 一项是非严格的HTML检查，一项是禁用缓存来获取实时页面数据，其他采用默认项即可 thymeleaf: mode: LEGACYHTML5 cache: false

// 完整配置项参考类ThymeleafProperties

3。编写控制器

/** * 测试demo的controller * * @author zcc ON 2018/2/8 **/

@Controller

public class HelloController {

private static final Logger log = LoggerFactory.getLogger(HelloController.class); @GetMapping(value = "/hello")

public String hello(Model model) {

String name = "jiangbei";

model.addAttribute("name", name);

return "hello";

} }

4.编写模板html
<!DOCTYPE HTML>

<head>

<title>hello</title>

</head>

<body>

</body>

</html>

其中，注释是通过alt+enter进行自动生成的，便于IDEA补全，如果不加，IDEA将会报错cannot reslove，

　　当然也可以通过如下方式解决，解决之前推荐在maven项目中reimport一下！（据说新版本的IDEA中已经修复此问题，待更新至2017.3以后）

GitHub 加速计划 / vu / vue

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：5 个月前 )

9e887079 [skip ci] 3 个月前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前