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

在这里插入图片描述

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>