了解了JSP的基础知识之后,接下来我就让博客页面开始动起来了,最终目的要基于JSP来实现“动态”的博客系统。
单纯使用Servlet同样也能完成类似功能,但是缺点也是显而易见的——大量HTML代码嵌入在Java源文件中,所以例子中不展示纯Servlet实现。
这一节以about页面为例,来编写第一个JSP页面。这个页面加入JSP动态化代码的地方包括两个:
提示
前端设计出来的页面都是HTML格式的,拿到一个HTML页面,编程JSP有两种方式:
<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html></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="#">访问 »</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() %>">访问 »</a></p>
</div>
可以看到,使用JSP表达式可以很容易的将单个项目展示部分动态化。
在完成了博客首页动态化的过程后,我们可能会发现上面的图片全都没有正确显示,为了能够正确显示图片:
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路径,该路径以/
开头,例如:
此时服务器会将其视为访问当前host中的“绝对路径”——也就是自动在这个路径之前添加上协议、主机名和端口(都是当前服务器的相同信息),那么无论我们访问的是当前网站下的任何路径,它都会给出统一的结果。
当然,还需要注意一点是,我们的Web应用部署在Servlet容器中的访问路径是http://localhost:8080/{AppName}
,AppName默认是当前工程的名字。所以为了静态资源你能够正确的访问,还需要在href
标签前加上{AppName}
:
当然这样做很麻烦,每一个静态资源的引用都要进行修改。所以不妨通过HTML中的<base>
标签来设置所有链接的相对地址:
这样做的一个问题是如果部署到生产环境的服务器中,这一部分内容需要修改,在以后的课程中我们再讲解如何解决这个问题。
登录发表评论 登录 注册
那么改相对路径的实际访问地址 中 改应该是该