01

國慶長假終于結束了，博主想到以往這個時候，自己就已經回到學校，和一群基友扯扯犢子，順便吹吹牛，好不快活，可惜這種生活不會再有了。雖說如此，但是參加了工作以后，畢竟有更多的時間去做自己想做的事情，沒有了學校里的那么多約束，也不再需要為了考試忙活個半天，想來也是不錯的。

好的，再次回到這個系列。

不知不覺，我發現自己在簡書已經寫了好幾萬字了。當我無聊的時候，就會去看看自己之前寫的文章，然后感到很奇怪，似乎那些東西根本不是自己寫的一樣。我仿佛是在看別人的文章，好長時間我都有這種感受。

這真的是挺奇怪的，不過我轉念又一想，當我看自己幾個月以前的代碼的時候，也經常有看不懂的情況，于是我也就釋然了。

管他呢，先往下寫吧。

上次登錄工作做得差不多了，當我們在登錄頁面輸入賬號和密碼，后臺會進行一系列的驗證，如果驗證無誤，就跳轉到首頁。

現在我們對首頁進行一個小小的調整，就是說，如果登錄成功了，右上角的登錄圖標就換成登錄人的名字。

這是標題欄對應的頁面 —— header.jsp

代碼

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <div class="header"><div class='logo'>原創文字</div><ul><li class='first'><a href="index.jsp">首頁</a></li><li class='item'><a href="javascript:void(0)">原創故事</a></li><li class='item'><a href="javascript:void(0)">熱門專題</li><li class='item'><a href="javascript:void(0)">欣賞美文</li><li class='item'><a href="javascript:void(0)">贊助</a></li></ul><div class='login'><span><a href="login.jsp">登陸</a></span> <span>|</span> <span><a href="javascript:void(0)">注冊</a></span></div> </div>

02

在上一節，我們判斷當用戶名和密碼全部匹配的時候，就把user對象，還有username放到session中。

現在，要實現標題欄判斷的功能，我們可能會這么想，就是能不能在header.jsp里面做一個簡單的if判斷，如果username存在，那么就把 登錄|注冊 這個字樣給換掉。如果不存在，就維持原狀。

對的，毫無疑問，這個思路肯定是可以的。

俗話說得好，只要思想不滑坡，辦法總比困難多。寫程序也是一樣，怕就怕沒思路，有了思路，啥都好說。實在不行，就百度唄。

嗯，我百度了一下（好吧，其實我也不太會。。。），解決了一點點小問題。現在開始進行代碼的實現。

首先，需要導入兩個jar包，

分別是 jstl.jar 和 standard-1.1.2.jar

接著，在taglib.jsp中引入這個標簽庫

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

這是JSTL的一個核心標簽庫，有了它，我們就可以為所欲為，哦不，可以在JSP頁面上進行一些簡單的控制了，比如說邏輯判斷。

于是，代碼就成了這樣。

<div class='login'><c:choose><c:when test="${empty sessionScope.username}"><span><a href="login.jsp">登陸</a></span> <span>|</span><span><a href="javascript:void(0)">注冊</a></span></c:when><c:otherwise><span><a href="javascript:void(0)">歡迎您，${sessionScope.username}</a></span> <span>?|?</span><span><a href="javascript:void(0)">登出</a></span></c:otherwise></c:choose> </div>

其實引入標簽庫的時候，我有點疑惑，因為我引入的明顯是一個網址，也就是說，這個標簽庫應該是遠程的。既然是遠程的，為什么我還必須要添加兩個jar包不可呢？可是如果我不添加的話，編譯又報錯了。難道和tomcat的版本有關系？我用的是tomcat7.0。額，如果有大神知道的話，求告知一下，這個我真的不太清楚為什么。

不管了，先繼續往下寫吧。

好的，讓我們測試一下。

用戶名: 張三
密碼： 123456

點擊登錄

成功了。

JSP作為一個被廣泛使用的模板引擎，有著很多很多的標簽庫，也有不少第三方的標簽庫。當然，我們也可以自己編寫標簽，這個有時間的話，我也打算來寫一寫，自定義標簽還是很有趣的。

03

有了登錄，肯定還需要有登出功能，總不可能每次都讓用戶關掉瀏覽器吧。

登出的話，我們只需要把session中的信息都刪掉就行了，然后自動跳轉到登錄頁面。

登出按鈕：

<span><a href="${basePath}/controller/logoutController.jsp">登出</a></span>

我們再在controller文件夾內新建一個logoutController：

登出操作比較簡單，我就直接上代碼了：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% //注銷session.removeAttribute("username");session.invalidate();String path = request.getContextPath();//獲取端口int port = request.getServerPort();String basePath = null;if(port==80){basePath = request.getScheme()+"://"+request.getServerName()+path;}else{basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;}response.sendRedirect(basePath + "/login.jsp"); %>

注銷后，頁面就自動跳轉到登錄頁面。

然后，即便你再次訪問首頁，右上角也不會顯示用戶信息了。

因為我們已經將session中的用戶信息給刪除了。

04

接下來，我們繼續畫頁面，之前首頁的內容區一直沒有做，現在我們來畫一下吧。

既然是文章發布系統，主角就是各種文章，對不對？好的，文章又分很多種類，比如情感類，勵志類，科技類等。于是，我們需要在首頁對不同的文章進行一個分類展示。當然，只會展示前幾條數據。

index.jsp

內容區代碼：

<div class='h600' style='border:1px solid #ccc'><div class='category'><div class='title'>連載小說</div><ul class='items'><li class='item'></li><li class='item'></li><li class='item'></li></ul></div></div>

category有類型，種類的意思。

css

.category .title {margin-bottom: 10px;margin-top: 30px;border-bottom: 1px solid #cac5c5;height: 30px;text-indent:1em;font-size:18px;color:#666; }

OK，大概有一個樣子了。

接下來，我們給每一個item設置一個寬高，背景色，再加上一個左浮動。

.category .items .item {width: 160px;height: 231px;background: #ccc;margin: 20px;float: left; }

就成了這樣：

因為每一個item都是左浮動，所以別忘了清除浮動。

基于這樣的一個思路，我們現在可以把頁面模型搭出來了。

html

<!-- 內容區域 --> <div style='border:1px solid #ccc'><br/><br/><div class='category'><div class='title'>連載小說</div><ul class='items'><li class='item'></li><li class='item'></li><li class='item'></li><div style='clear:both'></div></ul></div><div class='category'><div class='title'>編程代碼類</div><ul class='items'><li class='item'></li><li class='item'></li><div style='clear:both'></div></ul></div></div>

css

.category {margin-top: 10px;margin-bottom:20px; }.category .title {margin-bottom: 10px;border-bottom: 1px solid #cac5c5;height: 30px;text-indent:1em;font-size:18px;color:#666; } .category .items {margin-left:10px; } .category .items .item {width: 230px;height: 320px;background: #ccc;margin: 20px;float: left;margin-right:20px;cursor:pointer; }

現在的首頁大概就是這個樣子：

轉載于:https://www.cnblogs.com/skyblue-li/p/5943177.html

總結

以上是生活随笔為你收集整理的【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 （第七节）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。