Web前端开发实训案例教程（中级）

目 录
第1章 实践概述\t1
1．1 实践目标\t1
1．2 实践知识地图\t1
1．3 实施安排\t10
1．3．1 实验（技术专题）部分\t10
1．3．2 综合实践部分\t19
第2章 开发工具（HBuilder）\t22
2．1 实验目标\t22
2．2 实验任务\t22
2．3 设计思路\t22
2．4 实验实施（跟我做）\t22
2．4．1 步骤一：下载并安装
HBuilder\t22
2．4．2 步骤二：HBuilder主界面\t23
2．4．3 步骤三：在HBuilder中安装
PHP插件\t24
2．4．4 步骤四：创建Web项目
工程\t25
2．4．5 步骤五：创建HTML
页面\t26
2．4．6 步骤六：编辑html文件\t27
2．4．7 步骤七：运行\t28
第3章 Web静态网页开发
（小说网首页）\t29
3．1 实验目标\t29
3．2 实验任务\t30
3．3 设计思路\t32
3．4 实验实施（跟我做）\t35
3．4．1 步骤一：创建工程\t35
3．4．2 步骤二：制作首页\t35
3．4．3 步骤三：制作小说列表
页面\t37
3．4．4 步骤四：加载小说列表
页面\t39
3．4．5 步骤五：添加样式美化
首页\t40
3．4．6 步骤六：添加样式美化小说
列表页面\t44
第4章 JavaScript开发交互效果页面
（房贷计算器）\t47
4．1 实验目标\t47
4．2 实验任务\t48
4．3 设计思路\t49
4．4 实验实施（跟我做）\t52
4．4．1 步骤一：创建工程\t52
4．4．2 步骤二：使用HTML布局
页面\t52
4．4．3 步骤三：使用CSS样式美化
页面\t53
4．4．4 步骤四：创建house．js
文件\t56
4．4．5 扩展：正则表达式验证
输入\t59
第5章 jQuery开发交互效果页面
（留言页面）\t61
5．1 实验目标\t61
5．2 实验任务\t62
5．3 设计思路\t63
5．4 实验实施（跟我做）\t64
5．4．1 步骤一：创建工程\t64
5．4．2 步骤二：使用HTML布局
留言页面\t64
5．4．3 步骤三：使用CSS样式美化
留言页面\t65
5．4．4 步骤四：引入jQuery文件和jQuery UI文件\t66
5．4．5 步骤五：输入留言信息\t67
5．4．6 步骤六：发布留言\t68
5．4．7 步骤七：保存留言信息\t68
第6章 Bootstrap开发页面
（注册页面）\t69
6．1 实验目标\t69
6．2 实验任务\t70
6．3 设计思路\t70
6．4 实验实施（跟我做）\t72
6．4．1 步骤一：引入Bootstrap
文件\t72
6．4．2 步骤二：制作页头导航栏\t73
6．4．3 步骤三：制作注册栏\t73
6．4．4 步骤四：制作页脚\t76
6．4．5 步骤五：运行效果\t76
第7章 Bootstrap开发页面
（分类信息页面）\t77
7．1 实验目标\t77
7．2 实验任务\t78
7．3 设计思路\t79
7．4 实验实施（跟我做）\t82
7．4．1 步骤一：引入Bootstrap\t82
7．4．2 步骤二：制作页头\t82
7．4．3 步骤三：制作产地筛选栏和
商品信息栏\t84
7．4．4 步骤四：制作页脚\t86
7．4．5 步骤五：响应到移动端\t86
第8章 MySQL（MySQL基本
操作）\t88
8．1 实验目标\t88
8．2 实验任务\t88
8．3 设计思路\t89
8．4 实验实施（跟我做）\t89
8．4．1 步骤一：下载并安装
MySQL\t89
8．4．2 步骤二：登录MySQL\t90
8．4．3 步骤三：数据库基本操作\t92
第9章 MySQL（试题信息管理）\t93
9．1 实验目标\t93
9．2 实验任务\t94
9．3 设计思路\t95
9．4 实验实施（跟我做）\t97
9．4．1 步骤一：创建数据库\t97
9．4．2 步骤二：创建表\t97
9．4．3 步骤三：表的操作\t99
9．4．4 步骤四：视图\t100
9．4．5 步骤五：索引\t100
9．4．6 步骤六：管理表数据\t100
9．4．7 步骤七：查询表数据\t101
9．4．8 步骤八：导入和导出数据库
脚本\t102
9．4．9 步骤九：事务控制\t103
9．4．10 步骤十：触发器\t104
9．4．11 步骤十一：存储过程\t105
第10章 PHP制作动态网页
（第一个PHP程序）\t107
10．1 实验目标\t107
10．2 实验任务\t108
10．3 设计思路\t108
10．4 实验实施（跟我做）\t108
10．4．1 步骤一：更改Apache的
网站根目录\t108
10．4．2 步骤二：制作第一个PHP
程序\t110
10．4．3 步骤三：发布运行\t111
10．4．4 步骤四：扩展\t112
第11章 PHP制作动态网页
（日期计算器）\t113
11．1 实验目标\t113
11．2 实验任务\t114
11．3 设计思路\t114
11．4 实验实施（跟我做）\t115
11．4．1 步骤一：编写主页\t115
11．4．2 步骤二：判断闰年\t116
11．4．3 步骤三：验证日期\t116
11．4．4 步骤四：计算天数\t117
11．4．5 步骤五：处理请求\t118
11．4．6 步骤六：运行效果\t119
第12章 PHP制作动态网页
（购物车）\t120
12．1 实验目标\t120
12．2 实验任务\t121
12．3 设计思路\t123
12．4 实验实施（跟我做）\t124
12．4．1 步骤一：制作商品列表
页面\t124
12．4．2 步骤二：将商品加入
购物车\t126
12．4．3 步骤三：制作购物车
页面\t128
12．4．4 步骤四：改变购物车内的
商品数量\t129
12．4．5 步骤五：制作确认订单
页面\t129
12．4．6 步骤六：制作订单页面\t131
第13章 PHP制作动态网页
（在线投票系统）\t132
13．1 实验目标\t132
13．2 实验任务\t133
13．3 设计思路\t133
13．4 实验实施（跟我做）\t135
13．4．1 步骤一：创建项目和
文件\t135
13．4．2 步骤二：页面基类\t136
13．4．3 步骤三：姓名输入页面\t137
13．4．4 步骤四：投票页面\t138
13．4．5 步骤五：数据的获取和
写入\t139
第14章 PHP制作动态网页
（学生成绩管理）\t141
14．1 实验目标\t141
14．2 实验任务\t142
14．3 设计思路\t143
14．4 实验实施（跟我做）\t146
14．4．1 步骤一：创建项目和
文件\t146
14．4．2 步骤二：创建数据库\t147
14．4．3 步骤三：制作CSS
样式\t147
14．4．4 步骤四：制作登录
页面\t147
14．4．5 步骤五：制作成绩管理
页面\t149
14．4．6 步骤六：编写数据库操作
PHP代码\t151
14．4．7 步骤七：数据的获取和
写入\t153
第15章 AJAX制作动态网页
（阅读器）\t158
15．1 实验目标\t158
15．2 实验任务\t159
15．3 设计思路\t160
15．4 实验实施（跟我做）\t161
15．4．1 步骤一：创建项目和
文件\t161
15．4．2 步骤二：实现XML格式
数据接口\t161
15．4．3 步骤三：实现JSON格式
数据接口\t162
15．4．4 步骤四：制作HTML
页面\t163
15．4．5 步骤五：制作CSS样式\t163
15．4．6 步骤六：编写AJAX
请求\t164
15．4．7 步骤七：构建XML格式的
书籍内容\t165
15．4．8 步骤八：构建JSON格式的
书籍内容\t166
15．4．9 步骤九：清除页面内容\t167
第16章 RESTful API规范
（视频列表）\t168
16．1 实验目标\t168
16．2 实验任务\t169
16．3 设计思路\t170
16．4 实验实施（跟我做）\t172
16．4．1 步骤一：处理API
请求\t172
16．4．2 步骤二：返回视频列表
数据\t175
16．4．3 步骤三：使用RESTful
API\t176
第17章 Laravel框架构建动态网站
（第一个Laravel程序）\t178
17．1 实验目标\t178
17．2 实验任务\t179
17．3 设计思路\t180
17．4 实验实施（跟我做）\t181
17．4．1 步骤一：安装
Composer\t181
17．4．2 步骤二：配置国内镜像\t183
17．4．3 步骤三：创建Laravel
工程\t183
17．4．4 步骤四：配置虚拟主机\t184
17．4．5 步骤五：编写index．blade．php
文件\t186
17．4．6 步骤六：编写路由\t186
第18章 Laravel框架构建动态网站
（在线答题）\t187
18．1 实验目标\t187
18．2 实验任务\t188
18．3 设计思路\t188
18．4 实验实施（跟我做）\t190
18．4．1 步骤一：创建Laravel
工程\t190
18．4．2 步骤二：配置路由\t191
18．4．3 步骤三：创建控制器类QuizController\t191
18．4．4 步骤四：编写quiz．blade．php
文件\t192
18．4．5 步骤五：编写result．blade．php
文件\t193
18．4．6 步骤六：编写QuizController()
处理函数\t194
第19章 Laravel框架构建动态网站
（个人博客）\t197
19．1 实验目标\t197
19．2 实验任务\t198
19．3 设计思路\t200
19．4 实验实施（跟我做）\t203
19．4．1 步骤一：创建Laravel
工程\t203
19．4．2 步骤二：配置路由\t204
19．4．3 步骤三：创建控制器类\t205
19．4．4 步骤四：实现登录功能
（查询构建器）\t205
19．4．5 步骤五：创建模型类\t206
19．4．6 步骤六：实现登录功能\t207
19．4．7 步骤七：显示博客列表\t208
19．4．8 步骤八：添加博客\t212
19．4．9 步骤九：修改和删除
博客\t212
第20章 AJAX制作动态网页
（天气预报）\t214
20．1 实验目标\t214
20．2 实验任务\t216
20．3 设计思路\t216
20．4 实验实施（跟我做）\t217
20．4．1 步骤一：创建工程和
文件\t217
20．4．2 步骤二：实现PHP数据
接口\t218
20．4．3 步骤三：制作HTML
页面\t219
20．4．4 步骤四：制作CSS
样式\t220
20．4．5 步骤五：编写AJAX
请求\t221
第21章 综合实践（淘兴趣）\t223
21．1 项目简介\t223
21．2 实践目标\t223
21．3 需求分析\t224
21．4 页面设计\t226
21．4．1 工作任务\t226
21．4．2 设计思路\t226
21．4．3 实现（跟我做）\t228
21．5 第一阶段PHP页面混合式：
创建工程\t233
21．5．1 工作任务\t233
21．5．2 设计思路\t233
21．5．3 实现（跟我做）\t236
21．6 第一阶段PHP页面混合式：
系统管理\t241
21．6．1 PHP页面混合式：管理员
登录\t241
21．6．2 PHP页面混合式：兴趣
管理\t246
21．7 第一阶段PHP页面混合式：
用户注册\t253
21．7．1 工作任务\t253
21．7．2 设计思路\t254
21．7．3 实现（跟我做）\t255
21．8 第一阶段PHP页面混合式：
用户登录\t258
21．8．1 工作任务\t258
21．8．2 设计思路\t259
21．8．3 实现（跟我做）\t259
21．9 第一阶段PHP页面混合式：
个人中心\t261
21．9．1 工作任务\t261
21．9．2 设计思路\t262
21．9．3 实现（跟我做）\t263
21．10 第一阶段PHP页面混合式：
首页\t265
21．10．1 工作任务\t265
21．10．2 设计思路\t267
21．10．3 实现（跟我做）\t268
21．11 第一阶段PHP页面混合式：
趣点管理\t270
21．11．1 PHP页面混合式：创建
趣点\t270
21．11．2 PHP页面混合式：搜索
趣点\t275
21．11．3 PHP页面混合式：订阅
趣点\t281
21．12 第一阶段PHP页面混合式：
微博管理\t287
21．12．1 工作任务\t287
21．12．2 设计思路\t289
21．12．3 实现（跟我做）\t289
21．13 第二阶段移动端响应式页面：
首页\t293
21．13．1 工作任务\t293
21．13．2 设计思路\t293
21．13．3 实现（跟我做）\t294
21．14 第三阶段AJAX+JSON：
用户注册\t297
21．14．1 工作任务\t297
21．14．2 设计思路\t298
21．14．3 实现（跟我做）\t299
21．15 第三阶段AJAX+JSON：
用户登录\t307
21．15．1 工作任务\t307
21．15．2 设计思路\t308
21．15．3 实现（跟我做）\t309
21．16 第三阶段AJAX+JSON：
趣点管理\t314
21．16．1 工作任务\t314
21．16．2 设计思路\t316
21．16．3 实现（跟我做）\t316
21．17 第三阶段AJAX+JSON：
微博管理\t328
21．17．1 工作任务\t328
21．17．2 设计思路\t330
21．17．3 实现（跟我做）\t330
21．18 第四阶段RESTful API：
搜索趣点\t339
21．18．1 工作任务\t339
21．18．2 设计思路\t340
21．18．3 实现（跟我做）\t342
21．19 第五阶段Laravel：用户
注册\t350
21．19．1 工作任务\t350
21．19．2 设计思路\t351
21．19．3 实现（跟我做）\t352
21．20 第五阶段Laravel：用户
登录\t359
21．20．1 工作任务\t359
21．20．2 设计思路\t360
21．20．3 实现（跟我做）\t361