书籍详情

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

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

作者:北京新奥时代科技有限责任公司

出版社:电子工业出版社

出版时间:2023-07-01

ISBN:9787121459184

定价:¥59.80

购买这本书可以去
内容简介
  本书是按照《Web前端开发职业技能等级标准2.0版》( )编写的配套实践教程,书中涉及的项目代码使用国产的HBuilder X开发工具编译,并且均可在主流浏览器中运行。本书将中、高职业院校和应用型本科院校的计算机应用、软件技术等相关专业开设的Web前端开发方向的课程体系,与企业Web前端开发岗位能力模型相结合,依据《Web前端开发职业技能等级标准2.0版》( )技能要求,形成三位一体的Web前端开发技术知识地图。案例编排以实践能力为导向,以开发企业真实应用为目标,遵循企业软件工程标准和技术开发要求,采用任务驱动的方式,将网页图形绘制、CSS预处理语言、ES9编程、Vue.js、Node.js、网站架构设计、网站性能优化等重要知识单元,充分融入实际案例和应用环境中。本书对《Web前端开发职业技能等级标准2.0版》( )要求的重要知识单元都进行了详细的描述,通过案例教学,使读者能够很好地掌握Web前端开发的相关技术。本书针对不同知识单元设计了多个技术专题,使学员通过重点训练,掌握每个知识单元的核心内容。本书适合作为 Web前端开发职业技能等级证书考核实践教学的参考用书,也可以作为Web前端开发工作者的学习指导用书。
作者简介
  北京新奥时代科技有限责任公司于2006年04月12日在石景山分局登记成立。公司经营范围包括技术开发、技术推广、技术转让、技术咨询、技术服务等。
目录
目 录


第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
猜您喜欢

读书导航