基于微信小程序的博物館預約系統的設計與實現

在這里插入圖片描述

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>