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

目 录


第1章 实践概述 1
1.1 实践目标 1
1.2 实践知识地图 1
1.3 实施安排 7
第2章 开发环境：HBuilder X开发工具 9
2.1 实验目标 9
2.2 实验任务 9
2.3 设计思路 9
2.4 实验实施（跟我做） 10
2.4.1 步骤一：下载并安装
HBuilder X 10
2.4.2 步骤二：HBuilder X主界面 11
2.4.3 步骤三：创建项目 12
2.4.4 步骤四：编辑HTML文件 12
2.4.5 步骤五：运行 13
第3章 网页图形绘制：图片水印 15
3.1 实验目标 15
3.2 实验任务 15
3.3 设计思路 16
3.4 实验实施（跟我做） 17
3.4.1 步骤一：创建项目和文件 17
3.4.2 步骤二：准备Canvas环境 17
3.4.3 步骤三：取/存图片 17
3.4.4 步骤四：绘制水印 18
第4章 网页图形绘制：贪吃蛇 19
4.1 实验目标 19
4.2 实验任务 19
4.3 设计思路 20
4.4 实验实施（跟我做） 20
4.4.1 步骤一：创建项目和文件 20
4.4.2 步骤二：制作页面 21
4.4.3 步骤三：初始化数据 21
4.4.4 步骤四：创建“蛇”对象 22
4.4.5 步骤五：生成食物方块 25
4.4.6 步骤六：绘制蛇 25
4.4.7 步骤七：游戏开始和键盘事件 25
第5章 网页图形绘制：登录页面 27
5.1 实验目标 27
5.2 实验任务 27
5.3 设计思路 28
5.4 实验实施（跟我做） 28
5.4.1 步骤一：通过JS生成图片验
证码 28
5.4.2 步骤二：在登录页面中应用图片验证码 31
5.4.3 步骤三：测试图片验证码 32
第6章 网页图形绘制：Logo绘制 34
6.1 实验目标 34
6.2 实验任务 35
6.3 设计思路 35
6.4 实验实施（跟我做） 37
6.4.1 步骤一：创建项目和文件 37
6.4.2 步骤二：SVG文件的结构 37
6.4.3 步骤三：创建Logo图形 37
6.4.4 步骤四：在HTML页面引入SVG文件 38
第7章 CSS预处理语言：页面导航栏 39
7.1 实验目标 39
7.2 实验任务 39
7.3 设计思路 40
7.4 实验实施（跟我做） 41
7.4.1 步骤一：创建项目和文件 41
7.4.2 步骤二：引入Less文件 41
7.4.3 步骤三：搭建导航结构 42
7.4.4 步骤四：设置公共变量 43
7.4.5 步骤五：使用嵌套规则设置导航
样式 44
第8章 ES9编程：图形计算器 47
8.1 实验目标 47
8.2 实验任务 48
8.3 设计思路 50
8.4 实验实施（跟我做） 51
8.4.1 步骤一：创建项目和文件 51
8.4.2 步骤二：制作HTML页面 51
8.4.3 步骤三：制作CSS样式 52
8.4.4 步骤四：定义图形数据 53
8.4.5 步骤五：选择计算图形 54
8.4.6 步骤六：显示图形界面 54
8.4.7 步骤七：计算结果 55
第9章 ES9编程：抽奖 61
9.1 实验目标 61
9.2 实验任务 61
9.3 设计思路 62
9.4 实验实施（跟我做） 62
9.4.1 步骤一：创建项目和文件 62
9.4.2 步骤二：制作HTML页面 63
9.4.3 步骤三：编写CSS样式 63
9.4.4 步骤四：页面JS交互逻辑 64
0章 Vue.js：学习日历 66
10.1 实验目标 66
10.2 实验任务 67
10.3 设计思路 68
10.4 实验实施（跟我做） 70
10.4.1 步骤一：创建项目和文件 70
10.4.2 步骤二：创建Vue实例 71
10.4.3 步骤三：渲染学习日历页面 73
10.4.4 步骤四：创建对话框组件dialogContent 75
10.4.5 步骤五：编辑课程表（父子组件
通信） 77
1章 Vue.js：记事本 81
11.1 实验目标 81
11.2 实验任务 82
11.3 设计思路 83
11.4 实验实施（跟我做） 85
11.4.1 步骤一：创建项目和文件 85
11.4.2 步骤二：配置Vue路由规则 85
11.4.3 步骤三：编辑登录页组件 86
11.4.4 步骤四：编辑记事本列表页
组件 87
11.4.5 步骤五：创建新增记事本信息
组件 93
2章 Vue.js：贴吧 97
12.1 实验目标 97
12.2 实验任务 98
12.3 设计思路 99
12.4 实验实施（跟我做） 100
12.4.1 步骤一：创建项目和文件 100
12.4.2 步骤二：安装和配置路由
规则 102
12.4.3 步骤三：安装和配置
Element UI 103
12.4.4 步骤四：创建贴吧首页 104
12.4.5 步骤五：创建帖子列表页面 108
12.4.6 步骤六：创建帖子详情页面 111
3章 Vue.js：社区团购网 117
13.1 实验目标 117
13.2 实验任务 118
13.3 设计思路 119
13.4 实验实施（跟我做） 121
13.4.1 步骤一：创建项目和文件 121
13.4.2 步骤二：安装和配置路由
规则 123
13.4.3 步骤三：安装Vuex并配置Store 124
13.4.4 步骤四：创建页头组件 125
13.4.5 步骤五：引入页头组件 127
13.4.6 步骤六：准备商品数据和分类
数据 127
13.4.7 步骤七：创建社区团购网
首页 128
13.4.8 步骤八：创建购物车页面 133
4章 Vue.js：购物车 140
14.1 实验目标 140
14.2 实验任务 140
14.3 设计思路 142
14.4 实验实施（跟我做） 143
14.4.1 步骤一：实现页面布局与基础
样式 143
14.4.2 步骤二：使用CSS美化页面
样式 144
14.4.3 步骤三：绑定数据并设置基础
逻辑 145
14.4.4 步骤四：实现商品选择与全选功能的 146
14.4.5 步骤五：“删除”按钮 147
5章 Vue.js：备忘录 148
15.1 实验目标 148
15.2 实验任务 149
15.3 设计思路 151
15.4 实验实施（跟我做） 151
15.4.1 步骤一：实现页面布局与
样式 151
15.4.2 步骤二：绑定数据与渲染 152
15.4.3 步骤三：切换备忘录的内容 153
15.4.4 步骤四：修改与删除备忘项目的状态 154
15.4.5 步骤五：修改备忘项目的
内容 156
6章 Vue.js：点餐系统 159
16.1 实验目标 159
16.2 实验任务 160
16.3 设计思路 160
16.4 实验实施（跟我做） 161
16.4.1 步骤一：创建项目和文件 161
16.4.2 步骤二：配置路由规则 162
16.4.3 步骤三：配置Store 162
16.4.4 步骤四：创建公共页头组件 163
16.4.5 步骤五：创建点餐数据列表
组件 164
16.4.6 步骤六：创建首页组件 167
16.4.7 步骤七：创建订单组件 168
7章 Node.js：拍卖网 171
17.1 实验目标 171
17.2 实验任务 172
17.3 设计思路 172
17.4 实验实施（跟我做） 173
17.4.1 步骤一：创建项目和文件 173
17.4.2 步骤二：完成页面显示 173
17.4.3 步骤三：实现请求处理 176
17.4.4 步骤四：准备数据 177
17.4.5 步骤五：完成前后端交互 178
17.4.6 步骤六：运行效果 179
8章 Node.js：在线选课 180
18.1 实验目标 180
18.2 实验任务 180
18.3 设计思路 181
18.4 实验实施（跟我做） 182
18.4.1 步骤一：创建项目和文件 182
18.4.2 步骤二：准备数据 182
18.4.3 步骤三：完成静态页面 183
18.4.4 步骤四：仿数据库处理数据 185
18.4.5 步骤五：实现请求处理 186
18.4.6 步骤六：实现静态资源访问 188
18.4.7 步骤七：实现前后端交互 189
18.4.8 步骤八：运行效果 191
9章 Node.js：问卷调查网 192
19.1 实验目标 192
19.2 实验任务 192
19.3 设计思路 193
19.4 实验实施（跟我做） 194
19.4.1 步骤一：创建项目和文件 194
19.4.2 步骤二：完成静态页面 194
19.4.3 步骤三：仿数据库处理数据 198
19.4.4 步骤四：创建服务器 199
19.4.5 步骤五：实现前台路由 199
19.4.6 步骤六：实现后台路由 200
19.4.7 步骤七：运行效果 201
第20章 Node.js：用户注册/登录 203
20.1 实验目标 203
20.2 实验任务 203
20.3 设计思路 204
20.4 实验实施（跟我做） 205
20.4.1 步骤一：下载与安装Node.js 205
20.4.2 步骤二：创建项目和文件 206
20.4.3 步骤三：实现“用户注册”和“用户登录”页面 207
20.4.4 步骤四：添加“用户注册”和“用户登录”页面的CSS样式 208
20.4.5 步骤五：创建服务器 209
20.4.6 步骤六：发送AJAX请求到服
务器 211
第21章 Node.js：用户信息管理 214
21.1 实验目标 214
21.2 实验任务 215
21.3 设计思路 216
21.4 实验实施（跟我做） 218
21.4.1 步骤一：使用Express应用生成器创建项目 218
21.4.2 步骤二：使用Express连接MySQL数据库 219
21.4.3 步骤三：解决跨域问题 219
21.4.4 步骤四：设计路由接口 220
第22章 Node.js：图片验证码 224
22.1 实验目标 224
22.2 实验任务 225
22.3 设计思路 225
22.4 实验实施（跟我做） 226
22.4.1 步骤一：使用Express应用生成器创建项目 226
22.4.2 步骤二：实现验证码页面 227
22.4.3 步骤三：添加验证码页面的CSS样式 227
22.4.4 步骤四：解决跨域问题 229
22.4.5 步骤五：实现路由功能 229
22.4.6 步骤六：发送AJAX请求到服
务器 230
第23章 Node.js：电商首页 232
23.1 实验目标 232
23.2 实验任务 233
23.3 设计思路 234
23.4 实验实施（跟我做） 235
23.4.1 步骤一：创建项目和文件 235
23.4.2 步骤二：安装和引入第三方
模块 236
23.4.3 步骤三：请求首页数据 236
23.4.4 步骤四：编写分类导航组件、轮播图组件、分类专区组件 238
23.4.5 步骤五：Node.js接口 241
第24章 网站架构设计：智能公交 243
24.1 实验目标 243
24.2 实验任务 243
24.3 设计思路 244
24.4 实验实施（跟我做） 245
24.4.1 步骤一：创建项目和文件 245
24.4.2 步骤二：设计并完成前端
页面 245
24.4.3 步骤三：创建服务器 246
24.4.4 步骤四：实现前端功能 253
24.4.5 步骤五：运行效果 254
第25章 网站架构设计：职位发布系统 256
25.1 实验目标 256
25.2 实验任务 256
25.3 设计思路 260
25.4 实验实施（跟我做） 261
25.4.1 步骤一：创建项目和文件 261
25.4.2 步骤二：配置路由规则 263
25.4.3 步骤三：安装和引入Axios 264
25.4.4 步骤四：安装Element UI 264
25.4.5 步骤五：编写职位发布系统首页
组件 265
25.4.6 步骤六：编写职位列表组件 266
25.4.7 步骤七：编写职位发布组件 270
25.4.8 步骤八：创建服务器 273
25.4.9 步骤九：实现数据库操作 274
25.4.10 步骤十：实现后台路由 276
25.4.11 步骤十一：请求后台接口 277
第26章 网站性能优化：游戏网站 282
26.1 实验目标 282
26.2 实验任务 283
26.3 设计思路 284
26.4 实验实施（跟我做） 285
26.4.1 步骤一：创建项目和文件 285
26.4.2 步骤二：构建页面主体 285
26.4.3 步骤三：创建页面头部导航 287
26.4.4 步骤四：创建页面主体部分 289
26.4.5 步骤五：创建页面底部版权
部分 297
26.4.6 步骤六：使用webpack打包静态
资源 298
第27章 网站性能优化：教学平台 302
27.1 实验目标 302
27.2 实验任务 303
27.3 设计思路 304
27.4 实验实施（跟我做） 305
27.4.1 步骤一：创建项目和文件 305
27.4.2 步骤二：编辑app.js文件，搭建Web服务器 306
27.4.3 步骤三：构建前端页面 307
27.4.4 步骤四：前端发送获取图片
请求 310
27.4.5 步骤五：后台处理请求，返回响应信息 311
27.4.6 步骤六：运行效果 312
第28章 网站性能优化：图片懒加载 314
28.1 实验目标 314
28.2 实验任务 314
28.3 设计思路 315
28.4 实验实施（跟我做） 316
28.4.1 步骤一：创建项目和文件 316
28.4.2 步骤二：搭建页面结构 316
28.4.3 步骤三：编写CSS样式文件 317
28.4.4 步骤四：编写JS代码 317