-
内容大纲
本书是按照《Web前端开发职业技能等级标准2.0版》(高级)编写的配套实践教程,书中涉及的项目代码使用国产的HBuilder X开发工具编译,并且均可在主流浏览器中运行。
本书将中、高职业院校和应用型本科院校的计算机应用、软件技术等相关专业开设的Web前端开发方向的课程体系,与企业Web前端开发岗位能力模型相结合,依据《Web前端开发职业技能等级标准2.0版》(高级)技能要求,形成三位一体的Web前端开发技术知识地图。案例编排以实践能力为导向,以开发企业真实应用为目标,遵循企业软件工程标准和技术开发要求,采用任务驱动的方式,将网页图形绘制、CSS预处理语言、ES9编程、Vue.js、Node.js、网站架构设计、网站性能优化等重要知识单元,充分融入实际案例和应用环境中。本书对《Web前端开发职业技能等级标准2.0版》(高级)要求的重要知识单元都进行了详细的描述,通过案例教学,使读者能够很好地掌握Web前端开发的相关技术。
本书针对不同知识单元设计了多个技术专题,使学员通过重点训练,掌握每个知识单元的核心内容。本书适合作为高级Web前端开发职业技能等级证书考核实践教学的参考用书,也可以作为Web前端开发工作者的学习指导用书。 -
作者介绍
-
目录
第1章 实践概述
1.1 实践目标
1.2 实践知识地图
1.3 实施安排
第2章 开发环境:HBuilder X开发工具
2.1 实验目标
2.2 实验任务
2.3 设计思路
2.4 实验实施(跟我做)
2.4.1 步骤一:下载并安装HBuilder X
2.4.2 步骤二:HBuilder X主界面
2.4.3 步骤三:创建项目
2.4.4 步骤四:编辑HTML文件
2.4.5 步骤五:运行
第3章 网页图形绘制:图片水印
3.1 实验目标
3.2 实验任务
3.3 设计思路
3.4 实验实施(跟我做)
3.4.1 步骤一:创建项目和文件
3.4.2 步骤二:准备Canvas环境
3.4.3 步骤三:取/存图片
3.4.4 步骤四:绘制水印
第4章 网页图形绘制:贪吃蛇
4.1 实验目标
4.2 实验任务
4.3 设计思路
4.4 实验实施(跟我做)
4.4.1 步骤一:创建项目和文件
4.4.2 步骤二:制作页面
4.4.3 步骤三:初始化数据
4.4.4 步骤四:创建“蛇”对象
4.4.5 步骤五:生成食物方块
4.4.6 步骤六:绘制蛇
4.4.7 步骤七:游戏开始和键盘事件
第5章 网页图形绘制:登录页面
5.1 实验目标
5.2 实验任务
5.3 设计思路
5.4 实验实施(跟我做)
5.4.1 步骤一:通过JS生成图片验证码
5.4.2 步骤二:在登录页面中应用图片验证码
5.4.3 步骤三:图片验证码
第6章 网页图形绘制:Logo绘制
6.1 实验目标
6.2 实验任务
6.3 设计思路
6.4 实验实施(跟我做)
6.4.1 步骤一:创建项目和文件
6.4.2 步骤二:SVG文件的结构
6.4.3 步骤三:创建Logo图形
6.4.4 步骤四:在HTML页面引入SVG文件
第7章 CSS预处理语言:页面导航栏
7.1 实验目标
7.2 实验任务
7.3 设计思路
7.4 实验实施(跟我做)
7.4.1 步骤一:创建项目和文件
7.4.2 步骤二:引入Less文件
7.4.3 步骤三:搭建导航结构
7.4.4 步骤四:设置公共变量
7.4.5 步骤五:使用嵌套规则设置导航样式
第8章 ES9编程:图形计算器
8.1 实验目标
8.2 实验任务
8.3 设计思路
8.4 实验实施(跟我做)
8.4.1 步骤一:创建项目和文件
8.4.2 步骤二:制作HTML页面
8.4.3 步骤三:制作CSS样式
8.4.4 步骤四:定义图形数据
8.4.5 步骤五:选择计算图形
8.4.6 步骤六:显示图形界面
8.4.7 步骤七:计算结果
第9章 ES9编程:抽
9.1 实验目标
9.2 实验任务
9.3 设计思路
9.4 实验实施(跟我做)
9.4.1 步骤一:创建项目和文件
9.4.2 步骤二:制作HTML页面
9.4.3 步骤三:编写CSS样式
9.4.4 步骤四:页面JS交互逻辑
第10章 Vue.js:学习日历
10.1 实验目标
10.2 实验任务
10.3 设计思路
10.4 实验实施(跟我做)
10.4.1 步骤一:创建项目和文件
10.4.2 步骤二:创建Vue实例
10.4.3 步骤三:渲染学习日历页面
10.4.4 步骤四:创建对话框组件dialogContent
10.4.5 步骤五:编辑课程表(父子组件通信)
第11章 Vue.js:记事本
11.1 实验目标
11.2 实验任务
11.3 设计思路
11.4 实验实施(跟我做)
11.4.1 步骤一:创建项目和文件
11.4.2 步骤二:配置Vue路由规则
11.4.3 步骤三:编辑登录页组件
11.4.4 步骤四:编辑记事本列表页组件
11.4.5 步骤五:创建新增记事本信息组件
第12章 Vue.js:贴吧
12.1 实验目标
12.2 实验任务
12.3 设计思路
12.4 实验实施(跟我做)
12.4.1 步骤一:创建项目和文件
12.4.2 步骤二:安装和配置路由规则
12.4.3 步骤三:安装和配置Element UI
12.4.4 步骤四:创建贴吧首页
12.4.5 步骤五:创建帖子列表页面
12.4.6 步骤六:创建帖子详情页面
第13章 Vue.js:社区团购网
13.1 实验目标
13.2 实验任务
13.3 设计思路
13.4 实验实施(跟我做)
13.4.1 步骤一:创建项目和文件
13.4.2 步骤二:安装和配置路由规则
13.4.3 步骤三:安装Vuex并配置Store
13.4.4 步骤四:创建页头组件
13.4.5 步骤五:引入页头组件
13.4.6 步骤六:准备商品数据和分类数据
13.4.7 步骤七:创建社区团购网首页
13.4.8 步骤八:创建购物车页面
第14章 Vue.js:购物车
14.1 实验目标
14.2 实验任务
14.3 设计思路
14.4 实验实施(跟我做)
14.4.1 步骤一:实现页面布局与基础样式
14.4.2 步骤二:使用CSS美化页面样式
14.4.3 步骤三:绑定数据并设置基础逻辑
14.4.4 步骤四:实现商品选择与全选功能的
14.4.5 步骤五:“删除”按钮
第15章 Vue.js:备忘录
15.1 实验目标
15.2 实验任务
15.3 设计思路
15.4 实验实施(跟我做)
15.4.1 步骤一:实现页面布局与样式
15.4.2 步骤二:绑定数据与渲染
15.4.3 步骤三:切换备忘录的内容
15.4.4 步骤四:修改与删除备忘项目的状态
15.4.5 步骤五:修改备忘项目的内容
第16章 Vue.js:点餐系统
16.1 实验目标
16.2 实验任务
16.3 设计思路
16.4 实验实施(跟我做)
16.4.1 步骤一:创建项目和文件
16.4.2 步骤二:配置路由规则
16.4.3 步骤三:配置Store
16.4.4 步骤四:创建公共页头组件
16.4.5 步骤五:创建点餐数据列表组件
16.4.6 步骤六:创建首页组件
16.4.7 步骤七:创建订单组件
第17章 Node.js:拍卖网
17.1 实验目标
17.2 实验任务
17.3 设计思路
17.4 实验实施(跟我做)
17.4.1 步骤一:创建项目和文件
17.4.2 步骤二:完成页面显示
17.4.3 步骤三:实现请求处理
17.4.4 步骤四:准备数据
17.4.5 步骤五:完成前后端交互
17.4.6 步骤六:运行效果
第18章 Node.js:在线选课
18.1 实验目标
18.2 实验任务
18.3 设计思路
18.4 实验实施(跟我做)
18.4.1 步骤一:创建项目和文件
18.4.2 步骤二:准备数据
18.4.3 步骤三:完成静态页面
18.4.4 步骤四:仿数据库处理数据
18.4.5 步骤五:实现请求处理
18.4.6 步骤六:实现静态资源访问
18.4.7 步骤七:实现前后端交互
18.4.8 步骤八:运行效果
第19章 Node.js:问卷调查网
19.1 实验目标
19.2 实验任务
19.3 设计思路
19.4 实验实施(跟我做)
19.4.1 步骤一:创建项目和文件
19.4.2 步骤二:完成静态页面
19.4.3 步骤三:仿数据库处理数据
19.4.4 步骤四:创建服务器
19.4.5 步骤五:实现前台路由
19.4.6 步骤六:实现后台路由
19.4.7 步骤七:运行效果
第20章 Node.js:用户注册/登录
20.1 实验目标
20.2 实验任务
20.3 设计思路
20.4 实验实施(跟我做)
20.4.1 步骤一:下载与安装Node.js
20.4.2 步骤二:创建项目和文件
20.4.3 步骤三:实现“用户注册”和“用户登录”页面
20.4.4 步骤四:添加“用户注册”和“用户登录”页面的CSS样式
20.4.5 步骤五:创建服务器
20.4.6 步骤六:发送AJAX请求到服务器
第21章 Node.js:用户信息管理
21.1 实验目标
21.2 实验任务
21.3 设计思路
21.4 实验实施(跟我做)
21.4.1 步骤一:使用Express应用生成器创建项目
21.4.2 步骤二:使用Express连接MySQL数据库
21.4.3 步骤三:解决跨域问题
21.4.4 步骤四:设计路由接口
第22章 Node.js:图片验证码
22.1 实验目标
22.2 实验任务
22.3 设计思路
22.4 实验实施(跟我做)
22.4.1 步骤一:使用Express应用生成器创建项目
22.4.2 步骤二:实现验证码页面
22.4.3 步骤三:添加验证码页面的CSS样式
22.4.4 步骤四:解决跨域问题
22.4.5 步骤五:实现路由功能
22.4.6 步骤六:发送AJAX请求到服务器
第23章 Node.js:电商首页
23.1 实验目标
23.2 实验任务
23.3 设计思路
23.4 实验实施(跟我做)
23.4.1 步骤一:创建项目和文件
23.4.2 步骤二:安装和引入第三方模块
23.4.3 步骤三:请求首页数据
23.4.4 步骤四:编写分类导航组件、轮播图组件、分类专区组件
23.4.5 步骤五:Node.js接口
第24章 网站架构设计:智能公交
24.1 实验目标
24.2 实验任务
24.3 设计思路
24.4 实验实施(跟我做)
24.4.1 步骤一:创建项目和文件
24.4.2 步骤二:设计并完成前端页面
24.4.3 步骤三:创建服务器
24.4.4 步骤四:实现前端功能
24.4.5 步骤五:运行效果
第25章 网站架构设计:职位发布系统
25.1 实验目标
25.2 实验任务
25.3 设计思路
25.4 实验实施(跟我做)
25.4.1 步骤一:创建项目和文件
25.4.2 步骤二:配置路由规则
25.4.3 步骤三:安装和引入Axios
25.4.4 步骤四:安装Element UI
25.4.5 步骤五:编写职位发布系统首页组件
25.4.6 步骤六:编写职位列表组件
25.4.7 步骤七:编写职位发布组件
25.4.8 步骤八:创建服务器
25.4.9 步骤九:实现数据库操作
25.4.10 步骤十:实现后台路由
25.4.11 步骤十一:请求后台接口
第26章 网站性能优化:游戏网站
26.1 实验目标
26.2 实验任务
26.3 设计思路
26.4 实验实施(跟我做)
26.4.1 步骤一:创建项目和文件
26.4.2 步骤二:构建页面主体
26.4.3 步骤三:创建页面头部导航
26.4.4 步骤四:创建页面主体部分
26.4.5 步骤五:创建页面底部版权部分
26.4.6 步骤六:使用webpack打包静态资源
第27章 网站性能优化:教学平台
27.1 实验目标
27.2 实验任务
27.3 设计思路
27.4 实验实施(跟我做)
27.4.1 步骤一:创建项目和文件
27.4.2 步骤二:编辑app.js文件,搭建Web服务器
27.4.3 步骤三:构建前端页面
27.4.4 步骤四:前端发送获取图片请求
27.4.5 步骤五:后台处理请求,返回响应信息
27.4.6 步骤六:运行效果
第28章 网站性能优化:图片懒加载
28.1 实验目标
28.2 实验任务
28.3 设计思路
28.4 实验实施(跟我做)
28.4.1 步骤一:创建项目和文件
28.4.2 步骤二:搭建页面结构
28.4.3 步骤三:编写CSS样式文件
28.4.4 步骤四:编写JS代码
同类热销排行榜
- C语言与程序设计教程(高等学校计算机类十二五规划教材)16
- 电机与拖动基础(教育部高等学校自动化专业教学指导分委员会规划工程应用型自动化专业系列教材)13.48
- 传感器与检测技术(第2版高职高专电子信息类系列教材)13.6
- ASP.NET项目开发实战(高职高专计算机项目任务驱动模式教材)15.2
- Access数据库实用教程(第2版十二五职业教育国家规划教材)14.72
- 信号与系统(第3版下普通高等教育九五国家级重点教材)15.08
- 电气控制与PLC(普通高等教育十二五电气信息类规划教材)17.2
- 数字电子技术基础(第2版)17.36
- VB程序设计及应用(第3版十二五职业教育国家规划教材)14.32
- Java Web从入门到精通(附光盘)/软件开发视频大讲堂27.92
推荐书目
-
孩子你慢慢来/人生三书 华人世界率性犀利的一枝笔,龙应台独家授权《孩子你慢慢来》20周年经典新版。她的《...
-
时间简史(插图版) 相对论、黑洞、弯曲空间……这些词给我们的感觉是艰深、晦涩、难以理解而且与我们的...
-
本质(精) 改革开放40年,恰如一部四部曲的年代大戏。技术突变、产品迭代、产业升级、资本对接...