Web前端开发实训案例教程(中级)

本书是根据《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步骤一：下载并安装HBuilder11
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章RESTfulAPI：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和启动MySQL146
13.4.2步骤二：登录MySQL147
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步骤三：创建控制器类DoctorController203
17.4.4步骤四：编写模板文件doctor.blade.php203
17.4.5步骤五：编写模板文件next.blade.php206
17.4.6步骤六：编写模板文件start.blade.php207
17.4.7步骤七：编写模板文件index.blade.php208
第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.html227
19.4.5步骤五：编写模板文件next.html230
19.4.6步骤六：编写模板文件start.html232
19.4.7步骤七：编写模板文件index.html233
第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框架：图书App247
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步骤二：搭建JavaWeb开发环境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章SpringMVC框架：增加线上课程309
26.1实验目标309
26.2实验任务310
26.3设计思路311
26.4实验实施（跟我做）311
26.4.1步骤一：搭建JavaWeb开发环境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步骤五：创建业务JavaBean339
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步骤五：创建业务JavaBean356
29.4.6步骤六：创建数据层接口和SQL映射文件357
29.4.7步骤七：编写业务层359
29.4.8步骤八：编写控制层360
29.4.9步骤九：渲染页面数据362