【手把手】JavaWeb 入門級項目實戰 - 文章發佈系統 （第一節）

時間  2019-11-16
標籤 手把手 javaweb 入門 項目 實戰 文章 發佈 系統 一節 欄目 Java 简体版
原文   原文鏈接

312334546574820.jpg

序

最近琢磨着要寫點東西，把基本的Java Web開發流程完整地走一遍，最後決定，乾脆就寫一個小小的項目實戰吧。這個小項目做爲一個JavaWeb的入門例子，從前臺頁面到項目發佈，把整個流程走通。所謂麻雀雖小，五臟俱全。難度不是很高，正好能夠做爲入門使用。javascript

接下來就是作什麼的問題了，首先不能太簡單，那樣的話就沒意思了。也不能太複雜，由於個人確也沒那麼多時間，思前想後，我打算寫一個小型的文章發佈系統。css

老實說，我也不知道最終會作成什麼樣子，可是基本的CRUD確定少不了的。前臺頁面的話，我會盡量作得好看一點，畢竟我也不是專門作前端的。html

至於知識點，固然是儘量豐富，把我用過的，而且理解的東西，一步一步地集成進去。前端

嗯，這個系列一旦開始，之後基本上就圍繞着這個小項目寫文了。個人意思是，其餘文章都不更了，在這個小項目寫完以前，我會把其餘的文章都放下，全心全意地編寫這個系列。java

終於開始了，想一想還有點小激動呢。mysql

1. 項目的大體規劃

開發工具仍是用eclipse，數據庫採用mysql。MVC框架的話，我就不用框架了，純粹用JSP來寫，實際開發確定不會這麼作，不過，這畢竟仍是有意義的。固然，你也能夠把它換成框架版的。爲何用JSP？由於JSP比較簡單，做爲一個入門級的web項目，並且我是一邊開發一邊寫文，我就懶得用MVC框架了。web

爲何我要一邊開發一邊寫，由於我以爲，若是所有開發好了，再讓我從頭開始，把開發流程寫出來，那是很龐大的工做量，也不現實。並且，一邊開發一邊寫還有個好處，那就是能夠幫助讀者看到整個項目的開發流程。sql

並且，包括我本身也不知道最終會寫成什麼樣子，也可能本文結束後就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塊裏面。

div是塊級元素，因此，雖然咱們沒有給它設定寬度，它也默認就是父容器的寬度。因此，咱們只須要給它一個高度就OK啦。

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

效果：

Paste_Image.png

接下來，繪製 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）：

  1. 首頁
  2. 原創故事
  3. 熱門專題
  4. 欣賞美文
  5. 贊助
<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加一個浮動。

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

3.gif

這樣就好看多了吧。

時間差很少了，今天就到這裏。至於更新頻率的話，不必定，不過周更是確定會有的。

這個系列也是個人一次嘗試，但願你們喜歡。

網盤地址 http://pan.baidu.com/s/1mhN754s#list/path=%2F

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程