01
國慶長假終于結(jié)束了崖飘，博主想到以往這個時候榴捡，自己就已經(jīng)回到學(xué)校，和一群基友扯扯犢子朱浴，順便吹吹牛吊圾，好不快活，可惜這種生活不會再有了翰蠢。雖說如此项乒，但是參加了工作以后，畢竟有更多的時間去做自己想做的事情梁沧，沒有了學(xué)校里的那么多約束檀何，也不再需要為了考試忙活個半天，想來也是不錯的。
好的频鉴，再次回到這個系列栓辜。
不知不覺，我發(fā)現(xiàn)自己在簡書已經(jīng)寫了好幾萬字了垛孔。當(dāng)我無聊的時候藕甩，就會去看看自己之前寫的文章，然后感到很奇怪周荐，似乎那些東西根本不是自己寫的一樣狭莱。我仿佛是在看別人的文章，好長時間我都有這種感受羡藐。
這真的是挺奇怪的贩毕，不過我轉(zhuǎn)念又一想，當(dāng)我看自己幾個月以前的代碼的時候仆嗦，也經(jīng)常有看不懂的情況辉阶，于是我也就釋然了。
管他呢瘩扼，先往下寫吧谆甜。
上次登錄工作做得差不多了，當(dāng)我們在登錄頁面輸入賬號和密碼集绰，后臺會進行一系列的驗證规辱，如果驗證無誤，就跳轉(zhuǎn)到首頁栽燕。
現(xiàn)在我們對首頁進行一個小小的調(diào)整罕袋，就是說，如果登錄成功了碍岔，右上角的登錄圖標就換成登錄人的名字浴讯。
這是標題欄對應(yīng)的頁面 —— header.jsp
代碼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
<ul>
<li class='first'><a href="index.jsp">首頁</a></li>
<li class='item'><a href="javascript:void(0)">原創(chuàng)故事</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
在上一節(jié)，我們判斷當(dāng)用戶名和密碼全部匹配的時候蔼啦，就把user對象榆纽，還有username放到session中。
現(xiàn)在捏肢，要實現(xiàn)標題欄判斷的功能奈籽，我們可能會這么想，就是能不能在header.jsp里面做一個簡單的if判斷鸵赫，如果username存在衣屏，那么就把 登錄|注冊 這個字樣給換掉。如果不存在奉瘤，就維持原狀勾拉。
對的煮甥，毫無疑問，這個思路肯定是可以的藕赞。
俗話說得好成肘，只要思想不滑坡，辦法總比困難多斧蜕。寫程序也是一樣双霍，怕就怕沒思路，有了思路批销，啥都好說洒闸。實在不行，就百度唄均芽。
嗯丘逸，我百度了一下（好吧，其實我也不太會掀宋。镇眷。痴奏。）扔嵌，解決了一點點小問題∶嵯悖現(xiàn)在開始進行代碼的實現(xiàn)。
首先镣奋，需要導(dǎo)入兩個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>
其實引入標簽庫的時候陶贼，我有點疑惑，因為我引入的明顯是一個網(wǎng)址待秃，也就是說拜秧，這個標簽庫應(yīng)該是遠程的。既然是遠程的章郁，為什么我還必須要添加兩個jar包不可呢枉氮？可是如果我不添加的話志衍，編譯又報錯了。難道和tomcat的版本有關(guān)系聊替？我用的是tomcat7.0楼肪。額，如果有大神知道的話惹悄，求告知一下春叫，這個我真的不太清楚為什么。
不管了泣港，先繼續(xù)往下寫吧暂殖。
好的，讓我們測試一下当纱。
用戶名: 張三
密碼： 123456
點擊登錄
成功了呛每。
JSP作為一個被廣泛使用的模板引擎，有著很多很多的標簽庫坡氯，也有不少第三方的標簽庫晨横。當(dāng)然，我們也可以自己編寫標簽廉沮，這個有時間的話颓遏，我也打算來寫一寫，自定義標簽還是很有趣的滞时。
03
有了登錄叁幢，肯定還需要有登出功能，總不可能每次都讓用戶關(guān)掉瀏覽器吧坪稽。
登出的話曼玩，我們只需要把session中的信息都刪掉就行了，然后自動跳轉(zhuǎn)到登錄頁面窒百。
登出按鈕：
<span><a href="${basePath}/controller/logoutController.jsp">登出</a></span>
我們再在controller文件夾內(nèi)新建一個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");
%>
注銷后，頁面就自動跳轉(zhuǎn)到登錄頁面篙梢。
然后顷帖，即便你再次訪問首頁，右上角也不會顯示用戶信息了渤滞。
因為我們已經(jīng)將session中的用戶信息給刪除了贬墩。
04
接下來，我們繼續(xù)畫頁面妄呕，之前首頁的內(nèi)容區(qū)一直沒有做陶舞，現(xiàn)在我們來畫一下吧。
既然是文章發(fā)布系統(tǒng)绪励，主角就是各種文章肿孵，對不對唠粥？好的，文章又分很多種類停做，比如情感類晤愧，勵志類，科技類等雅宾。于是养涮，我們需要在首頁對不同的文章進行一個分類展示。當(dāng)然眉抬，只會展示前幾條數(shù)據(jù)贯吓。
index.jsp
內(nèi)容區(qū)代碼：
<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設(shè)置一個寬高爬舰，背景色，再加上一個左浮動寒瓦。
.category .items .item {
width: 160px;
height: 231px;
background: #ccc;
margin: 20px;
float: left;
}
就成了這樣：
因為每一個item都是左浮動情屹，所以別忘了清除浮動。
基于這樣的一個思路杂腰，我們現(xiàn)在可以把頁面模型搭出來了垃你。
html
<!-- 內(nèi)容區(qū)域 -->
<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;
}
現(xiàn)在的首頁大概就是這個樣子：
您的支持是我寫作的最大動力：
