基于uni-app和Express的网课预约小程序设计与实现

摘 要：基于uni-app和Express的网课预约小程序是一款专为用户提供便捷、高效预约服务的平台。用户只需通过手机，便能随时随地轻松搜索和预约心仪的课程，极大地提升了预约的效率和便利性。系统采用uni-app框架技术，实现了跨平台的应用，让用户在不同设备上都能享受到一致且优质的预约服务。同时，系统运用uni-app中卓越的第三方组件uView，为界面增添了美观与质感。在服务器端，系统采用NodeJS和Express框架，确保了业务逻辑处理的流畅与高效。此外，选用MySQL数据库，实现了数据的科学存储及管理。

关键词：网课预约；uni-app；Express；小程序

中图分类号：TP311.5 文献标识码：A 文章编号：2096-4706（2024）17-0100-06

0 引 言

在信息化时代，互联网已经广泛渗透到各个行业，改变了人们获取信息的方式，并影响了生活方式和学习方式。传统的线下课程预约方式，如电话预约和现场排队，由于流程复杂且效率低下，已无法满足现代社会的需求。因此，网课预约小程序应运而生，利用互联网技术为用户提供了一个便捷、高效的预约平台。用户可以随时随地通过手机搜索和预约课程，大大提高了预约效率。同时，课程管理机构也能通过小程序进行课程和学员管理，进一步提升了工作效率。

1 系统框架介绍

网课预约系统运用Vue、uni-app、Express等框架实现，主要包括小程序端、服务器端和数据库三个部分。小程序端选用DCloud公司的uni-app框架进行跨平台实现，使用uView UI库进行页面美化。uni-app框架是当前主流的一种跨平台框架，它基于Vue框架实现，开发者编写一套uni-app代码，便可发布到多个平台，包括iOS、Android、Web、以及各种小程序、快应用等[1-2]。uView是一款基于uni-app开发的UI库，它提供了一套完整的组件库和丰富的样式库，帮助开发者快速构建出漂亮、丰富的多平台应用[3-4]。

服务器端采用NodeJS与Express框架组合，实现业务逻辑处理。NodeJS[5-6]是一个基于Chrome V8引擎的JavaScript执行平台，目前被广泛应用到各种Web应用的开发项目。Express是一个简洁而灵活的NodeJS轻量级应用框架，提供了一系列强大的特性来帮助开发者创建Web应用[7-8]。

系统选用轻量级的MySQL[9-10]数据库进行数据存储和管理。系统架构如图1所示。

2 系统功能需求

基于uni-app和Express的网课预约小程序主要涉及两类用户：普通用户和管理员。普通用户在登录系统后，可以轻松查看课程详情，进行课程预约等操作。而管理员在普通用户权限基础上拥有更广泛的权限，可以对公告、课程信息以及课程评价进行管理。系统的功能结构图如图2所示。

对于普通用户来说，该小程序需要提供以下功能：

1）登录：用户必须先进行登录才能正常的使用小程序进行课程浏览、查看、预约、评价等操作。

2）课程查看：用户可以查看小程序中的所有课程信息，包括课程名称、图片以及简介等信息，同时，用户还需要能查看课程对应的授课教师相关信息。

3）课程预约xt31XXmGmoBZQxWU6n/AJNMXvakhiS/a4exuvTuWe38=：用户可以根据个人兴趣选择课程并进行预约。

4）课程预约管理：用户可以查看自己的预约记录，包括已预约和已完成的课程。对于未开始的课程，用户还可以进行取消预约的操作。

5）课程评价：用户可以对参加过的课程进行评价和留言，分享学习心得。

6）课程定位：用户需要能查看课程的上课地点，以便其进行良好的出行规划。

7）课程搜索：用户需要能方便快捷地查询到课程或者是课程授课教师相关信息。

8）用户充值：用户可以根据自身需求进行充值。

9）会员卡购买：用户可以根据需求购买会员卡，享受更多优质服务。

对于管理员，该小程序需要提供以下功能：

1）课程管理：管理员需要能对课程进行管理，可以添加和删除课程信息，包括课程名称、时间、教师等。

2）用户评价管理：管理员可以查看用户对课程的评价，并根据实际需求进行回复或处理。

3）公告发布：管理员可以发布各类通知，如课程变动信息、重要提醒等，确保信息的及时传达。

3 系统数据库设计

在系统功能设计的基础上，可以明确网课预约系统所涉及的基本实体及其相互关系，从而为数据库设计提供明确的方向。在本系统中，共设计了9张数据库表，具体包括用户信息表、课程信息表、精选课程信息表、课程分类表、课程预约记录表、课程评价表、会员卡类型表、公告信息表和教师表。这些表及其在系统中的作用在表1中进行了详细的描述。各表之间的关联关系如图3所示。通过这些精心设计的数据库表，本系统能够实现网课预约、管理及评价等一系列功能，从而为用户提供高效、便捷的学习服务。

基于数据库的ER图，可以进行数据库的逻辑设计，这里，由于篇幅的原因，仅仅对课程预约表进行分析。课程预约记录表存放的是用户预约的课程信息，包括预约id、课程id、预约状态、用户id、预约时间。表2是课程预约表（Reservation表）具体的逻辑结构。

4 系统主要功能实现

小程序内置了普通用户和管理员两种角色，每种角色都具备一系列功能，这些功能都被巧妙地嵌入到小程序的界面中。小程序由“首页”“课程”“预约”“个人”四个醒目的标签页组成。

4.1 首页界面

当用户打开小程序时，首先映入眼帘的就是首页信息。首页的界面设计如图4（a）所示，顶部设有一个课程搜索框，便于用户快速查找课程。搜索框下方则展示了广告轮播图，其下方则滚动播放小程序的公告信息。公告下方部分则用于展示会员卡信息和精选课程。

课程搜索框为用户提供了方便的搜索体验，只需点击搜索框，便会触发自定义事件，通过事件处理函数调用uni.navigateTo（）方法，将用户引导至搜索页面。在搜索页面中输入课程名称，点击查询按钮，页面将显示搜索结果。

公告信息以左右滚动的形式呈现，这是通过uView的NoticeBar滚动通知组件实现的。值得一提的是，在用户打开首页之前，该页面的onLoad生命周期函数已经从对应的接口获取了公告信息、会员卡信息以及精选课程信息，并将其保存在本地，确保用户在打开该页面时能立即获取这些信息。

会员卡展示部分为用户提供了了解不同会员卡种类的机会。通过左右滑动，用户可以查看不同类型、不同价格的会员卡。点击“查看全部”链接，即可进入会员卡列表页，效果如图4（b）所示。选择特定的会员卡，便可以进入会员卡详情页，用户在此页面可以进行“下单”操作。会员卡详情页效果如图4（c）所示。

精选课程展示部分则集中展示了网课预约中心最优质的课程。点击相应的精选课程，用户可以查看具体的课程信息。点击“查看全部”链接，即可进入精选课程列表页，这里展示了所有的精选课程。

4.2 课程页界面

当用户轻触下方导航栏中的“课程”选项，即可进入课程页面。此页面的设计效果如图5（a）所示，为用户提供各类课程的详尽信息。左侧区域为课程分类列表，清晰地展示了各类课程；右侧则为课程信息区域，为用户展示特定分类下的课程信息。通过这个页面，用户可以全面了解课程的详情，并做出相应的选择。

当用户对某门课程感兴趣并希望了解更多详情时，只需点击该课程右侧的“>”按钮，即可进入课程详情页面，效果如图5（b）所示。此页面详细展示了该课程的授课教师信息以及预约时间选择器。时间选择器展示了近四天内的可预约时间段，灰色区域表示当前不可预约的时间段，白色则为可预约时间。用户只需选择合适的时间段，然后点击“确认预约”按钮，即可成功预约该教师及所选时间段的课程。

值得一提的是，系统使用了uni-app中的第三方插件pretty-times来实现这一预约时间选择器的效果，确保用户预约的流程既直观又便捷。

4.3 预约页界面

用户只需轻触下方导航栏中的“预约”选项，即可转入课程预约管理页面。此页面设计精良，为用户清晰地呈现已预约的课程信息，页面的设计效果如图6（a）所示。用户在课程页面上预约的课程，均可在预约页面上一览无余。此页面特别设置两个标签栏，分别展示已完成的课程预约与待完成的课程预约，以便用户快速找到所需内容。每个标签栏下都排列着相应的课程预约信息，用户只需点击相应的课程，即可查看详细信息。

此外，若用户想对已预约的课程进行评价，只需点击图6（a）中的评价按钮，便会弹出课程评价页面，页面效果如图6（b）所示。此评价页设计直观，方便用户填写评价内容。填写完毕后，用户只需点击“评论”按钮，即可完成课程的评价。同时，用户可以通过点击“查看”链接，查看已完成的评论信息，以便更好地了解课程的反馈和评价。

4.4 个人页界面

个人中心页面则是用户的专属空间。当用户轻触下方导航栏中的“个人”选项时，即可进入个人中心页面。此页面设计效果如图7（a）所示。新用户首次进入小程序时，系统将自动引导至个人中心页面。为方便用户登录，特设“点击我进行登录”按钮，用户只需轻轻一点，即可完成授权登录。在登录过程中，系统会自动识别用户身份，判断是普通用户还是管理员。

对于普通用户而言，登录成功后将直接进入个人中心页面，如图7（b）所示。在此页面上，用户可以进行账户充值、查看评价以及修改个人资料等操作，以完善和更新个人信息。而管理员除了拥有普通用户的所有权限外，还能进入修改公告页面，对公告信息进行修改和管理，确保信息的及时更新和准确性。

5 系统数据处理

以查询课程预约为例，对系统数据处理流程进行说明：

1）前端发起请求。当用户点击图5（a）中某一课程右侧的“>”按钮时，页面将导航至该课程的预约页，如图5（b）所示。在此页面的onLoad函数中，会调用uni.request（）函数，向服务器发送一个数据请求。请求成功后，返回的数据将被赋值给booking属性。以下是前端请求的核心代码：

uni.request（{

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

success： （res） => {

this.booking = res.data.data

}，

}）

2）后端处理数据。当Express接收到前端发送的请求后，它将通过路由处理程序进行分发。本文采用了模块化路由的设计。以下是路由模块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参数获取相应的课程信息，如课程图片、课程名称等。若查询过程中发生错误，会抛出异常。最终，后端会将查询结果以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框架的结合，为服务器端提供了强大的支持，确保了业务的流畅运行。小程序操作简单，界面简洁，用户只需轻点手机，即可随时随地查看和预约心仪的课程。

参考文献：

[1] 李书明，万然，崔童谣，等.基于uni-app框架的一部手机管生产APP的开发和应用 [J].现代信息科技，2023，7（15）：35-38.

[2] 朱骏侠.基于WebGL的三维智慧管网系统的设计与实现 [J].测绘通报，2021（4）：146-150.

[3] 付兴，杜树新.基于uni-app的掌上污水处理系统的研究与应用 [J].物联网技术，2024，14（1）：106-108+113.

[4] 孙国程，陈大睿，张昭艳，等.基于Node.js和MongoDB的公益帮扶小程序设计与实现 [J].软件，2023，44（4）：78-80.

[5] 张志，李瑞利.基于WebGIS的红树林生态管理在线系统 [J].北京大学学报：自然科学版，2023，59（4）：602-608.

[6] 张文豪.NodeJs添加代码版权信息命令工具的设计与实现 [J].现代计算机，2023，29（14）：109-112.

[7] 李瑞，崔亚硕，娄亚雄.一种基于JAVA与UNI-APP的智慧农业派工单系统 [J].现代信息科技，2023，7（12）：28-31+35.

[8] 江家龙.基于Vue.js框架的餐饮Web APP设计与实现 [J].科技创新与应用，2023，13（36）：128-132+136.

[9] 陈淼，羊开云.基于微信小程序的校园报修管理系统设计 [J].网络安全技术与应用，2024（1）：57-60.

[10] 杨婷，莫若玉，张秀娟，等.轻量级缓存策略的关系型数据库全文搜索加强与扩展 [J].计算机应用，2023，43（8）：2431-2438.

作者简介：闵慧（1987—），女，汉族，湖南湘潭人，讲师，硕士，研究方向：软件开发；通信作者：张佳佳（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