【手把手】JavaWeb 入門級項目實戰 -- 文章發佈系統 （第七節）

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;
}

如今的首頁大概就是這個樣子：