說明
本教程是，原文章釋出系統教程的精編重置版，會包含每一節的源碼，以及修正之前的一些錯誤。因為之前的教程隻做到了評論子產品，很多地方還不完美，是以重制版會修複之前的一些謬誤和闡述不清的地方，而且，後期我會考慮完成該項目的背景管理。希望本教程提供的内容，可以成為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
<?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
代碼：
<%@ 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. 首頁制作
<%@ 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啦。
*{
padding: 0 ;
margin: 0 ;
}
.header {
height: 60px ;
background: #458fce ;
} 複制
效果：
Paste_Image.png
3.2 畫一個LOGO
接下來，繪制 logo，由于樓主的 PS水準比較渣，是以這個部分就用文字替代吧。當然，如果你是PS大神的話，也可以随便給我做一個logo，在下一節中我就放上去。
求 logo ...
<div class="header">
<div class='logo'>原創文字</div>
</div> 複制
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 ;
} 複制
效果：
Paste_Image.png
3.3 導航欄
我随便想了幾個導航按鈕（其實就是 ul li）：
- 首頁
- 原創故事
- 熱門專題
- 欣賞美文
- 贊助
<div class="header">
<div class='logo'>原創文字</div>
<ul>
<li>首頁</li>
<li>原創故事</li>
<li>熱門專題</li>
<li>欣賞美文</li>
<li>贊助</li>
</ul>
</div> 複制
同時，我們把 li 的小圓點去掉：
ul li {
list-style: none ;
} 複制
Paste_Image.png
這個效果顯然不是我們想要的，我們給logo加一個左浮動，于是原本在下面的元素就會跟過來。
image.png
Paste_Image.png
然後，給每一個 li 添加一個左浮動：
.header ul li {
float: left ;
} 複制
Paste_Image.png
接着，我們把位置和顔色做一些調整：
<div class="header">
<div class='logo'>原創文字</div>
<ul>
<li class='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标簽。
我們将代碼改一下：
<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标簽的樣式：
a {
color: #fff ;
text-decoration: none ;
} 複制
3.5 給導航按鈕添加hover事件
.header ul li :hover {
background:#74b0e2 ;
} 複制
效果：
2.gif
奇怪了，li 的區域沒有變色，而當我滑鼠劃到文字上的時候，會有一個小範圍的變色，這是咋回事呢？
難道hover失效了？
當樓主寫到這裡的時候，我也确實納悶了一會。。。
結果一查，發現：
Paste_Image.png
我擦，這裡多了一個空格啊，有木有！
好吧，要細心一點。。
那麼，我們去掉空格，就正常了。
.header ul li:hover {
background:#74b0e2 ;
} 複制
這樣就好看多了吧。
這一節隻是畫了一個頁面而已，其他也沒啥。
寫在結尾
本教程原本寫于2016年，它曾經花費了我非常多的精力和時間。現在由于工作的關系，樓主打算重新拾起當年的熱情，開始動筆對該教程進行重制和進階。如有問題和建議可以在下方留言，我會視具體情況加以改進和修改。
源碼下載下傳位址
随便回複一個評論，再重新整理頁面，在文章底部就可以看到百度網盤了，教程會持續更新。