Web前端开发实训案例教程（高级）
| 作者 |
| 北京新奥时代科技有限责任公司 |
| 丛书名 |
| 出版社 |
| 电子工业出版社 |
| ISBN |
| 9787121378669 |
| 简要 |
| 简介 |
| 内容简介 本书是按照《Web前端开发职业技能等级标准》（高级）编写的配套实践教材，教材中所有应用技术专题和项目代码均在主流浏览器中运行通过。本书结合大学计算机相关专业的Web前端开发方向课程体系、企业Web前端开发岗位能力模型和《Web前端开发职业技能等级标准》，形成Web前端开发三位一体知识地图，以实践能力为导向，以企业真实应用为目标，遵循企业软件工程标准和技术，以任务为驱动，对HBuilderX工具、HTML5、CSS3、JavaScript、jQuery、MySQL、AJAX、RESTful API、Node.js、Express、Vue.js、jQuery Mobile、Less、Canvas、SVG、ES6、webpack、性能优化等Web前端开发中的重要知识单元，结合实际案例和应用环境进行了分析和设计，并对每一个重要的知识单元进行了详细介绍，力求使读者真正掌握这些知识，从而在实际场景中加以应用。全书分为两部分：*部分为实验，采用技术专题进行知识单元训练，可以对应课程练习，针对不同的知识单元设计了实验项目，重点训练每一个知识单元内容；第二部分为综合实践，可以对应课程设计，用“Web聊天室”项目贯穿Web前端开发核心知识，系统训练核心知识在企业真实项目中的应用。本书适合作为《Web前端开发职业技能等级标准》（高级）的实践教学参考用书，也适合作为对Web前端开发感兴趣的读者的指导用书。 |
| 目录 |
第1章 概述\t1 1.1 实践目标\t1 1.2 实践知识地图\t2 1.3 实施安排\t13 1.3.1 实验（技术专题）部分\t13 1.3.2 综合实践部分\t31 第2章 开发工具（HBuilderX工具）\t36 2.1 实验目标\t36 2.2 实验任务\t36 2.3 设计思路\t36 2.4 实验实施\t37 2.4.1 步骤一：下载并安装HBuilderX\t37 2.4.2 步骤二：HBuilderX 主界面\t38 2.4.3 步骤三：创建项目\t39 2.4.4 步骤四：编辑html文件\t39 2.4.5 步骤五：运行\t40 第3章 ES6（网页计算器）\t42 3.1 实验目标\t42 3.2 实验任务\t43 3.3 设计思路\t44 3.4 实验实施（跟我做）\t45 3.4.1 步骤一：创建项目和文件\t45 3.4.2 步骤二：制作HTML页面\t45 3.4.3 步骤三：制作CSS样式\t46 3.4.4 步骤四：编写网页计算器类\t47 3.4.5 步骤五：编写乘除 运算逻辑\t47 3.4.6 步骤六：编写加减运算逻辑\t48 3.4.7 步骤七：编写数据返回方法\t48 3.4.8 步骤八：页面交互逻辑\t48 3.4.9 步骤九：运行效果\t49 第4章 Node.js （第一个Node.js程序）\t52 4.1 实验目标\t52 4.2 实验任务\t53 4.3 设计思路\t53 4.4 实验实施\t54 4.4.1 步骤一：Node.js的下载与 安装\t54 4.4.2 步骤二：HBuilderX的下载与 安装\t57 4.4.3 步骤三：Node.js 结构\t57 4.4.4 步骤四：创建项目和文件\t58 4.4.5 步骤五：使用NPM包管理 工具\t58 4.4.6 步骤六：创建服务器\t58 4.4.7 步骤七：运行效果\t59 第5章 Node.js（Web便签）\t60 5.1 实验目标\t60 5.2 实验任务\t61 5.3 设计思路\t61 5.4 实验实施（跟我做）\t62 5.4.1 步骤一：创建项目和文件\t62 5.4.2 步骤二：完成页面显示\t63 5.4.3 步骤三：完成资源判断\t64 5.4.4 步骤四：实现前后端交互\t66 5.4.5 步骤五：完成文件写入\t67 5.4.6 步骤六：完成文件读取\t67 5.4.7 步骤七：获取便签列表\t68 5.4.8 步骤八：运行效果\t68 第6章 Node.js（文学网）\t70 6.1 实验目标\t70 6.2 实验任务\t70 6.3 设计思路\t72 6.4 实验实施（跟我做）\t73 6.4.1 步骤一：创建项目和文件\t73 6.4.2 步骤二：准备数据\t74 6.4.3 步骤三：实现文学网页面\t74 6.4.4 步骤四：实现请求处理\t78 6.4.5 步骤五：实现用户登录\t79 6.4.6 步骤六：实现退出登录功能\t81 6.4.7 步骤七：实现读者页面功能\t81 6.4.8 步骤八：实现作者发布文章 功能\t85 6.4.9 步骤九： 实现读者接收文章 内容\t86 6.4.10 步骤十：运行效果\t89 第7章 Node.js（简历网）\t91 7.1 实验目标\t91 7.2 实验任务\t92 7.3 设计思路\t93 7.4 实验实施（跟我做）\t95 7.4.1 步骤一：安装Express应用程序生成器\t95 7.4.2 步骤二：使用应用程序生成器 创建项目\t95 7.4.3 步骤三：Express结构\t95 7.4.4 步骤四：构建前端页面\t96 7.4.5 步骤五：安装和连接MySQL 数据库\t98 7.4.6 步骤六：开发中间件\t99 7.4.7 步骤七：实现路由跳转\t99 7.4.8 步骤八：运行效果\t101 第8章 JSONP（商品清单）\t103 8.1 实验目标\t103 8.2 实验任务\t103 8.3 设计思路\t104 8.4 实验实施（跟我做）\t105 8.4.1 步骤一：创建项目和文件\t105 8.4.2 步骤二：创建前端页面\t106 8.4.3 步骤三：创建HTTP 服务器\t107 8.4.4 步骤四：发送跨域请求\t107 8.4.5 步骤五：后台请求处理\t108 8.4.6 步骤六：数据写入页面\t108 8.4.7 步骤七：运行效果\t108 第9章 RESTful API（在线答题器）\t110 9.1 实验目标\t110 9.2 实验任务\t111 9.3 设计思路\t111 9.4 实验实施（跟我做）\t112 9.4.1 步骤一：创建项目和文件\t112 9.4.2 步骤二：设计完成前端页面\t113 9.4.3 步骤三：实现答题功能\t115 9.4.4 步骤四：前端功能实现\t116 9.4.5 步骤五：运行效果\t117 第10章 Vue.js（第一个Vue.js程序）\t118 10.1 实验目标\t118 10.2 实验任务\t119 10.3 设计思路\t120 10.4 实验实施（跟我做）\t120 10.4.1 步骤一：HBuilderX的下载和 安装\t120 10.4.2 步骤二：Node.js的下载和 安装\t121 10.4.3 步骤三：安装webpack\t121 10.4.4 步骤四：安装Vue CLI 脚手架\t121 10.4.5 步骤五：创建工程\t122 10.4.6 步骤六：启动项目\t123 第11章 Vue.js（文章管理）\t125 11.1 实验目标\t125 11.2 实验任务\t127 11.3 设计思路\t128 11.4 实验实施（跟我做）\t131 11.4.1 步骤一：创建项目和文件\t131 11.4.2 步骤二：配置路由规则\t132 11.4.3 步骤三：安装和引入 Axios\t133 11.4.4 步骤四：配置跨域请求 代理\t133 11.4.5 步骤五：准备文章列表 数据\t133 11.4.6 步骤六：编写文章管理 页面\t134 11.4.7 步骤七：编写文章添加 页面\t135 11.4.8 步骤八：准备移动端文章 列表数据\t137 11.4.9 步骤九：编写移动端文章 列表页面\t138 11.4.10 步骤十：Node.js接口\t139 11.4.11 步骤十一：请求后台接口\t141 11.4.12 步骤十二：运行效果\t142 第12章 Vue.js（网页聊天室）\t144 12.1 实验目标\t144 12.2 实验任务\t145 12.3 设计思路\t145 12.4 实验实施（跟我做）\t147 12.4.1 步骤一：创建项目和文件\t147 12.4.2 步骤二：配置路由规则\t148 12.4.3 步骤三：编写用户登录 页面\t149 12.4.4 步骤四：登录信息验证\t150 12.4.5 步骤五：准备聊天室数据\t150 12.4.6 步骤六：编写聊天室页面\t151 12.4.7 步骤七：聊天页面初始化 设置\t152 12.4.8 步骤八：编写对话框组件\t152 12.4.9 步骤九：父子组件的传值\t154 12.4.10 步骤十：运行效果\t155 第13章 Vue.js（美食网）\t156 13.1 实验目标\t156 13.2 实验任务\t157 13.3 设计思路\t158 13.4 实验实施（跟我做）\t160 13.4.1 步骤一：创建项目和文件\t160 13.4.2 步骤二：配置路由规则\t161 13.4.3 步骤三：Vuex的Store 配置\t161 13.4.4 步骤四：创建页头组件\t162 13.4.5 步骤五：创建页脚组件\t163 13.4.6 步骤六：注册页头和页脚 全局组件\t164 13.4.7 步骤七：准备菜品列表 数据\t164 13.4.8 步骤八：创建美食网首页\t164 13.4.9 步骤九：创建购物车页面\t167 第14章 HTML和CSS代码结构优化（小说网首页）\t171 14.1 实验目标\t171 14.2 实验任务\t172 14.3 设计思路\t172 14.4 实验实施（跟我做）\t174 14.4.1 步骤一：创建项目和文件\t174 14.4.2 步骤二：构建HTML页面\t174 14.4.3 步骤三：使用CSS样式美化 页面\t177 14.4.4 步骤四：使用jQuery实现动态透明效果\t180 第15章 图片资源优化（雪碧图）\t181 15.1 实验目标\t181 15.2 实验任务\t181 15.3 设计思路\t182 15.4 实验实施（跟我做）\t182 15.4.1 步骤一：创建项目和文件\t182 15.4.2 步骤二：制作HTML页面\t183 15.4.3 步骤三：制作雪碧图\t183 15.4.4 步骤四：实现缩小和压缩\t184 15.4.5 步骤五：制作CSS样式\t184 15.4.6 步骤六：运行效果\t185 第16章 前端资源加载优化 （在线相册）\t186 16.1 实验目标\t186 16.2 实验任务\t186 16.3 设计思路\t187 16.4 实验实施（跟我做）\t188 16.4.1 步骤一：创建项目和文件\t188 16.4.2 步骤二：设计完成前端页面，实现预加载\t189 16.4.3 步骤三：前端发送获取图片 请求\t189 16.4.4 步骤四：后台处理请求， 返回响应信息\t190 16.4.5 步骤五：运行效果\t190 第17章 webpack （打包项目—文章管理）\t191 17.1 实验目标\t191 17.2 实验任务\t192 17.3 设计思路\t192 17.4 实验实施（跟我做）\t192 17.4.1 步骤一：使用NPM下载并安装webpack和webpack-cli\t192 17.4.2 步骤二：webpack配置文件的 配置参数\t192 17.4.3 步骤三：打包文章管理 项目\t194 17.4.4 步骤四：部署到Express\t195 17.4.5 步骤五：运行效果\t195 第18章 CSS3 2D和3D （手机相册）\t197 18.1 实验目标\t197 18.2 实验任务\t197 18.3 设计思路\t199 18.4 实验实施（跟我做）\t199 18.4.1 步骤一：创建项目和文件\t199 18.4.2 步骤二：创建移动端的 HTML页面\t200 18.4.3 步骤三：使用flex弹性布局 美化页面\t200 18.4.4 步骤四：制作Y轴的旋转 效果\t201 18.4.5 步骤五：制作点击放大 效果\t201 18.4.6 步骤六：运行效果\t202 第19章 Canvas（手机账单）\t203 19.1 实验目标\t203 19.2 实验任务\t204 19.3 设计思路\t204 19.4 实验实施（跟我做）\t205 19.4.1 步骤一：创建项目和文件\t205 19.4.2 步骤二：制作HTML页面\t205 19.4.3 步骤三：制作数据\t205 19.4.4 步骤四：制作表格\t206 19.4.5 步骤五：制作坐标\t207 19.4.6 步骤六：填充数据\t207 19.4.7 步骤七：运行效果\t208 第20章 SVG（SVG绘制图标）\t209 20.1 实验目标\t209 20.2 实验任务\t210 20.3 设计思路\t210 20.4 实验实施（跟我做）\t211 20.4.1 步骤一：创建项目和文件\t211 20.4.2 步骤二：SVG图片文件的 结构\t211 20.4 |
有问题微信扫码联系