基于微信小程序的博物馆预约系统的设计与实现

在这里插入图片描述

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

在这里插入图片描述

文章目录

- - - 1.前言介绍
    - 2.功能设计
    - 3、功能实现
    - 4、开发技术简介
    - 5、系统物理架构
    - 6、库表设计
    - 7、关键代码
    - 相关选题
    - 8、源码获取

博物馆预约小程序

1.前言介绍

一、行业背景

政策利好：近年来，国家大力推动文化产业发展，鼓励博物馆、美术馆等文化场馆免费开放，并积极推进“互联网+文化”战略，为博物馆数字化发展提供了政策支持。
市场需求：随着人们生活水平的提高和精神文化需求的增长，参观博物馆、美术馆等文化场馆逐渐成为一种新的生活方式。然而，传统的线下预约方式存在信息不对称、预约流程繁琐等问题，无法满足用户日益增长的便捷化需求。
技术发展：移动互联网、大数据、人工智能等技术的快速发展，为博物馆数字化、智能化转型提供了技术支撑，也为博物预约小程序的开发和应用创造了条件。

二、用户痛点

信息获取不便：用户难以全面、及时地获取博物馆开放时间、展览信息、活动预告等信息。
预约流程繁琐：传统的线下预约方式需要用户亲自到馆或拨打电话，流程繁琐，效率低下。
参观体验不佳：高峰期排队时间长，观展体验差；缺乏个性化的导览服务，难以深入了解展品背后的故事。

三、小程序优势

便捷高效：用户可通过小程序随时随地查询博物馆信息、预约参观时间，无需排队，节省时间。
信息全面：小程序可整合博物馆的开放时间、展览信息、活动预告、交通指南等信息，为用户提供一站式服务。
功能丰富：除了预约功能，小程序还可以提供在线购票、语音导览、AR互动、文创商城等功能，提升用户参观体验。
数据赋能：小程序可以收集用户行为数据，为博物馆运营决策提供数据支持，例如优化展览内容、调整开放时间等。

四、发展趋势

个性化服务：利用大数据和人工智能技术，为用户提供个性化的展览推荐、路线规划等服务。
线上线下融合：将线上预约与线下参观体验深度融合，例如线上预约线下取票、线上导览线下互动等。
跨界合作：与旅游、教育、文创等产业进行跨界合作，打造多元化的文化消费场景。

2.功能设计

一、用户端

场馆展示：展示各个博物馆的高清图片、基本介绍、特色展览等信息，使用户快速了解场馆概况。
预约功能：用户可选择参观日期、时间段，输入参观人数进行预约，系统实时显示剩余可预约名额。
个人中心：用户能查看个人信息、预约记录、收藏的场馆等内容，也可对预约进行取消或改签操作。
推送通知：预约成功、临近参观日期、展览变更等信息，通过小程序推送及时告知用户。
评价与反馈：参观结束后，用户可对场馆服务、展览内容等进行评价和反馈，方便场馆改进优化。

二、管理端

预约管理：查看所有预约信息，包括预约用户、时间、人数等，可进行订单审核、修改和删除。
场馆管理：对场馆的基本信息、展览安排、开放时间等进行更新和维护。
数据分析：统计预约数据，如不同时间段预约人数、热门展览等，为场馆运营提供数据支持。
系统设置：设置小程序的基本参数、推送通知内容等，保障小程序正常运行。

3、功能实现

系统登录功能是程序必不可少的功能，在登录页面必填的数据有两项，一项就是账号，另一项数据就是密码，当管理员正确填写并提交这二者数据之后，管理员就可以进入系统后台功能操作区。下图就是管理员登录页面。
在这里插入图片描述

小程端部分页面展示

在这里插入图片描述

4、开发技术简介

本节介绍场馆预约平台用到的一些技术和开发环境的简介，用到开发技术主要包括：
（1）前端用到Element UI组件库和Vue框架
（2）后端用到Node
（3）包管理器Npm
（4）中间件Express
（5）数据库MySQL
系统开发环境主要是：前端开发工具Vscode，Hbuilder、操作系统Win10、CPU i5-9300H、内存8G。

5、系统物理架构

自习室系统的物理架构主要有：管理端和用户端，其中管理端主要是基于Vue和Element UI，用户端主要基于安卓、微信小程序和H5自习室系统的物理建构图

1. 客户端:

微信小程序: 用户通过微信小程序访问博物预约服务，小程序运行在用户的微信客户端上。

Web 端 (可选): 部分功能可以通过 Web 端实现，例如后台管理系统。

2. 网络层:

CDN (内容分发网络): 用于加速静态资源的访问，例如图片、视频等。

负载均衡: 用于将用户请求分发到不同的应用服务器，避免单点故障。

3. 应用层:

API 网关: 负责接收和处理来自客户端的请求，并进行身份验证、流量控制等操作。

应用服务器: 运行小程序的后端服务，处理业务逻辑，例如用户管理、预约管理、订单管理等。

缓存服务器: 用于缓存热点数据，例如博物馆信息、展览信息等，提高系统性能。

6、库表设计

在这里插入图片描述

7、关键代码

<!--pages/reservation/reservation.wxml-->
<!-- index.wxml -->
<view class="nav-bar"><viewclass="nav-item {{currentTab === index ? 'active' : ''}}"wx:for="{{tabs}}"wx:key="index"bindtap="switchTab"data-index="{{index}}">{{item.name}}</view>
</view>
<!-- 内容区域 -->
<view class="content"><view wx:if="{{currentTab === 0}}" class="top" wx:for="{{list}}" bind:tap="goReservation" data-value="{{item}}"><view><view class="data">参观日期：{{item.data}}</view><view class="time">参观时间：{{item.time}}</view><view class="peopleNum">参观人数：{{item.peopleNum}}</view></view><view wx:if="{{item.iscancle==0}}"><image src="../image/index/iconsuccess.png" mode=""/></view><view wx:else><image src="../image/index/fail.png" mode=""/></view></view><view wx:if="{{currentTab === 1}}" class="top" wx:for="{{activeList}}" bind:tap="goReservation" data-value="{{item}}"><view class="img"><image src="{{item.AimgUrl}}" mode=""/></view><view><view class="title">活动名称：{{item.title}}</view><view class="time">活动地点：{{item.address}}</view><view class="peopleNum">开始时间：{{item.startTime}}</view></view></view>
</view>

<template><div class="messge"><el-dialog title="提示" :visible.sync="dialogVisible" width="40%"><!-- 弹窗信息 --><el-formref="form":model="form":rules="rules":inline="true":before-close="handleClose"label-width="100px"><el-form-item label="名称" prop="title"><el-input v-model="form.title" placeholder="请输入名称"></el-input></el-form-item><el-form-item label="地点" prop="address"><el-input v-model="form.address" placeholder="请输入名称"></el-input></el-form-item><el-form-item label="时间" prop="startTime"><el-date-pickerv-model="form.startTime"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-item label="名额" prop="number"><el-input-numberv-model="value"@change="handleChange":min="1":max="50"label="描述文字"></el-input-number></el-form-item><el-form-item label="年龄" prop="number"><el-select v-model="yearvalue" placeholder="请选择"><el-optionv-for="item in options1":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="简介" class="content" prop="desc"><quill-editorref="myQuillEditor"v-model="form.desc"class="editor"/></el-form-item><el-form-item label="详情" class="content" prop="detail"><quill-editorref="myQuillEditor"v-model="form.detail"class="editor"/></el-form-item><el-form-item label="图片"><commonUpload></commonUpload></el-form-item></el-form><!-- 表单提交 --><span slot="footer" class="dialog-footer"><el-button @click="cancle">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></span></el-dialog><div class="manage-hander"><!-- 添加按钮 --><el-button type="primary" @click="handleAdd">+ 新增</el-button></div><!-- 表格 --><div class="common-table"><el-table:data="tableData"borderstripeheight="90%"style="width: 100%"><el-table-column prop="title" label="活动名称"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column><el-table-column prop="startTime" label="开始时间"> </el-table-column><el-table-column prop="number" label="人员名额"> </el-table-column><el-table-column prop="desc" label="简介"><template slot-scope="scope"><el-tooltip placement="top" effect="light"><div slot="content"><div class="text" v-html="scope.row.desc"></div></div><div class="text" v-html="scope.row.desc"></div></el-tooltip></template></el-table-column><el-table-column prop="detail" label="详情"><template slot-scope="scope"><el-tooltip placement="top" effect="light"><div slot="content"><div class="text" v-html="scope.row.detail"></div></div><div class="text" v-html="scope.row.detail"></div></el-tooltip></template></el-table-column><el-table-column label="状态" prop="isStart"><template slot-scope="scope"><span v-for="item in options" :key="item.id"><span v-if="scope.row.isStart === item.id">{{ item.name }}</span></span></template></el-table-column><el-table-column prop="imgUrl" label="图片"><template slot-scope="scope"><el-imagestyle="width: 150px; height: 100px":src="scope.row.AimgUrl":preview-src-list="[scope.row.AimgUrl]"></el-image></template></el-table-column><el-table-column prop="uploadTime" label="发布时间"> </el-table-column><el-table-column prop="addr" label="操作"><template slot-scope="scope"><el-buttontype="primary "size="mini"@click="handleOver(scope.row)">结束活动</el-button><el-buttontype="danger"size="mini"@click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><!-- 分页组件 --><el-paginationclass="page"layout="prev, pager, next":total="total"@current-change="handlePage"></el-pagination></div></div>
</template><script>
const moment = require("moment");
import commonUpload from "@/components/commonUpload.vue";
import { addActive, getActive, updateActive } from "@/api/index";
import {deleteUser,addCulture,getCulture,searchUser,getUser,privalUser,updateUser,
} from "@/api/index";
export default {name: "User",data() {return {dialogVisible: false,// 表单字段form: {title: "",desc: "",address: "",detail: "",startTime: "",price: " ",uploadTime: "",number: "",AimgUrl: "",isStart: " ",year: "",},value: 1,// 表單校驗rules: {address: [{ required: true, message: "请输入地址" }],title: [{ required: true, message: "请输入名称" }],desc: [{ required: true, message: "请输入简介" }],detail: [{ required: true, message: "请输入详情" }],},options1: [{value: "0",label: "6-12",},{value: "1",label: "18+",},{value: "2",label: "无限制",},],yearvalue: "",options: [{id: "0",name: "未开始",},{id: "1",name: "已结束",},],// 表单数据tableData: [],total: 0, //页面的总条数modelType: 0, //0表示是新增的弹窗 ，1表示的是编辑userFrom: {username: "",},};},components: {commonUpload,},methods: {// 提交submit() {if (this.modelType == 0) {this.$refs.form.validate((value) => {// 校验为真if (value) {this.form.year = this.options[this.yearvalue].label;this.form.AimgUrl = this.$store.state.upload.imgUrl;this.form.uploadTime = moment().format("YYYY-MM-DD");addActive(this.form).then((res) => {this.$message.success("添加成功");});this.$refs.form.resetFields();this.dialogVisible = false;this.getList();}});} else {this.$refs.form.validate((value) => {// 校验为真if (value) {console.log("value", this.form);updateUser(this.form).then((res) => {// console.log(res);this.$message.success("修改成功");});this.$refs.form.resetFields();this.dialogVisible = false;}});}this.getList();},handleChange(value) {console.log(value);this.form.number = value;},handleOver(e) {let data = {id: e.id,isStart: "1",};// let id = res.id;this.$confirm("确定要结束活动吗？", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then((res) => {updateActive(data).then((res1) => {console.log(res1);this.$message.success(res1.data.msg);this.getList();});});},// 关闭弹窗handleClose() {this.$refs.form.resetFields();this.dialogVisible = false;this.form = {};},// 点击取消按钮cancle() {this.handleClose();},// 表单的编辑handleEdit(res) {this.modelType = 1;this.dialogVisible = true;// 注意到对当前的数据进行深度拷贝this.form = JSON.parse(JSON.stringify(res));console.log(this.form);},//表单的删除handleDelete(res) {// let id = res.id;this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {// 调用删除接口var that = this;deleteUser(res).then((res) => {that.$message({type: "success",message: res.data.data.msg,});});this.getList();}).catch(() => {this.$message({type: "info",message: "已取消删除",});});},// 新增数handleAdd() {(this.modelType = 0), (this.dialogVisible = true);this.form = {};},// 查询数据handleSearch() {searchUser(this.userFrom).then((res) => {console.log(res.data.data);this.tableData = res.data.data.data;// this.getList();});},//分页handlePage(val) {console.log(val);},// 获取数据getList() {getActive().then((res) => {this.tableData = res.data.data;});},},// 挂载mounted() {this.getList();},
};
</script><style lang="less">
.messge {height: 90%;.common-table {position: relative;height: calc(100% - 62px);.page {position: absolute;bottom: 0;right: 20px;}}.text {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.content {margin-left: 40px;display: flex;}.editor {width: 95%;}.manage-hander {display: flex;justify-content: space-between;align-items: center;}
}
.el-table .cell {img {height: 50rpx;}
}
</style>