使用Spring框架对接Twitter（二）

来源：互联网发布：淘宝买airpods靠谱吗编辑：程序博客网时间：2024/06/05 02:34

在上一节中，我们添加了控制层的相关逻辑处理。这样的话我们的应用程序是还没有完善的，我们还需要添加视图层才可行。为了美观，我们在这里用了WebJars的架包，所以我们要先了解这个技术。

1.使用WebJars来设计视图

接下来的视图设计中，我们将会应用一个很好的框架，它是由CSS和JavaScript响应的框架，读者可以登录http://materializecss.com这个网站去了解。好看的视图页面如下：

如果我们想使用个框架，那么我们需要在我们自己的项目的文件build.gradel文件中添加对应的架包。

compile 'org.webjars:materializecss:0.96.0'compile 'org.webjars:jquery:2.1.4'

在使用的页面中，我们需要添加下面的代码，说明是使用CSS的部分。

 <link href="/webjars/materializecss/0.96.0/css/materialize.css"type="text/css" rel="stylesheet" media="screen,projection"/>

2.使用layouts

layouts的设计的目的是减少代码的重复，换句话说就是将重复利用的代码统一封装起来。为了达到这样的目的，我们将用到thymeleaf-layout-dialect的依赖架包，这个架包主要包含spring-boot-starter-thymeleaf这个的依赖在我们项目中。

我们将文件有名字称为default.html，并将它放到src/main/resource/templates/layout下。下面是它包含的代码。

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head>    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>    <title>Default title</title>    <link href="/webjars/materializecss/0.96.0/css/materialize.css"          type="text/css" rel="stylesheet" media="screen,projection"/></head><body>    <section layout:fragment="content">        <p>Page content goes here</p>    </section>    <script src="/webjars/jquery/2.1.4/jquery.js"></script>    <script src="/webjars/materializecss/0.96.0/js/materialize.js"></script></body></html>

3.创建一个searchPage视图

在添加所有的视图中，不要忘记了添加下面有两行到对应的文件的头部地方。文件名叫searchPage.html,路径：src/main/resource/templates/

xmlns:th="http://www.w3.org/1999/xhtml"      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"      layout:decorator="layout/default"添加的searchPage的页面的代码如下： <!DOCTYPE html><html xmlns:th="http://www.w3.org/1999/xhtml"      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"      layout:decorator="layout/default"><head lang="en">    <title>Search</title></head><body>    <div class="row" layout:fragment="content">        <h4 class="indigo-text center">Please enter a search term</h4>        <!--错误时候的提示-->        <div class="col s6 offset-s3">            <div id="errorMessage" class="card-panel red lighten-2" th:if="${error}">                <span class="card-title" th:text="${error}"></span>            </div>        </div>        <!--查找时用的表单-->        <form action="/postSearch" method="post" class="col s12">            <div class="row center">                <div class="input-field col s6 offset-s3">                    <!--添加搜索的图标-->                    <i class="mdi-action-search prefix"></i>                    <!--查找框-->                    <input id="search" name="search" type="text" class="validate"/>                    <!--添加的标签，只要用户还没有输入就显示，输入了标签上移，for值与上面的id一样-->                    <label for="search">Search</label>                </div>            </div>        </form>    </div></body></html>

从上面的代码中我们可以看到，我们在最开始的地方添加了错误信息的提示代码。对应上一节和知识，相信读者可以明白这个原理是怎么来的。${error}信息无非就是控制层传过来的。当然，我们还定义了个表单，这个表单提交后访问的地址是“/postSearch”，对应了上一节所讲的@RequestMapping。还有一些CSS的设计，读者自己体会。运行之后，你将会看到的视图效果如下。

4.创建一个resultPage视图

resultPage的页面就是将控制层逻辑处理后的数据传到客户端，并展现给客户看的。代码如下。文件名叫：resultPage.html,路径在：src/main/resource/templates/

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"      layout:decorator="layout/default"><head lang="en">    <!--<meta charset="UTF-8"/>-->    <title>Hello twitter</title><!-- <link href="/webjars/materializecss/0.96.0/css/materialize.css"          type="text/css" rel="stylesheet" media="screen,projection"/>--></head><body><div class="row" layout:fragment="content">    <h2 class="indigo-text center" th:text="|Tweet results for ${search}|">Tweets</h2>    <ul class="collection">        <li class="collection-item avatar" th:each="tweet : ${tweets}">            <img th:src="${tweet.user.profileImageUrl}" alt="" class="circle"/>            <span class="title" th:text="${tweet.user.name}">Username</span>            <p th:text="${tweet.text}">Tweet message</p>        </li>    </ul></div><!--<script src="/webjars/jquery/2.1.4/jquery.js"></script><script src="/webjars/materializecss/0.96.0/js/materialize.js"></script>--></body></html>

从上面的代码中，我想有经验的读者应该知道其中有原理，当然还的Spring的SpEL表达式。具体的信息应该如下。读者自己体会。

执行resultPage后，你将会看到如下的结果。

5.总结

通过这一节的学习，笔者向大家展示了视图层是如何实现。为了美观，我们还用了WebJars的框架来设计。同时，为了不让代码有太多的重复，我们还使用了SpringMVC的功能Layout的设计。最后，我们看一下我们项目的层次结构。

源码路径：git@github.com:owenwilliam/masterSpringMVC.git

0 0