【手把手】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;
}

如今的首页大概就是这个样子：