基于uni-app和Express的網課預約小程序設計與實現

摘 要：基于uni-app和Express的網課預約小程序是一款專為用戶提供便捷、高效預約服務的平臺。用戶只需通過手機，便能隨時隨地輕松搜索和預約心儀的課程，極大地提升了預約的效率和便利性。系統(tǒng)采用uni-app框架技術，實現了跨平臺的應用，讓用戶在不同設備上都能享受到一致且優(yōu)質的預約服務。同時，系統(tǒng)運用uni-app中卓越的第三方組件uView，為界面增添了美觀與質感。在服務器端，系統(tǒng)采用NodeJS和Express框架，確保了業(yè)務邏輯處理的流暢與高效。此外，選用MySQL數據庫，實現了數據的科學存儲及管理。

關鍵詞：網課預約；uni-app；Express；小程序

中圖分類號：TP311.5 文獻標識碼：A 文章編號：2096-4706（2024）17-0100-06

0 引 言

在信息化時代，互聯網已經廣泛滲透到各個行業(yè)，改變了人們獲取信息的方式，并影響了生活方式和學習方式。傳統(tǒng)的線下課程預約方式，如電話預約和現場排隊，由于流程復雜且效率低下，已無法滿足現代社會的需求。因此，網課預約小程序應運而生，利用互聯網技術為用戶提供了一個便捷、高效的預約平臺。用戶可以隨時隨地通過手機搜索和預約課程，大大提高了預約效率。同時，課程管理機構也能通過小程序進行課程和學員管理，進一步提升了工作效率。

1 系統(tǒng)框架介紹

網課預約系統(tǒng)運用Vue、uni-app、Express等框架實現，主要包括小程序端、服務器端和數據庫三個部分。小程序端選用DCloud公司的uni-app框架進行跨平臺實現，使用uView UI庫進行頁面美化。uni-app框架是當前主流的一種跨平臺框架，它基于Vue框架實現，開發(fā)者編寫一套uni-app代碼，便可發(fā)布到多個平臺，包括iOS、Android、Web、以及各種小程序、快應用等[1-2]。uView是一款基于uni-app開發(fā)的UI庫，它提供了一套完整的組件庫和豐富的樣式庫，幫助開發(fā)者快速構建出漂亮、豐富的多平臺應用[3-4]。

服務器端采用NodeJS與Express框架組合，實現業(yè)務邏輯處理。NodeJS[5-6]是一個基于Chrome V8引擎的JavaScript執(zhí)行平臺，目前被廣泛應用到各種Web應用的開發(fā)項目。Express是一個簡潔而靈活的NodeJS輕量級應用框架，提供了一系列強大的特性來幫助開發(fā)者創(chuàng)建Web應用[7-8]。

系統(tǒng)選用輕量級的MySQL[9-10]數據庫進行數據存儲和管理。系統(tǒng)架構如圖1所示。

2 系統(tǒng)功能需求

基于uni-app和Express的網課預約小程序主要涉及兩類用戶：普通用戶和管理員。普通用戶在登錄系統(tǒng)后，可以輕松查看課程詳情，進行課程預約等操作。而管理員在普通用戶權限基礎上擁有更廣泛的權限，可以對公告、課程信息以及課程評價進行管理。系統(tǒng)的功能結構圖如圖2所示。

對于普通用戶來說，該小程序需要提供以下功能：

1）登錄：用戶必須先進行登錄才能正常的使用小程序進行課程瀏覽、查看、預約、評價等操作。

2）課程查看：用戶可以查看小程序中的所有課程信息，包括課程名稱、圖片以及簡介等信息，同時，用戶還需要能查看課程對應的授課教師相關信息。

3）課程預約xt31XXmGmoBZQxWU6n/AJNMXvakhiS/a4exuvTuWe38=：用戶可以根據個人興趣選擇課程并進行預約。

4）課程預約管理：用戶可以查看自己的預約記錄，包括已預約和已完成的課程。對于未開始的課程，用戶還可以進行取消預約的操作。

5）課程評價：用戶可以對參加過的課程進行評價和留言，分享學習心得。

6）課程定位：用戶需要能查看課程的上課地點，以便其進行良好的出行規(guī)劃。

7）課程搜索：用戶需要能方便快捷地查詢到課程或者是課程授課教師相關信息。

8）用戶充值：用戶可以根據自身需求進行充值。

9）會員卡購買：用戶可以根據需求購買會員卡，享受更多優(yōu)質服務。

對于管理員，該小程序需要提供以下功能：

1）課程管理：管理員需要能對課程進行管理，可以添加和刪除課程信息，包括課程名稱、時間、教師等。

2）用戶評價管理：管理員可以查看用戶對課程的評價，并根據實際需求進行回復或處理。

3）公告發(fā)布：管理員可以發(fā)布各類通知，如課程變動信息、重要提醒等，確保信息的及時傳達。

3 系統(tǒng)數據庫設計

在系統(tǒng)功能設計的基礎上，可以明確網課預約系統(tǒng)所涉及的基本實體及其相互關系，從而為數據庫設計提供明確的方向。在本系統(tǒng)中，共設計了9張數據庫表，具體包括用戶信息表、課程信息表、精選課程信息表、課程分類表、課程預約記錄表、課程評價表、會員卡類型表、公告信息表和教師表。這些表及其在系統(tǒng)中的作用在表1中進行了詳細的描述。各表之間的關聯關系如圖3所示。通過這些精心設計的數據庫表，本系統(tǒng)能夠實現網課預約、管理及評價等一系列功能，從而為用戶提供高效、便捷的學習服務。

基于數據庫的ER圖，可以進行數據庫的邏輯設計，這里，由于篇幅的原因，僅僅對課程預約表進行分析。課程預約記錄表存放的是用戶預約的課程信息，包括預約id、課程id、預約狀態(tài)、用戶id、預約時間。表2是課程預約表（Reservation表）具體的邏輯結構。

4 系統(tǒng)主要功能實現

小程序內置了普通用戶和管理員兩種角色，每種角色都具備一系列功能，這些功能都被巧妙地嵌入到小程序的界面中。小程序由“首頁”“課程”“預約”“個人”四個醒目的標簽頁組成。

4.1 首頁界面

當用戶打開小程序時，首先映入眼簾的就是首頁信息。首頁的界面設計如圖4（a）所示，頂部設有一個課程搜索框，便于用戶快速查找課程。搜索框下方則展示了廣告輪播圖，其下方則滾動播放小程序的公告信息。公告下方部分則用于展示會員卡信息和精選課程。

課程搜索框為用戶提供了方便的搜索體驗，只需點擊搜索框，便會觸發(fā)自定義事件，通過事件處理函數調用uni.navigateTo（）方法，將用戶引導至搜索頁面。在搜索頁面中輸入課程名稱，點擊查詢按鈕，頁面將顯示搜索結果。

公告信息以左右滾動的形式呈現，這是通過uView的NoticeBar滾動通知組件實現的。值得一提的是，在用戶打開首頁之前，該頁面的onLoad生命周期函數已經從對應的接口獲取了公告信息、會員卡信息以及精選課程信息，并將其保存在本地，確保用戶在打開該頁面時能立即獲取這些信息。

會員卡展示部分為用戶提供了了解不同會員卡種類的機會。通過左右滑動，用戶可以查看不同類型、不同價格的會員卡。點擊“查看全部”鏈接，即可進入會員卡列表頁，效果如圖4（b）所示。選擇特定的會員卡，便可以進入會員卡詳情頁，用戶在此頁面可以進行“下單”操作。會員卡詳情頁效果如圖4（c）所示。

精選課程展示部分則集中展示了網課預約中心最優(yōu)質的課程。點擊相應的精選課程，用戶可以查看具體的課程信息。點擊“查看全部”鏈接，即可進入精選課程列表頁，這里展示了所有的精選課程。

4.2 課程頁界面

當用戶輕觸下方導航欄中的“課程”選項，即可進入課程頁面。此頁面的設計效果如圖5（a）所示，為用戶提供各類課程的詳盡信息。左側區(qū)域為課程分類列表，清晰地展示了各類課程；右側則為課程信息區(qū)域，為用戶展示特定分類下的課程信息。通過這個頁面，用戶可以全面了解課程的詳情，并做出相應的選擇。

當用戶對某門課程感興趣并希望了解更多詳情時，只需點擊該課程右側的“>”按鈕，即可進入課程詳情頁面，效果如圖5（b）所示。此頁面詳細展示了該課程的授課教師信息以及預約時間選擇器。時間選擇器展示了近四天內的可預約時間段，灰色區(qū)域表示當前不可預約的時間段，白色則為可預約時間。用戶只需選擇合適的時間段，然后點擊“確認預約”按鈕，即可成功預約該教師及所選時間段的課程。

值得一提的是，系統(tǒng)使用了uni-app中的第三方插件pretty-times來實現這一預約時間選擇器的效果，確保用戶預約的流程既直觀又便捷。

4.3 預約頁界面

用戶只需輕觸下方導航欄中的“預約”選項，即可轉入課程預約管理頁面。此頁面設計精良，為用戶清晰地呈現已預約的課程信息，頁面的設計效果如圖6（a）所示。用戶在課程頁面上預約的課程，均可在預約頁面上一覽無余。此頁面特別設置兩個標簽欄，分別展示已完成的課程預約與待完成的課程預約，以便用戶快速找到所需內容。每個標簽欄下都排列著相應的課程預約信息，用戶只需點擊相應的課程，即可查看詳細信息。

此外，若用戶想對已預約的課程進行評價，只需點擊圖6（a）中的評價按鈕，便會彈出課程評價頁面，頁面效果如圖6（b）所示。此評價頁設計直觀，方便用戶填寫評價內容。填寫完畢后，用戶只需點擊“評論”按鈕，即可完成課程的評價。同時，用戶可以通過點擊“查看”鏈接，查看已完成的評論信息，以便更好地了解課程的反饋和評價。

4.4 個人頁界面

個人中心頁面則是用戶的專屬空間。當用戶輕觸下方導航欄中的“個人”選項時，即可進入個人中心頁面。此頁面設計效果如圖7（a）所示。新用戶首次進入小程序時，系統(tǒng)將自動引導至個人中心頁面。為方便用戶登錄，特設“點擊我進行登錄”按鈕，用戶只需輕輕一點，即可完成授權登錄。在登錄過程中，系統(tǒng)會自動識別用戶身份，判斷是普通用戶還是管理員。

對于普通用戶而言，登錄成功后將直接進入個人中心頁面，如圖7（b）所示。在此頁面上，用戶可以進行賬戶充值、查看評價以及修改個人資料等操作，以完善和更新個人信息。而管理員除了擁有普通用戶的所有權限外，還能進入修改公告頁面，對公告信息進行修改和管理，確保信息的及時更新和準確性。

5 系統(tǒng)數據處理

以查詢課程預約為例，對系統(tǒng)數據處理流程進行說明：

1）前端發(fā)起請求。當用戶點擊圖5（a）中某一課程右側的“>”按鈕時，頁面將導航至該課程的預約頁，如圖5（b）所示。在此頁面的onLoad函數中，會調用uni.request（）函數，向服務器發(fā)送一個數據請求。請求成功后，返回的數據將被賦值給booking屬性。以下是前端請求的核心代碼：

uni.request（{

url： `http：//localhost：3000/booking/booking？id=${e.id}`，

success： （res） => {

this.booking = res.data.data

}，

}）

2）后端處理數據。當Express接收到前端發(fā)送的請求后，它將通過路由處理程序進行分發(fā)。本文采用了模塊化路由的設計。以下是路由模塊index.js文件的部分代碼：

var express = require（"express"）;

var router = express.Router（）;

var connection = require（"../db/sql.js"）;

router.get（"/booking/booking"， function（req， res， next） {

connection.query（"select * from Course where id = ？"， [req.query.id]， function（error， results） {

if （error） throw error;

res.json（{

code： 0，

data： results[0]，

}）;

}）;

}）;

module.exports = router;

當后端收到GET請求時，它會查詢數據庫中的Course表，根據請求的id參數獲取相應的課程信息，如課程圖片、課程名稱等。若查詢過程中發(fā)生錯誤，會拋出異常。最終，后端會將查詢結果以JSON格式返回給前端，其中包含一個code字段和一個data字段，data字段中包含查詢結果的第一條記錄。

3）前端數據展示。當后端數據成功返回后，前端將接收到的數據賦值給booking屬性。接著，前端使用以下代碼將數據展示在頁面上：

<view class="b_top">

<image ：src="booking.img" class="ig"></image>

<view class="top_p">{{booking.name}}</view>

</view>

這樣，用戶就可以在預約頁上看到所選課程的圖片和名稱了。整個流程確保了用戶請求的數據能夠準確、高效地在前后端之間傳輸和展示。

6 結 論

基于uni-app和Express框架的網課預約小程序致力于打破時間和空間的束縛，為用戶提供更為便捷、高效的學習預約體驗。前端頁面采用Vue、uni-app和uView等技術，實現了跨平臺的無縫連接，讓用戶無論身處何處，都能輕松訪問。NodeJS與Express框架的結合，為服務器端提供了強大的支持，確保了業(yè)務的流暢運行。小程序操作簡單，界面簡潔，用戶只需輕點手機，即可隨時隨地查看和預約心儀的課程。

參考文獻：

[1] 李書明，萬然，崔童謠，等.基于uni-app框架的一部手機管生產APP的開發(fā)和應用 [J].現代信息科技，2023，7（15）：35-38.

[2] 朱駿俠.基于WebGL的三維智慧管網系統(tǒng)的設計與實現 [J].測繪通報，2021（4）：146-150.

[3] 付興，杜樹新.基于uni-app的掌上污水處理系統(tǒng)的研究與應用 [J].物聯網技術，2024，14（1）：106-108+113.

[4] 孫國程，陳大睿，張昭艷，等.基于Node.js和MongoDB的公益幫扶小程序設計與實現 [J].軟件，2023，44（4）：78-80.

[5] 張志，李瑞利.基于WebGIS的紅樹林生態(tài)管理在線系統(tǒng) [J].北京大學學報：自然科學版，2023，59（4）：602-608.

[6] 張文豪.NodeJs添加代碼版權信息命令工具的設計與實現 [J].現代計算機，2023，29（14）：109-112.

[7] 李瑞，崔亞碩，婁亞雄.一種基于JAVA與UNI-APP的智慧農業(yè)派工單系統(tǒng) [J].現代信息科技，2023，7（12）：28-31+35.

[8] 江家龍.基于Vue.js框架的餐飲Web APP設計與實現 [J].科技創(chuàng)新與應用，2023，13（36）：128-132+136.

[9] 陳淼，羊開云.基于微信小程序的校園報修管理系統(tǒng)設計 [J].網絡安全技術與應用，2024（1）：57-60.

[10] 楊婷，莫若玉，張秀娟，等.輕量級緩存策略的關系型數據庫全文搜索加強與擴展 [J].計算機應用，2023，43（8）：2431-2438.

作者簡介：閔慧（1987—），女，漢族，湖南湘潭人，講師，碩士，研究方向：軟件開發(fā)；通信作者：張佳佳（1982—），女，漢族，湖南隆回人，助教，本科，研究方向：人工智能、教育學。

收稿日期：2024-02-05

DOI：10.19850/j.cnki.2096-4706.2024.17.019

Design and Implementation of Online Course Reservation Mini Program Based on uni-app and Express

MIN Hui， ZHANG Jiajia

（School of Software， Hunan College of Information， Changsha 410200， China）

Abstract： The online course reservation mini program based on uni-app and Express is a platform designed to provide users with convenient and efficient reservation services. Users can easily search and reserve their favorite courses anytime and anywhere through their mobile phones， greatly improving the efficiency and convenience of reservation. The system adopts uni-app framework technology to achieve cross platform applications， allowing users to enjoy consistent and high-quality reservation services on different devices. At the same time， the system utilizes the excellent third-party component uView in uni-app， adding aesthetics and texture to the interface. On the server terminal， the system adopts NodeJS and Express frameworks to ensure smooth and efficient business logic processing. In addition， using MySQL database enables scientific storage and management of data.

Keywords： online course reservation; uni-app; Express; mini program