JSP實(shí)例——博客首頁(yè)

時(shí)間：2023-05-30 21:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-30 21:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

JSP實(shí)例——博客首頁(yè)：

由David發(fā)表在天碼營(yíng)

在學(xué)習(xí)了HTML/CSS等前端技術(shù)以后，我們能夠編寫(xiě)漂亮的靜態(tài)博客頁(yè)面，那么接下來(lái)就應(yīng)該考慮如何讓他們動(dòng)起來(lái)！這一節(jié)中我們將學(xué)習(xí)如何使用JSP來(lái)實(shí)現(xiàn)“動(dòng)態(tài)”的博客系統(tǒng)。單純使用Servlet同樣也能完成類(lèi)似功能，但是缺點(diǎn)也是顯而易見(jiàn)的——大量HTML代碼嵌入在Java源文件中，所以例子中不展示純Servlet實(shí)現(xiàn)。

博客首頁(yè)頁(yè)面需要?jiǎng)討B(tài)化的地方有兩個(gè)：

• 最上方導(dǎo)航欄中的“我的首頁(yè)”，“賬號(hào)管理”等信息只有在用戶(hù)登錄后顯示才有意義。由于尚未學(xué)習(xí)用戶(hù)登錄相關(guān)的細(xì)節(jié)知識(shí)，本節(jié)中判斷用戶(hù)是否登錄我們用一個(gè)返回固定值的函數(shù)來(lái)模擬實(shí)現(xiàn)。
• 用戶(hù)列表。隨著時(shí)間的推移，注冊(cè)用戶(hù)會(huì)越來(lái)越多，這個(gè)列表的內(nèi)容也是不固定的

通過(guò)條件判斷顯示導(dǎo)航欄

導(dǎo)航欄中需要根據(jù)條件決定是否隱藏導(dǎo)航鏈接，可以通過(guò)嵌入if表達(dá)式來(lái)實(shí)現(xiàn)：

<% if (2 > 1) { %><ul class="nav navbar-nav"> <li><a href="#">我的首頁(yè)</a></li> <li><a href="#">賬號(hào)管理</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">賬號(hào)管理 <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header">管理</li> <li><a href="#">博客信息</a></li> <li><a href="./create.jsp">創(chuàng)建博文</a></li> <li><a href="#">博客管理</a></li> <li class="divider"></li> <li class="dropdown-header">賬號(hào)</li> <li><a href="#">更改密碼</a></li> <li><a href="#">退出登錄</a></li> </ul> </li></ul><% } %>由于2>1恒成立，所以導(dǎo)航鏈接會(huì)展示出來(lái)。在真正的應(yīng)用中，這個(gè)if的條件應(yīng)該改成用戶(hù)是否登錄。

通過(guò)循環(huán)顯示用戶(hù)列表

既然是動(dòng)態(tài)化，那么有3個(gè)用戶(hù)，就寫(xiě)3個(gè)用戶(hù)的部分，必須通過(guò)循環(huán)來(lái)完成展示。這里我們簡(jiǎn)單的在JSP頁(yè)面中定義一個(gè)List存儲(chǔ)所有用戶(hù)，當(dāng)然這樣只是為了對(duì)用戶(hù)列表進(jìn)行動(dòng)態(tài)化示例，今后我們會(huì)學(xué)習(xí)如何從數(shù)據(jù)庫(kù)中讀取用戶(hù)列表。

顯示每一個(gè)用戶(hù)信息的區(qū)塊結(jié)構(gòu)是相同的，只是內(nèi)容（包括名字、描述、博客鏈接）不同，這是應(yīng)用循環(huán)來(lái)展示動(dòng)態(tài)信息的基礎(chǔ)，相關(guān)HTML內(nèi)容如下：

<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="#">訪問(wèn) &raquo;</a></p></div>對(duì)于每一個(gè)用戶(hù)，具體不同的內(nèi)容包括：

• 頭像，<img>標(biāo)簽的src屬性
• 名字，<h2>標(biāo)簽內(nèi)容
• 描述，<p>標(biāo)簽內(nèi)容
• 博客鏈接，<a>標(biāo)簽的href屬性

使用JSP對(duì)其動(dòng)態(tài)化：

<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 %>">訪問(wèn) &raquo;</a></p></div>可以看到，使用JSP表達(dá)式可以很容易的將單個(gè)用戶(hù)展示部分動(dòng)態(tài)化，接下來(lái)的任務(wù)是循環(huán)展示，首先我們?cè)贘SP中定義一個(gè)用戶(hù)列表：

<%@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"));%>注意在引入第三方類(lèi)庫(kù)（List, ArrayList）時(shí)，需要在JSP頁(yè)面頭部通過(guò)<%@page>指令將它們import進(jìn)來(lái)。上述例子定義了一個(gè)Java類(lèi)User來(lái)表示用戶(hù)，同時(shí)用一段Java代碼添加了3個(gè)用戶(hù)。注意：在JSP中定義的變量屬于臨時(shí)變量，作用域是該JSP文件，這里僅作為示例，不應(yīng)該在實(shí)際中這樣應(yīng)用。

通過(guò)JSP對(duì)users變量進(jìn)行循環(huán)：

<% 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 %>">訪問(wèn) &raquo;</a></p></div><% } %>

處理鏈接地址

在完成了博客首頁(yè)動(dòng)態(tài)化的過(guò)程后，我們可能會(huì)發(fā)現(xiàn)上面的圖片全都沒(méi)有正確顯示，為了能夠正確顯示圖片：

1. 將圖片（包括css, javascript等靜態(tài)資源）放置在WebContent目錄下（可以繼續(xù)通過(guò)文件夾層級(jí)進(jìn)行分類(lèi)），保證能夠在瀏覽器中直接訪問(wèn)
2. 將HTML源文件中的鏈接地址修改為合適的值

靜態(tài)資源分類(lèi)

WebContent目錄下的文件都會(huì)被直接復(fù)制到WAR的根目錄下，除了WEB-INF目錄受到保護(hù)不能從瀏覽器直接訪問(wèn)目錄內(nèi)容，其它的資源都可以直接被訪問(wèn)。所以我們對(duì)WebContent目錄結(jié)構(gòu)進(jìn)行劃分，將資源分類(lèi)：

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

設(shè)置合適的鏈接地址

以引入CSS文件為例，在靜態(tài)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">對(duì)于第一種外部地址的引用，無(wú)需修改；但是對(duì)于相對(duì)地址stylesheets/homepage.css的引用，瀏覽器會(huì)如何訪問(wèn)呢？假設(shè)當(dāng)前訪問(wèn)的URL是http://localhost:8080/，那么訪問(wèn)的資源URL是http://localhost:8080/stylesheets/homepage.css，似乎沒(méi)有問(wèn)題。但是請(qǐng)注意，相對(duì)路徑的含義是相對(duì)于當(dāng)前URL地址的路徑。如果我們?cè)L問(wèn)的是http://locahost:8080/posts/create，那么改相對(duì)路徑的實(shí)際訪問(wèn)地址是http://localhost:8080/posts/stylesheets/homepage.css，這顯然是不正確的。

在Web開(kāi)發(fā)中，我們往往需要一種介于相對(duì)路徑和絕對(duì)路徑之間的資源訪問(wèn)方式——Context路徑，該路徑以/開(kāi)頭，例如：

<link rel="stylesheet" href="/stylesheets/homepage.css">此時(shí)服務(wù)器會(huì)將其視為訪問(wèn)當(dāng)前host中的“絕對(duì)路徑”——也就是自動(dòng)在這個(gè)路徑之前添加上協(xié)議、主機(jī)名和端口（都是當(dāng)前服務(wù)器的相同信息），那么無(wú)論我們?cè)L問(wèn)的是當(dāng)前網(wǎng)站下的任何路徑，它都會(huì)給出統(tǒng)一的結(jié)果。

當(dāng)然，還需要注意一點(diǎn)是，我們的Web應(yīng)用部署在Servlet容器中的訪問(wèn)路徑是http://localhost:8080/{AppName}，AppName默認(rèn)是當(dāng)前工程的名字。所以為了靜態(tài)資源你能夠正確的訪問(wèn)，還需要在href標(biāo)簽前加上{AppName}：

<link rel="stylesheet" href="{AppName}/stylesheets/homepage.css">當(dāng)然這樣做很麻煩，每一個(gè)靜態(tài)資源的引用都要進(jìn)行修改。所以不妨通過(guò)HTML中的<base>標(biāo)簽來(lái)設(shè)置所有鏈接的相對(duì)地址：

<base href="http://localhost:8080/{AppName}/" />這樣做的一個(gè)問(wèn)題是如果部署到生產(chǎn)環(huán)境的服務(wù)器中，這一部分內(nèi)容需要修改，在以后的課程中我們?cè)僦v解如何解決這個(gè)問(wèn)題。