基于springboot+vue的影院购票评价系统

精彩专栏推荐订阅：在 下方专栏👇🏻👇🏻👇🏻👇🏻

💖🔥作者主页：计算机毕设木哥🔥 💖

1、项目介绍

**影院购票系统是一个涉及用户界面、座位管理、支付处理等多个模块的复杂系统。下面是一个简要的影院购票系统设计与实现的概述：

1. 系统概述： 影院购票系统旨在为用户提供在线选座、购票和支付服务，使用户能够方便地选择电影、时间、座位，并完成购票流程。
2. 主要模块： 影院购票系统可以划分为以下几个主要模块：
   用户认证与注册： 用户可以注册账户，登录系统，管理个人信息。
   电影信息管理： 管理员可以添加、编辑和删除电影信息，包括电影名称、时长、剧情简介、海报等。
   放映场次管理： 管理员可以设置不同电影的放映时间、影厅，以及可用座位等信息。
   座位选择与管理： 用户可以在选定电影场次后，在座位图上选择座位，系统需要实时显示已被预订的座位。
   购票流程： 用户在选定座位后，需要进入购票流程，包括订单确认、支付方式选择等。
   支付处理： 系统需要与支付网关进行集成，支持用户使用各种支付方式完成支付。
   订单管理： 用户可以查看已购买的订单信息，包括电影名称、座位、放映时间等。
   通知与提醒： 系统可以向用户发送购票成功、放映提醒等通知。**

二、开发环境

• 开发语言：Java
• 数据库：MySQL
• 系统架构：B/S
• 后端：SSM(Spring+SpringMVC+Mybatis)
• 前端：vue
• 工具：IDEA或者Eclipse，JDK1.8，Maven

三、项目展示

首页模块：


管理员模块：

四、代码展示

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>演员管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增演员</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 新增演员表单 -->
    <el-form 
      ref="form" :model="form" :rules="rules"
      label-width="100px" style="width:500px;">
      <el-form-item label="演员姓名" prop="actorName">
        <el-input v-model="form.actorName"></el-input>
      </el-form-item>
      <el-form-item label="演员头像" prop="actorAvatar">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9000/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img 
            v-if="form.actorAvatar" 
            :src="form.actorAvatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">立即新增</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>

<script>
import myaxios from '@/http/MyAxios';
export default {
  data() {
    return {
      form: {
        actorName: '',   // 绑定演员名字
        actorAvatar: '', // 绑定演员头像
      },
      rules:{
        actorName: [{required:true, message:'必填', trigger:'blur'}],
        actorAvatar: [{required:true, message:'必填', trigger:'blur'}],
      }
    }
  },
  methods: {
    submit() {
      // 手动验证表单
      this.$refs['form'].validate(valid=>{
        if(valid){ // 表单验证成功
          console.log('验证成功', this.form)
          // 发送post请求，新增演员信息
          let url = "https://web.codeboy.com/bmdapi/movie-actors/add"
          myaxios.post(url, this.form).then(res=>{
            this.$message({
              message: '恭喜你，演员添加成功',
              type: 'success'
            })
            // 将表单重置
            this.$refs['form'].resetFields()
          })
        }else{ // 表单验证失败
          console.log('验证失败')
        }
      })
    },
    // 处理上传成功后的业务
    handleAvatarSuccess(res, file) {
      console.log(res)
      // 将上传成功后的图片访问路径，存入form对象
      this.form.actorAvatar = res.data
    },

    // 处理上传之前的格式大小验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
};
</script>

<style lang="scss" scoped></style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    display: block;
  }
</style>

5、项目总结

影院购票系统是一个涉及用户界面、座位管理、支付处理等多个模块的复杂系统。下面是一个简要的影院购票系统设计与实现的概述：

1. 系统概述： 影院购票系统旨在为用户提供在线选座、购票和支付服务，使用户能够方便地选择电影、时间、座位，并完成购票流程。
2. 主要模块： 影院购票系统可以划分为以下几个主要模块：
   用户认证与注册： 用户可以注册账户，登录系统，管理个人信息。
   电影信息管理： 管理员可以添加、编辑和删除电影信息，包括电影名称、时长、剧情简介、海报等。
   放映场次管理： 管理员可以设置不同电影的放映时间、影厅，以及可用座位等信息。
   座位选择与管理： 用户可以在选定电影场次后，在座位图上选择座位，系统需要实时显示已被预订的座位。
   购票流程： 用户在选定座位后，需要进入购票流程，包括订单确认、支付方式选择等。
   支付处理： 系统需要与支付网关进行集成，支持用户使用各种支付方式完成支付。
   订单管理： 用户可以查看已购买的订单信息，包括电影名称、座位、放映时间等。
   通知与提醒： 系统可以向用户发送购票成功、放映提醒等通知。