JSP实例——博客首页

由David发表在天码营

在学习了HTML/CSS等前端技术以后，我们能够编写漂亮的静态博客页面，那么接下来就应该考虑如何让他们动起来！这一节中我们将学习如何使用JSP来实现“动态”的博客系统。单纯使用Servlet同样也能完成类似功能，但是缺点也是显而易见的——大量HTML代码嵌入在Java源文件中，所以例子中不展示纯Servlet实现。

博客首页页面需要动态化的地方有两个：

• 最上方导航栏中的“我的首页”，“账号管理”等信息只有在用户登录后显示才有意义。由于尚未学习用户登录相关的细节知识，本节中判断用户是否登录我们用一个返回固定值的函数来模拟实现。
• 用户列表。随着时间的推移，注册用户会越来越多，这个列表的内容也是不固定的

通过条件判断显示导航栏

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

<% if (2 > 1) { %>
<ul class="nav navbar-nav">
  <li><a href="#">我的首页</a></li>
  <li><a href="#">账号管理</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">账号管理
      <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li class="dropdown-header">管理</li>
      <li><a href="#">博客信息</a></li>
      <li><a href="./create.jsp">创建博文</a></li>
      <li><a href="#">博客管理</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">账号</li>
      <li><a href="#">更改密码</a></li>
      <li><a href="#">退出登录</a></li>
    </ul>
  </li>
</ul>
<% } %>

由于2>1恒成立，所以导航链接会展示出来。在真正的应用中，这个if的条件应该改成用户是否登录。

通过循环显示用户列表

既然是动态化，那么有3个用户，就写3个用户的部分，必须通过循环来完成展示。这里我们简单的在JSP页面中定义一个List存储所有用户，当然这样只是为了对用户列表进行动态化示例，今后我们会学习如何从数据库中读取用户列表。

显示每一个用户信息的区块结构是相同的，只是内容（包括名字、描述、博客链接）不同，这是应用循环来展示动态信息的基础，相关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属性

使用JSP对其动态化：

<div class="col-sm-4">
  <img class="img-circle" src="<%=avatarUrl %>" width="140" height="140">
  <h2><%=name %></h2>
  <p><%=description %></p>
  <p><a class="btn btn-default" href="<%=blogUrl %>">访问 &raquo;</a></p>
</div>

可以看到，使用JSP表达式可以很容易的将单个用户展示部分动态化，接下来的任务是循环展示，首先我们在JSP中定义一个用户列表：

<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>

<%!
public class User {
    public long id;
    public String name;
    public String description;
    public String avatar;

    public User(long id, String name, String description, String avatar) {
       this.id = id;
       this.name = name;
       this.description = description;
       this.avatar = avatar;
    }
}
%>
<%
  List<User> users = new ArrayList<>();
  users.add(new User(1L, "user1", "description1", "images/default-avatar.jpeg"));
  users.add(new User(2L, "user2", "description2", "images/default-avatar.jpeg"));
  users.add(new User(3L, "user3", "description3", "images/default-avatar.jpeg"));
%>

注意在引入第三方类库（List, ArrayList）时，需要在JSP页面头部通过<%@page>指令将它们import进来。上述例子定义了一个Java类User来表示用户，同时用一段Java代码添加了3个用户。注意：在JSP中定义的变量属于临时变量，作用域是该JSP文件，这里仅作为示例，不应该在实际中这样应用。

通过JSP对users变量进行循环：

<% for (User user : users) { %>
<div class="col-sm-4">
  <img class="img-circle" src="<%=user.avatar %>" width="140" height="140">
  <h2><%=user.name %></h2>
  <p><%=user.description %></p>
  <p><a class="btn btn-default" href="/user/<%= user.id %>">访问 &raquo;</a></p>
</div>
<% } %>

处理链接地址

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

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

静态资源分类

WebContent目录下的文件都会被直接复制到WAR的根目录下，除了WEB-INF目录受到保护不能从浏览器直接访问目录内容，其它的资源都可以直接被访问。所以我们对WebContent目录结构进行划分，将资源分类：

+--WebContent
|----images/
|----javascripts/
|----stylesheets/

设置合适的链接地址

以引入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}/" />

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