致讀者的一封信
親愛的讀者:
你們好!
初次見面,寫點(diǎn)什么好呢? 雖然本書是一本關(guān)于Java Web的技術(shù)圖書,但我希望書中能夠穿插一些文藝的內(nèi)容,因?yàn)槌绦騿T的成長過程中不只有技術(shù)和程序,還有詩和
遠(yuǎn)方。記得木心先生有這樣一首小詩《從前慢》,我選取其中兩段念給大家聽(請注意坐姿):
記得早先少年時
大家誠誠懇懇
說一句 是一句
從前的日色變得慢
車,馬,郵件都慢
一生只夠愛一個人
聽到這里,你是不是也特別懷念以前慢的日子,尤其是上初中、高中的時期。那時候有手機(jī)的同學(xué)并不多,同學(xué)們之間的主要聯(lián)系方式還是寫紙質(zhì)的信,信封是純潔的白色。下課鈴聲響起,我趴在走廊的圍欄邊上往下瞧,收信箱那里總能瞅見三五成群的同學(xué),他們的臉上寫滿了殷切的期待,我想他們一定像我一樣,期待著遠(yuǎn)方的朋友或者親人的來信,那信里都寫著什么呢? 也許是肝膽相照的友情,也許是朦朦朧朧的戀情,也許是關(guān)懷備至的親情?傊,那時候的書信,充滿著令人懷念的味道,那味道,就像深巷里的酒香。
那么,現(xiàn)在,就讓我來寫一封信給親愛的你們吧! 讓我來揣摩你們的心思,替你們提幾個問題,然后請?jiān)试S我再來一一作答,看看這些問題,這些答案是否是你們想要的。倘若這些問題不在你的咨詢范圍內(nèi),這些答案也未能使你感到滿意,那么你可以通過以下的聯(lián)系方式找到我,把你想要咨詢的問題,或者是想要對我說的悄悄話,統(tǒng)統(tǒng)告訴我吧,我期待著你的回信,這里是沉默王二的解憂雜貨店,就像東野圭吾筆下的那家解憂店一樣回答在牛奶箱里。
下面,請進(jìn)入我們的開講了欄目,為了配合我的演出,這里有請帥氣的主持人小二哥登場(一陣熱烈的掌聲)。
小二哥:請和大家介紹下你和目前所從事的工作吧。
馬偉青:大家好,我是馬偉青。為了更加親民,小二哥以后可以稱呼我為小王老師,至于原因嘛,var 小王老師=馬偉青。
我給自己的標(biāo)簽是掃地僧,為什么這樣說呢? 首先來看這樣一幕場景吧!
客戶鐘總:邢總,咱們這套集電商、項(xiàng)目訂單發(fā)布與訂單訂轉(zhuǎn)等業(yè)務(wù)與一體的綜合服務(wù)系統(tǒng)什么時候能正式上線?
老板邢總:鐘總,快了快了。咱們公司的所有工程師,包括項(xiàng)目總監(jiān)、產(chǎn)品經(jīng)理、開發(fā)工程師、UI設(shè)計(jì)師、測試人員等這一段時間都在加班加點(diǎn)趕進(jìn)度,最慢一個月后就能正式上線。
……
放下手機(jī)后,邢總有意無意地瞥了一眼旁邊的程序員小青,而恰好此時小青也在直勾勾地瞅著他,于是他們的目光就像電池的正負(fù)極對接在了一起,激起一道電光火石。小青的目光里寫滿了吃驚:邢總,全公司的開發(fā)人員就我一個啊,哪有什么項(xiàng)目總監(jiān)、產(chǎn)品經(jīng)理、開發(fā)工程師、UI設(shè)計(jì)師、測試人員,撂大話可真是臉不紅心不跳啊!
那邊邢總也會了意,表示:小青,別狐疑了,說的還不就是你,你就是我的掃地僧啊。什么技術(shù)做不來,什么問題解決不了,還有什么是你做不出來的!
嗯,上面場景中的小青可不是《新白娘子傳奇》中的青蛇,他其實(shí)就是我,一名普普通通的程序員,一名名副其實(shí)的掃地僧,除了和老板談業(yè)務(wù)、設(shè)計(jì)產(chǎn)品、敲代碼、做測試、做項(xiàng)目維護(hù)和運(yùn)營外,辦公室的地板也確實(shí)要掃,廁所的馬桶也確實(shí)得刷。
小二哥:小王老師說話就是幽默,我都笑得合不攏嘴了。那小王老師能聊聊為什么要寫這本書嗎?
馬偉青:首先,回想我剛開始學(xué)習(xí)編程的時候,那是在大學(xué)期間寫的第一個靜態(tài)網(wǎng)頁,其復(fù)雜程度現(xiàn)在回想起來都覺得不可思議。要做一個網(wǎng)頁,網(wǎng)頁三劍客是必須要學(xué)會用的,因?yàn)轫撁娌季中枰狣reamweaver,圖片處理需要Fireworks,動畫制作需要Flash。我記得當(dāng)時做的是一個農(nóng)產(chǎn)品展示的首頁,沒有涉及一點(diǎn)服務(wù)器端的代碼,真的就是一個靜態(tài)的HTML頁面,就足足花了我兩個多月的時間。現(xiàn)在回想當(dāng)時的學(xué)習(xí)過程,完全就是在摸著石頭過河。
你可能會問,不是還有老師和同學(xué)嗎? 不會去圖書館借書讀嗎?
是,可以問老師和同學(xué),也可以去圖書館借書讀,但收效甚微。為什么會這樣? 因?yàn)閷τ诰幊虂碚f,老師也不敢拍著胸脯說自己很有經(jīng)驗(yàn),因?yàn)榇蠹叶际浅鯇W(xué)者,甚至有些愛學(xué)習(xí)的同學(xué),編程能力還在老師之上。至于技術(shù)圖書,大部分都是諸如《21天學(xué)會用Dreamweaver》《21天學(xué)會用Fireworks》的快餐式書籍,對初學(xué)Java Web編程的學(xué)生來說,幫助很有限。那么,對于一名在校的學(xué)生或者剛剛接觸Web開發(fā)的編程人員來說,如何才能擁有一個總攬全局的導(dǎo)航地圖呢? 相信不止我一人曾有過這樣的困惑。
其次,我相信,像我這樣的程序員還有很多,需要掌握多種技能,并能利用這些技能快速迭代出產(chǎn)品,尤其是對于公司而言,這樣的掃地僧是剛需?梢院敛豢鋸埖卣f,能夠在創(chuàng)業(yè)初期就遇到一位稱職的掃地僧是創(chuàng)業(yè)公司的幸運(yùn)。換句話說,如果公司最終走向成功,掃地僧也將會獲得優(yōu)厚的報酬。那么如何才能成為一名對公司發(fā)展至關(guān)重要的掃地僧(在嚴(yán)格意義上講,掃地僧更專業(yè)的術(shù)語應(yīng)該是全棧工程師)呢?
我想,《Web全棧開發(fā)進(jìn)階之路》這本書就是一個不錯的答案。Web開發(fā)是一個動態(tài)的領(lǐng)域,新的編程語言、框架和技術(shù)陸續(xù)出現(xiàn),流行,然后消失,技術(shù)的更新?lián)Q代就好像雨后春筍一般。作為開發(fā)者的我們,不必為此感到恐慌,因?yàn)橹灰覀儾粩嗟貙W(xué)習(xí)和實(shí)踐,就能夠淬煉出一種永不過時的學(xué)習(xí)能力,有了這種能力之后,任憑環(huán)境怎么日新月異,我們都能夠保持巋然不動的姿態(tài)。
我寫這本書的目的就是幫助初學(xué)者梳理出一個清晰的導(dǎo)航地圖,幫助開發(fā)者培養(yǎng)一種良好的學(xué)習(xí)能力。有了清晰的導(dǎo)航地圖,那么在學(xué)習(xí)過程中就不再感到迷茫,就有了培養(yǎng)學(xué)習(xí)能力的基礎(chǔ)。而一旦養(yǎng)成了良好的學(xué)習(xí)能力,那么在工作當(dāng)中就能夠發(fā)現(xiàn)問題,并且解決問題,成為公司發(fā)展過程中不可或缺的一員。
小二哥:聽小王老師這樣講完,我也迫不及待想要踏上Web全棧開發(fā)進(jìn)階之路了。寫書不是一件容易的事情,能不能談?wù)勗谶@段期間內(nèi)的辛酸和收獲?
馬偉青:說句實(shí)話,在寫作的最初階段,我真的是挺后悔自己做出寫書這個決定的。因?yàn)閷懖┛涂梢韵鄬﹄S心所欲一些,畢竟都是自己的一家之言,可以不考慮語言是否嚴(yán)謹(jǐn),可以不考慮技術(shù)是否專業(yè),也可以不考慮讀者是否滿意,總之,可以有一千個不負(fù)責(zé)任的理由。但寫書就不一樣了,要認(rèn)認(rèn)真真地考量技術(shù),要細(xì)細(xì)致致地考量技術(shù),也要地付出120%的努力,所以經(jīng)常是寫完之后改,改完之后刪,刪完之后再寫。
從2017年5月份準(zhǔn)備寫作,到2017年年底,7個月的時間過去了,我也只是完成了書稿的前三章,還是零零碎碎的樣子,那時候我的內(nèi)心是絕望的。工作上,要以一己之力完成項(xiàng)目,費(fèi)時費(fèi)力費(fèi)心,幾檔檔檔檔檔乎騰不出時間寫作;生活上,我家女兒那時還不滿兩歲,精力旺盛,下班回到家后她幾乎能把我折騰得精疲力竭。我原本寄希望于老婆能夠挺身而出,給我創(chuàng)造一個相對安靜的寫作環(huán)境,但這個希望就像是陪女兒上早教課時老師吹起的泡泡,美麗但很快就會破碎,然后消失得無影無蹤。
我該怎么辦呢? 下定決心做了這些安排。
1. 調(diào)整自己的作息習(xí)慣,早上5點(diǎn)準(zhǔn)時起床,寫作到8點(diǎn),這段時間世界是安靜的。
2. 抵制一切浪費(fèi)時間的行為,例如說手機(jī)刷朋友圈、看無聊的新聞和視頻。
3. 堅(jiān)持,想做一件事當(dāng)然很簡單,但把一件事做成功卻沒有那么容易,所謂念念不忘,必有回響,唯有堅(jiān)持,方得始終。
現(xiàn)在,《Web全棧開發(fā)進(jìn)階之路》這本書終于和大家見了面,我也進(jìn)化成了一個更好的自己自信、自律。
小二哥:我對小王老師的總結(jié)就是,世上無難事,只怕有心人,只要肯下決心去做,世界上就沒有什么辦不到的事情,困難總是可以克服的。那么咱們這本《Web全棧開發(fā)進(jìn)階之路》面向的群體是怎樣的?
馬偉青:好,請?jiān)试S我先省掉一些自謙的話語(笑),《Web全棧開發(fā)進(jìn)階之路》可以說是一本W(wǎng)eb開發(fā)的百科簡書。本書沒有對目標(biāo)讀者做任何限制,只要你喜歡開發(fā)Web,那么都可以從本書中獲益。本書的內(nèi)容通俗易懂,同時配套做了大量的實(shí)例來講解 Web 開發(fā)必備的基礎(chǔ)技能。
1. 假如你是一名初級開發(fā)人員,通過親自動手實(shí)踐本書提供的示例,可以快速讓你進(jìn)階到中級的開發(fā)水平。雖然書中所有的源代碼均可以自由獲取,但我不建議大家只是為了看代碼來學(xué)習(xí)本書,進(jìn)而錯過了一次很好的練手機(jī)會,因?yàn)樗械拈_發(fā)技能都需要不斷練習(xí),熟能生巧,巧能生輝。
套用心學(xué)創(chuàng)始人王陽明的話,叫做知行合一,即在學(xué)習(xí)理論知識的過程中反復(fù)練習(xí),在實(shí)踐的過程中溫故知新。在王陽明提出知行合一之前,人們普遍信奉的是朱熹的先知后行(知就是學(xué)知識,行就是行動、做事情),認(rèn)為知和行是分開的,在實(shí)際運(yùn)作之前要先學(xué)好理論,有把握了再去做。對比朱熹和王陽明的觀點(diǎn),我更認(rèn)可知行合一,因?yàn)樵谖业恼J(rèn)知中,理論知識注定是枯燥的,如果一味地先去格物(學(xué)習(xí)理論)而后實(shí)踐,注定要誤入書呆子的歧途。
2. 假如你是一名中級開發(fā)人員,想在Web開發(fā)的道路上走得遠(yuǎn)、攀得高、持續(xù)精進(jìn),想在短時間內(nèi)無壓力地搞定一個Web項(xiàng)目,那么這本書涉及到的優(yōu)秀案例、提到的框架設(shè)計(jì)思想會對你有所幫助。
小二哥:這本書有什么特色呢?
馬偉青:第一,專注于解決問題。曾有人這樣說過:很多人都能夠發(fā)現(xiàn)問題,但只有少數(shù)人既能發(fā)現(xiàn)問題,又能解決問題。我很認(rèn)同這句話,并把這句話當(dāng)做是自己奮斗的一個標(biāo)桿。這本書中我列出的實(shí)例也都是對實(shí)際項(xiàng)目中解決問題的過程進(jìn)行的總結(jié)和提煉,相信這會幫助到很多熱愛技術(shù)的朋友。
第二,通俗易懂。就我讀過的技術(shù)書籍來看,學(xué)院派老師編寫的書籍特別多,也是市面上的主流書籍,作者們擁有讓人敬仰的頭銜;文風(fēng)嚴(yán)謹(jǐn),用詞專業(yè);案例也十分深奧?傊乙蚕M约河谐蝗漳軌蛳袼麄円粯,但在讀這些書的過程中,我往往需要硬著頭皮去讀,這樣無形當(dāng)中增加了讀書的煩惱。我是一名平凡的程序員,愛讀書、愛寫作、愛分享,在CSDN 和沉默王二訂閱號上也發(fā)表了很多文章,喜歡的朋友都說我的文章樸實(shí)無華、通俗易懂,在碎片化閱讀的時代里是一股難得的清流(捂臉中~)。說實(shí)話,我挺喜歡這樣的評價。
第三,三管齊下。
(1) 教你梳理清楚Web開發(fā)是怎樣的一個流程,以及怎樣快速地建立自己的開發(fā)模型(認(rèn)知方法);
(2) 本書介紹了很多適合實(shí)際項(xiàng)目開發(fā)的實(shí)例,你可以按部就班地模仿這些練習(xí),從而達(dá)到熟能生巧(模仿方法);
(3) 確定你的方向,落實(shí)在行動上,通過在你的實(shí)際項(xiàng)目當(dāng)中運(yùn)用這些知識從而成為一名優(yōu)秀的Web開發(fā)者(行為方法)。
小二哥:你有要感謝的人嗎?
馬偉青:當(dāng)然有啊,首先我要感謝的是董宜斌老師。有這樣一句話,第一次出版技術(shù)圖書的作者都擁有著非凡的勇氣!,雖然這句話是我杜撰的,但的的確確有這樣一個人給了我莫大的勇氣。盡管我一直有著出書的夢想,但苦于對自己寫作能力的懷疑,遲遲不敢接受出版社的邀請。董老師的熱情和真誠真的打動了我,促使我有了寫作本書的勇氣,真的非常感謝。
其次,我要感謝的是那些陪著我一起成長的群友們,沉默王二技術(shù)交流群經(jīng)常遇到類似下面的一些提問。
程序員A:群主,在嗎,能把《Bootstrap
Fileinput》(文件上傳組件)那篇博客涉及的源碼打包發(fā)給我嗎?
程序員B:二哥,在嗎,《Bootstrap Summernote》(富文本編輯器)文章中提到的編輯后的HTML代碼該怎么保存到MySQL數(shù)據(jù)庫啊?
程序員C:哥們,在嗎,我是看了你那篇《Bootstrap Tree
View》(樹形結(jié)構(gòu))文章后進(jìn)群的,我按照你的方法做了全選和全不選操作,但就是不起效啊,你有時間幫我看看怎么回事嗎?
程序員D:老大,在嗎,幫忙看看吧,實(shí)在是不會啊,select2組件加上我這個分頁方法就一直報錯…
程序員E:大家好,我用這種方式(展示jqGrid代碼的一張圖),數(shù)據(jù)顯示不出來,有沒有遇到這種情況的@群主,在嗎?
…
起先,遇到這類小白的問題,我總是顯得不屑一顧,自以為是地認(rèn)為是群友們沒有認(rèn)真讀我的博客,沒有認(rèn)真去思考,沒有親自動手去實(shí)踐,所以才會遇到諸多困擾。可是后來我發(fā)現(xiàn),類似這樣的問題層出不窮,明明我在博客里已經(jīng)把解決方案寫得一清二楚,為什么還會這樣呢? 我開始反思,是不是因?yàn)槲业牟┛蛯懙貌粔蛏钊、不夠系統(tǒng),才導(dǎo)致大家在解決問題的時候產(chǎn)生疑惑? 于是我開始追本溯源,按照群友們描述的問題,重新翻看我的博客,發(fā)現(xiàn)的確如此:博客里講解的內(nèi)容太過于私有化,站在讀者的角度來看,很難按圖索驥,很難輕易地參照個別方案解決實(shí)際問題。
這些,促使著我做出改變,重構(gòu)解決方案,重新編輯博客,重新審視自己,這樣做的結(jié)果是我解決問題的能力又提高了。這就好像游戲里我重新刷了一遍副本,等級、經(jīng)驗(yàn)、人望都得到了提高,所以我必須要感謝這批忠實(shí)的群友們! 正是因?yàn)樗麄兊膸椭?才有了今天更好的我。
作者
2019年3月
馬偉青,筆名沉默王二,《Web全棧開發(fā)進(jìn)階之路》作者,一個不止寫代碼的程序員,還寫有趣有益的文字,給不喜歡嚴(yán)肅的你。10年的軟件行業(yè)從業(yè)經(jīng)驗(yàn),CSDN博客專家,無戒學(xué)堂優(yōu)秀學(xué)員。既是一名可以處理數(shù)據(jù)庫、服務(wù)器、系統(tǒng)工程和客戶端的全棧工程師,又是一名可以獨(dú)自負(fù)責(zé)設(shè)計(jì)、開發(fā)、測試、部署、操作和支持的全周期工程師。
第1章 Web項(xiàng)目的快速實(shí)現(xiàn)
……………………………………………………… 1
1.1 手把手帶你搭建開發(fā)環(huán)境 ……………………………………………………2
1.2 創(chuàng)建你的第一個 Web項(xiàng)目…………………………………………………… 6
1.3 分析你的第一個 Web項(xiàng)目 …………………………………………………… 11
1.4 Web項(xiàng)目的調(diào)試 ……………………………………………………………… 23
1.5 小 結(jié)…………………………………………………………………………… 31
第2章 鋒利的jQuery ………………………………………………………………… 33
2.1 jQuery簡介 …………………………………………………………………… 33
2.2 編寫第一行jQuery代碼 ……………………………………………………… 36
2.3 jQuery選擇器 ………………………………………………………………… 47
2.4 jQuery中的DOM 操作 ……………………………………………………… 48
2.5 jQuery的getter和setter …………………………………………………… 54
2.6 jQuery中的 Ajax ……………………………………………………………… 71
2.7 小 結(jié)…………………………………………………………………………… 77
第3章 優(yōu)雅的Bootstrap……………………………………………………………… 79
3.1 你好啊, Bootstrap …………………………………………………………… 79
3.2 粘頁腳,你必須得學(xué)會的簡單技能 …………………………………………… 81
3.3 響應(yīng)式柵格系統(tǒng),行業(yè)趨勢所向 ……………………………………………… 86
3.4 Bootstrap常用的CSS樣式 …………………………………………………… 93
3.5 那些錦上添花的圖標(biāo)字體庫 ………………………………………………… 102
3.6 變魔術(shù)一樣的導(dǎo)航條 ………………………………………………………… 110
3.7 小 結(jié) ………………………………………………………………………… 125
第4章 便捷的HTML擴(kuò)展
………………………………………………………… 127
4.1 什么是 HTML擴(kuò)展? ……………………………………………………… 127
4.2 Lazy Load圖像延遲加載………………………………………………… 132
4.3 iCheck超級復(fù)選框和單選按鈕 ………………………………………… 139
4.4 SwitchBootstrap的開關(guān)組件 …………………………………………… 150
4.5 Datetime PickerBootstrap 日期時間選擇器…………………………… 158
4.6 DateRange PickerBootstrap 日期范圍選擇器 ………………………… 164
4.7 Tags InputBootstrap風(fēng)格的標(biāo)簽輸入組件 …………………………… 171
4.8 Star Rating簡單而強(qiáng)大的星級評分插件 ……………………………… 175
4.9 Layer更友好的 Web彈層組件 ………………………………………… 179
4.10 Magnific Popup一款真正的響應(yīng)式燈箱插件 ………………………… 189
4.11 小 結(jié)………………………………………………………………………… 210
第5章 不可或缺的數(shù)據(jù)庫…………………………………………………………… 212
5.1 MySQL關(guān)系型數(shù)據(jù)庫…………………………………………………… 212
5.2 MyBatis數(shù)據(jù)庫持久層框架 …………………………………………… 219
5.3 Druid數(shù)據(jù)庫連接池……………………………………………………… 229
5.4 小 結(jié) ………………………………………………………………………… 238
第6章 多彩的AdminLTE ………………………………………………………… 240
6.1 初識 AdminLTE……………………………………………………………… 240
6.2 SiteMesh網(wǎng)頁布局和裝飾的集成框架 ………………………………… 245
6.3 Chart.js簡單而靈活的圖表庫 ………………………………………… 251
6.4 Select2支持搜索、標(biāo)記、遠(yuǎn)程數(shù)據(jù)和無限滾動的下拉框 ……………… 292
6.5 Bootstrap-Treeview一款非?岬姆謱訕浣Y(jié)構(gòu)插件 ……………………… 308
6.6 小 結(jié) ………………………………………………………………………… 330
第7章 大有可為的Form表單
……………………………………………………… 332
7.1 原來你是這樣的Form表單 ………………………………………………… 332
7.2 BootstrapValidator非常好用的表單驗(yàn)證插件 ………………………… 334
7.3 Validform一行代碼搞定整站的表單驗(yàn)證……………………………… 358
7.4 驗(yàn)證碼防止惡意搗亂的神器 …………………………………………… 364
7.5 Geetest更可靠的安全驗(yàn)證工具 ………………………………………… 368
7.6 Form不再令人痛苦的文件上傳………………………………………… 378
7.7 Dropify圖片拖拽和預(yù)覽插件 …………………………………………… 394
7.8 Bootstrap FileInput增強(qiáng)版的HTML5文件輸入框 ……………………… 402
7.9 Summernote超級簡潔的富文本編輯器………………………………… 434
7.10 篩選結(jié)果的查詢類表單……………………………………………………… 451
7.11 小 結(jié)………………………………………………………………………… 454__