前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第一节)

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第一节)

作者头像
剽悍一小兔
发布2018-12-10 09:56:13
1K9
发布2018-12-10 09:56:13
举报
文章被收录于专栏:web编程技术分享

说明

本教程是,原文章发布系统教程的精编重置版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期我会考虑完成该项目的后台管理。希望本教程提供的内容,可以成为JavaWeb初学者一套较为完整的练手项目。

最近琢磨着要写点东西,把基本的Java Web开发流程完整地走一遍,最后决定,干脆就写一个小小的项目实战吧。这个小项目作为一个JavaWeb的入门例子,从前台页面到项目发布,把整个流程走通。所谓麻雀虽小,五脏俱全。难度不是很高,正好可以作为入门使用。

接下来就是做什么的问题了,首先不能太简单,那样的话就没意思了。也不能太复杂,因为我的确也没那么多时间,思前想后,我打算写一个小型的文章发布系统。

老实说,我也不知道最终会做成什么样子,但是基本的CRUD肯定少不了的。前台页面的话,我会尽可能做得好看一点,毕竟我也不是专门做前端的。

至于知识点,当然是尽可能丰富,把我用过的,并且理解的东西,一步一步地集成进去。

嗯,这个系列一旦开始,以后基本上就围绕着这个小项目写文了。我的意思是,其他文章都不更了,在这个小项目写完之前,我会把其他的文章都放下,全心全意地编写这个系列。

终于开始了,想想还有点小激动呢。

1. 项目的大致规划

开发工具还是用eclipse,数据库采用mysql。MVC框架的话,我就不用框架了,纯粹用JSP来写,实际开发肯定不会这么做,不过,这毕竟还是有意义的。当然,你也可以把它换成框架版的。为什么用JSP?因为JSP比较简单,作为一个入门级的web项目,而且我是一边开发一边写文,我就懒得用MVC框架了。

为什么我要一边开发一边写,因为我觉得,如果全部开发好了,再让我从头开始,把开发流程写出来,那是很庞大的工作量,也不现实。而且,一边开发一边写还有个好处,那就是可以帮助读者看到整个项目的开发流程。

而且,包括我自己也不知道最终会写成什么样子,也可能本文结束后就GG了。

不过不管怎么说,这样都会保留一点点新鲜感和乐趣。

如果你是初学者,并且希望完整地看一个小项目是如何做出来的,那么,这个系列也许会适合你。

可能写10篇文章就结束,也可能30篇,看情况了。

好了,正式开始吧。

2. 项目搭建

2.1 新建项目

新建一个 Dynamic Web Project,名字叫Article

Paste_Image.png

点击Finish

Paste_Image.png

将项目的编码改为 utf-8

Paste_Image.png

2.2 新建web.xml

Paste_Image.png

这是web项目的规范,一个web.xml文件可以对你的web项目进行基本的配置。

2.3 编写web.xml

代码语言:javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">

 <!-- 欢迎页面 -->
 <welcome-file-list>
   <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>

</web-app>

2.4 编写index.jsp

在WebContent目录下新建一个index.jsp

Paste_Image.png

代码:

代码语言:javascript
复制
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    恭喜,web项目已经搭建完成。
</body>
</html>

这就是我们项目的首页。

2.5 用 tomcat 发布项目

我这边用的是tomcat7.0

Paste_Image.png

运行。

启动完毕后,打开浏览器,在地址栏输入

http://localhost:8080/Article/

(我这边的tomcat端口号为8080)

Paste_Image.png

然后可以清楚得看到,网页上出现了这么一行字:

恭喜,web项目已经搭建完成。

这就说明,web项目已经搭建成功了!

3. 首页制作

代码语言:javascript
复制
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<style>

</style>
</head>
<body>
    <div class="header">

    </div>
</body>
</html>

3.1 标题栏

我们在body区域画一个div,作为首页的标题栏。它的样式先全部在本页面写,也就是style块里面。

image.png

div是块级元素,所以,虽然我们没有给它设定宽度,它也默认就是父容器的宽度。所以,我们只需要给它一个高度就OK啦。

代码语言:javascript
复制
*{
    padding: 0 ;
    margin: 0 ;
}
.header {
    height: 60px ;
    background: #458fce ;
}

效果:

Paste_Image.png

3.2 画一个LOGO

接下来,绘制 logo,由于楼主的 PS水平比较渣,所以这个部分就用文字替代吧。当然,如果你是PS大神的话,也可以随便给我做一个logo,在下一节中我就放上去。

求 logo ...

代码语言:javascript
复制
<div class="header">
    <div class='logo'>原创文字</div>
</div>

css:

代码语言:javascript
复制
*{
    padding: 0 ;
    margin: 0 ;
    font-family: "微软雅黑" ;
}
.header {
    height: 72px ;
    background: #458fce ;
}
.header .logo {
    color: #fff ;
    line-height: 72px ;
    font-size: 30px ;
    margin-left: 20px ;
    display:inline-block ;
    font-weight:500 ;
}

效果:

Paste_Image.png

3.3 导航栏

我随便想了几个导航按钮(其实就是 ul li):

  1. 首页
  2. 原创故事
  3. 热门专题
  4. 欣赏美文
  5. 赞助
代码语言:javascript
复制
<div class="header">
    <div class='logo'>原创文字</div>
    <ul>
        <li>首页</li>
        <li>原创故事</li>
        <li>热门专题</li>
        <li>欣赏美文</li>
        <li>赞助</li>
    </ul>
</div>

同时,我们把 li 的小圆点去掉:

代码语言:javascript
复制
ul li {    
    list-style: none ;
}

Paste_Image.png

这个效果显然不是我们想要的,我们给logo加一个左浮动,于是原本在下面的元素就会跟过来。

image.png

Paste_Image.png

然后,给每一个 li 添加一个左浮动:

代码语言:javascript
复制
.header ul li {    
    float: left ;
}

Paste_Image.png

接着,我们把位置和颜色做一些调整:

代码语言:javascript
复制
<div class="header">
    <div class='logo'>原创文字</div>
    <ul>
        <li class='first'>首页</li>
        <li>原创故事</li>
        <li>热门专题</li>
        <li>欣赏美文</li>
        <li>赞助</li>
    </ul>
 </div>

css样式

代码语言:javascript
复制
.header ul li.first {
    margin-left: 30px;
}

.header ul li {
    float: left;
    color: #fff;
    display: inline-block;
    width: 112px;
    height: 72px;
    text-align: center;
    line-height: 72px;
    cursor: pointer;
}

标题栏

cursor: pointer 的意思就是说,当我鼠标划上去的时候,让鼠标变成一个小手的模样。

因为实际使用的时候,我们点击导航按钮就自动跳转页面,所以,一般来说,每一个导航按钮都应该是一个a标签。

我们将代码改一下:

代码语言:javascript
复制
<div class="header">
    <div class='logo'>原创文字</div>
    <ul>
        <li class='first'><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">原创故事</a></li>
        <li><a href="javascript:void(0)">热门专题</li>
        <li><a href="javascript:void(0)">欣赏美文</li>
        <li><a href="javascript:void(0)">赞助</a></li>
    </ul>
</div>

因为默认的a标签会有下划线,字体颜色是蓝色,为了美观,我们修改一下a标签的样式:

代码语言:javascript
复制
a {    
    color: #fff ;    
    text-decoration: none ;
}

3.5 给导航按钮添加hover事件

代码语言:javascript
复制
.header ul li :hover {    
    background:#74b0e2 ;
}

效果:

2.gif

奇怪了,li 的区域没有变色,而当我鼠标划到文字上的时候,会有一个小范围的变色,这是咋回事呢?

难道hover失效了?

当楼主写到这里的时候,我也确实纳闷了一会。。。

结果一查,发现:

Paste_Image.png

我擦,这里多了一个空格啊,有木有!

好吧,要细心一点。。

那么,我们去掉空格,就正常了。

代码语言:javascript
复制
.header ul li:hover {    
    background:#74b0e2 ;
}

这样就好看多了吧。

这一节只是画了一个页面而已,其他也没啥。

写在结尾

本教程原本写于2016年,它曾经花费了我非常多的精力和时间。现在由于工作的关系,楼主打算重新拾起当年的热情,开始动笔对该教程进行重制和进阶。如有问题和建议可以在下方留言,我会视具体情况加以改进和修改。

源码下载地址

随便回复一个评论,再刷新页面,在文章底部就可以看到百度网盘了,教程会持续更新。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.11.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 说明
  • 1. 项目的大致规划
  • 2. 项目搭建
    • 2.1 新建项目
      • 2.2 新建web.xml
        • 2.3 编写web.xml
          • 2.4 编写index.jsp
            • 2.5 用 tomcat 发布项目
              • 3. 首页制作
                • 3.1 标题栏
                  • 3.2 画一个LOGO
                    • 3.3 导航栏
                      • 写在结尾
                      相关产品与服务
                      云数据库 SQL Server
                      腾讯云数据库 SQL Server (TencentDB for SQL Server)是业界最常用的商用数据库之一,对基于 Windows 架构的应用程序具有完美的支持。TencentDB for SQL Server 拥有微软正版授权,可持续为用户提供最新的功能,避免未授权使用软件的风险。具有即开即用、稳定可靠、安全运行、弹性扩缩等特点。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档