基于微信小程序的博物馆预约系统的设计与实现
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">
<view
class="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-form
ref="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-picker
v-model="form.startTime"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="名额" prop="number">
<el-input-number
v-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-option
v-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-editor
ref="myQuillEditor"
v-model="form.desc"
class="editor"
/>
</el-form-item>
<el-form-item label="详情" class="content" prop="detail">
<quill-editor
ref="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"
border
stripe
height="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-image
style="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-button
type="primary "
size="mini"
@click="handleOver(scope.row)"
>结束活动</el-button
>
<el-button
type="danger"
size="mini"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
class="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>
相关选题
1.基于微信小程序的图书馆预约系统的设计与实现
2.基于微信小程序的实验室预约系统的设计与开发
3.基于微信小程序的番茄时钟的设计与实现（课设&毕设）
4.基于微信小程序的自习室预约系统的设计与实现
5.基于Uni-app的体育场馆预约系统的设计与实现
6.基于微信小程序的在线答题小程序设计与实现
7.基于微信小程序的医院预约挂号系统的设计与实现
8、源码获取
大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻
