本书是根据《Web前端开发职业技能等级标准2.0版》（中级）编写的配套的实践教程，其中涉及的项目代码使用HBuilder开发工具和开源Eclipse开发工具进行编译，并且均可在主流浏览器中运行。本书将中职、高职院校和应用型本科院校的计算机应用、软件技术等相关专业开设的Web前端开发方向的课程体系，与企业Web前端开发岗位能力模型相结合，依据《Web前端开发职业技能等级标准2.0版》（中级）的技能要求，形成三位一体的Web前端开发技术知识地图。本书以实践能力为导向，以开发企业真实应用为目标，遵循企业软件工程标准和技术开发要求，采用任务驱动方式，将静态网站开发（HTML5+CSS3、JavaScript+jQuery、Bootstrap）、Web前后端数据交互（AJAX、RESTful API）、MySQL、PHP动态网站开发（PHP+Laravel或PHP+ThinkPHP）和Java动态网站开发（Java+SSM）等相关知识单元，充分融入实际案例和应用环境中。本书对《Web前端开发职业技能等级标准2.0版》（中级）涉及的重要知识单元进行了详细的介绍，从而帮助读者掌握Web前端开发（中级）的技能要求。本书依托实验项目对知识单元进行介绍，并且针对不同的知识单元设计了多个实验项目，以帮助读者掌握每个知识单元的核心内容。本书适合作为《Web前端开发职业技能等级标准2.0版》（中级）实践教学的参考用书，也可作为有意成为Web前端开发工作者的学习辅导用书。
北京新奥时代科技有限责任公司于2006年04月12日在石景山分局登记成立。公司经营范围包括技术开发、技术推广、技术转让、技术咨询、技术服务等。
目 录
第1章 实践概述 1
1.1 实践目标 1
1.2 实践知识地图 1
1.3 实施安排 8
第2章 开发环境：开发工具 10
2.1 实验目标 10
2.2 实验任务 10
2.3 设计思路 10
2.4 实验实施（跟我做） 11
2.4.1 步骤一：下载并安装HBuilder 11
2.4.2 步骤二：HBuilder的主界面 12
2.4.3 步骤三：在HBuilder中安装
PHP插件 12
2.4.4 步骤四：创建Web项目 13
2.4.5 步骤五：创建HTML文件 14
2.4.6 步骤六：编辑HTML文件 15
2.4.7 步骤七：运行HTML文件 15
第3章 HTML5+CSS3：直播平台 17
3.1 实验目标 17
3.2 实验任务 17
3.3 设计思路 19
3.4 实验实施（跟我做） 22
3.4.1 步骤一：创建项目 22
3.4.2 步骤二：制作首页 23
3.4.3 步骤三：添加样式美化首页 31
第4章 JavaScript：动态验证码 38
4.1 实验目标 38
4.2 实验任务 38
4.3 设计思路 39
4.4 实验实施（跟我做） 42
4.4.1 步骤一：创建项目 42
4.4.2 步骤二：使用HTML文件
布局页面 42
4.4.3 步骤三：使用CSS文件美化
页面 43
4.4.4 步骤四：创建JavaScript文件 44
第5章 jQuery：电影选座 47
5.1 实验目标 47
5.2 实验任务 48
5.3 设计思路 49
5.4 实验实施（跟我做） 51
5.4.1 步骤一：创建项目 51
5.4.2 步骤二：使用HTML代码编写
页面 51
5.4.3 步骤三：使用CSS文件美化
页面 52
5.4.4 步骤四：实现选择座位功能 54
5.4.5 步骤五：实现切换场次功能 56
第6章 Bootstrap：互动问答页面 59
6.1 实验目标 59
6.2 实验任务 60
6.3 设计思路 60
6.4 实验实施（跟我做） 62
6.4.1 步骤一：引入Bootstrap样式
文件 62
6.4.2 步骤二：制作页头导航栏 62
6.4.3 步骤三：制作提问栏 63
6.4.4 步骤四：运行效果 66
第7章 Bootstrap：民宿网 67
7.1 实验目标 67
7.2 实验任务 67
7.3 设计思路 69
7.4 实验实施（跟我做） 75
7.4.1 步骤一：引入Bootstrap文件和
布局视口 75
7.4.2 步骤二：制作页头 75
7.4.3 步骤三：制作“轮播图和区域
选择”板块 77
7.4.4 步骤四：制作“特色民宿”
板块和“亲子民宿”板块 79
7.4.5 步骤五：制作页脚 84
第8章 Bootstrap：电影网站 86
8.1 实验目标 86
8.2 实验任务 87
8.3 设计思路 87
8.4 实验实施（跟我做） 88
8.4.1 步骤一：项目准备 88
8.4.2 步骤二：制作页头 89
8.4.3 步骤三：布局页面主体 90
8.4.4 步骤四：制作“轮播图”板块 90
8.4.5 步骤五：制作“电影分类”
板块 91
8.4.6 步骤六：制作“电影列表”
板块 93
8.4.7 步骤七：制作“VIP影院”
板块 95
8.4.8 步骤八：制作“点播排行榜”
板块 96
8.4.9 步骤九：制作页脚 97
第9章 Bootstrap：后台管理系统 99
9.1 实验目标 99
9.2 实验任务 100
9.3 设计思路 100
9.4 实验实施（跟我做） 101
9.4.1 步骤一：项目准备 101
9.4.2 步骤二：制作导航栏 102
9.4.3 步骤三：布局页面主体 103
9.4.4 步骤四：制作“警告框”板块 104
9.4.5 步骤五：制作“网站数据统计”
板块 104
9.4.6 步骤六：制作“网站热帖”
板块 105
9.4.7 步骤七：制作“今日访客统
计”板块 106
9.4.8 步骤八：制作“服务器状态”
板块 107
9.4.9 步骤九：制作“团队留言板”
板块 108
9.4.10 步骤十：添加版权信息 110
第10章 AJAX+PHP：JavaScript手册 111
10.1 实验目标 111
10.2 实验任务 112
10.3 设计思路 112
10.4 实验实施（跟我做） 113
10.4.1 步骤一：创建项目和文件 113
10.4.2 步骤二：实现JSON格式的
数据接口 114
10.4.3 步骤三：制作HTML页面 115
10.4.4 步骤四：使用AJAX请求
数据接口 116
10.4.5 步骤五：构建JavaScript
手册内容 116
第11章 AJAX+PHP：用户注册模块 120
11.1 实验目标 120
11.2 实验任务 121
11.3 设计思路 121
11.4 实验实施（跟我做） 121
11.4.1 步骤一：创建后台数据库 121
11.4.2 步骤二：创建用户注册页面 122
11.4.3 步骤三：通过PHP代码检查
用户 125
第12章 RESTful API：RSS订阅 127
12.1 实验目标 127
12.2 实验任务 128
12.3 设计思路 129
12.4 实验实施（跟我做） 132
12.4.1 步骤一：创建项目 132
12.4.2 步骤二：实现订阅源列表 135
12.4.3 步骤三：实现添加订阅源 139
12.4.4 步骤四：实现添加/取消订阅 142
第13章 MySQL：驾考宝典 144
13.1 实验目标 144
13.2 实验任务 145
13.3 设计思路 145
13.4 实验实施（跟我做） 146
13.4.1 步骤一：下载XAMPP和启动MySQL 146
13.4.2 步骤二：登录MySQL 147
13.4.3 步骤三：创建数据库 148
13.4.4 步骤四：创建表 148
13.4.5 步骤五：表的操作 150
13.4.6 步骤六：管理表数据 151
13.4.7 步骤七：备份与恢复数据库 153
第14章 PHP：我的卡包 154
14.1 实验目标 154
14.2 实验任务 154
14.3 设计思路 156
14.4 实验实施（跟我做） 157
14.4.1 步骤一：创建项目和文件 157
14.4.2 步骤二：创建银行卡抽象类 158
14.4.3 步骤三：创建储蓄卡类 159
14.4.4 步骤四：创建信用卡类 160
14.4.5 步骤五：创建脚本文件 162
14.4.6 步骤六：运行脚本文件 165
第15章 PHP：在线购票 168
15.1 实验目标 168
15.2 实验任务 169
15.3 设计思路 170
15.4 实验实施（跟我做） 172
15.4.1 步骤一：制作“车次列表”
页面 172
15.4.2 步骤二：制作“添加乘客”
页面 175
15.4.3 步骤三：制作“订单生成
处理”页面 177
15.4.4 步骤四：制作“订单信息”
页面 178
15.4.5 步骤五：添加乘客错误提示 180
第16章 PHP：驾校考试系统 182
16.1 实验目标 182
16.2 实验任务 183
16.3 设计思路 184
16.4 实验实施（跟我做） 187
16.4.1 步骤一：创建项目和文件 187
16.4.2 步骤二：创建数据库 187
16.4.3 步骤三：制作用户登录页面 189
16.4.4 步骤四：制作“题目列表”
页面 192
16.4.5 步骤五：制作“做题记录”
页面 196
第17章 Laravel框架：医院挂号系统 198
17.1 实验目标 198
17.2 实验任务 199
17.3 设计思路 199
17.4 实验实施（跟我做） 201
17.4.1 步骤一：创建Laravel项目 201
17.4.2 步骤二：配置路由 202
17.4.3 步骤三：创建控制器类DoctorController 203
17.4.4 步骤四：编写模板文件doctor.blade.php 203
17.4.5 步骤五：编写模板文件next.blade.php 206
17.4.6 步骤六：编写模板文件start.blade.php 207
17.4.7 步骤七：编写模板文件index.blade.php 208
第18章 Laravel框架：智能记账本 210
18.1 实验目标 210
18.2 实验任务 211
18.3 设计思路 212
18.4 实验实施（跟我做） 215
18.4.1 步骤一：创建Laravel项目 215
18.4.2 步骤二：配置路由 216
18.4.3 步骤三：创建控制器类 216
18.4.4 步骤四：实现记账页面的
功能 217
18.4.5 步骤五：创建模型类 218
18.4.6 步骤六：显示记账列表 218
18.4.7 步骤七：添加账单 220
18.4.8 步骤八：修改和删除账单 220
第19章 ThinkPHP框架：医院挂号
系统 222
19.1 实验目标 222
19.2 实验任务 223
19.3 设计思路 223
19.4 实验实施（跟我做） 225
19.4.1 步骤一：创建ThinkPHP
项目 225
19.4.2 步骤二：配置路由 226
19.4.3 步骤三：创建控制器类 226
19.4.4 步骤四：编写模板文件departments.html 227
19.4.5 步骤五：编写模板文件
next.html 230
19.4.6 步骤六：编写模板文件
start.html 232
19.4.7 步骤七：编写模板文件
index.html 233
第20章 ThinkPHP框架：智能记账本 235
20.1 实验目标 235
20.2 实验任务 236
20.3 设计思路 237
20.4 实验实施（跟我做） 240
20.4.1 步骤一：创建ThinkPHP
项目 240
20.4.2 步骤二：配置路由 241
20.4.3 步骤三：创建控制器类 241
20.4.4 步骤四：实现记账页面功能 242
20.4.5 步骤五：创建模型类 243
20.4.6 步骤六：显示记账列表 243
20.4.7 步骤七：添加账单 245
20.4.8 步骤八：修改和删除账单 245
第21章 ThinkPHP框架：图书App 247
21.1 实验目标 247
21.2 实验任务 247
21.3 设计思路 248
21.4 实验实施（跟我做） 250
21.4.1 步骤一：创建ThinkPHP
项目 250
21.4.2 步骤二：配置路由和控制器 250
21.4.3 步骤三：安装模板引擎和
设计静态页面 252
21.4.4 步骤四：配置数据库和创建
模型 261
21.4.5 步骤五：在index.html文件
中发送AJAX请求 262
21.4.6 步骤六：在info.html文件中
接收参数并发送AJAX请求 263
第22章 ThinkPHP框架：数据统计
系统 264
22.1 实验目标 264
22.2 实验任务 265
22.3 设计思路 265
22.4 实验实施（跟我做） 267
22.4.1 步骤一：创建ThinkPHP
项目 267
22.4.2 步骤二：配置路由和控制器 267
22.4.3 步骤三：安装模板引擎和设
计静态页面 268
22.4.4 步骤四：配置数据库和创建
模型 274
22.4.5 步骤五：在index.html文件中
发送AJAX请求 276
22.4.6 步骤六：品牌选择功能 276
第23章 AJAX+Java：世界杯 277
23.1 实验目标 277
23.2 实验任务 278
23.3 设计思路 278
23.4 实验实施（跟我做） 278
23.4.1 步骤一：创建项目和文件 278
23.4.2 步骤二：实现Servlet类 279
23.4.3 步骤三：制作HTML页面 282
23.4.4 步骤四：制作CSS样式 284
23.4.5 步骤五：编写AJAX请求 285
第24章 Java：App开发者信息管理 287
24.1 实验目标 287
24.2 实验任务 288
24.3 设计思路 289
24.4 实验实施（跟我做） 289
24.4.1 步骤一：创建开发者信息表 289
24.4.2 步骤二：搭建Java Web开发
环境 290
24.4.3 步骤三：创建页面文件 290
24.4.4 步骤四：设计实现数据
访问层 294
24.4.5 步骤五：编写Servlet类 299
24.4.6 步骤六：建立页面与请求
路径关联及渲染数据 300
第25章 Spring框架：构建商品模型 302
25.1 实验目标 302
25.2 实验任务 302
25.3 设计思路 303
25.4 实验实施（跟我做） 303
25.4.1 步骤一：搭建Java开发环境 303
25.4.2 步骤二：创建并编写配置
文件 304
25.4.3 步骤三：编写实体类与
数据层 304
25.4.4 步骤四：编写业务层与
控制层 306
25.4.5 步骤五：编写测试类 307
第26章 Spring MVC框架：增加线上
课程 309
26.1 实验目标 309
26.2 实验任务 310
26.3 设计思路 311
26.4 实验实施（跟我做） 311
26.4.1 步骤一：搭建Java Web开发
环境 311
26.4.2 步骤二：创建页面文件 312
26.4.3 步骤三：创建并编写配置
文件 316
26.4.4 步骤四：配置访问静态资源 317
26.4.5 步骤五：编写实体类与
控制器类 318
26.4.6 步骤六：建立页面与请求
路径关联及渲染数据 319
第27章 MyBatis框架：后台系统
用户数据管理 321
27.1 实验目标 321
27.2 实验任务 321
27.3 设计思路 323
27.4 实验实施（跟我做） 324
27.4.1 步骤一：创建数据库和
用户表 324
27.4.2 步骤二：搭建运行环境 324
27.4.3 步骤三：配置核心配置文件 324
27.4.4 步骤四：设计用户表实体类
模型 325
27.4.5 步骤五：创建UserMapper
接口 327
27.4.6 步骤六：配置并绑定SQL
映射文件 327
27.4.7 步骤七：编写核心入口API
及数据操作代码 328
第28章 SSM框架：中控后台系统的
设计与实现 332
28.1 实验目标 332
28.2 实验任务 332
28.3 设计思路 333
28.4 实验实施（跟我做） 334
28.4.1 步骤一：创建数据库和
数据表 334
28.4.2 步骤二：搭建Web开发环境 334
28.4.3 步骤三：创建页面 335
28.4.4 步骤四：整合SSM框架 336
28.4.5 步骤五：创建业务JavaBean 339
28.4.6 步骤六：创建数据层接口
和SQL映射文件 340
28.4.7 步骤七：编写业务层 341
28.4.8 步骤八：编写控制层 342
28.4.9 步骤九：绑定页面操作 345
第29章 SSM框架：学生信息管理
系统 347
29.1 实验目标 347
29.2 实验任务 347
29.3 设计思路 348
29.4 实验实施（跟我做） 349
29.4.1 步骤一：创建数据库和学生
信息数据表 349
29.4.2 步骤二：搭建Web开发环境 349
29.4.3 步骤三：创建页面 350
29.4.4 步骤四：整合SSM框架 352
29.4.5 步骤五：创建业务JavaBean 356
29.4.6 步骤六：创建数据层接口和
SQL映射文件 357
29.4.7 步骤七：编写业务层 359
29.4.8 步骤八：编写控制层 360
29.4.9 步骤九：渲染页面数据 362
书单推荐
