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

《Vue.js3前端开发基础及项目化应用教案单元11工程化项目实战——图片素材库网站.docx》由会员分享，可在线阅读，更多相关《Vue.js3前端开发基础及项目化应用教案单元11工程化项目实战——图片素材库网站.docx（14页珍藏版）》请在优知文库上搜索。

1、Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前开发基础及项化应用授课年级：授课学期：学年第一学期一教师找名：2023年09月09日课题名称单元11工程化项目实战一一图片素材库网站计划学时8学时内容分析实际应用中，开发一个完整的前端项目，会涉及到涉及项目需求分析、功能模块设计和技术选型等多个方面。本单元将介绍项目开发的完整流程，包括项目需求分析、功能模块划分、数据库表设计、交互协议、主要功能的实现，来讲解项目的设计、开发和部署。教学目标及基本要求1 .了解项目设计基本原则2 .能够利用Vue和ElementPlus完整构建前端项目3 .能够利用EXPreSS框架与前端VUe项

2、目进行交互教学重点能够利用Vue和ElementPlus完整构建前端项目教学难点教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时（功能模块划分、项目实现思路，项目工程化规范）一、介绍项目目标，明确学习目标1 .介绍项目背景和功能实现目标“图片素材库网站”是一个为用户提供与传统文化相关的图片素材的网站。其主要内容包括对各类图片的展示、下载和分享。该网站允许注册用户对图片素材进行点赞、收藏和下载操作，以及从本地上传图片分享给其他用户。2 .明确学习目标。 了解项目设计基本原则 了解项目设计思路 了解项目开发规范二、进行重点知识的讲解1.教师根据课件，介绍项目功能模块划分。/

3、图片集：图片展示:面向所有用户分类显示图片；图片点用:注册用户可以对自己喜欢的图片进行点赞操作；图片收藏：注册用户可以收藏自己喜欢的图片到收藏夹；图片下载：注册用户可以下载图片到本地的指定目录。/个人中心：收藏夹：注册用户可以查看或删除自己的收藏项；账户管传：注册用户可以上传本地图片到网站上，分享图片给其他用户；用户注册：用户可以通过填写用户名和密码等信息，成为注册用户。/关于：用于展示图片分类介绍等信息。2 .教师根据课件，讲解图片素材库网站的设计思路。（1）交互界面交互界面的构建需要秉持人性化的设计理念，只有符合用户的思维和工作模式，才能有效地呈现系统功能，提高用户体验（2）交互协议交互协

4、议的数据格式如下。（1）请求参数：采用JSON对象表示，对象属性即参数。（2）响应结果：采用JSON对象表示，对象包括code、message和data3个属性。（3）交互处理组件交互处理组件的设计应依据界面整体布局和内容展示的需求。本项目的页面布局包括头部、主体和页脚3个部分。（4）数据库表包括用户信息表、图片信息表，以及与图片操作相关的两个表、收藏夹信息表和用户访问图片信息表。（5）实现技术前端子项目采用Vue框架实现，后端子项目则采用Express框架实现。（6）项目运行项目运行时，需要首先启动后端子项目，再启动前端子项目。后端子项目可在命令行窗口中，使用NOde.js的IlOde命令来

5、启动；前端子项目则先用npmrunbuild命令打包好，放在指定目录下，再通过浏览器访问index.html来启动。3 .教师根据课件，讲解项目工程化规范。项目结构、组件定义、views目录下文件命名、props定义、路由命名、vue文件结构以及其它规范。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括项目界面设计原则、交互协议定义的方法，数据库表的设计方法，项目前后端部署和运行的方法，以及项目工程化规范。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进

6、行解决。第二课时（构建项目，路由配置、状态管理器配置、axios配置）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了项目界面设计原则、交互协议定义的方法，数据库表的设计方法，项目前后端部署和运行的方法，以及项目工程化规范。接下来，本节课将介绍图片素材库网站项目的搭建，包括路由配置、Vuex配置、axios配置等。3 .明确学习目标。 掌握VueCLI搭建Vue工程项目的方法 掌握路由配置的实现方法 掌握Vuex状态管理器的实现方法 掌握axios实例的创建和拦截器的定义二、进行重点知识的

7、讲解1 .教师根据课件,介绍VueCLI构建图片素材库项目，并使用实例进行演示。使用命令VUeCrealeCIierH创建Vue工程2 .教师根据课件，介绍图片素材库项目的路由配置，并使用代码进行演示。/导入VucRouter的CreateRouter和CreateWebHistory函数对象/创建路由管理器实例/创建导航守卫/导出模块3 .教师根据课件,介绍图片素材库项目的状态管理器,并使用代码进行演示。（1）在项目的store/index.js中创建store实例/导入VUCX的CreateStore函数对象/创建store实例（2）定义子模块定义user子模块用于保存用户的收藏数量；Pr

8、odUet子模块用于缓存图片列表；favorites子模块用于获取和保存收藏夹信息。4 .教师根据课件，介绍图片素材库项目的axios,并使用代码进行演示。（1）导入axios插件和router模块（2）创建axios实例（3）定义拦截器（4）导出模块三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解,VueCLI构建图片素材库项目的流程，图片素材库项目的路由设计及配置，状态管理器的模块设计和实现，axios实例的创建和拦截器的定义。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生

9、出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时（公共组件和网站首页的实现）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了VUeCLl构建图片素材库项目的流程，图片素材库项目的路由配置，状态管理器配置，axios配置。接下来，本节课将介绍图片素材库网站项目公共组件、网站首页的实现。3 .明确学习目标。掌握自定义图标组件的编写方法和应用掌握自定义字体组件的编写方法和应用掌握门户网页布局的实现二、进行重点知识的讲解1 .教师根据课件，介绍图片素材库项目公共组件，并使用实例进行

10、演示。（1）自定义字体SysText（2）自定义图标SysIcon2 .教师根据课件，介绍图片素材库项目首页，并使用代码进行演示。（1）构建整体布局/导入所需模块,创建一级菜单/用户图标处理/收藏夹图标处理/设置图标和文字样式（2）轮播图三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解，图片素材库网站项目公共组件自定义字体和自定义图标的实现过程，网站首页中菜单、图标、文字样式和轮播图的实现。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台

11、下发课后作业。第四课时（用户登录和图片展示与操作的实现）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了图片素材库网站项目公共组件自定义字体和自定义图标的实现过程，网站首页中菜单、图标、文字样式和轮播图的实现。接下来，本节课将介绍图片素材库网站项目用户登录、图片展示与操作功能的实现。3 .明确学习目标。 掌握ElementPlus常用组件的应用 掌握模态框的实现 掌握异步请求同步化处理的实现二、进行重点知识的讲解1 .教师根据课件,介绍图片素材库项目用户登录组件,并使用实例进行演示。（I）

12、用户登录窗体,使用EIementPIUS库的DiaIOg组件实现登录布局/利用组件间通信控制登录窗体的显示和隐藏（2）用户登录处理利用axios实现登录验证2 .教师根据课件，介绍图片素材库项目图片展示与操作功能，并使用代码进行演示。（1）按类别呈现图片，每类图片均采用v-for指令展示图片以及图片的上传者、收藏数、点赞数和下载数等相关信息（2）利用axios实现对图片的收藏、点赞和下载处理，并利用async/await实现异步请求处理的同步化三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的知识点，包括图片素材库网站项目用户登录功能

13、的实现，包括Dialog组件实现登录布局、利用axios实现登录验证；图片展示与操作功能的实现,包括v-for实现图片列表、利用axios实现对图片的收藏、点赞和下载处理。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第五课时（图片分享的实现）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了图片素材库网站项目用户登录、图片展示与操作功能的实现。接下来，本节课将介绍图片素材库网站

14、项目图片分享功能的实现。3 .明确学习目标。 掌握ElementPlus常用组件的应用 掌握el-form和el-upload实现图片上传表单 掌握异步请求同步化处理的实现二、进行重点知识的讲解 .教师根据课件，介绍图片素材库项目图片分享功能的实现，并使用实例进行演示。（1）图片上传表单窗体/使用EIementPIUS库的el-form组件实现表单布局/使用EIernentPIUS库的el-upload组件实现上传布局（2）图片上传请求处理/定义表单数据/定义表单字段验证规则/文件上传前的合法性验证和文件对象获取/利用axios实现图片表单上传三、归纳总结，布置课后作业1 .回顾上课前的学习目

15、标，对本节课知识点进行总结。教师带领学生总结本节课需要了解，图片素材库网站项目图片分享功能的实现，包括构建图片上传窗体、图片上传处理（定义数据、字段验证和axios上传图片）。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第六课时（Express框架应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了图片素材库网站项目分享功能的实现，包括构建图片上传窗体、图片上传处理（定义数据、字段验证和axios上传图片）。接下来，本节课将介绍基于Nodejs平台的后端框架Express的概述，以及使用方法。3 .明确学习目标。 了解Express框架 熟悉Express框架创建项目的流程 能够实现