图书简介:
第1章 概述 11.1 实践目标 11.2 实践知识地图 21.3 实施安排 131.3.1 实验(技术专题)部分 131.3.2 综合实践部分 31第2章 开发工具(HBuilderX工具) 362.1 实验目标 362.2 实验任务 362.3 设计思路 362.4 实验实施 372.4.1 步骤一:下载并安装HBuilderX 372.4.2 步骤二:HBuilderX主界面 382.4.3 步骤三:创建项目 392.4.4 步骤四:编辑html文件 392.4.5 步骤五:运行 40第3章 ES6(网页计算器) 423.1 实验目标 423.2 实验任务 433.3 设计思路 443.4 实验实施(跟我做) 453.4.1 步骤一:创建项目和文件 453.4.2 步骤二:制作HTML页面 453.4.3 步骤三:制作CSS样式 463.4.4 步骤四:编写网页计算器类 473.4.5 步骤五:编写乘除运算逻辑 473.4.6 步骤六:编写加减运算逻辑 483.4.7 步骤七:编写数据返回方法 483.4.8 步骤八:页面交互逻辑 483.4.9 步骤九:运行效果 49第4章 Node.js(第一个Node.js程序) 524.1 实验目标 524.2 实验任务 534.3 设计思路 534.4 实验实施 544.4.1 步骤一:Node.js的下载与安装 544.4.2 步骤二:HBuilderX的下载与安装 574.4.3 步骤三:Node.js目录结构 574.4.4 步骤四:创建项目和文件 584.4.5 步骤五:使用NPM包管理工具 584.4.6 步骤六:创建服务器 584.4.7 步骤七:运行效果 59第5章 Node.js(Web便签) 605.1 实验目标 605.2 实验任务 615.3 设计思路 615.4 实验实施(跟我做) 625.4.1 步骤一:创建项目和文件 625.4.2 步骤二:完成页面显示 635.4.3 步骤三:完成资源判断 645.4.4 步骤四:实现前后端交互 665.4.5 步骤五:完成文件写入 675.4.6 步骤六:完成文件读取 675.4.7 步骤七:获取便签列表 685.4.8 步骤八:运行效果 68第6章 Node.js(文学网) 706.1 实验目标 706.2 实验任务 706.3 设计思路 726.4 实验实施(跟我做) 736.4.1 步骤一:创建项目和文件 736.4.2 步骤二:准备数据 746.4.3 步骤三:实现文学网页面 746.4.4 步骤四:实现请求处理 786.4.5 步骤五:实现用户登录 796.4.6 步骤六:实现退出登录功能 816.4.7 步骤七:实现读者页面功能 816.4.8 步骤八:实现作者发布文章功能 856.4.9 步骤九: 实现读者接收文章内容 866.4.10 步骤十:运行效果 89第7章 Node.js(简历网) 917.1 实验目标 917.2 实验任务 927.3 设计思路 937.4 实验实施(跟我做) 957.4.1 步骤一:安装Express应用程序生成器 957.4.2 步骤二:使用应用程序生成器创建项目 957.4.3 步骤三:Express目录结构 957.4.4 步骤四:构建前端页面 967.4.5 步骤五:安装和连接MySQL数据库 987.4.6 步骤六:开发中间件 997.4.7 步骤七:实现路由跳转 997.4.8 步骤八:运行效果 101第8章 JSONP(商品清单) 1038.1 实验目标 1038.2 实验任务 1038.3 设计思路 1048.4 实验实施(跟我做) 1058.4.1 步骤一:创建项目和文件 1058.4.2 步骤二:创建前端页面 1068.4.3 步骤三:创建HTTP服务器 1078.4.4 步骤四:发送跨域请求 1078.4.5 步骤五:后台请求处理 1088.4.6 步骤六:数据写入页面 1088.4.7 步骤七:运行效果 108第9章 RESTful API(在线答题器) 1109.1 实验目标 1109.2 实验任务 1119.3 设计思路 1119.4 实验实施(跟我做) 1129.4.1 步骤一:创建项目和文件 1129.4.2 步骤二:设计完成前端页面 1139.4.3 步骤三:实现答题功能 1159.4.4 步骤四:前端功能实现 1169.4.5 步骤五:运行效果 117第10章 Vue.js(第一个Vue.js程序) 11810.1 实验目标 11810.2 实验任务 11910.3 设计思路 12010.4 实验实施(跟我做) 12010.4.1 步骤一:HBuilderX的下载和安装 12010.4.2 步骤二:Node.js的下载和安装 12110.4.3 步骤三:安装webpack 12110.4.4 步骤四:安装Vue CLI脚手架 12110.4.5 步骤五:创建工程 12210.4.6 步骤六:启动项目 123第11章 Vue.js(文章管理) 12511.1 实验目标 12511.2 实验任务 12711.3 设计思路 12811.4 实验实施(跟我做) 13111.4.1 步骤一:创建项目和文件 13111.4.2 步骤二:配置路由规则 13211.4.3 步骤三:安装和引入Axios 13311.4.4 步骤四:配置跨域请求代理 13311.4.5 步骤五:准备文章列表数据 13311.4.6 步骤六:编写文章管理页面 13411.4.7 步骤七:编写文章添加页面 13511.4.8 步骤八:准备移动端文章列表数据 13711.4.9 步骤九:编写移动端文章列表页面 13811.4.10 步骤十:Node.js接口 13911.4.11 步骤十一:请求后台接口 14111.4.12 步骤十二:运行效果 142第12章 Vue.js(网页聊天室) 14412.1 实验目标 14412.2 实验任务 14512.3 设计思路 14512.4 实验实施(跟我做) 14712.4.1 步骤一:创建项目和文件 14712.4.2 步骤二:配置路由规则 14812.4.3 步骤三:编写用户登录页面 14912.4.4 步骤四:登录信息验证 15012.4.5 步骤五:准备聊天室数据 15012.4.6 步骤六:编写聊天室页面 15112.4.7 步骤七:聊天页面初始化设置 15212.4.8 步骤八:编写对话框组件 15212.4.9 步骤九:父子组件的传值 15412.4.10 步骤十:运行效果 155第13章 Vue.js(美食网) 15613.1 实验目标 15613.2 实验任务 15713.3 设计思路 15813.4 实验实施(跟我做) 16013.4.1 步骤一:创建项目和文件 16013.4.2 步骤二:配置路由规则 16113.4.3 步骤三:Vuex的Store配置 16113.4.4 步骤四:创建页头组件 16213.4.5 步骤五:创建页脚组件 16313.4.6 步骤六:注册页头和页脚全局组件 16413.4.7 步骤七:准备菜品列表数据 16413.4.8 步骤八:创建美食网首页 16413.4.9 步骤九:创建购物车页面 167第14章 HTML和CSS代码结构优化(小说网首页) 17114.1 实验目标 17114.2 实验任务 17214.3 设计思路 17214.4 实验实施(跟我做) 17414.4.1 步骤一:创建项目和文件 17414.4.2 步骤二:构建HTML页面 17414.4.3 步骤三:使用CSS样式美化页面 17714.4.4 步骤四:使用jQuery实现动态透明效果 180第15章 图片资源优化(雪碧图) 18115.1 实验目标 18115.2 实验任务 18115.3 设计思路 18215.4 实验实施(跟我做) 18215.4.1 步骤一:创建项目和文件 18215.4.2 步骤二:制作HTML页面 18315.4.3 步骤三:制作雪碧图 18315.4.4 步骤四:实现缩小和压缩 18415.4.5 步骤五:制作CSS样式 18415.4.6 步骤六:运行效果 185第16章 前端资源加载优化(在线相册) 18616.1 实验目标 18616.2 实验任务 18616.3 设计思路 18716.4 实验实施(跟我做) 18816.4.1 步骤一:创建项目和文件 18816.4.2 步骤二:设计完成前端页面,实现预加载 18916.4.3 步骤三:前端发送获取图片请求 18916.4.4 步骤四:后台处理请求,返回响应信息 19016.4.5 步骤五:运行效果 190第17章 webpack(打包项目—文章管理) 19117.1 实验目标 19117.2 实验任务 19217.3 设计思路 19217.4 实验实施(跟我做) 19217.4.1 步骤一:使用NPM下载并安装webpack和webpack-cli 19217.4.2 步骤二:webpack配置文件的配置参数 19217.4.3 步骤三:打包文章管理项目 19417.4.4 步骤四:部署到Express 19517.4.5 步骤五:运行效果 195第18章 CSS3 2D和3D(手机相册) 19718.1 实验目标 19718.2 实验任务 19718.3 设计思路 19918.4 实验实施(跟我做) 19918.4.1 步骤一:创建项目和文件 19918.4.2 步骤二:创建移动端的HTML页面 20018.4.3 步骤三:使用flex弹性布局美化页面 20018.4.4 步骤四:制作Y轴的旋转效果 20118.4.5 步骤五:制作点击放大效果 20118.4.6 步骤六:运行效果 202第19章 Canvas(手机账单) 20319.1 实验目标 20319.2 实验任务 20419.3 设计思路 20419.4 实验实施(跟我做) 20519.4.1 步骤一:创建项目和文件 20519.4.2 步骤二:制作HTML页面 20519.4.3 步骤三:制作数据 20519.4.4 步骤四:制作表格 20619.4.5 步骤五:制作坐标 20719.4.6 步骤六:填充数据 20719.4.7 步骤七:运行效果 208第20章 SVG(SVG绘制图标) 20920.1 实验目标 20920.2 实验任务 21020.3 设计思路 21020.4 实验实施(跟我做) 21120.4.1 步骤一:创建项目和文件 21120.4.2 步骤二:SVG图片文件的结构 21120.4.3 步骤三:绘制SVG图片 21220.4.4 步骤四:应用SVG图片 21220.4.5 步骤五:运行效果 213第21章 Less(菜单) 21421.1 实验目标 21421.2 实验任务 21421.3 设计思路 21521.4 实验实施(跟我做) 21621.4.1 步骤一:创建项目和文件 21621.4.2 步骤二:Less的安装 21721.4.3 步骤三:绘制HTML页面 21721.4.4 步骤四:编写Less,美化页面 21821.4.5 步骤五:Less编译 22021.4.6 步骤六:运行效果 221第22章 jQuery Mobile(手机通讯录) 22322.1 实验目标 22322.2 实验任务 22422.3 设计思路 22422.4 实验实施(跟我做) 22522.4.1 步骤一:下载和引入 22522.4.2 步骤二:准备数据 22622.4.3 步骤三:下载和引入jQuery Mobile资源文件 22622.4.4 步骤四:jQuery Mobile页面结构 22722.4.5 步骤五:创建联系人列表页面 22722.4.6 步骤六:创建拨号页面 23022.4.7 步骤七:运行效果 231第23章 综合实践(Web聊天室) 23323.1 项目简介 23323.2 实践目标 23323.3 需求分析 23423.4 静态页面设计 23623.4.1 工作任务 23623.4.2 设计思路 23923.4.3 实现(跟我做) 24223.5 数据库设计和创建 26823.5.1 工作任务 26823.5.2 设计思路 26823.5.3 实现(跟我做) 27023.6 后端接口设计 27423.6.1 工作任务 27423.6.2 设计思路 27423.6.3 实现(跟我做) 27423.7 第一阶段Node.js:创建工程 27623.7.1 工作任务 27623.7.2 设计思路 27723.7.3 实现(跟我做) 27723.8 第一阶段Node.js:欢迎界面 28423.8.1 工作任务 28423.8.2 设计思路 28523.8.3 实现(跟我做) 28623.9 第二阶段Express:创建Express工程 28923.9.1 工作任务 28923.9.2 设计思路 28923.9.3 实现(跟我做) 29023.10 第二阶段Express:管理员登录 29423.10.1 工作任务 29423.10.2 设计思路 29523.10.3 实现(跟我做) 29723.11 第二阶段Express:显示用户列表 30223.11.1 工作任务 30223.11.2 设计思路 30323.11.3 实现(跟我做) 30523.12 第二阶段Express:获取用户信息 31023.12.1 工作任务 31023.12.2 设计思路 31023.12.3 实现(跟我做) 31123.13 第二阶段Express:修改用户信息 31423.13.1 工作任务 31423.13.2 设计思路 31523.13.3 实现(跟我做) 31623.14 第二阶段Express:用户登录 32323.14.1 工作任务 32323.14.2 设计思路 32323.14.3 实现(跟我做) 32423.15 第二阶段Express:显示聊天列表 32623.15.1 工作任务 32623.15.2 设计思路 32723.15.3 实现(跟我做) 32823.16 第二阶段Express:获取聊天信息 33423.16.1 工作任务 33423.16.2 设计思路 33523.16.3 实现(跟我做) 33623.17 第二阶段Express:保存聊天信息 34123.17.1 工作任务 34123.17.2 设计思路 34223.17.3 实现(跟我做) 34323.18 第二阶段Express:消息统计 34823.18.1 工作任务 34823.18.2 设计思路 34823.18.3 实现(跟我做) 34923.19 第三阶段Vue.js:创建Vue工程 35223.19.1 工作任务 35223.19.2 设计思路 35323.19.3 实现(跟我做) 35323.20 第三阶段Vue.js:管理员登录 35923.20.1 工作任务 35923.20.2 设计思路 36023.20.3 实现(跟我做) 36223.21 第三阶段Vue.js:用户列表 37023.21.1 工作任务 37023.21.2 设计思路 37123.21.3 实现(跟我做) 37323.22 第三阶段Vue.js:用户修改 38223.22.1 工作任务 38223.22.2 设计思路 38323.22.3 实现(跟我做) 38423.23 第三阶段Vue.js:用户登录 39223.23.1 工作任务 39223.23.2 设计思路 39423.23.3 实现(跟我做) 39423.24 第三阶段Vue.js:聊天列表 39823.24.1 工作任务 39823.24.2 设计思路 39823.24.3 实现(跟我做) 39923.25 第三阶段Vue.js:消息 40123.25.1 工作任务 40123.25.2 设计思路 40223.25.3 实现(跟我做) 40323.26 第四阶段移动端开发(jQuery Mobile):用户登录 40923.26.1 工作任务 40923.26.2 设计思路 40923.26.3 实现(跟我做) 41123.27 第四阶段移动端开发(jQuery Mobile):聊天列表 41523.27.1 工作任务 41523.27.2 设计思路 41623.27.3 实现(跟我做) 41723.28 第四阶段移动端开发(jQuery Mobile):消息 42123.28.1 工作任务 42123.28.2 设计思路 42223.28.3 实现(跟我做) 42323.29 第四阶段移动端开发(jQuery Mobile):消息统计 42823.29.1 工作任务 42823.29.2 设计思路 42923.29.3 实现(跟我做) 43023.30 第五阶段性能优化:图片资源优化 43323.30.1 工作任务 43323.30.2 设计思路 43323.30.3 实现(跟我做) 43423.31 第五阶段性能优化:前端资源加载优化 43623.31.1 工作任务 43623.31.2 设计思路 43723.31.3 实现(跟我做) 43723.32 第五阶段性能优化:项目打包 43823.32.1 工作任务 43823.32.2 设计思路 43923.32.3 实现(跟我做) 439
展开
为了帮助读者学习和掌握《Web前端开发职业技能等级标准》(高级)中涵盖的实践技能,工业和信息化部教育与考试中心1+X项目组组织企业工程技术人员编写了本书。本书按照标准涉及的核心技能要求精心设计了技术专题,这些技术专题全部按照企业项目开发思路进行分析和设计。除此之外,本书还设计了一个社交领域网站案例,以提高读者Web前端开发应用实践能力。在编写过程中,注重引导读者理解如何将Web前端开发中的知识单元与项目需求和技术对接,并采用迭代开发思路进行每一个功能的开发。 全书分为实验(技术专题)和综合实践(聊天室项目)两部分,每一部分都设定了实践目标,以任务为驱动,采用迭代开发思路进行开发,共23章。 第1章是实践概述,主要描述本书的实践目标、实践知识地图和实施安排。 第2章至第22章是实验(技术专题)部分,针对HBuilderX工具、ES6、Node.js、Express、AJAX、JSONP、RESTful API、Vue.js、性能优化、webpack、Canvas、SVG、Less、jQuery Mobile等核心知识单元设计了技术专题,每一个技术专题针对一次实验项目进行训练,内容包括实验目标、实验任务、设计思路和实验实施(跟我做),最大限度地覆盖了Web前端开发高级实践内容。 第23章是综合实践部分,设计了“Web聊天室”实践案例,系统训练Web前端开发核心知识,阐释了如何在真实的企业项目中应用Web前端开发核心知识,并通过“迭代开发”详细讲解了实践项目开发过程。整个项目根据技术选型和功能模块,分为五大阶段,分别为“第一阶段Node.js”、“第二阶段Express”、“第三阶段Vue.js”、“第四阶段移动端开发(jQuery Mobile)”和“第五阶段性能优化”,层层递进,可以系统训练Web前端开发核心知识。通过技术专题和案例综合训练,使读者能够达到高级Web前端工程师水平。 参与本书编写工作的人员有张晋华、马庆槐、王博宜、郑婕、吴奇飞、李文、黄俊丹、赵俊、姜宜池、杜慧情、成菲、江涛、彭险等。谭志彬、龚玉涵依据《Web前端开发职业技能等级标准》(高级)为本书做了整体策划和内容统筹。 由于编者的水平和时间有限,本书难免存在不足之处,敬请读者批评和指正。
展开