项目5(任务2)电子课件.pptxVIP

项目5智慧公寓管理系统的设计与实现

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势项目组织架构本项目由服务器模块、前台页面模块和后台页面模块构成。

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势项目环境（1）安装Node.js（2）安装express-generator（3）安装Vue.js（4）安装vue-devtools调试工具（5）基于Vite创建并配置Vue项目（6）在Vue项目中安装第三方库

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势项目实现本项目旨在构建一个基于Vue.js和Node.js的智慧公寓管理系统，根据系统的主要功能可将项目实现过程拆分为实现服务端模块、实现前台页面模块和实现后台页面模块3个子任务。接下来，我们将逐一实现上述任务，进而最终实现智慧公寓管理系统。任务5-1实现服务端模块任务5-2实现前台页面模块任务5-3实现后台页面模块

任务5-1实现服务端模块1

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势任务概述

智慧公寓管理系统的服务端模块负责处理来自前台页面和后台页面的各类请求。如用户登录验证、用户注册验证等与用户相关的请求；查询全部房间信息、查询指定房间详细信息、删除指定房间、编辑指定房间信息、新增一条房间信息等房间列表相关的请求；查询全部房间（订单）状态、查询预订状态的订单、查询入住状态的订单、查询已完成状态的订单、预订房间、删除订单、编辑订单等与房间或订单状态相关的请求；查询全部房间类型、新增房间类型、编辑房间类型、删除房间类型等与房间类型（设施）相关的请求；办理入住、办理退房等与用户入住相关的请求。

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势任务实施

在ch05文件夹下使用Express应用程序生成器创建一个名为server的Express项目。1．创建server项目首先，使用“expressserver”命令创建一个名为server的Express项目。2．创建json数据源在server项目的data目录下新建user.json文件用于存储用户信息，新建room.json文件用于存储与房间相关的信息，该文件在本任务中作为服务器所请求的本地数据源存在。data/user.json文件用于保存用户注册的信息，并作为用户登录校验的数据源存在。

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势任务实施

3．创建路由模块在智慧公寓管理系统的服务端模块中，与用户相关的请求存储在user.js路由模块中，其他与房间相关的请求则存储在room.js路由模块中。在server项目的routes目录下新建一个user.js文件，用于实现用户登录验证API与用户注册API。4．挂载路由模块在server项目的app.js文件中引入routes目录下的路由模块，使用app.use()方法挂载user.js路由模块与room.js路由模块，并分别为其指定路由的匹配路径。

任务5-2实现前台页面模块1

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势任务概述

智慧公寓管理系统的前台页面模块由用户登录与注册页面、前台首页、房间详情页面构成。在登录与注册页面中，当用户输入正确的登录信息即可进入前台首页。当用户单击前台首页的房间列表项时可携带该房间列表项id跳转至房间详情页面。

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、