JavaScript+Vue.jsWeb开发项目教程（微课版） 教案 项目5智慧公寓管理系统的设计与实现

《JavaScript+Vue.js项目案例教程》课程教案课程名称：JavaScript+Vue.js项目案例教程授课年级：授课学期：教师姓名：年月日课程名称项目5智慧公寓管理系统的设计与实现计划学时8内容分析本项目是一个基于Vue.js框架和Node.js框架实现的单页面应用，即智慧公寓管理系统。该系统由Express框架搭建的服务器模块、Vue.js框架实现的前台页面模块与后台页面模块构成。其中，可视的前台页面与后台页面等模块利用Vue的组件化开发来实现，页面之间的跳转利用VueRouter的路由操作实现，状态管理则利用Pinia来实现。而页面中渲染的数据则需要使用Express框架搭建服务器设计API接口，将需要渲染的数据通过API接口返回并渲染在页面上。教学目标与教学要求【项目目标】使用Express框架搭建服务器设计API接口，为前端页面提供数据支持使用Vue.js框架实现前台页面模块与后台页面模块设计使用VueRouter实现页面切换的路由操作使用Pinia实现状态管理【育人目标】培养学生强烈的社会责任感，勇于担当，积极参与社会进步与发展培养具有高尚品德、深厚人文素养、扎实专业知识与卓越创新能力的新时代青年教学重点搭建服务器，负责处理来自前台页面和后台页面的各类请求使用Vite搭建前台页面与后台页面基于VueRouter实现页面高效切换实现后台页面的多个路由页面教学难点根据用户身份的不同，显示不同的页面功能实现管理员前台系统与后台系统自行切换封装公共组件，实现组件高度复用教学方式课堂讲解配合PPT演示教学过程第一课时（项目组织架构分析与项目环境搭建）项目组织架构本项目由服务器模块、前台页面模块和后台页面模块构成，其项目组织架构如图所示。在智慧公寓管理系统的组织架构中，服务器模块负责处理前端发送的请求，返回相应的数据。本项目使用Express框架搭建服务器，在user路由模块与room路由模块中设计API接口来处理前端发送的HTTP请求。Express的路由实例将解析前端请求的URL路径，并根据路径调用对应的路由处理函数。前台页面模块是用户直接交互的界面，包括登录与注册页面、前台首页和房间详情页面。其中，前台页面由头部信息栏、导航、轮播图、房间列表与页脚等功能构成；房间详情页面由房间详细信息展示与房间预订等功能构成。后台页面模块是管理员用于管理公寓信息的界面，包括后台首页、公寓房间管理（由房间列表页、房间状态页与房间设施页组成）、公寓入住管理（由用户入住页与用户退房页组成）与入住统计页面组成。项目环境搭建（1）安装Node.js由于Node.js对于本项目的后端（服务器）环境与前端环境而言是必需的，因此需要先安装Node.js。推荐在Node.js官网下载对应的安装包，按照安装步骤有序安装Node.js。由于Node.js中已经继承了NPM，所以无须再单独安装NPM。（2）安装express-generator本项目服务器模块需要使用Expresss框架实现，因此需要通过NPM命令安装express-generator应用程序生成器，进而使用express命令来创建一个Express项目，安装命令如下所示。npminstall-gexpress-generatorexpress项目名称（3）安装Vue.js本项目的前端页面基于Vue.js框架实现，因此需要使用NPM命令安装Vue.js，安装命令如下所示。npmcreatevue@latest（3）安装vue-devtools调试工具为提高调试项目的效率，推荐安装vue-devtools调试工具。（4）基于Vite创建并配置Vue项目使用create-vue工具创建一个基于Vite的项目，并在创建过程中为项目配置所需的VueRouter与Pinia选项，安装命令如下所示。npmcreatevue@latest（5）在Vue项目中安装第三方库在Vite创建的Vue项目根目录下，使用NPM命令安装ElementPlus、Axios、Swiper、Echarts等第三方库。这些库提供了丰富的API和功能，可以大大简化开发过程，并提升应用的质量和用户体验。第二、三课时（上机练习：任务5-1实现服务端模块）提出需求，导入学习任务智慧公寓管理系统的服务端模块负责处理来自前台页面和后台页面的各类请求。如用户登录验证、用户注册验证等与用户相关的请求；查询全部房间信息、查询指定房间详细信息、删除指定房间、编辑指定房间信息、新增一条房间信息等房间列表相关的请求；查询全部房间（订单）状态、查询预订状态的订单、查询入住状态的订单、查询已完成状态的订单、预订房间、删除订单、编辑订单等与房间或订单状态相关的请求；查询全部房间类型、新增房间类型、编辑房间类型、删除房间类型等与房间类型（设施）相关的请求；办理入住、办理退房等与用户入住相关的请求。任务实现步骤1.创建server项目使用“expressserver”命令创建一个名为server的Express项目。2．创建JSON数据源在server项目的data目录下新建user.json文件用于存储用户信息，新建room.json文件用于存储与房间相关的信息，该文件在本任务中作为服务器所请求的本地数据源存在。data/user.json文件用于保存用户注册的信息，并作为用户登录校验的数据源存在。data/room.json文件用于保存全部房间列表信息、全部房间状态信息与全部房间类型信息。3．创建路由模块在智慧公寓管理系统的服务端模块中，与用户相关的请求存储在user.js路由模块中，其他与房间相关的请求则存储在room.js路由模块中。在server项目的routes目录下新建一个user.js文件，用于实现用户登录验证API与用户注册API。在server项目的routes目录下新建一个room.js文件，用于实现与房间相关的API。4．挂载路由模块在server项目的app.js文件中引入routes目录下的路由模块，使用app.use()方法挂载user.js路由模块与room.js路由模块，并分别为其指定路由的匹配路径。知识点3-Vue的发展历程5.启动项目在server项目根目录下执行“npmstart”命令即可启动server项目，从而为智慧公寓管理系统的前台页面模块与后台页面模块提供数据支持。第四~六课时（上机练习：任务5-2实现前台页面模块）回顾内容回顾上节内容，引出本节内容回顾上节的内容，并提问学生上节练习中的问题，学生回答完后，由上节内容引出本节要讲的前台页面模块搭建等内容。任务概述在智慧公寓管理系统的登录与注册页面中，当用户输入正确的登录信息即可进入前台首页。当用户单击前台首页的房间列表项时可携带该房间列表项id跳转至房间详情页面。任务效果登录与注册页面效果展示：前台首页的房间列表模块效果展示：房间详情页面效果展示：任务实现步骤1.使用Vite创建项目使用create-vue工具创建一个web的Vue项目，并在创建过程中为项目配置所需的VueRouter与Pinia选项，项目创建完成后即可引入所需的第三方库。2．配置程序入口文件main.js是程序的入口文件，主要用于加载各种公共组件和初始化Vue实例。本项目中的Vue、引用的ElementPlus组件库、VueRouter实例与Pinia就是在该文件中定义的。3．配置组件入口文件App.vue是项目的根组件，所有的页面都是在App.vue下面切换的，所有的页面组件都是App.vue的子组件。在App.vue组件内只需使用<router-view>组件作为占位符，就可以实现各个页面的引入。App.vue文件代码如下所示。<template><RouterView/></template>4．创建路由实例对象在routes/index.js文件内创建路由实例对象，该文件定义了整个应用程序的路由规则和导航逻辑，确保用户能够顺畅地在不同的视图组件之间切换。5．创建Store在stores/index.js文件内定义Store，在state内定义isLogin与username，分别用于保存用户的登录状态与登录的用户名。当用户登录或退出系统时调用actions内定义的方法全局保存登录状态与登录的用户名，从而使登录状态与登录的用户名能够被任意组件调用。6．实现登录与注册页面在src目录下的common文件夹内新建Login.vue组件，用于实现登录与注册页面。在<template>模板中，使用ElementPlus组件库的表单、输入框、按钮等组件来构建界面。在<script>脚本中，通过Pinia管理登录状态和登录的用户名，使得组件之间能够共享状态，便于维护。然后定义登录表单的数据模型以及事件处理函数,，还定义了register函数用于处理注册逻辑，handleReset函数用于重置表单字段，toHome函数用于跳转到前台首页。7．实现前台首页在src/views/user文件夹下的UserPage.vue组件内实现智慧公寓管理系统的前台首页，该页面由<Header>头部信息栏、<Nav>导航栏、<RouterView>核心内容区与<Footer>页脚构成。8．实现房间详情页面当用户单击房间列表项的“立即预订”按钮时，RoomItem组件调用toDetail方法跳转至房间详情页面。此时前台路由路径变为“/detail:id”，UserPage.vue组件的<RouterView/>组件根据路由路径的匹配规则自动替换为Detail.vue组件。第七~九课时（上机练习：任务5-3实现后台页面模块）回顾内容回顾上节内容，引出本节内容回顾上节的内容，并提问学生上节练习中的问题，学生回答完后，由上节内容引出本节要讲的后台页面模块搭建等内容。任务概述在智慧公寓管理系统的后台页面模块中，公寓房间管理菜单下包含房间列表页、房间状态页与房间设施页等二级路由；公寓入住管理菜单下包含用户入住页与用户退房页等二级路由。任务效果后台首页效果展示：房间列表页面效果展示：房间状态页面效果展示：房间设施页面效果展示：用户入住页面效果展示：用户退房页面效果展示：入住统计页面效果展示：任务实现步骤1.封装公共组件在后台页面中，有2个公共组件，即<Header>组件与<TableList>组件。其中<Header>组件是前台页面与后台页面的公共头部信息栏组件。当管理员或用户登录时，<Header>组件会判断登录账号是否为“admin”。登录者为管理员时，赋予管理员切换至后台系统的能力，并在头部信息栏中显示管理员信息。登录者为用户时，仅在头部信息栏中显示当前登录的用户名。<TableList>组件是用于动态渲染Table表格的组件，<TableList>组件可根据传入数据的不同，动态渲染出各个房间列表页、房间状态页、房间设施页、用户入住页与用户退房页的Table表格。2．搭建后台页面框架完成公共组件开发后，需要在src/views/user文件夹下的HomePage.vue组件内搭建智慧公寓管理系统的后台页面框架，后台页面由头部信息栏、左侧菜单栏与右侧的路由页面组成。3．实现后台首页当管理员登录并进入后台页面时，路由规则将路由路径重定向为“/admin/home”，则<RouterView>组件默认渲染components/admin/Home.vue组件内容，设置后台首页为默认页面。4．实现房间列表页当管理员单击后台页面中的“房间列表”菜单项时，路由路径变为“/admin/list”，则<RouterView>组件默认渲染components/admin/RoomList.vue组件内容。在房间列表页面中，管理员不仅可以新增一条房间列表项，还可以编辑或删除房间列表项信息。5．实现房间状态页当管理员单击后台页面中的“房间状态”菜单项时，路由路径变为“/admin/status”，则<RouterView>组件默认渲染components/admin/RoomStatus.vue组件，实现切换至房间状态页面。房间状态页主要用于渲染用户预订的房间订单，订单可分为3种状态，即“预订”、“入住”和“已完成”。在房间状态页面中，管理员不仅可以新增一条房间订单，还可以编辑或删除订单信息。6．实现房间设施页当管理员单击后台页面中的“房间设施”菜单项时，路由路径变为“/admin/facility”，则<RouterView>组件默认渲染components/admin/RoomFacility.vue组件内容。房间设施页面主要用于对房间进行分类，不同类型的房间具有不同的房间设施。7．实现用户入住页与用户退房页当管理员单击后台页面中的“用户入住”或“用户退房”菜单项时，路由路径变为“/admin/in”或“/admin/out”，则<RouterView>组件默认渲染components/admin/UserIn.vue组件内容或components/admin/UserOut.vue组件内容。用户入住页面主要用于将处于“预订”状态的房间订单改为“入住状态”，