如何在 Grails 中包含 jquery.js？
Posted
技术标签:
【中文标题】如何在 Grails 中包含 jquery.js？【英文标题】：How to include jquery.js in Grails? 【发布时间】：2012-02-15 22:14:43 【问题描述】：我有一个使用 grails create-app 创建的 Grails 2.0.0 项目。在我的 html 和 GSP 文件中，我试图包含 jquery.js。我尝试了以下所有方法均未成功：
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<g:javascript library="jquery"/>
前两个 <script> 标记导致 404 Not Found（使用 Firebug 验证）。 <g:javascript>tag 不会包含任何内容（使用查看源代码验证）。
在我的 Grails 应用程序的主页上，它表示已安装 jquery 1.7.1（在“INSTALLED PLUGINS”下）。
在 Grails 中包含 jquery .js 文件的正确方法是什么？
跟进： .GSP 文件：
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>Test</title>
<g:javascript library="jquery/jquery"/>
</head>
<body>
<h1>Test</h1>
</body>
</html>
以下 HTML 源代码中的结果：
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
</body>
</html>
请注意没有包含 jquery.js。
跟进 2：
我正在使用grails create-app 创建我的应用程序：
13:56:40 ~/grailsDev $ grails create-app helloworld
| Created Grails Application at /Users/steve/grailsDev/helloworld
13:56:57 ~/grailsDev $ cd helloworld/
13:57:06 ~/grailsDev/helloworld $ ls -al web-app/js
total 8
drwxr-xr-x 3 steve staff 102 Jan 21 13:56 .
drwxr-xr-x 7 steve staff 238 Dec 15 08:04 ..
-rw-r--r-- 1 steve staff 183 Dec 14 22:56 application.js
13:57:23 ~/grailsDev/helloworld $ grails -version
Grails version: 2.0.0
【问题讨论】：
【参考方案1】：显然<r:layoutResources/> 需要包含在<head> 中（在<q:javascript library='jquery' /> 之后）。以下实际有效：
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>Simple GSP page</title>
<g:javascript library='jquery' />
<r:layoutResources/>
</head>
<body>
Place your content here
</body>
</html>
【讨论】：
【参考方案2】：jquery 插件默认安装在 2.0 中 - 请参阅 grails-app/conf/BuildConfig.groovy。要在 GSP 中使用 jquery.js，只需添加以下行：
<g:javascript library='jquery' />
【讨论】：
【参考方案3】：Steve 通过 grails install-plugin jquery 安装 Jquery 插件后，您必须执行另一个 grails 命令才能在您的应用中下载 jquery 文件
grails installJQuery
这个目标在web-app/js/jquery/下下载并安装jquery-1.7.1.js和jquery-1.7.1.min.js
【讨论】：
【参考方案4】：在 grails 2.x 中你也可以这样做：
grails.resources.modules =
core
dependsOn 'jquery, jquery-ui'
在Config.groovy
然后在您的 GSP 中只需将以下内容放入您的 HEAD 元素中：
<r:require module="core"/>
优点是您可以指定要依赖的其他 CSS/JS 文件，使其在 GSP 中美观整洁。这也是您可以覆盖 jQuery/jQuery-UI 版本的地方。
【讨论】：
【参考方案5】：根据当前文档 - http://grails.org/plugin/jquery（Grails 版本：1.3 > *），2015 年 9 月 18 日
安装
要安装 jQuery 插件，请从项目的根文件夹中输入以下命令：
grails install-plugin jquery
目标：
grails installJQuery
完整的 jQuery 发行版已下载并安装在项目的 /web-app/js/jQuery 文件夹下。
用法
通过 jQuery 实现 Ajax
让 Grails 的自适应 AJAX 支持自己适应 jQuery（而不是默认的 Prototype，或者像 YUI 或 Dojo 这样的其他选择）：
从 Grails 1.2 开始：
将此行添加到您的布局文件中
<g:javascript library="jquery" plugin="jquery"/>
以下内容添加到您的 grails-app/conf/config.groovy
grails.views.javascript.library="jquery"
您也可以使用：
<g:javascript library="jquery" />
（不带 plugin="jquery"）但您需要调用 grails installJQuery 目标（请参阅安装选项卡）
【讨论】：
【参考方案6】：我在 icodeya 中看到了一个很好的教程。 http://www.icodeya.com/2012/09/grails-different-ways-to-import.html
您可以在 gsp 中执行此操作：
<g:javascript src="myscript.js"/ >
或您可以在 Config.groovy 中执行此操作：
grails.resources.modules =
core
resource url:'/js/jQuery.js'
myScript
resource url:'/js/myScript.js'
dependsOn 'core'
然后，在您的 gsp 中，您可以附加以下内容：
<r:require module="myScript" />
【讨论】：
【参考方案7】：<g:javascript library="jquery/jquery"/>
【讨论】：
把这个字符串放在里面。我正在考虑 jquery 文件名是 jquery.js 并且它在 js/jquery 目录中。 史蒂夫：我猜你提供的路径有问题。能否请您将完整的路径粘贴到 js 文件。 我的项目没有js/jquery/jquery.js 也没有web-app/js/jquery.js。在grails create-app 之后是否需要执行一些额外的步骤才能启用/安装 jquery？
Steve：只需按照以下链接中的 grails create-app 之后的步骤操作即可。 grails.org/doc/latest/guide/…
但是 steve 你的目录显示你的应用程序中没有安装 jquery 插件，因为那里没有 jquery 文件【参考方案8】：
我发现（来自 JQuery 插件页面）除了使用 <g:javascript library="jquery"/> 标签外，我还必须显式添加插件标签以使标签看起来像：
<g:javascript library="jquery" plugin="jquery"/>
知道为什么我必须使用插件属性吗？
【讨论】：
【参考方案9】：目前，在 2015 年，您只需将 runtime ":jquery:1.11.1" 添加到您的 BuildConfig.groovy 即可。
【讨论】：
【参考方案10】：Grails 2.3 的更新 这可能有助于对 jQuery 的配置进行故障排除，以便可以从您的 gsp 页面中使用它。
-
首先，如果您运行 grails
install-plugin jquery 命令，它将失败并显示“安装插件”过时消息：
所以很可能您已经像这样在 BuildConfig.groovy 中配置了它（注意是运行时，而不是编译）：
plugins
// ... some other plugins here ...
runtime ":jquery:1:11:1"
如果您使用的是 Eclipse，请执行 File 搜索 jquery 并查看您是否已经拥有这些文件：
确认您的js 目录不为空，它位于web-app 目录内。如果js 没有文件或目录，则只需从您在步骤 2 中获得的内容中复制它们：
如前所述，这两行的组合似乎有效（在 gsp 页面的顶部）：
如果 jQuery 不是第一个加载的 javascript 库，您可能会遇到问题。如果有，请检查您的 layouts/main.gsp 文件。您可能需要将 jquery 添加到所有页面，使其位于 html 源代码的最顶部。
希望对您有所帮助。
注意：在发布这篇文章时（2015 年 4 月），Grails 3.0 已经发布，它似乎与 Grails 2.X 项目的配置方式不兼容。希望能够更好地记录以避免 2.X 的问题。
【讨论】：
以上是关于如何在 Grails 中包含 jquery.js？的主要内容，如果未能解决你的问题，请参考以下文章
如何从 Grails 应用程序的 URL 中删除应用程序名称？