我使用 grails 已经快一年了。从现在开始,当我想在 gsp 中链接 css 或 js 文件时。我做了以下事情:
我在 web-app 文件夹下创建了一个新文件(例如资源文件),并将所有文件夹文件放在那里(例如,导入 bootstrap 时,我在 resources 下有一个父文件夹 bootstrap,在 bootstrap 下有 css 、img 和 js 文件夹及其文件)。
然后,为了导入 css 文件,我执行了以下操作 ( here is documentation for this ):
<link rel="stylesheet" href="${resource(dir: 'resources/bootstrap/css', file: 'bootstrap.min.css')}" type="text/css">
<script src="${resource(dir: 'resources/bootstrap/js', file: 'bootstrap.min.js')}"></script>
这很有效,但是当我尝试在 grails 2.2.4 中创建一个新项目时,我遇到了“资源未找到”错误(浏览器为 404,控制台为以下内容)。
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/js/bootstrap.min.js
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/js/bootstrap.min.js
据我所知,控制台中的这些错误一次来自资源函数,一次来自客户端(浏览器)请求的 GET。
查看 resources plugin 时我看到他们建议使用 js 和 css 文件夹。将一个工具(例如twitter bootstrap)拆分在这两个目录中有意义吗?
最佳答案
好吧,我相信我有一个(半)工作解决方案:
假设我们需要同时包含 Twitter Bootstrap 3 和 TinyMce
在 webapp 目录下,我创建以下目录:
resources/bootstrap/
resources/bootstrap/css/
resources/bootstrap/css/bootstrap.min.css
resources/bootstrap/fonts/
resources/bootstrap/fonts/glyphicons-halflings-regular.eot
resources/bootstrap/fonts/glyphicons-halflings-regular.svg
resources/bootstrap/fonts/glyphicons-halflings-regular.ttf
resources/bootstrap/fonts/glyphicons-halflings-regular.woff
resources/bootstrap/js/
resources/bootstrap/js/bootstrap.min.js
resources/jquery/
resources/jquery/jquery-2.0.3.min.js
resources/tiny_mce/
resources/tiny_mce/langs/ /*many files here*/
resources/tiny_mce/plugins/ /*many files here*/
resources/tiny_mce/themes/ /*many files here*/
resources/tiny_mce/utils/ /*many files here*/
resources/tiny_mce/tiny_mce_popup.js
resources/tiny_mce/tiny_mce_src.js
resources/tiny_mce/tiny_mce.js
然后我在 ApplicationResources.groovy 中声明我的资源
modules = {
application {
resource url:'js/application.js'
}
jquery {
resource url:'resources/jquery/jquery-2.0.3.min.js'
}
bootstrap {
dependsOn 'jquery'
resource url:'resources/bootstrap/css/bootstrap.min.css'
resource url:'resources/bootstrap/js/bootstrap.min.js'
}
tinymce {
resource url:'resources/tiny_mce/tiny_mce.js'
}
}
在 Config.groovy 中
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*'] /*no changes here*/
grails.resources.adhoc.excludes = ['/**/langs/**/*.*', '/**/themes/**/*.*'] /*to permit some Ajax calls from tiny_mce.js to relevant resources*/
grails.resources.debug=true
/*
this is why I call my solution SEMI working.
If set grails.resources.debug to false, TinyMce is NOT working because the above excludes are not active, and I receive 404 errors
*/
然后,在main.gsp中
<!DOCTYPE html>
<head>
<g:javascript library="application"/>
<g:javascript library="bootstrap"/>
<g:javascript library="tinymce"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="Grails"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
<r:layoutResources />
<g:layoutHead/>
</head>
<body>
<div id="grailsLogo" role="banner"><a href="http://grails.org"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></a></div>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
<r:layoutResources />
</body>
</html>
在index.gsp中
<head>
...
<script type="text/javascript">
$(function() {
tinymce.init({selector:'textarea'});
});
</script>
</head>
<body>
...
<h1>Welcome to Grails</h1>
check bootstrap - start
<span class="glyphicon glyphicon-search"></span>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
check bootstrap - stop
<textarea>Your content here.</textarea>
...
</body>
使用上述内容,我可以完全运行 JQuery、Bootstrap3 和 TinyMCE 但是如果我在 Config.groovy 中设置
grails.resources.debug=true
我收到与 TinyMce 在页面加载后动态获取的 grails.resources.adhoc.excludes
资源相关的 404 错误。
有什么线索吗?我非常接近找到解决方案,所以我很高兴收到您的意见 该测试项目可以从这里下载:https://docs.google.com/file/d/0B8epX7R4j7jeaVh5OTFiQlV4V0U/edit?usp=sharing
关于grails - 找不到资源错误以及资源插件怎么办,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18741877/