让页面动起来

了解了JSP的基础知识之后，接下来我就让博客页面开始动起来了，最终目的要基于JSP来实现“动态”的博客系统。

单纯使用Servlet同样也能完成类似功能，但是缺点也是显而易见的——大量HTML代码嵌入在Java源文件中，所以例子中不展示纯Servlet实现。

这一节以about页面为例，来编写第一个JSP页面。这个页面加入JSP动态化代码的地方包括两个：

• 最上方导航栏中的“账号"菜单只有在用户登录后显示才有意义。由于尚未学习用户登录相关的细节知识，本节中判断用户是否登录我们用一个返回固定值的函数来模拟实现。
• 一个程序的about页面一般都会介绍一下自己的实战项目，因此这里显示一个项目列表。这里项目列表通过JSP根据Java代码中的数据来动态生成，而不是原来的静态HTML页面。

通过条件判断显示导航栏

导航栏中需要根据条件决定是否隐藏账号菜单，可以通过嵌入if表达式来实现：

<% if (2 > 1) { %>
<li class="dropdown-header">账号</li>
<li><a href="#">更改密码</a></li>
<li><a href="#">退出登录</a></li>
<% } %>

由于2>1恒成立，所以账号菜单会展示出来。在真正的应用中，这个if的条件应该是用户是否登录。

显示项目信息

既然是动态化，项目的信息不是在页面中实现写好的，而应该通过JSP动态获取数据来完成展示。产品化的项目一般都是从数据库中获取数据的，今后我们会学习与数据库交互。这里我们依然类似于用户和博客信息，通过后台代码来模拟数据。

显示每一个项目信息的区块结构是相同的，只是内容（包括名字、描述、链接）不同，这是应用循环来展示动态信息的基础，展示项目信息的相关HTML内容如下：

<div class="col-sm-4">
  <img class="img-circle" src="static/img/catty.jpeg" width="140" height="140">
  <h2>purus molestie</h2>
  <p>Turpis inceptos, neque vel dolor. Mauris laoreet. Purus et, orci in sollicitudin, acm quam, iaculis lacus.</p>
  <p><a class="btn btn-default" href="#">访问 &raquo;</a></p>
</div>

对于每一个项目，具体不同的内容包括：

• 图片，<img>标签的src属性
• 名字，<h2>标签内容
• 描述，<p>标签内容
• 链接，<a>标签的href属性

因此，我们需要一个表示项目的模型类Project：

public class Project {
    private String name;
    private String description;
    private String url;
    private String logo;

    public Project(String name, String description, String url, String logo) {
       this.name = name;
       this.description = description;
       this.url = url;
       this.logo = logo;
    }
    
    // getters and setters
}

假如我们获取了一个Project实例project，则可以如下使用JSP对其动态化：

<div class="col-sm-4">
  <img class="img-circle" src="<%=project.getLogo() %>" width="140" height="140">
  <h2><%=project.getName() %></h2>
  <p><%=project.getDescription() %></p>
  <p><a class="btn btn-default" href="<%=project.getUrl() %>">访问 &raquo;</a></p>
</div>

可以看到，使用JSP表达式可以很容易的将单个项目展示部分动态化。

处理链接地址

在完成了博客首页动态化的过程后，我们可能会发现上面的图片全都没有正确显示，为了能够正确显示图片：

1. 将图片（包括css, javascript等静态资源）放置在WebContent目录下（可以继续通过文件夹层级进行分类），保证能够在浏览器中直接访问
2. 将HTML源文件中的链接地址修改为合适的值

WebContent目录下的文件都会被直接复制到WAR的根目录下，除了WEB-INF目录受到保护不能从浏览器直接访问目录内容，其它的资源都可以直接被访问。

以引入CSS文件为例，在静态HTML源文件中是这样引入CSS文件的：

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/homepage.css">

对于第一种外部地址的引用，无需修改；但是对于相对地址stylesheets/homepage.css的引用，浏览器会如何访问呢？假设当前访问的URL是http://localhost:8080/，那么访问的资源URL是http://localhost:8080/stylesheets/homepage.css，似乎没有问题。但是请注意，相对路径的含义是相对于当前URL地址的路径。如果我们访问的是http://locahost:8080/posts/create，那么改相对路径的实际访问地址是http://localhost:8080/posts/stylesheets/homepage.css，这显然是不正确的。

在Web开发中，我们往往需要一种介于相对路径和绝对路径之间的资源访问方式——Context路径，该路径以/开头，例如：

<link rel="stylesheet" href="/stylesheets/homepage.css">

此时服务器会将其视为访问当前host中的“绝对路径”——也就是自动在这个路径之前添加上协议、主机名和端口（都是当前服务器的相同信息），那么无论我们访问的是当前网站下的任何路径，它都会给出统一的结果。

当然，还需要注意一点是，我们的Web应用部署在Servlet容器中的访问路径是http://localhost:8080/{AppName}，AppName默认是当前工程的名字。所以为了静态资源你能够正确的访问，还需要在href标签前加上{AppName}：

 <link rel="stylesheet" href="{AppName}/stylesheets/homepage.css">

当然这样做很麻烦，每一个静态资源的引用都要进行修改。所以不妨通过HTML中的<base>标签来设置所有链接的相对地址：

<base href="http://localhost:8080/{AppName}/" />

这样做的一个问题是如果部署到生产环境的服务器中，这一部分内容需要修改，在以后的课程中我们再讲解如何解决这个问题。