【手把手】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. 內容區回顧
本節繼續上一次的內容，把首頁來完善一下。
上次我們繪製了內容區，根據文章分類依次垂直排開：
我們接下來，需要給文章的展示做一個封面，展示文章的標題，作者名稱等資訊。
每個灰色小塊的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就是一個封面：
對於頁面上的小灰塊：
一個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檔案沒有半毛錢關係，不要混淆了。
先來張效果圖咯：
2.2 CSS外衣
骨架搭好了，接下來的事情，無非就是給它披上外衣了，對不對？
接下來的程式碼都是我自己的思路，沒必要完全照抄，如果你有更好的思路，做出更有意思的封面，也完全可以。
01、 將所有的div裡面的文字居中
.category .items .item div {
text-align:center;
}02、 根據banner部分新增背景色
banner只是我自己對這部分的稱呼，你隨便去什麼名字都可以的，css風格每個人都不同。
.item-banner {
background: #666;
color: #FFF;
}03、 header部分的文字調整
.item-header {
font-size: 12px;
line-height: 52px;
}04、 文章名稱的樣式調整
.item-name {
font-size: 22px;
line-height: 74px;
}05、 作者區域字型樣式調整
.item-author {
font-size: 14px;
text-indent: 7em;
padding-bottom: 70px;
}06、 簡介部分
.item-description {
background: #eee;
height: 104px;
line-height: 76px;
text-indent: 3em;
font-size: 12px;
}這樣就差不多完成了，好了，前臺內容區域就這樣吧。
下一節開始，我們開始寫後臺，然後前後臺做一個對接。
本文結束，額，又水了一章。