【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第七节)

01

国庆长假终于结束了,博主想到以往这个时候,自己就已经回到学校,和一群基友扯扯犊子,顺便吹吹牛,好不快活,可惜这种生活不会再有了。虽说如此,但是参加了工作以后,毕竟有更多的时间去做自己想做的事情,没有了学校里的那么多约束,也不再需要为了考试忙活个半天,想来也是不错的。

好的,再次回到这个系列。

不知不觉,我发现自己在简书已经写了好几万字了。当我无聊的时候,就会去看看自己之前写的文章,然后感到很奇怪,似乎那些东西根本不是自己写的一样。我仿佛是在看别人的文章,好长时间我都有这种感受。

这真的是挺奇怪的,不过我转念又一想,当我看自己几个月以前的代码的时候,也经常有看不懂的情况,于是我也就释然了。

管他呢,先往下写吧。

上次登录工作做得差不多了,当我们在登录页面输入账号和密码,后台会进行一系列的验证,如果验证无误,就跳转到首页。

现在我们对首页进行一个小小的调整,就是说,如果登录成功了,右上角的登录图标就换成登录人的名字。

Paste_Image.png

这是标题栏对应的页面 —— header.jsp

Paste_Image.png

代码

<%@ 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包,

Paste_Image.png

分别是 jstl.jarstandard-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。额,如果有大神知道的话,求告知一下,这个我真的不太清楚为什么。

不管了,先继续往下写吧。

好的,让我们测试一下。

Paste_Image.png

用户名: 张三 密码: 123456

点击登录

Paste_Image.png

成功了。

JSP作为一个被广泛使用的模板引擎,有着很多很多的标签库,也有不少第三方的标签库。当然,我们也可以自己编写标签,这个有时间的话,我也打算来写一写,自定义标签还是很有趣的。

03

有了登录,肯定还需要有登出功能,总不可能每次都让用户关掉浏览器吧。

登出的话,我们只需要把session中的信息都删掉就行了,然后自动跳转到登录页面。

登出按钮:

<span><a href="${basePath}/controller/logoutController.jsp">登出</a></span>

我们再在controller文件夹内新建一个logoutController:

Paste_Image.png

登出操作比较简单,我就直接上代码了:

<%@ 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");
%>

注销后,页面就自动跳转到登录页面。

然后,即便你再次访问首页,右上角也不会显示用户信息了。

Paste_Image.png

Paste_Image.png

因为我们已经将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;
}

Paste_Image.png

Paste_Image.png

OK,大概有一个样子了。

接下来,我们给每一个item设置一个宽高,背景色,再加上一个左浮动。

.category .items .item {
    width: 160px;
    height: 231px;
    background: #ccc;
    margin: 20px;
    float: left;
}

就成了这样:

Paste_Image.png

因为每一个item都是左浮动,所以别忘了清除浮动。

Paste_Image.png

基于这样的一个思路,我们现在可以把页面模型搭出来了。

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

现在的首页大概就是这个样子:

1.gif

我要下载源码

您的支持是我写作的最大动力:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python绿色通道

使用Python自动化发布文章(二)

本文是在上一篇文章 使用Python自动化发布文章:(一) 基础上加以改进而来的. 可以完成自动化发布文章。

2252
来自专栏Vue ssr

WebPagetest:新手一眼看懂使用教程

这是一个非常详细且专业的web页面性能分析工具,而且开源的!如果你打不开其官网,或者担心安全问题,你可以自己拿源码搭建这个平台工具。

7974
来自专栏机器学习算法与Python学习

让你高效工作的六大Windows应用

让你高效工作的六大windows应用 今 天我将给大家介绍一些我个人用到的这些Windows平台上的效率神器们。 page 1 Wox ? Wox官网 用 Ma...

3638
来自专栏DannyHoo的专栏

iOS开发抠psd文件中的图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1284
来自专栏程序你好

JavaScript调试和优化,深入研究谷歌Chrome浏览器开发工具(二)

您可以使用console.time(label)和console.timeEnd(label)来度量代码执行所需的时间。让我们在我们的简单示例中计算update...

1824
来自专栏本立2道生

电脑护眼设置:蓝色光波过滤

本人高度近视,因此平时使用电脑时总会关注如何护眼,安卓手机上使用了app “蓝色光波过滤”,感觉不错,就想看看PC上有没有相应的软件,找倒是找到了,不过需要先安...

861
来自专栏前端黑板报

构建离线web应用(一)

本文由哔哩哔哩前端工程师 墨白 翻译分享 我喜欢移动app,而且也是那些坚持使用Web技术构建移动应用程序的人之一。 经过技术的不断迭代(可能还有一些其它的东西...

28010
来自专栏腾讯云Elasticsearch Service

Elasticsearch最佳实践之搭建日志分析平台

(本次课程是通过小程序对外推广的,所以PPT是竖版的。电脑端浏览体验可能不太好,望大家见谅)

5021
来自专栏Elasticsearch实验室

基于Elastic Stack搭建日志分析平台

(本次课程是通过小程序对外推广的,所以PPT是竖版的。电脑端浏览体验可能不太好,望大家见谅)

2656
来自专栏架构师之路

微信钱包中58到家首页为什么这么快

原文标题《前后端分离和模块化-58到家微信首页重构之路》【深度前端干货】 微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->...

3107

扫码关注云+社区