Spring boot+Thymeleaf+easyui集成：js创建组件页面报错

最新推荐文章于 2022-03-19 13:31:21 发布
最新推荐文章于 2022-03-19 13:31:21 发布
阅读量2.4k 收藏 4
点赞数 1
分类专栏： Java菜鸟 文章标签： spring boot themleaf easyui js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xlzwhq0000004/article/details/83144440
版权

开发工具：Ideal

       使用场景：Demo

前提：

       环境：Spring boot +Thymeleaf+easyui

        引入thymeleaf模板引擎

<html lang="en" xmlns:th="http://www.thymeleaf.org">

         Html页面引入easyui需要的文件

<link href="/js/jquery-easyui-1.5.3/themes/gray/easyui.css" rel="stylesheet"/>

<link href="/js/jquery-easyui-1.5.3/themes/icon.css" rel="stylesheet"/>

<script src="/js/jquery-easyui-1.5.3/jquery.min.js"></script>

<script src="/js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>

<script src="/js/jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>

当以标签属性创建easyui组件时，页面正常显示。

以标签属性创建easyui组件：

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"

       data-options="singleSelect:true,collapsible:true,url:'/getUsers',method:'get'">

    <thead>

        <tr>

            <th data-options="field:'id',width:80">Item ID</th>

            <th data-options="field:'name',width:100">姓名</th>

            <th data-options="field:'tel',width:80,align:'right'">电话</th>

        </tr>

    </thead>

</table>

       页面效果：

当以js形式创建组件时出现问题

以js创建easyui组件

<table id="dg"></table>

<script type="text/javascript">

    $(function(){

        $('#dg').datagrid({

            url: '/getUsers',

            method: 'get',

            title: '用户表',

            iconCls: 'icon-save',

            width: 800,

            height: 250,

            fitColumns: true,

            singleSelect: true,

            columns:[[

                {field:'id',title:'Item ID',width:80},

                {field:'name',title:'姓名',width:80},

                {field:'tel',title:'电话',width:80}

            ]]

        });

    });

</script>

效果：

后台报以下错误：

       [THYMELEAF][http-nio-8080-exec-1] Exception processing template "user": Could not parse as expression: "

                    {field:'id',title:'Item ID',width:80},

                    {field:'name',title:'姓名',width:80},

                    {field:'tel',title:'电话',width:80}

                " (template: "user" - line 26, col 27)

解决方式：

将

<script type="text/javascript" >

改为

<script type="text/javascript" th:inline="none">

 

Lost_Shiop
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
thymeleaf集成easyui
逆水乘舟，不进则退
12-11 3528
1.配置pom.xml &amp;lt;project xmlns=&quot;http://maven.apache.org/POM/4.0.0&quot; xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation=&quot;http://maven.apache.org/POM/4.0.0 http://maven.apache.org/
spring boot 使用jsp 集成hibernate+shiro+ehcache项目分享
10-29
【Spring Boot 使用 JSP 集成 Hibernate+Shiro+Ehcache 项目详解】 Spring Boot 是一个基于 Spring 框架的高度集成了多种技术的开发工具，它简化了配置过程，使得开发人员能够快速构建可运行的应用程序。在这个项目...
springboot+thymeleaf+pagehelper+easyui分页
03-29
本项目简单使用springboot为基础，用thymeleaf做模板，用pagehelper做java分页技术，用easyui做页面的分页技术
Springboot+ thymeleaf+ easyui （不含数据库） demo
热门推荐
welling319的博客
07-17 1万+
这段时间的一个工作任务是要实现一个本地的管理工具，之前的版本都是使用的javaGUI的界面；但自己对于GUI的使用非常不熟悉，所以就提出使用也买呢的方式实现。由于之前听过说过springboot的大名，所以就决定使用该框架，边学边用。 好在spring官方的文档还是比较多的，稍微看了一下，发现入门比较简单，另外工作任务的也只是需求本地使用，所以需求的功能也不会太苛刻。公司网络限制，只好在家里学好
解析springboot+thymeleaf+mybatis+pagehelper+easyui的分页
qwe303137085的博客
03-29 1251
今天简单给大家分享一下分页，使用的是springboot框架，简单说一下springboot，这是我用的感觉最爽的一个框架了，差不多什么都可以集成，集成也比较方便，只需要在maven中引入依赖包，在application.properties配置好需要用的参数，代码中用也好多时候直接使用注解就可以了，太简单方便了，在说一下thymeleaf模板引擎，他也是和springboot最搭的了，官方也推荐...
Spring Boot+Mybatis+Thymeleaf实现宠物医院管理系统
07-11
本项目核心技术采用 Spring Boot+Mybatis；开发工具 idea；数据库 MySQL5.6；模版引擎采用的是 Thymeleaf；安全框架采用 Shiro， 实现了完整权限系统，Controller 方法采用 Shiro 注解来实现有效的权限控制；前台...
Spring+SpringMVC+Mybatis+easyUI实现简单的后台管理系统.rar
06-17
6. **视图层**：使用JSP或Thymeleaf等技术，结合EasyUI组件展示数据。 系统可能还涉及权限管理、异常处理、日志记录等通用功能。例如，Spring Security可以用来处理用户认证和授权，日志框架如Log4j或SLF4J记录应用...
Spring Boot+Mybatis-Plus校园二手交易平台源码.zip
11-30
Spring Boot+Mybatis-Plus校园二手交易平台；本项目核心技术采用Spring Boot+Mybatis-Plus；开发工具 idea；数据库MySQL5.6；模版引擎采用的是Thymeleaf；在线编辑器CKEditor；基于 JavaMail 实现用 QQ 邮箱发送邮件...
Spring Boot+Mybatis宠物医院管理系统源码.zip
05-27
Spring Boot+Mybatis宠物医院管理系统；本项目核心技术采用Spring Boot+Mybatis；开发工具idea；数据库MySQL5.6；模版引擎采用的是Thymeleaf；安全框架采用Shiro，实现了完整权限系统，Controller方法采用Shiro注解...
spring boot+thymeleaf项目实战
02-09
spring boot+thymeleaf项目实战，几乎包含了所有的thymeleaf用到的一些东西
基于 Springboot、Shiro、Mybatis、Thymeleaf 做的后台管理系统（也有传统MVC版本，都在ZIP里）
08-10
基于 Springboot、Shiro、Mybatis、Thymeleaf 做的后台管理系统，简单粗暴
springboot+easyui demo
09-24
6. **EasyUI 集成**：在项目中，前端页面会引用 EasyUI 的 CSS 和 JS 文件，利用其组件进行界面设计。例如，使用 EasyUI 的表格组件展示数据库中的数据。 7. **RESTful API**：Spring Boot 通常采用 RESTful 风格...
spring boot案列
10-16
6. **EasyUI集成**：在前端，我们可以将EasyUI与Thymeleaf、FreeMarker等模板引擎结合，利用EasyUI的组件创建美观且功能齐全的用户界面。EasyUI的组件可以通过JavaScript API进行交互，实现数据的动态加载和更新。 ...
【Springboot项目源码13套打包】博客系统+停车位管理+商城后台等（含项目说明）
最新发布
07-15
13套Springboot项目源码目录如下： ...SpringBoot+SpringDataJpa+apache shiro+easyui+bootstrap开发的电影推酷网站（源码+SQL+测试数据） Springboot2+quartz实现定时器的增删改查 SpringBoot高仿小米电子商城项目
SpringBoot整合(Thymeleaf,JDBC,Druid,MyBatis,SpringSecurity)详细
weixin_49133806的博客
03-19 2236
SpringBoot快速搞定(详细)
Thymeleaf使用easy-ui出现脚本无法解析的问题
weixin_44613100的博客
06-04 537
问题来源 今天用SpringBoot中的Thymeleaf查询数据库中数据并进行分页，为了方便使用了easyui的datagrid，并通过脚本创建数据网格，但是一直报一个错误：无法解析datagrid的脚本语言。经过查询资料，解决方案如下： 原脚本如下： <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/
Springboot 整合 thymeleaf 简单使用
qq_38425662的博客
04-04 352
Springboot 整合 thymeleaf 简单使用目录结构:pom.xml的配置依赖application.yml 配置文件前端页面编辑usermapper.xml 文件编写页面显示:thymeleaf 常用标签，th:action,th:each,th:field,th:href,th:id,th:if,th:include,th:fragment,th:object,th:src,th:...
SpringBoot学习笔记 - web开发（Thymeleaf的应用）
weixin_30532837的博客
09-07 124
spring boot提供的大量的模板引擎，比如：freemarker，groovy，thymeleaf，velocity等。springboot中推荐使用Thymeleaf作为模板引擎，因为Thymeleaf对SpringMVC提供了完美的支持，可以很方便的集成。 1.Thymeleaf语法基础 Thymeleaf的语法可以参考官网：http://www.th...
spring boot+thymeleaf实现拦截器
05-24
好的，下面是使用Spring Boot和Thymeleaf实现拦截器的步骤： 1.创建一个拦截器类，该类需要实现HandlerInterceptor接口。在该类中，您可以实现三个方法：preHandle，postHandle和afterCompletion。这些方法分别在处理程序执行之前，之后和完成之后调用。 ```java import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Component; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.ModelAndView; @Component public class MyInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 在请求处理之前进行调用（Controller方法调用之前） System.out.println("请求处理之前调用……"); return true; // 如果返回false，则请求中断 } @Override public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception { // 请求处理之后进行调用，但是在视图被渲染之前（Controller方法调用之后） System.out.println("请求处理之后调用……"); } @Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception { // 在视图被渲染之后调用（主要用于资源清理工作） System.out.println("视图渲染之后调用……"); } } ``` 2.将拦截器注册到应用程序中。在Spring Boot应用程序中，您可以通过使用WebMvcConfigurerAdapter类来注册拦截器。在该类中，您可以重写addInterceptors方法，并将您的拦截器添加到拦截器链中。 ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class WebAppConfiguration extends WebMvcConfigurerAdapter { @Autowired private MyInterceptor myInterceptor; @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(myInterceptor); } } ``` 3.使用Thymeleaf进行视图渲染。在您的控制器方法中，您可以返回一个包含视图名称和模型对象的ModelAndView对象。在视图中，您可以使用Thymeleaf模板来渲染HTML内容。在下面的示例中，我们将使用layout.html作为页面布局，并使用th:replace指令将内容注入到该布局中。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> </head> <body> <div th:replace="layout :: content"> <h1 th:text="${message}">Hello, World!</h1> </div> </body> </html> ``` 4.创建一个包含布局的Thymeleaf模板。在该模板中，您可以定义页面的基本结构和样式，并使用th:fragment指令定义页面的各个部分。在下面的示例中，我们将使用layout.html作为页面布局，并使用th:fragment指令定义页面的内容部分。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="${pageTitle}">My Site</title> </head> <body> <div th:fragment="content"></div> </body> </html> ``` 以上就是使用Spring Boot和Thymeleaf实现拦截器的步骤。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值