欢迎光临中图网 请 | 注册
> >
Web前端开发实训案例教程(高级)

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

出版社:电子工业出版社出版时间:2023-07-01
开本: 16开 页数: 328
中 图 价:¥41.9(7.0折) 定价  ¥59.8 登录后可看到会员价
加入购物车 收藏
运费6元,满39元免运费
?新疆、西藏除外
本类五星书更多>

Web前端开发实训案例教程(高级) 版权信息

  • ISBN:9787121459184
  • 条形码:9787121459184 ; 978-7-121-45918-4
  • 装帧:平塑
  • 册数:暂无
  • 重量:暂无
  • 所属分类:>

Web前端开发实训案例教程(高级) 内容简介

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

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
第10章 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
第11章 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
第12章 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
第13章 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
第14章 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
第15章 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
第16章 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
第17章 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
第18章 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
第19章 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章 网站架构
展开全部

Web前端开发实训案例教程(高级) 作者简介

北京新奥时代科技有限责任公司于2006年04月12日在石景山分局登记成立。公司经营范围包括技术开发、技术推广、技术转让、技术咨询、技术服务等。

商品评论(0条)
暂无评论……
书友推荐
本类畅销
编辑推荐
返回顶部
中图网
在线客服