编辑推荐
《Web全栈开发进阶之路》读起来轻松惬意,颇具王小波风趣幽默的写作风格,彻底摆脱枯燥乏味的面向Web全栈开发的经典书籍。《Web 全栈开发进阶之路》以轻松的语言,将Web全栈开发的技术讲给了我们,用丰富的实例,给我们展示了Web全栈开发。当我们读这《Web 全栈开发进阶之路》的时候,犹如在读一本小说,生动有趣;当我们用这《Web 全栈开发进阶之路》进行实际编程时,犹如良师在侧指导,轻松简单。
内容简介
《Web 全栈开发进阶之路》一共7章,主要讲解了如何利用Maven快速地搭建SpringMVC的Web项目、jQuery的各种函数和方法调用、前端开发框架Bootstrap、如何对常见的jQuery和Bootstrap插件进行HTML扩展、关系型数据库MySQL及其连接方法、AdminLTE及其囊括的大量可直接投入项目使用的组件、From表单等内容。除此之外,《Web 全栈开发进阶之路》包含大量源码实例,其均是完成的项目开发程序,并可在此之上进行二次开发,这样就能够帮助读者融会贯通,快速地完成一个企业级Web应用程序的设计,使读者在实战中学到技术的精髓。
《Web 全栈开发进阶之路》内容全面,贴近实际,可作为所有Web应用及站点开发人员、相关专业读者的参考用书,也可作为高等院校、高职高专院校网站设计课程的教学用书。
作者简介
马伟青,笔名沉默王二,《Web全栈开发进阶之路》作者,一个不止写代码的程序员,还写有趣有益的文字,给不喜欢严肃的你。10年的软件行业从业经验,CSDN博客专家,无戒学堂优秀学员。既是一名可以处理数据库、服务器、系统工程和客户端的全栈工程师,又是一名可以独自负责设计、开发、测试、部署、操作和支持的全周期工程师。
目录
第1章Web项目的快速实现…………………………………………………………1
1.1手把手带你搭建开发环境………………………………………………………2
1.2创建你的第一个Web项目………………………………………………………6
1.3分析你的第一个Web项目……………………………………………………11
1.4Web项目的调试………………………………………………………………23
1.5小结……………………………………………………………………………31
第2章锋利的jQuery…………………………………………………………………33
2.1jQuery简介……………………………………………………………………33
2.2编写第一行jQuery代码………………………………………………………36
2.3jQuery选择器…………………………………………………………………47
2.4jQuery中的DOM操作………………………………………………………48
2.5jQuery的getter和setter……………………………………………………54
2.6jQuery中的Ajax………………………………………………………………71
2.7小结……………………………………………………………………………77
第3章优雅的Bootstrap………………………………………………………………79
3.1你好啊,Bootstrap……………………………………………………………79
3.2粘页脚,你必须得学会的简单技能……………………………………………81
3.3响应式栅格系统,行业趋势所向………………………………………………86
3.4Bootstrap常用的CSS样式……………………………………………………93
3.5那些锦上添花的图标字体库…………………………………………………102
3.6变魔术一样的导航条…………………………………………………………110
3.7小结…………………………………………………………………………125
第4章便捷的HTML扩展…………………………………………………………127
4.1什么是HTML扩展?………………………………………………………127
4.2LazyLoad———图像延迟加载…………………………………………………132
4.3iCheck———超级复选框和单选按钮…………………………………………139
4.4Switch———Bootstrap的开关组件……………………………………………150
4.5DatetimePicker———Bootstrap日期时间选择器……………………………158
4.6DateRangePicker———Bootstrap日期范围选择器…………………………164
4.7TagsInput———Bootstrap风格的标签输入组件……………………………171
4.8StarRating———简单而强大的星级评分插件………………………………175
4.9Layer———更友好的Web弹层组件…………………………………………179
4.10MagnificPopup———一款真正的响应式灯箱插件…………………………189
4.11小结…………………………………………………………………………210
第5章不可或缺的数据库……………………………………………………………212
5.1MySQL———关系型数据库……………………………………………………212
5.2MyBatis———数据库持久层框架……………………………………………219
5.3Druid———数据库连接池………………………………………………………229
5.4小结…………………………………………………………………………238
第6章多彩的AdminLTE…………………………………………………………240
6.1初识AdminLTE………………………………………………………………240
6.2SiteMesh———网页布局和装饰的集成框架…………………………………245
6.3Chart.js———简单而灵活的图表库…………………………………………251
6.4Select2———支持搜索、标记、远程数据和无限滚动的下拉框………………292
6.5Bootstrap-Treeview———一款非常酷的分层树结构插件………………………308
6.6小结…………………………………………………………………………330
第7章大有可为的Form表单………………………………………………………332
7.1原来你是这样的Form表单…………………………………………………332
7.2BootstrapValidator———非常好用的表单验证插件…………………………334
7.3Validform———一行代码搞定整站的表单验证………………………………358
7.4验证码———防止恶意捣乱的神器……………………………………………364
7.5Geetest———更可靠的安全验证工具…………………………………………368
7.6Form———不再令人痛苦的文件上传…………………………………………378
7.7Dropify———图片拖拽和预览插件……………………………………………394
7.8BootstrapFileInput———增强版的HTML5文件输入框………………………402
7.9Summernote———超级简洁的富文本编辑器…………………………………434
7.10筛选结果的查询类表单………………………………………………………451
7.11小结…………………………………………………………………………454__
前言/序言
致读者的一封信
亲爱的读者:
你们好!
初次见面,写点什么好呢?虽然《Web 全栈开发进阶之路》是一本关于JavaWeb的技术图书,但我希望书中能够穿插一些文艺的内容,因为程序员的成长过程中不只有技术和程序,还有诗和
远方。记得木心先生有这样一首小诗———《从前慢》,我选取其中两段念给大家听(请注意坐姿):
记得早先少年时
大家诚诚恳恳
说一句是一句
从前的日色变得慢
车,马,邮件都慢
一生只够爱一个人
听到这里,你是不是也特别怀念以前慢的日子,尤其是上初中、高中的时期。那时候有手机的同学并不多,同学们之间的主要联系方式还是写纸质的信,信封是纯洁的白色。下课铃声响起,我趴在走廊的围栏边上往下瞧,收信箱那里总能瞅见三五成群的同学,他们的脸上写满了殷切的期待,我想他们一定像我一样,期待着远方的朋友或者亲人的来信,那信里都写着什么呢?也许是肝胆相照的友情,也许是朦朦胧胧的恋情,也许是关怀备至的亲情。总之,那时候的书信,充满着令人怀念的味道,那味道,就像深巷里的酒香。
那么,现在,就让我来写一封信给亲爱的你们吧!让我来揣摩你们的心思,替你们提几个问题,然后请允许我再来一一作答,看看这些问题,这些答案是否是你们想要的。倘若这些问题不在你的咨询范围内,这些答案也未能使你感到满意,那么你可以通过以下的联系方式找到我,把你想要咨询的问题,或者是想要对我说的悄悄话,统统告诉我吧,我期待着你的回信,这里是“沉默王二”的“解忧杂货店”,就像东野圭吾笔下的那家解忧店一样———回答在牛奶箱里。
下面,请进入我们的“开讲了”栏目,为了配合我的演出,这里有请帅气的主持人“小二哥”登场(一阵热烈的掌声)。
小二哥:请和大家介绍下你和目前所从事的工作吧。
马伟青:大家好,我是马伟青。为了更加亲民,小二哥以后可以称呼我为“小王老师”,至于原因嘛,var小王老师=马伟青。
我给自己的标签是“扫地僧”,为什么这样说呢?首先来看这样一幕场景吧!
客户钟总:“邢总,咱们这套集电商、项目订单发布与订单订转等业务与一体的综合服务系统什么时候能正式上线?”
老板邢总:“钟总,快了快了。咱们公司的‘所有’工程师,包括项目总监、产品经理、开发工程师、UI设计师、测试人员等这一段时间都在加班加点赶进度,最慢一个月后就能正式上线。”
……
放下手机后,邢总有意无意地瞥了一眼旁边的程序员小青,而恰好此时小青也在直勾勾地瞅着他,于是他们的目光就像电池的正负极对接在了一起,激起一道电光火石。小青的目光里写满了吃惊:“邢总,全公司的开发人员就我一个啊,哪有什么项目总监、产品经理、开发工程师、UI设计师、测试人员,撂大话可真是脸不红心不跳啊!”
那边邢总也会了意,表示:“小青,别狐疑了,说的还不就是你,你就是我的扫地僧啊。什么技术做不来,什么问题解决不了,还有什么是你做不出来的!”
嗯,上面场景中的小青可不是《新白娘子传奇》中的青蛇,他其实就是我,一名普普通通的程序员,一名名副其实的“扫地僧”,除了和老板谈业务、设计产品、敲代码、做测试、做项目维护和运营外,办公室的地板也确实要扫,厕所的马桶也确实得刷。
小二哥:小王老师说话就是幽默,我都笑得合不拢嘴了。那小王老师能聊聊为什么要写这《Web 全栈开发进阶之路》吗?
马伟青:首先,回想我刚开始学习编程的时候,那是在大学期间写的第一个静态网页,其复杂程度现在回想起来都觉得不可思议。要做一个网页,“网页三剑客”是必须要学会用的,因为页面布局需要Dreamweaver,图片处理需要Fireworks,动画制作需要Flash。我记得当时做的是一个农产品展示的首页,没有涉及一点服务器端的代码,真的就是一个静态的HTML页面,就足足花了我两个多月的时间。现在回想当时的学习过程,完全就是在摸着石头过河。
你可能会问,不是还有老师和同学吗?不会去图书馆借书读吗?
是,可以问老师和同学,也可以去图书馆借书读,但收效甚微。为什么会这样?因为对于编程来说,老师也不敢拍着胸脯说自己很有经验,因为大家都是初学者,甚至有些爱学习的同学,编程能力还在老师之上。至于技术图书,大部分都是诸如《21天学会用Dreamweaver》《21天学会用Fireworks》的快餐式书籍,对初学JavaWeb编程的学生来说,帮助很有限。那么,对于一名在校的学生或者刚刚接触Web开发的编程人员来说,如何才能拥有一个总揽全局的导航地图呢?相信不止我一人曾有过这样的困惑。
其次,我相信,像我这样的程序员还有很多,需要掌握多种技能,并能利用这些技能快速迭代出产品,尤其是对于公司而言,这样的“扫地僧”是刚需。可以毫不夸张地说,能够在创业初期就遇到一位称职的“扫地僧”是创业公司的幸运。换句话说,如果公司最终走向成功,“扫地僧”也将会获得优厚的报酬。那么如何才能成为一名对公司发展至关重要的“扫地僧”(在严格意义上讲,“扫地僧”更专业的术语应该是“全栈工程师”)呢?
我想,《Web全栈开发进阶之路》这《Web 全栈开发进阶之路》就是一个不错的答案。Web开发是一个动态的领域,新的编程语言、框架和技术陆续出现,流行,然后消失,技术的更新换代就好像雨后春笋一般。作为开发者的我们,不必为此感到恐慌,因为只要我们不断地学习和实践,就能够淬炼出一种永不过时的学习能力,有了这种能力之后,任凭环境怎么日新月异,我们都能够保持岿然不动的姿态。
我写这《Web 全栈开发进阶之路》的目的就是帮助初学者梳理出一个清晰的导航地图,帮助开发者培养一种良好的学习能力。有了清晰的导航地图,那么在学习过程中就不再感到迷茫,就有了培养学习能力的基础。而一旦养成了良好的学习能力,那么在工作当中就能够发现问题,并且解决问题,成为公司发展过程中不可或缺的一员。
小二哥:听小王老师这样讲完,我也迫不及待想要踏上“Web全栈开发进阶之路”了。写书不是一件容易的事情,能不能谈谈在这段期间内的辛酸和收获?
马伟青:说句实话,在写作的最初阶段,我真的是挺后悔自己做出写书这个决定的。因为写博客可以相对随心所欲一些,毕竟都是自己的一家之言,可以不考虑语言是否严谨,可以不考虑技术是否专业,也可以不考虑读者是否满意,总之,可以有一千个“不负责任”的理由。但写书就不一样了,要认认真真地考量技术,要细细致致地考量技术,也要地付出120%的努力,所以经常是写完之后改,改完之后删,删完之后再写。
从2017年5月份准备写作,到2017年年底,7个月的时间过去了,我也只是完成了书稿的前三章,还是零零碎碎的样子,那时候我的内心是绝望的。工作上,要以一己之力完成项目,费时费力费心,几档档档档档乎腾不出时间写作;生活上,我家女儿那时还不满两岁,精力旺盛,下班回到家后她几乎能把我折腾得精疲力竭。我原本寄希望于老婆能够挺身而出,给我创造一个相对安静的写作环境,但这个希望就像是陪女儿上早教课时老师吹起的泡泡,美丽但很快就会破碎,然后消失得无影无踪。
我该怎么办呢?下定决心做了这些安排。
1.调整自己的作息习惯,早上5点准时起床,写作到8点,这段时间世界是安静的。
2.抵制一切浪费时间的行为,例如说手机刷朋友圈、看无聊的新闻和视频。
3.坚持,想做一件事当然很简单,但把一件事做成功却没有那么容易,所谓“念念不忘,必有回响”,唯有坚持,方得始终。
现在,《Web全栈开发进阶之路》这《Web 全栈开发进阶之路》终于和大家见了面,我也进化成了一个更好的自己———自信、自律。
小二哥:我对小王老师的总结就是,“世上无难事,只怕有心人”,只要肯下决心去做,世界上就没有什么办不到的事情,困难总是可以克服的。那么咱们这本《Web全栈开发进阶之路》面向的群体是怎样的?
马伟青:好,请允许我先省掉一些自谦的话语(笑),《Web全栈开发进阶之路》可以说是一本Web开发的“百科简书”。《Web 全栈开发进阶之路》没有对目标读者做任何限制,只要你喜欢开发Web,那么都可以从《Web 全栈开发进阶之路》中获益。《Web 全栈开发进阶之路》的内容通俗易懂,同时配套做了大量的实例来讲解Web开发必备的基础技能。
1.假如你是一名初级开发人员,通过亲自动手实践《Web 全栈开发进阶之路》提供的示例,可以快速让你进阶到中级的开发水平。虽然书中所有的源代码均可以自由获取,但我不建议大家只是为了看代码来学习《Web 全栈开发进阶之路》,进而错过了一次很好的练手机会,因为所有的开发技能都需要不断练习,熟能生巧,巧能生辉。
套用心学创始人王阳明的话,叫做“知行合一”,即在学习理论知识的过程中反复练习,在实践的过程中温故知新。在王阳明提出“知行合一”之前,人们普遍信奉的是朱熹的“先知后行”(知就是学知识,行就是行动、做事情),认为知和行是分开的,在实际运作之前要先学好理论,有把握了再去做。对比朱熹和王阳明的观点,我更认可“知行合一”,因为在我的认知中,理论知识注定是枯燥的,如果一味地先去“格物”(学习理论)而后实践,注定要误入“书呆子”的歧途。
2.假如你是一名中级开发人员,想在Web开发的道路上走得远、攀得高、持续精进,想在短时间内无压力地搞定一个Web项目,那么这《Web 全栈开发进阶之路》涉及到的优秀案例、提到的框架设计思想会对你有所帮助。
小二哥:这《Web 全栈开发进阶之路》有什么特色呢?
马伟青:第一,专注于解决问题。曾有人这样说过:“很多人都能够发现问题,但只有少数人既能发现问题,又能解决问题”。我很认同这句话,并把这句话当做是自己奋斗的一个标杆。这《Web 全栈开发进阶之路》中我列出的实例也都是对实际项目中解决问题的过程进行的总结和提炼,相信这会帮助到很多热爱技术的朋友。
第二,通俗易懂。就我读过的技术书籍来看,学院派老师编写的书籍特别多,也是市面上的主流书籍,作者们拥有让人敬仰的头衔;文风严谨,用词专业;案例也十分深奥。总之我也希望自己有朝一日能够像他们一样,但在读这些书的过程中,我往往需要硬着头皮去读,这样无形当中增加了读书的烦恼。我是一名平凡的程序员,爱读书、爱写作、爱分享,在CSDN和“沉默王二”订阅号上也发表了很多文章,喜欢的朋友都说我的文章朴实无华、通俗易懂,在碎片化阅读的时代里是一股难得的清流(捂脸中~)。说实话,我挺喜欢这样的评价。
第三,三管齐下。
(1)教你梳理清楚Web开发是怎样的一个流程,以及怎样快速地建立自己的开发模型(认知方法);
(2)《Web 全栈开发进阶之路》介绍了很多适合实际项目开发的实例,你可以按部就班地模仿这些练习,从而达到熟能生巧(模仿方法);
(3)确定你的方向,落实在行动上,通过在你的实际项目当中运用这些知识从而成为一名优秀的Web开发者(行为方法)。
小二哥:你有要感谢的人吗?
马伟青:当然有啊,首先我要感谢的是董宜斌老师。有这样一句话,“第一次出版技术图书的作者都拥有着非凡的勇气!”,虽然这句话是我杜撰的,但的的确确有这样一个人给了我莫大的勇气。尽管我一直有着出书的梦想,但苦于对自己写作能力的怀疑,迟迟不敢接受出版社的邀请。董老师的热情和真诚真的打动了我,促使我有了写作《Web 全栈开发进阶之路》的勇气,真的非常感谢。
其次,我要感谢的是那些陪着我一起成长的群友们,“沉默王二”技术交流群经常遇到类似下面的一些提问。
程序员A:“群主,在吗,能把《BootstrapFileinput》(文件上传组件)那篇博客涉及的源码打包发给我吗?”
程序员B:“二哥,在吗,《BootstrapSummernote》(富文本编辑器)文章中提到的编辑后的HTML代码该怎么保存到MySQL数据库啊?”
程序员C:“哥们,在吗,我是看了你那篇《BootstrapTreeView》(树形结构)文章后进群的,我按照你的方法做了全选和全不选操作,但就是不起效啊,你有时间帮我看看怎么回事吗?
程序员D:“老大,在吗,帮忙看看吧,实在是不会啊,select2组件加上我这个分页方法就一直报错…”
程序员E:“大家好,我用这种方式(展示jqGrid代码的一张图),数据显示不出来,有没有遇到这种情况的@群主,在吗?”
…
起先,遇到这类“小白”的问题,我总是显得不屑一顾,自以为是地认为是群友们没有认真读我的博客,没有认真去思考,没有亲自动手去实践,所以才会遇到诸多困扰。可是后来我发现,类似这样的问题层出不穷,明明我在博客里已经把解决方案写得一清二楚,为什么还会这样呢?我开始反思,是不是因为我的博客写得不够深入、不够系统,才导致大家在解决问题的时候产生疑惑?于是我开始追本溯源,按照群友们描述的问题,重新翻看我的博客,发现的确如此:博客里讲解的内容太过于私有化,站在读者的角度来看,很难按图索骥,很难轻易地参照个别方案解决实际问题。
这些,促使着我做出改变,重构解决方案,重新编辑博客,重新审视自己,这样做的结果是我解决问题的能力又提高了。这就好像游戏里我重新刷了一遍副本,等级、经验、人望都得到了提高,所以我必须要感谢这批忠实的群友们!正是因为他们的帮助,才有了今天更好的我。
作者
2019年3月