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章 网站架构设计：智能公交 243 24.1 实验目标 243 24.2 实验任务 243 24.3 设计思路 244 24.4 实验实施（跟我做） 245 24.4.1 步骤一：创建项目和文件 245 24.4.2 步骤二：设计并完成前端 页面 245 24.4.3 步骤三：创建服务器 246 24.4.4 步骤四：实现前端功能 253 24.4.5 步骤五：运行效果 254 第25章 网站架构设计：职位发布系统 256 25.1 实验目标 256 25.2 实验任务 256 25.3 设计思路 260 25.4 实验实施（跟我做） 261 25.4.1 步骤一：创建项目和文件 261 25.4.2 步骤二：配置路由规则 263 25.4.3 步骤三：安装和引入Axios 264 25.4.4 步骤四：安装Element UI 264 25.4.5 步骤五：编写职位发布系统首页 组件 265 25.4.6 步骤六：编写职位列表组件 266 25.4.7 步骤七：编写职位发布组件 270 25.4.8 步骤八：创建服务器 273 25.4.9 步骤九：实现数据库操作 274 25.4.10 步骤十：实现后台路由 276 25.4.11 步骤十一：请求后台接口 277 第26章 网站性能优化：游戏网站 282 26.1 实验目标 282 26.2 实验任务 283 26.3 设计思路 284 26.4 实验实施（跟我做） 285 26.4.1 步骤一：创建项目和文件 285 26.4.2 步骤二：构建页面主体 285 26.4.3 步骤三：创建页面头部导航 287 26.4.4 步骤四：创建页面主体部分 289 26.4.5 步骤五：创建页面底部版权 部分 297 26.4.6 步骤六：使用webpack打包静态 资源 298 第27章 网站性能优化：教学平台 302 27.1 实验目标 302 27.2 实验任务 303 27.3 设计思路 304 27.4 实验实施（跟我做） 305 27.4.1 步骤一：创建项目和文件 305 27.4.2 步骤二：编辑app.js文件，搭建Web服务器 306 27.4.3 步骤三：构建前端页面 307 27.4.4 步骤四：前端发送获取图片 请求 310 27.4.5 步骤五：后台处理请求，返回响应信息 311 27.4.6 步骤六：运行效果 312 第28章 网站性能优化：图片懒加载 314 28.1 实验目标 314 28.2 实验任务 314 28.3 设计思路 315 28.4 实验实施（跟我做） 316 28.4.1 步骤一：创建项目和文件 316 28.4.2 步骤二：搭建页面结构 316 28.4.3 步骤三：编写CSS样式文件 317 28.4.4 步骤四：编写JS代码 317