【手把手】JavaWeb 入門級項目實戰 -- 文章發布系統 (第八節)


首先,最近很多人都來問我問題,我列舉幾個比較典型的說明一下。

1. 一定要通過注解和反射的方式生產建表語句嗎,我能不能直接在mysql中建表?

當然可以,我只是為了說明一下注解和反射可以用在這個地方,實際開發肯定不會這么做啦。一般都使用框架,比如hibernate,mybatis,sping-jdbc等。

2. 如果我自己開發一個小項目,jdbc用什么框架比較好?

這個看具體情況,我個人比較喜歡sping-jdbc,因為我覺得還是自己寫sql來得直觀,mybatis雖然也是自己寫sql,但是需要花很多時間配置,如果不熟練的話,會在這部分花很多時間去排錯。至於hibernate,不得不說,這個思想很好,可是現在用的人也不是很多了。

如果有精力,可以自己將這些框架做一個封裝或者整合,弄一套適合自己的框架,也是可以的。

如果只是一個小項目,數據量不是很多的話,mybatis是個不錯的選擇,網上可以搜到一個逆向生成工具,直接生產bean層和dao層,一行代碼不用寫。

3. 一般企業開發用mysql多還是oracle多?

都有吧,看具體情況的,一般那種大型項目用oracle比較多。小項目的話,mysql用得比較多,我個人感覺是這樣,雖然我經歷的幾個公司都是用oracle。

4. 馬上面試了,好緊張啊,萬一被問到不會的咋辦?(校招)

校招的話,其實對方也知道你的情況,我建議如實說就好了。但你要堅信一點,就是編程這玩意其實真的好簡單的,沒有一般人想得那么復雜。

你要堅信只要給你時間,最多兩年,你就基本上什么都會了,新技術也一樣,沒什么大不了的。你現在可能還無法體會,以后慢慢會明白我說的。

我們畢竟不是去專門做什么算法研究,或者搞科研。

我們更多的是學着怎么應用,怎么去網上搜索已有的技術和demo完成功能。

說實話,從編程小白到熟能生巧,真的只是時間問題罷了。

所以完全沒必要緊張,如果碰到實在不會的題,就如實說不清楚唄。但你要給別人一種自信的感覺,就是一種“我只是現在沒接觸罷了,所以不會,但我知道這些東西都沒什么難的,給我點時間,自然就會了。”

1. 內容區回顧

本節繼續上一次的內容,把首頁來完善一下。

上次我們繪制了內容區,根據文章分類依次垂直排開:

Paste_Image.png

我們接下來,需要給文章的展示做一個封面,展示文章的標題,作者名稱等信息。

每個灰色小塊的html代碼:

<div class='category'>
	<div class='title'>連載小說</div>
	<ul class='items'>
		<li class='item'></li>
		<li class='item'></li>
		<li class='item'></li>
		<div style='clear:both'></div>
	</ul>
</div>

css代碼

.category {
	margin-top: 10px;
	margin-bottom:20px;
}
	
.category .title {
	margin-bottom: 10px;
    border-bottom: 1px solid #cac5c5;
    height: 30px;
	text-indent:1em;
	font-size:18px;
	color:#666;
}

.category .items {
	margin-left:10px;
}

.category .items .item {
    width: 230px;
    height: 320px;
    background: #ccc;
    margin: 20px;
    float: left;
    margin-right:20px;
    cursor:pointer;
}

這些代碼就相當於灰色小塊的骨架,今天我在寫文的時候突然想到了這個比喻,html代碼不就是頁面元素的骨架嗎?如果說html是元素的骨架,那么,css就是給這個骨架披上的一層外衣。

先寫骨架,再寫外衣。

雖然現在bootstrap,easyui等等的框架都越來越流行,可我還是覺得,作為一個碼農,基本的 div + css 還是要會一點的,總不能說一點都不會吧。

在寫css之前,我個人喜歡先把元素的骨架搭好,接下來的工作,無非就是給元素添加外衣罷了。

難道不是嗎,你覺得呢?

記得早些時候,剛參加工作,難免會遇到一些需要自己畫頁面的情況,當時我那個囧啊。

我當時想,媽蛋,勞資是學java的,干嘛非得讓我畫頁面啊!

可是總不能說我做不了吧,於是我只好各種百度,各種練習,每天都學到深夜12點鍾。

別無他法,去看別人的頁面怎么寫的。

那段時間好糾結的,各種看不懂,各種郁悶。

我總也想不通,就寫了幾個div,配上一些css,頁面怎么就能成這個樣子了呢?

沒辦法,我就跟着模仿,再加上自己總結。一開始怎么模仿都不像,一不小心布局就亂掉了。

我現在的觀點是,這方面真的沒啥捷徑,除非你真的特別特別聰明。

我的意思是說,就算你看了很多關於div + css的視頻,買了很多書,如果你自己不去練習,還是沒用的。

並不是說視頻看懂了就行了,還是要親自驗證,然后親自去調試。一點一點琢磨出來。

哪怕那個知識點你已經有100%的把握說自己明白了,你仍需要在項目實戰中用過一次,你才能真正理解。

如果剛進公司,不要去羡慕那些老程序員,其實他們真的只是比你寫得多而已。要有自信,你早晚也能掌握。

如果是一年前,我根本不會相信自己可以隨隨便便寫出頁面,真的,當時我覺得這是不可能的。

而現在,大部分網站,我大概看幾眼,猜一下布局,然后用瀏覽器自帶的調試工具這里看看,那里瞅瞅。最多幾個小時,就可以把這個網站的布局和頁面抄襲,哦不,借鑒過來了。(當然,不包括用框架制作的頁面)

反正這段時間也沒人教,我就自己琢磨,自己總結。現在寫習慣了而已。

是的,真的只是寫得多了,這就是一個孰能生巧的過程。

還有一個例子就是,有一天我偶然發現,我原來已經在盲打了,我之前一直沒意識到。

小時候特別羡慕那些電腦打字可以不看鍵盤的人,沒想到現在我也辦到了。

更奇怪的是,我都不知道為什么,就好比現在我在寫這篇文章,基本上我腦子想到一個什么地方,然后我就等待,等待屏幕上的文字跟隨到什么地方。

有的時候我還納悶,怎么屏幕上顯示得這么慢啊,能不能快一點??

接下來我才意識到,哦,原來我在打字啊。

媽了個雞蛋糕,我都沒意識到自己在打字啊。

我甚至天真地認為,腦子想到什么,電腦上的文字就應該隨着出現。

沒錯,這就是熟能生巧。

只要你願意花時間練習,堅持不懈,就一定能夠有所收獲。

2. 文章封面制作

2.1 HTML骨架

好的,接下來開始制作文章的封面。

首先,把骨架搭好。

每一個item就是一個封面:

Paste_Image.png

對於頁面上的小灰塊:

Paste_Image.png

一個item就是一個封面,現在我們要在封面里添加信息和進行div+css布局,怎么做呢?

誒,是不是肯定要寫在這里面呀?

<li class='item'>
				
</li>

一張封面,需要有這么幾個信息:
1.標題
2.梗概
3.作者
4.文章名稱
5.簡介

OK,我們來把這些東西填上去,然后隨便編一點數據。

<li class='item'>
	<div class='item-banner'>
		<div class='item-header'>生活中總是充滿了樂趣</div>
		<div class='item-name'>聊聊我的大學室友</div>
		<div class='item-author'>@張三 著</div>
	</div>
	<div class='item-description'>那些回憶,那些事。。。</div>
</li>

為了防止class重名,我給每一個樣式添加了一個 item- 的前綴。注意啊,這里的class是css樣式,和Java里面的class文件沒有半毛錢關系,不要混淆了。

先來張效果圖咯:

Paste_Image.png

2.2 CSS外衣

骨架搭好了,接下來的事情,無非就是給它披上外衣了,對不對?

接下來的代碼都是我自己的思路,沒必要完全照抄,如果你有更好的思路,做出更有意思的封面,也完全可以。

01、 將所有的div里面的文字居中

.category .items .item div {
	text-align:center;
}

Paste_Image.png

02、 根據banner部分添加背景色

banner只是我自己對這部分的稱呼,你隨便去什么名字都可以的,css風格每個人都不同。

.item-banner {
	background: #666;
    color: #FFF;
}

Paste_Image.png

03、 header部分的文字調整

.item-header {
	font-size: 12px;
    line-height: 52px;
}

Paste_Image.png

04、 文章名稱的樣式調整

.item-name {
    font-size: 22px;
    line-height: 74px;	
}

Paste_Image.png

05、 作者區域字體樣式調整

.item-author {
    font-size: 14px;
    text-indent: 7em;
    padding-bottom: 70px;
}

Paste_Image.png

06、 簡介部分

.item-description {
	background: #eee;
    height: 104px;
    line-height: 76px;
    text-indent: 3em;
    font-size: 12px;
}

Paste_Image.png

這樣就差不多完成了,好了,前台內容區域就這樣吧。

下一節開始,我們開始寫后台,然后前后台做一個對接。

本文結束,額,又水了一章。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM