jsp实现文章发表手把手JavaWeb 入门级项目实战文章宣布体系第一节

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

接下来便是做什么的问题了，首先不能太大略，那样的话就没意思了。
也不能太繁芜，由于我的确也没那么多韶光，思前想后，我打算写一个小型的文章发布系统。

诚笃说，我也不知道终极会做成什么样子，但是基本的CRUD肯定少不了的。
前台页面的话，我会尽可能做得好看一点，毕竟我也不是专门做前真个。

jsp实现文章发表手把手JavaWeb 入门级项目实战文章宣布体系第一节 GraphQL

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

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

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

1. 项目的大致方案

开拓工具还是用eclipse，数据库采取mysql。
MVC框架的话，我就不用框架了，纯粹用JSP来写，实际开拓肯定不会这么做，不过，这毕竟还是故意义的。
当然，你也可以把它换成框架版的。
为什么用JSP？由于JSP比较大略，作为一个入门级的web项目，而且我是一边开拓一边写文，我就

为什么我要一边开拓一边写，由于我以为，如果全部开拓好了，再让我从头开始，把开拓流程写出来，那是很弘大的事情量，也不现实。
而且，一边开拓一边写还有个好处，那便是可以帮助读者看到全体项目的开拓流程。

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

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

如果你是初学者，并且希望完全地看一个小项目是如何做出来的，那么，这个系列大概汇合适你。

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

好了，正式开始吧。

2. 项目搭建

2.1 新建项目

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

点击Finish

将项目的编码改为 utf-8

2.2 新建web.xml

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

2.3 编写web.xml

<?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

代码：

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

运行。

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

http://localhost:8080/Article/

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

然后可以清楚得看到，网页上涌现了这么一行字：

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

这就解释，web项目已经搭建成功了！

3. 首页制作

<%@ 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块里面。

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

{ padding: 0 ; margin: 0 ;}.header { height: 60px ; background: #458fce ;}

效果：

3.2 画一个LOGO

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

求 logo ...

css:

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

3.3 导航栏

我随便想了几个导航按钮（实在便是 ul li）：

首页原创故事热门专题欣赏美文资助

同时，我们把 li 的小圆点去掉：

ul li { list-style: none ;}

这个效果显然不是我们想要的，我们给logo加一个浮动。

然后，给每一个 li 添加一个左浮动：

.header ul li { float: left ;}

接着，我们把位置和颜色做一些调度：<div class=\"大众header\公众> <div class='ca5fa68c05f91e81 logo'>原创笔墨</div> <ul> <li class='a68c05f91e815684 first'>首页</li> <li>原创故事</li> <li>热门专题</li> <li>欣赏美文</li> <li>资助</li> </ul></div>

css样式

.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标签。

我们将代码改一下：

由于默认的a标签会有下划线，字体颜色是蓝色，为了都雅，我们修正一下a标签的样式：

a { color: #fff ; text-decoration: none ;}

3.5 给导航按钮添加hover事宜

.header ul li :hover { background:#74b0e2 ;}

效果：

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

难道hover失落效了？

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

结果一查，创造：