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;
}
現在的首頁大概就是這個樣子：
您的支持是我寫作的最大動力：
