說明
本教程是,原文章發佈系統教程的精編重置版,會包含每一節的源碼,以及修正之前的一些錯誤。因爲之前的教程只做到了評論模塊,很多地方還不完美,因此重製版會修復之前的一些謬誤和闡述不清的地方,而且,後期我會考慮完成該項目的後臺管理。希望本教程提供的內容,可以成爲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年,它曾經花費了我非常多的精力和時間。現在由於工作的關係,樓主打算重新拾起當年的熱情,開始動筆對該教程進行重製和進階。如有問題和建議可以在下方留言,我會視具體情況加以改進和修改。
隨便回覆一個評論,再刷新頁面,在文章底部就可以看到百度網盤了,教程會持續更新。