《JavaScript+Vue.js項目案例教程》課程教案課程名稱：JavaScript+Vue.js項目案例教程授課年級：授課學期：教師姓名：年月日課程名稱項目5智慧公寓管理系統(tǒng)的設計與實現(xiàn)計劃學時8內(nèi)容分析本項目是一個基于Vue.js框架和Node.js框架實現(xiàn)的單頁面應用，即智慧公寓管理系統(tǒng)。該系統(tǒng)由Express框架搭建的服務器模塊、Vue.js框架實現(xiàn)的前臺頁面模塊與后臺頁面模塊構成。其中，可視的前臺頁面與后臺頁面等模塊利用Vue的組件化開發(fā)來實現(xiàn)，頁面之間的跳轉利用VueRouter的路由操作實現(xiàn)，狀態(tài)管理則利用Pinia來實現(xiàn)。而頁面中渲染的數(shù)據(jù)則需要使用Express框架搭建服務器設計API接口，將需要渲染的數(shù)據(jù)通過API接口返回并渲染在頁面上。教學目標與教學要求【項目目標】使用Express框架搭建服務器設計API接口，為前端頁面提供數(shù)據(jù)支持使用Vue.js框架實現(xiàn)前臺頁面模塊與后臺頁面模塊設計使用VueRouter實現(xiàn)頁面切換的路由操作使用Pinia實現(xiàn)狀態(tài)管理【育人目標】培養(yǎng)學生強烈的社會責任感，勇于擔當，積極參與社會進步與發(fā)展培養(yǎng)具有高尚品德、深厚人文素養(yǎng)、扎實專業(yè)知識與卓越創(chuàng)新能力的新時代青年教學重點搭建服務器，負責處理來自前臺頁面和后臺頁面的各類請求使用Vite搭建前臺頁面與后臺頁面基于VueRouter實現(xiàn)頁面高效切換實現(xiàn)后臺頁面的多個路由頁面教學難點根據(jù)用戶身份的不同，顯示不同的頁面功能實現(xiàn)管理員前臺系統(tǒng)與后臺系統(tǒng)自行切換封裝公共組件，實現(xiàn)組件高度復用教學方式課堂講解配合PPT演示教學過程第一課時（項目組織架構分析與項目環(huán)境搭建）項目組織架構本項目由服務器模塊、前臺頁面模塊和后臺頁面模塊構成，其項目組織架構如圖所示。在智慧公寓管理系統(tǒng)的組織架構中，服務器模塊負責處理前端發(fā)送的請求，返回相應的數(shù)據(jù)。本項目使用Express框架搭建服務器，在user路由模塊與room路由模塊中設計API接口來處理前端發(fā)送的HTTP請求。Express的路由實例將解析前端請求的URL路徑，并根據(jù)路徑調(diào)用對應的路由處理函數(shù)。前臺頁面模塊是用戶直接交互的界面，包括登錄與注冊頁面、前臺首頁和房間詳情頁面。其中，前臺頁面由頭部信息欄、導航、輪播圖、房間列表與頁腳等功能構成；房間詳情頁面由房間詳細信息展示與房間預訂等功能構成。后臺頁面模塊是管理員用于管理公寓信息的界面，包括后臺首頁、公寓房間管理（由房間列表頁、房間狀態(tài)頁與房間設施頁組成）、公寓入住管理（由用戶入住頁與用戶退房頁組成）與入住統(tǒng)計頁面組成。項目環(huán)境搭建（1）安裝Node.js由于Node.js對于本項目的后端（服務器）環(huán)境與前端環(huán)境而言是必需的，因此需要先安裝Node.js。推薦在Node.js官網(wǎng)下載對應的安裝包，按照安裝步驟有序安裝Node.js。由于Node.js中已經(jīng)繼承了NPM，所以無須再單獨安裝NPM。（2）安裝express-generator本項目服務器模塊需要使用Expresss框架實現(xiàn)，因此需要通過NPM命令安裝express-generator應用程序生成器，進而使用express命令來創(chuàng)建一個Express項目，安裝命令如下所示。npminstall-gexpress-generatorexpress項目名稱（3）安裝Vue.js本項目的前端頁面基于Vue.js框架實現(xiàn)，因此需要使用NPM命令安裝Vue.js，安裝命令如下所示。npmcreatevue@latest（3）安裝vue-devtools調(diào)試工具為提高調(diào)試項目的效率，推薦安裝vue-devtools調(diào)試工具。（4）基于Vite創(chuàng)建并配置Vue項目使用create-vue工具創(chuàng)建一個基于Vite的項目，并在創(chuàng)建過程中為項目配置所需的VueRouter與Pinia選項，安裝命令如下所示。npmcreatevue@latest（5）在Vue項目中安裝第三方庫在Vite創(chuàng)建的Vue項目根目錄下，使用NPM命令安裝ElementPlus、Axios、Swiper、Echarts等第三方庫。這些庫提供了豐富的API和功能，可以大大簡化開發(fā)過程，并提升應用的質(zhì)量和用戶體驗。第二、三課時（上機練習：任務5-1實現(xiàn)服務端模塊）提出需求，導入學習任務智慧公寓管理系統(tǒng)的服務端模塊負責處理來自前臺頁面和后臺頁面的各類請求。如用戶登錄驗證、用戶注冊驗證等與用戶相關的請求；查詢?nèi)糠块g信息、查詢指定房間詳細信息、刪除指定房間、編輯指定房間信息、新增一條房間信息等房間列表相關的請求；查詢?nèi)糠块g（訂單）狀態(tài)、查詢預訂狀態(tài)的訂單、查詢?nèi)胱顟B(tài)的訂單、查詢已完成狀態(tài)的訂單、預訂房間、刪除訂單、編輯訂單等與房間或訂單狀態(tài)相關的請求；查詢?nèi)糠块g類型、新增房間類型、編輯房間類型、刪除房間類型等與房間類型（設施）相關的請求；辦理入住、辦理退房等與用戶入住相關的請求。任務實現(xiàn)步驟1.創(chuàng)建server項目使用“expressserver”命令創(chuàng)建一個名為server的Express項目。2．創(chuàng)建JSON數(shù)據(jù)源在server項目的data目錄下新建user.json文件用于存儲用戶信息，新建room.json文件用于存儲與房間相關的信息，該文件在本任務中作為服務器所請求的本地數(shù)據(jù)源存在。data/user.json文件用于保存用戶注冊的信息，并作為用戶登錄校驗的數(shù)據(jù)源存在。data/room.json文件用于保存全部房間列表信息、全部房間狀態(tài)信息與全部房間類型信息。3．創(chuàng)建路由模塊在智慧公寓管理系統(tǒng)的服務端模塊中，與用戶相關的請求存儲在user.js路由模塊中，其他與房間相關的請求則存儲在room.js路由模塊中。在server項目的routes目錄下新建一個user.js文件，用于實現(xiàn)用戶登錄驗證API與用戶注冊API。在server項目的routes目錄下新建一個room.js文件，用于實現(xiàn)與房間相關的API。4．掛載路由模塊在server項目的app.js文件中引入routes目錄下的路由模塊，使用app.use()方法掛載user.js路由模塊與room.js路由模塊，并分別為其指定路由的匹配路徑。知識點3-Vue的發(fā)展歷程5.啟動項目在server項目根目錄下執(zhí)行“npmstart”命令即可啟動server項目，從而為智慧公寓管理系統(tǒng)的前臺頁面模塊與后臺頁面模塊提供數(shù)據(jù)支持。第四~六課時（上機練習：任務5-2實現(xiàn)前臺頁面模塊）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學生上節(jié)練習中的問題，學生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的前臺頁面模塊搭建等內(nèi)容。任務概述在智慧公寓管理系統(tǒng)的登錄與注冊頁面中，當用戶輸入正確的登錄信息即可進入前臺首頁。當用戶單擊前臺首頁的房間列表項時可攜帶該房間列表項id跳轉至房間詳情頁面。任務效果登錄與注冊頁面效果展示：前臺首頁的房間列表模塊效果展示：房間詳情頁面效果展示：任務實現(xiàn)步驟1.使用Vite創(chuàng)建項目使用create-vue工具創(chuàng)建一個web的Vue項目，并在創(chuàng)建過程中為項目配置所需的VueRouter與Pinia選項，項目創(chuàng)建完成后即可引入所需的第三方庫。2．配置程序入口文件main.js是程序的入口文件，主要用于加載各種公共組件和初始化Vue實例。本項目中的Vue、引用的ElementPlus組件庫、VueRouter實例與Pinia就是在該文件中定義的。3．配置組件入口文件App.vue是項目的根組件，所有的頁面都是在App.vue下面切換的，所有的頁面組件都是App.vue的子組件。在App.vue組件內(nèi)只需使用<router-view>組件作為占位符，就可以實現(xiàn)各個頁面的引入。App.vue文件代碼如下所示。<template><RouterView/></template>4．創(chuàng)建路由實例對象在routes/index.js文件內(nèi)創(chuàng)建路由實例對象，該文件定義了整個應用程序的路由規(guī)則和導航邏輯，確保用戶能夠順暢地在不同的視圖組件之間切換。5．創(chuàng)建Store在stores/index.js文件內(nèi)定義Store，在state內(nèi)定義isLogin與username，分別用于保存用戶的登錄狀態(tài)與登錄的用戶名。當用戶登錄或退出系統(tǒng)時調(diào)用actions內(nèi)定義的方法全局保存登錄狀態(tài)與登錄的用戶名，從而使登錄狀態(tài)與登錄的用戶名能夠被任意組件調(diào)用。6．實現(xiàn)登錄與注冊頁面在src目錄下的common文件夾內(nèi)新建Login.vue組件，用于實現(xiàn)登錄與注冊頁面。在<template>模板中，使用ElementPlus組件庫的表單、輸入框、按鈕等組件來構建界面。在<script>腳本中，通過Pinia管理登錄狀態(tài)和登錄的用戶名，使得組件之間能夠共享狀態(tài)，便于維護。然后定義登錄表單的數(shù)據(jù)模型以及事件處理函數(shù),，還定義了register函數(shù)用于處理注冊邏輯，handleReset函數(shù)用于重置表單字段，toHome函數(shù)用于跳轉到前臺首頁。7．實現(xiàn)前臺首頁在src/views/user文件夾下的UserPage.vue組件內(nèi)實現(xiàn)智慧公寓管理系統(tǒng)的前臺首頁，該頁面由<Header>頭部信息欄、<Nav>導航欄、<RouterView>核心內(nèi)容區(qū)與<Footer>頁腳構成。8．實現(xiàn)房間詳情頁面當用戶單擊房間列表項的“立即預訂”按鈕時，RoomItem組件調(diào)用toDetail方法跳轉至房間詳情頁面。此時前臺路由路徑變?yōu)椤?detail:id”，UserPage.vue組件的<RouterView/>組件根據(jù)路由路徑的匹配規(guī)則自動替換為Detail.vue組件。第七~九課時（上機練習：任務5-3實現(xiàn)后臺頁面模塊）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學生上節(jié)練習中的問題，學生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的后臺頁面模塊搭建等內(nèi)容。任務概述在智慧公寓管理系統(tǒng)的后臺頁面模塊中，公寓房間管理菜單下包含房間列表頁、房間狀態(tài)頁與房間設施頁等二級路由；公寓入住管理菜單下包含用戶入住頁與用戶退房頁等二級路由。任務效果后臺首頁效果展示：房間列表頁面效果展示：房間狀態(tài)頁面效果展示：房間設施頁面效果展示：用戶入住頁面效果展示：用戶退房頁面效果展示：入住統(tǒng)計頁面效果展示：任務實現(xiàn)步驟1.封裝公共組件在后臺頁面中，有2個公共組件，即<Header>組件與<TableList>組件。其中<Header>組件是前臺頁面與后臺頁面的公共頭部信息欄組件。當管理員或用戶登錄時，<Header>組件會判斷登錄賬號是否為“admin”。登錄者為管理員時，賦予管理員切換至后臺系統(tǒng)的能力，并在頭部信息欄中顯示管理員信息。登錄者為用戶時，僅在頭部信息欄中顯示當前登錄的用戶名。<TableList>組件是用于動態(tài)渲染Table表格的組件，<TableList>組件可根據(jù)傳入數(shù)據(jù)的不同，動態(tài)渲染出各個房間列表頁、房間狀態(tài)頁、房間設施頁、用戶入住頁與用戶退房頁的Table表格。2．搭建后臺頁面框架完成公共組件開發(fā)后，需要在src/views/user文件夾下的HomePage.vue組件內(nèi)搭建智慧公寓管理系統(tǒng)的后臺頁面框架，后臺頁面由頭部信息欄、左側菜單欄與右側的路由頁面組成。3．實現(xiàn)后臺首頁當管理員登錄并進入后臺頁面時，路由規(guī)則將路由路徑重定向為“/admin/home”，則<RouterView>組件默認渲染components/admin/Home.vue組件內(nèi)容，設置后臺首頁為默認頁面。4．實現(xiàn)房間列表頁當管理員單擊后臺頁面中的“房間列表”菜單項時，路由路徑變?yōu)椤?admin/list”，則<RouterView>組件默認渲染components/admin/RoomList.vue組件內(nèi)容。在房間列表頁面中，管理員不僅可以新增一條房間列表項，還可以編輯或刪除房間列表項信息。5．實現(xiàn)房間狀態(tài)頁當管理員單擊后臺頁面中的“房間狀態(tài)”菜單項時，路由路徑變?yōu)椤?admin/status”，則<RouterView>組件默認渲染components/admin/RoomStatus.vue組件，實現(xiàn)切換至房間狀態(tài)頁面。房間狀態(tài)頁主要用于渲染用戶預訂的房間訂單，訂單可分為3種狀態(tài)，即“預訂”、“入住”和“已完成”。在房間狀態(tài)頁面中，管理員不僅可以新增一條房間訂單，還可以編輯或刪除訂單信息。6．實現(xiàn)房間設施頁當管理員單擊后臺頁面中的“房間設施”菜單項時，路由路徑變?yōu)椤?admin/facility”，則<RouterView>組件默認渲染components/admin/RoomFacility.vue組件內(nèi)容。房間設施頁面主要用于對房間進行分類，不同類型的房間具有不同的房間設施。7．實現(xiàn)用戶入住頁與用戶退房頁當管理員單擊后臺頁面中的“用戶入住”或“用戶退房”菜單項時，路由路徑變?yōu)椤?admin/in”或“/admin/out”，則<RouterView>組件默認渲染components/admin/UserIn.vue組件內(nèi)容或components/admin/UserOut.vue組件內(nèi)容。用戶入住頁面主要用于將處于“預訂”狀態(tài)的房間訂單改為“入住狀態(tài)”，