Vue.js3前端开发基础及项目化应用教案单元11工程化项目实战——图片素材库网站.docx

Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前开发基础及项©化应用授课年级：授课学期：学年第一学期一教师找名：2023年09月09日课题名称单元11工程化项目实战一一图片素材库网站计划学时8学时内容分析实际应用中，开发一个完整的前端项目，会涉及到涉及项目需求分析、功能模块设计和技术选型等多个方面。本单元将介绍项目开发的完整流程，包括项目需求分析、功能模块划分、数据库表设计、交互协议、主要功能的实现，来讲解项目的设计、开发和部署。教学目标及基本要求1 .了解项目设计基本原则2 .能够利用Vue和ElementPlus完整构建前端项目3 .能够利用EXPreSS框架与前端VUe项目进行交互教学重点能够利用Vue和ElementPlus完整构建前端项目教学难点教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时（功能模块划分、项目实现思路，项目工程化规范）一、介绍项目目标，明确学习目标1 .介绍项目背景和功能实现目标“图片素材库网站”是一个为用户提供与传统文化相关的图片素材的网站。其主要内容包括对各类图片的展示、下载和分享。该网站允许注册用户对图片素材进行点赞、收藏和下载操作，以及从本地上传图片分享给其他用户。2 .明确学习目标。> 了解项目设计基本原则> 了解项目设计思路> 了解项目开发规范二、进行重点知识的讲解1.教师根据课件，介绍项目功能模块划分。/图片集：图片展示:面向所有用户分类显示图片；图片点用:注册用户可以对自己喜欢的图片进行点赞操作；图片收藏：注册用户可以收藏自己喜欢的图片到收藏夹；图片下载：注册用户可以下载图片到本地的指定目录。/个人中心：收藏夹：注册用户可以查看或删除自己的收藏项；账户管传：注册用户可以上传本地图片到网站上，分享图片给其他用户；用户注册：用户可以通过填写用户名和密码等信息，成为注册用户。/关于：用于展示图片分类介绍等信息。2 .教师根据课件，讲解图片素材库网站的设计思路。（1）交互界面交互界面的构建需要秉持人性化的设计理念，只有符合用户的思维和工作模式，才能有效地呈现系统功能，提高用户体验（2）交互协议交互协议的数据格式如下。（1）请求参数：采用JSON对象表示，对象属性即参数。（2）响应结果：采用JSON对象表示，对象包括code、message和data3个属性。（3）交互处理组件交互处理组件的设计应依据界面整体布局和内容展示的需求。本项目的页面布局包括头部、主体和页脚3个部分。（4）数据库表包括用户信息表、图片信息表，以及与图片操作相关的两个表、收藏夹信息表和用户访问图片信息表。（5）实现技术前端子项目采用Vue框架实现，后端子项目则采用Express框架实现。（6）项目运行项目运行时，需要首先启动后端子项目，再启动前端子项目。后端子项目可在命令行窗口中，使用NOde.js的IlOde命令来启动；前端子项目则先用npmrunbuild命令打包好，放在指定目录下，再通过浏览器访问index.html来启动。3 .教师根据课件，讲解项目工程化规范。项目结构、组件定义、views目录下文件命名、props定义、路由命名、vue文件结构以及其它规范。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括项目界面设计原则、交互协议定义的方法，数据库表的设计方法，项目前后端部署和运行的方法，以及项目工程化规范。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。第二课时（构建项目，路由配置、状态管理器配置、axios配置）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了项目界面设计原则、交互协议定义的方法，数据库表的设计方法，项目前后端部署和运行的方法，以及项目工程化规范。接下来，本节课将介绍图片素材库网站项目的搭建，包括路由配置、Vuex配置、axios配置等。3 .明确学习目标。> 掌握VueCLI搭建Vue工程项目的方法> 掌握路由配置的实现方法> 掌握Vuex状态管理器的实现方法> 掌握axios实例的创建和拦截器的定义二、进行重点知识的讲解1 .教师根据课件,介绍VueCLI构建图片素材库项目，并使用实例进行演示。使用命令VUeCrealeCIierH创建Vue工程2 .教师根据课件，介绍图片素材库项目的路由配置，并使用代码进行演示。/导入VucRouter的CreateRouter和CreateWebHistory函数对象/创建路由管理器实例/创建导航守卫/导出模块3 .教师根据课件,介绍图片素材库项目的状态管理器,并使用代码进行演示。（1）在项目的store/index.js中创建store实例/导入VUCX的CreateStore函数对象/创建store实例（2）定义子模块定义user子模块用于保存用户的收藏数量；ProdUet子模块用于缓存图片列表；favorites子模块用于获取和保存收藏夹信息。4 .教师根据课件，介绍图片素材库项目的axios,并使用代码进行演示。（1）导入axios插件和router模块（2）创建axios实例（3）定义拦截器（4）导出模块三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解,VueCLI构建图片素材库项目的流程，图片素材库项目的路由设计及配置，状态管理器的模块设计和实现，axios实例的创建和拦截器的定义。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时（公共组件和网站首页的实现）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了VUeCLl构建图片素材库项目的流程，图片素材库项目的路由配置，状态管理器配置，axios配置。接下来，本节课将介绍图片素材库网站项目公共组件、网站首页的实现。3 .明确学习目标。掌握自定义图标组件的编写方法和应用掌握自定义字体组件的编写方法和应用掌握门户网页布局的实现二、进行重点知识的讲解1 .教师根据课件，介绍图片素材库项目公共组件，并使用实例进行演示。（1）自定义字体SysText（2）自定义图标SysIcon2 .教师根据课件，介绍图片素材库项目首页，并使用代码进行演示。（1）构建整体布局/导入所需模块,创建一级菜单/用户图标处理/收藏夹图标处理/设置图标和文字样式（2）轮播图三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解，图片素材库网站项目公共组件自定义字体和自定义图标的实现过程，网站首页中菜单、图标、文字样式和轮播图的实现。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第四课时（用户登录和图片展示与操作的实现）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了图片素材库网站项目公共组件自定义字体和自定义图标的实现过程，网站首页中菜单、图标、文字样式和轮播图的实现。接下来，本节课将介绍图片素材库网站项目用户登录、图片展示与操作功能的实现。3 .明确学习目标。> 掌握ElementPlus常用组件的应用> 掌握模态框的实现> 掌握异步请求同步化处理的实现二、进行重点知识的讲解1 .教师根据课件,介绍图片素材库项目用户登录组件,并使用实例进行演示。（I）用户登录窗体,使用EIementPIUS库的DiaIOg组件实现登录布局/利用组件间通信控制登录窗体的显示和隐藏（2）用户登录处理利用axios实现登录验证2 .教师根据课件，介绍图片素材库项目图片展示与操作功能，并使用代码进行演示。（1）按类别呈现图片，每类图片均采用v-for指令展示图片以及图片的上传者、收藏数、点赞数和下载数等相关信息（2）利用axios实现对图片的收藏、点赞和下载处理，并利用async/await实现异步请求处理的同步化三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的知识点，包括图片素材库网站项目用户登录功能的实现，包括Dialog组件实现登录布局、利用axios实现登录验证；图片展示与操作功能的实现,包括v-for实现图片列表、利用axios实现对图片的收藏、点赞和下载处理。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第五课时（图片分享的实现）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了图片素材库网站项目用户登录、图片展示与操作功能的实现。接下来，本节课将介绍图片素材库网站项目图片分享功能的实现。3 .明确学习目标。> 掌握ElementPlus常用组件的应用> 掌握el-form和el-upload实现图片上传表单> 掌握异步请求同步化处理的实现二、进行重点知识的讲解> .教师根据课件，介绍图片素材库项目图片分享功能的实现，并使用实例进行演示。（1）图片上传表单窗体/使用EIementPIUS库的el-form组件实现表单布局/使用EIernentPIUS库的el-upload组件实现上传布局（2）图片上传请求处理/定义表单数据/定义表单字段验证规则/文件上传前的合法性验证和文件对象获取/利用axios实现图片表单上传三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解，图片素材库网站项目图片分享功能的实现，包括构建图片上传窗体、图片上传处理（定义数据、字段验证和axios上传图片）。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第六课时（Express框架应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了图片素材库网站项目分享功能的实现，包括构建图片上传窗体、图片上传处理（定义数据、字段验证和axios上传图片）。接下来，本节课将介绍基于Nodejs平台的后端框架Express的概述，以及使用方法。3 .明确学习目标。> 了解Express框架> 熟悉Express框架创建项目的流程> 能够实现HTTP请求和响应处理> 能够编写简单的Express框架应用程序二、进行重点知识的讲解1.教师根据课件，介绍EXPreSS框架概述，并使用代码进行演示。（1）Express框架特性,提供了方便简洁的路由定义方式。/对获取HTTP请求参数进行了简化处理。/对模版引擎支持程度高，使得渲染动态HTML页面更为便捷。,提供了中间件机制来有效控制HTTP请求。,拥有大量第三方插件并以此对功能进行/扩展。（2）利用Express框架创建项目的流程/创建目录workspace,将该目录作为工作目录。/打开VSCode工具，在workspace目录下，安装Express框架和Express应用程序生成器，安装命令如下：cnpminstallexpress-gcnpminstallexpress-generator-g,创建个项目名称为myapp的Express应用，创建命令如下：expressview=pugmyapp/进入myapp目录，安装相关依赖，安装命令如下：cnpminstall/启动应用，启动命令如下：setDEBUG=myapp:*&npmstart(3) EXPreSS应用程序的结构Ibin存放启动配置文件Inode-modules存放所有的项目依赖库IPUbliC/存放静态资源文件，包括图片、CSSx图JavaScript文件Iroutes/存放后端路由文件，处理客户端请求IVieWS俯放页面文件Iapp.js/应用核心配置文件，用于注册路由和启动服务器监听1PaCkage.json/存放项目依赖配置及开发者信息(4) HTTP请求和响应处理Express框架是通过Express实例的use函数或Express简化实例(Router对象)，对路由的路径与中间件进行绑定的。(5) Request和Response对象Request对象属性，包括req.body：获得请求主体；req.叩p：在中间件中访问Express实例；req.query：获取URL中的查询参数；Response对象属性，包括res.json():传送JSON响应；res.send():传送HTTP响应；©.status。：设置HTTP状态码。2.教师根据课件，介绍EXPreSS框架的简单应用，并使用代码进行演示。(1)服务器端程序(2)客户端请求三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的Express框架特性、Express项目的创建流程、Express项目结构、HTTP请求处理和RequestZResponse对象,掌握Express框架编写服务器端程序的方法，并能够对其发出请求，实现HTTP请求的处理，得到响应结果。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第七课时（后端子项目搭建，用户登录验证功能）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了NOdeJS平台的后端框架EXPreSS的概述，以及使用方法。接下来，本节课将基于图片素材库网站项目，介绍Express框架搭建后端子项目、用户登录合法性验证处理的具体实现。3 .明确学习目标。> 掌握Express框架搭建后端项目的流程> 能够利用Express框架实现后端功能二、进行重点知识的讲解1.教师根据课件，介绍图片素材库项目后端子项目的搭建，并使用代码进行演示。（1）安装Express框架和Express应用程序生成器（2）进入icon-bs-master目录，创建后端子项目node-server（3）安装相关依赖包/body-parser：用于解析POST请求。/Jsonwcbtoken：轻量级认证规范，用于生成令牌tokeno/express-jwt：用于对令牌token进行解析。/mysql：用于访问MySQL数据库。/cors：用于实现跨域操作。2 .教师根据课件，介绍后端子项目结构，并使用代码进行演示。（1）在dbpool目录下，新建pool.js,用于创建数据库连接池；新建sqlMap.js,用于创建SQL查询语句对象。（2）在api目录下，新建路由文件USerAPi.js,用于处理用户请求。3 3）app.js负责注册路由、处理权限认证，以及启动监听服务器端。2.教师根据课件，介绍用户合法性验证的实现，并使用代码进行演示。（1）访问数据库处理在SqIM叩js中创建数据库查询对象；在pool.js中利用mysql依赖包创建连接池对象、封装查询处理为函数（2）用户登录验证请求处理利用router提供的函数实现对于用户登录信息的验证，一旦用户信息验证成功，将利用Jsonwebtoken认证规范生成token,用于后续访问的权限认证处理。三、归纳总结，布置课后作业1.回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的EXPreSS框架搭建图片素材库项的干项目,能够理解并掌握Express中实现用户道录介法性验证处理的具体实现。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第八课时(项目入口文件，前后端的整合)一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了EXPreSS框架搭建后端子项目、用户登录合法性验证处理的具体文现。接下来，本节课将介绍图片素材库项目后端子项目的项目入口文件中各部分的作用和实现，前后端子项目的整合流程。3 .明确学习目标。> 了解EXPreSS框架项目入口文件的作用能够编写EXPreSS框架项目入口文件> 掌握Vue前端和Express后端的整合方法二、进行重点知识的讲解1 .教师根据课件，介绍EXPreSS框架项目入口文件中各部分作用，并使用代码进行演示。(1)对Router对象进行注册和启动监听服务器端口(2)跨域设置(3)访问权限认证2 .教师根据课件，介绍在VUe前端和EXPreSS后端整合的流程，并使用代码进行演示。(1)Express后端利用VSCodeIDE,启动EXPreSS项目，在指定端口监听客户端请求。也可以使用PM2进程管理器，将后端子项目运行于后台。(2)Vue前端/利用VueCLI工具对于项目进行打包。/在nginx服务器上部署。/启动VUe前端项目，通过指定端口访问后端子项目。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的后端子项目的项目入口文件中各部分的作用和实现，掌握项目入口文件的编写方法，以及前后端子项目的部署和整合流程。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。.教学后记