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

图书标准信息

• 作者 北京新奥时代科技有限责任公司
• 出版社 电子工业出版社
• 出版时间 2023-07
• 版次 1
• ISBN 9787121459184
• 定价 59.80元
• 装帧 其他
• 开本 16开
• 页数 328页
• 字数 564千字

【内容简介】

本书是按照《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 X10

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  步骤四：创建对话框组件dialogContent75

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 UI103

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并配置Store124

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  步骤三：配置Store162

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.js205

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章  网站架构