文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

6.3.4 创建视图

发布于 2025-04-21 21:10:09 字数 3101 浏览 0 评论 0 收藏 0

Grails 应用程序通常都用 GSP 模板来做视图。你已经看到过如何在 Spring Boot 应用程序里使用 GSP 了，因此，此处的模板并不会和 6.2 节里的模板有太多不同。

我们要做的是，利用 Grails 提供的布局设施，将公共的设计风格运用到整个应用程序里。如代码清单 6-7 所示，这就是个很简单的修改。

代码清单 6-7 一个适用于 Grails 的 GSP 模板，包含布局

<!DOCTYPE html>
<html>
  <head>
    <meta name="layout" content="main"/>     ←---使用了 main 布局
    <title>Reading List</title>
    <link rel="stylesheet"
          href="/assets/main.css?compile=false"  />
    <link rel="stylesheet"
          href="/assets/mobile.css?compile=false"  />
    <link rel="stylesheet"
          href="/assets/application.css?compile=false"  />
  </head>

  <body>
    <h2>Your Reading List</h2>

    <g:if test="${bookList && !bookList.isEmpty()}">     ←---列出图书
      <g:each in="${bookList}" var="book">
      <dl>
        <dt class="bookHeadline">
          ${book.title}</span> by ${book.author}
          (ISBN: ${book.isbn}")
        </dt>
        <dd class="bookDescription">
          <g:if test="${book.description}">
          ${book.description}
          </g:if>
          <g:else>
          No description available
          </g:else>
        </dd>
      </dl>
      </g:each>
    </g:if>
    <g:else>
      <p>You have no books in your book list</p>
    </g:else>

    <hr/>

    <h3>Add a book</h3>

    <g:form action="save">     ←---图书表单
    <fieldset class="form">
      <label for="title">Title:</label>
      <g:field type="text" name="title" value="${book?.title}"/><br/>
      <label for="author">Author:</label>
      <g:field type="text" name="author"
                          value="${book?.author}"/><br/>
      <label for="isbn">ISBN:</label>
      <g:field type="text" name="isbn" value="${book?.isbn}"/><br/>
      <label for="description">Description:</label><br/>
      <g:textArea name="description" value="${book?.description}"
                                     rows="5" cols="80"/>
    </fieldset>
    <fieldset class="buttons">
      <g:submitButton name="create" class="save"
        value="${message(code: 'default.button.create.label',
                                              default: 'Create')}" />
    </fieldset>
    </g:form>

  </body>
</html>

在 <head> 元素里移除了引用样式表的 <link> 标签。这里放了一个 <meta> 标签，引入了 Grails 应用程序的 main 布局。这样一来，应用程序就能用上 Grails 的外观了，运行效果如图 6-4 所示。

{%}

图 6-4 应用通用 Grails 风格的阅读列表应用程序

虽然 Grails 风格比之前用的简单的样式表更吸引眼球。但很显然的是，要让阅读列表应用程序更好看，还有一些工作要做。首先要让应用程序和 Grails 不那么像，和我们的想象更接近一点。修改应用程序的样式表在本书的讨论范围之外，但如果你对样式微调感兴趣，可以在 grails-app/ assets/stylesheets 目录里找到样式表文件。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

6.3.4 创建视图

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。