01
國(guó)慶長(zhǎng)假終于結(jié)束了，博主想到以往這個(gè)時(shí)候，自己就已經(jīng)回到學(xué)校，和一群基友扯扯犢子，順便吹吹牛，好不快活，可惜這種生活不會(huì)再有了。雖說(shuō)如此，但是參加了工作以后，畢竟有更多的時(shí)間去做自己想做的事情，沒(méi)有了學(xué)校里的那么多約束，也不再需要為了考試忙活個(gè)半天，想來(lái)也是不錯(cuò)的。
好的，再次回到這個(gè)系列。
不知不覺(jué)，我發(fā)現(xiàn)自己在簡(jiǎn)書(shū)已經(jīng)寫(xiě)了好幾萬(wàn)字了。當(dāng)我無(wú)聊的時(shí)候，就會(huì)去看看自己之前寫(xiě)的文章，然后感到很奇怪，似乎那些東西根本不是自己寫(xiě)的一樣。我仿佛是在看別人的文章，好長(zhǎng)時(shí)間我都有這種感受。
這真的是挺奇怪的，不過(guò)我轉(zhuǎn)念又一想，當(dāng)我看自己幾個(gè)月以前的代碼的時(shí)候，也經(jīng)常有看不懂的情況，于是我也就釋然了。
管他呢，先往下寫(xiě)吧。
上次登錄工作做得差不多了，當(dāng)我們?cè)诘卿涰?yè)面輸入賬號(hào)和密碼，后臺(tái)會(huì)進(jìn)行一系列的驗(yàn)證，如果驗(yàn)證無(wú)誤，就跳轉(zhuǎn)到首頁(yè)。
現(xiàn)在我們對(duì)首頁(yè)進(jìn)行一個(gè)小小的調(diào)整，就是說(shuō)，如果登錄成功了，右上角的登錄圖標(biāo)就換成登錄人的名字。
這是標(biāo)題欄對(duì)應(yīng)的頁(yè)面 —— 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">首頁(yè)</a></li>
<li class='item'><a href="javascript:void(0)">原創(chuàng)故事</a></li>
<li class='item'><a href="javascript:void(0)">熱門(mén)專(zhuān)題</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)">注冊(cè)</a></span>
</div>
</div>
02
在上一節(jié)，我們判斷當(dāng)用戶(hù)名和密碼全部匹配的時(shí)候，就把user對(duì)象，還有username放到session中。
現(xiàn)在，要實(shí)現(xiàn)標(biāo)題欄判斷的功能，我們可能會(huì)這么想，就是能不能在header.jsp里面做一個(gè)簡(jiǎn)單的if判斷，如果username存在，那么就把 登錄|注冊(cè) 這個(gè)字樣給換掉。如果不存在，就維持原狀。
對(duì)的，毫無(wú)疑問(wèn)，這個(gè)思路肯定是可以的。
俗話(huà)說(shuō)得好，只要思想不滑坡，辦法總比困難多。寫(xiě)程序也是一樣，怕就怕沒(méi)思路，有了思路，啥都好說(shuō)。實(shí)在不行，就百度唄。
嗯，我百度了一下（好吧，其實(shí)我也不太會(huì)。。。），解決了一點(diǎn)點(diǎn)小問(wèn)題?，F(xiàn)在開(kāi)始進(jìn)行代碼的實(shí)現(xiàn)。
首先，需要導(dǎo)入兩個(gè)jar包，
分別是 jstl.jar 和 standard-1.1.2.jar
接著，在taglib.jsp中引入這個(gè)標(biāo)簽庫(kù)
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
這是JSTL的一個(gè)核心標(biāo)簽庫(kù)，有了它，我們就可以為所欲為，哦不，可以在JSP頁(yè)面上進(jìn)行一些簡(jiǎn)單的控制了，比如說(shuō)邏輯判斷。
于是，代碼就成了這樣。
<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)">注冊(cè)</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>
其實(shí)引入標(biāo)簽庫(kù)的時(shí)候，我有點(diǎn)疑惑，因?yàn)槲乙氲拿黠@是一個(gè)網(wǎng)址，也就是說(shuō)，這個(gè)標(biāo)簽庫(kù)應(yīng)該是遠(yuǎn)程的。既然是遠(yuǎn)程的，為什么我還必須要添加兩個(gè)jar包不可呢？可是如果我不添加的話(huà)，編譯又報(bào)錯(cuò)了。難道和tomcat的版本有關(guān)系？我用的是tomcat7.0。額，如果有大神知道的話(huà)，求告知一下，這個(gè)我真的不太清楚為什么。
不管了，先繼續(xù)往下寫(xiě)吧。
好的，讓我們測(cè)試一下。
用戶(hù)名: 張三
密碼： 123456
點(diǎn)擊登錄
成功了。
JSP作為一個(gè)被廣泛使用的模板引擎，有著很多很多的標(biāo)簽庫(kù)，也有不少第三方的標(biāo)簽庫(kù)。當(dāng)然，我們也可以自己編寫(xiě)標(biāo)簽，這個(gè)有時(shí)間的話(huà)，我也打算來(lái)寫(xiě)一寫(xiě)，自定義標(biāo)簽還是很有趣的。
03
有了登錄，肯定還需要有登出功能，總不可能每次都讓用戶(hù)關(guān)掉瀏覽器吧。
登出的話(huà)，我們只需要把session中的信息都刪掉就行了，然后自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面。
登出按鈕：
<span><a href="${basePath}/controller/logoutController.jsp">登出</a></span>
我們?cè)僭赾ontroller文件夾內(nèi)新建一個(gè)logoutController：
登出操作比較簡(jiǎn)單，我就直接上代碼了：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
//注銷(xiāo)
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");
%>
注銷(xiāo)后，頁(yè)面就自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面。
然后，即便你再次訪問(wèn)首頁(yè)，右上角也不會(huì)顯示用戶(hù)信息了。
因?yàn)槲覀円呀?jīng)將session中的用戶(hù)信息給刪除了。
04
接下來(lái)，我們繼續(xù)畫(huà)頁(yè)面，之前首頁(yè)的內(nèi)容區(qū)一直沒(méi)有做，現(xiàn)在我們來(lái)畫(huà)一下吧。
既然是文章發(fā)布系統(tǒng)，主角就是各種文章，對(duì)不對(duì)？好的，文章又分很多種類(lèi)，比如情感類(lèi)，勵(lì)志類(lèi)，科技類(lèi)等。于是，我們需要在首頁(yè)對(duì)不同的文章進(jìn)行一個(gè)分類(lèi)展示。當(dāng)然，只會(huì)展示前幾條數(shù)據(jù)。
index.jsp
內(nèi)容區(qū)代碼：
<div class='h600' style='border:1px solid #ccc'>
<div class='category'>
<div class='title'>連載小說(shuō)</div>
<ul class='items'>
<li class='item'></li>
<li class='item'></li>
<li class='item'></li>
</ul>
</div>
</div>
category有類(lèi)型，種類(lèi)的意思。
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，大概有一個(gè)樣子了。
接下來(lái)，我們給每一個(gè)item設(shè)置一個(gè)寬高，背景色，再加上一個(gè)左浮動(dòng)。
.category .items .item {
width: 160px;
height: 231px;
background: #ccc;
margin: 20px;
float: left;
}
就成了這樣：
因?yàn)槊恳粋€(gè)item都是左浮動(dòng)，所以別忘了清除浮動(dòng)。
基于這樣的一個(gè)思路，我們現(xiàn)在可以把頁(yè)面模型搭出來(lái)了。
html
<!-- 內(nèi)容區(qū)域 -->
<div style='border:1px solid #ccc'>
<br/><br/>
<div class='category'>
<div class='title'>連載小說(shuō)</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'>編程代碼類(lèi)</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)在的首頁(yè)大概就是這個(gè)樣子：
您的支持是我寫(xiě)作的最大動(dòng)力：
