记录一下
最近在做个练手的项目，想把thymeleaf和vue结合一起使用，但是又不想弄成前后端分离的项目，想法就是后端查询出数据之后，通过thmeleaf的渲染，把数据从java的对象的数据渲染到对应的JavaScript的变量的值，这样就可以使用vue来进行操作了。还有就是向在前端发送ajax请求到服务器，所以js代码中也需要thymeleaf来渲染请求路径，以至于在更改web项目根url之后，也能正常请求服务器。
要解决的两个问题：
- thymeleaf把查询出来的java对象渲染给js变量，然后在浏览器端就可以使用vue直接对数据进行相关的操作了
- 渲染js代码中的请求路径，保证路径是正确的绝对路径
解决方法：
- html文件中引入thymeleaf（当然这是必须的）
<html lang="en" xmlns:th="http://www.thymeleaf.org">
- 在需要渲染的html文件里的script标签加上属性==》th:inline=“javascript”，然后在需要渲染的地方加上两层中括号，然后在第二层中括号里面写上thmeleaf的表达式语法就可以了。
[[里面写thmeleaf语法]]
<script th:inline="javascript">
//后端中admin是一个java pojo对象
var admin = [[${admin}]];
//后端中admins是一个List<Admin>的list对象
var admins = [[${admins}]];
//这里这样写的话idea会报红，但是不用管
var path = [[@{/test/render}]];
console.log("admin:\n",admin);
console.log("admins:\n",admins);
console.log("path:\n",path);
</script>
后端共享数据到域
- 浏览器控制台查看渲染效果
控制台的输出，@{}被渲染之后路径会自动被补全了。
3956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
