基于springboot vue电影购票系统源码和论文

影票在线预订系统

电子商务带领传统行业进入了新的发展时代，“互联网+”模式使传统的电影 院焕发了新的生命力。电影票在线预订系统是电子商务与传统影院销售模式的一 种融合，将票务销售和影院管理转移到网络上进行，方便用户及时方便的查询和 预定票务信息。与传统的影院人工购票不同，电影票在线销售系统能够提供高效， 稳定，方便的购票体验。不仅减少了人工统计出错和低效的问题，而且可以通过 大量的数据统计获取用户对于影片的喜好程度，影院可以根据这些信息进行更合 理的排片计划。

本文探讨和设计了一个电影票在线销售系统，整个系统的设计大体可以分为 三个部分，用户功能，客服功能和管理员管理的功能。用户部分涉及到用户的注册登录，选购 影院，影片和座位以及在线支付的功能。后台管理部分为管理员管理的功能，主 要包括对普通管理员的权限分配，影片、影厅、购票管理，统计影片信息，用户 信息管理等功能。系统充分实现了一个普通用户购买映票的整个过程，其中包括 了支付等环节，以及其相对应的可能涉及到的退款等操作。

本系统在设计上使用了目前较为流行的 JAVAWEB 技术，综合了springboot VUE 等框架进行设计，通过 Maven 项目管理工具对项目进行 构建，使用开源免费的MySQL数据库作为持久化存储，并使用了 Druid开源框架 作为数据库的连接池，前台采用了目前较为流行的VUE框架进快速开发，系统开发的集成开发环境选取 了目前较为流行的Java开发环境Intellij IDEA。整个系统采用分层设计的思 想，每层独立其功能和设计，通过Spring管理各个层之间的依赖和注入关系等。 在设计上使用了 MVC的设计模式，将逻辑层与展示层进行分离，通过控制层来实现逻辑的映射关系。

本文讲述了影票预订系统目前的发展现状以及国内外的情况，在此基础上对 系统进行需求分析和设计。侧重于对系统的分析与设计，在分析基础之上对系统 的模块进行了划分，并按照需求设计进行了要求进行了网上的设计。

关键字：影票预订，JAVAWEB，电子商务，springboot框架

【531】基于springboot vue电影购票系统源码和论文

Abstract

Movie ticket online booking System

lE-commerce has led traditional industries into a new era of development. The "Internet +" model has given new vitality to traditional cinemas. The online booking system of movie tickets is an integration of e-commerce and traditional cinema sales mode, which transfers ticket sales and Cinema Management to the network, making it convenient for users to query and book ticket information in a timely and convenient manner. Unlike the traditional manual ticket purchase in cinemas, the online ticket sales system can provide an efficient, stable and convenient ticket purchase experience. It not only reduces the problems of manual statistics errors and inefficiency, but also obtains users' preferences for movies through a large number of data statistics, and cinemas can make more reasonable film scheduling plans based on this information.

This paper discusses and designs an online movie ticket sales system. The design of the whole system can be divided into three parts: user function, customer service function and administrator management function. The user part involves the functions of user registration and login, choosing cinemas, movies and seats, and online payment. The background management part is the function of administrator management, mainly including the authority allocation of ordinary administrators, film, theater, ticket purchase management, statistical film information, user information management and other functions. The system fully realizes the whole process of an ordinary user purchasing tickets, including payment and other links, as well as the corresponding possible refunds and other operations.

The design of this system uses the currently popular JavaWeb technology, integrates springboot Vue and other frameworks for design, builds the project through Maven project management tools, uses the open source free MySQL database as persistent storage, and uses the Druid open source framework as the connection pool of the database. The foreground adopts the currently popular Vue framework for rapid development, The integrated development environment of system development selects IntelliJ idea, a popular java development environment at present. The whole system adopts the idea of hierarchical design, each layer is independent of its function and design, and the dependency and injection relationship between each layer are managed through spring. MVC design pattern is used in the design, which separates the logic layer from the presentation layer, and realizes the logical mapping relationship through the control layer.

This paper describes the current development status of the movie ticket reservation system and the situation at home and abroad, on this basis, the system needs analysis and design. It focuses on the analysis and design of the system, divides the modules of the system based on the analysis, and designs the online according to the requirements of the design.

Keywords: movie ticket booking, JavaWeb, e-commerce

<template>
    <div class="login">
        <div class="background">
            <img :src="imgSrc" width="100%" height="100%" alt="" />
        </div>
        <div class="login-form">
            <div class="login-form-header">
                <img style="width: 75px; height: 75px;float: left;padding-right: 30px;" src="../assets/img/logo.png"
                     alt=""/>
                <div class="login-form-text">小小影院 - 后台管理</div>
            </div>
            <div style="color: #000000;font-weight: bolder">

                <p style="font-size: 20px">用户名</p>
                <el-input class="login-form-input" v-model="username" placeholder="账 号"></el-input>
                <el-alert
                        v-if="usernameError"
                        title="请您输入不少于6位的用户名"
                        type="error"
                        show-icon>
                </el-alert>

                <p style="font-size: 20px">密码</p>
                <el-input class="login-form-input" placeholder="密 码" v-model="password" show-password></el-input>
                <el-alert
                        v-if="passwordError"
                        title="请您输入不少于6位的密码"
                        type="error"
                        show-icon>
                </el-alert>

                <p style="font-size: 20px">角色</p>
                <el-select style="width: 100%" class="login-form-input" v-model="role" placeholder="请选择你的身份">
                    <el-option label="系统管理员" value="admin"></el-option>
                    <el-option label="工作人员" value="worker"></el-option>
                </el-select>
                <el-alert
                        v-if="roleError"
                        title="请您选择登入的身份"
                        type="error"
                        show-icon>
                </el-alert>

                <div style="padding-top: 10px">
                    <el-checkbox v-model="remember" style="color: #000000">记住密码</el-checkbox>
                    <div style="float: right">
                        <el-tooltip class="item" effect="dark" content="请联系管理员修改" placement="bottom">
                            <el-link style="font-weight: bolder;font-size: 14px;color: #000000;"
                                     :underline="false">
                                忘记密码?
                            </el-link>
                        </el-tooltip>
                    </div>
                </div>
                <el-button :loading="loading" @click="postLogin" class="login-form-button" type="primary">登录
                </el-button>
            </div>
            <div class="login-form-footer">
                <div style="font-weight: bolder;font-size: 16px;color: #000000;"
                     :underline="false">
                    小小影院 - 后台管理
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {Login} from "@/api/user"

    export default {
        data() {
            return {
                loading: false,
                role: '',
                username: '',
                password: '',
                remember: false,
                usernameError: false,
                passwordError: false,
                roleError: false,
                imgSrc:require('../assets/bg2.png')
            }
        },
        methods: {
            postLogin() {
                this.loading = true;
                const LoginData = {
                    username: this.username,
                    password: this.password,
                    remember: this.remember,
                };

                if (LoginData.username.length <= 5) {
                    setTimeout(() => {
                        this.loading = false;
                        this.usernameError = true;
                    }, 700)
                    return
                } else {
                    this.usernameError = false;
                }

                if (LoginData.password.length <= 5) {
                    setTimeout(() => {
                        this.loading = false;
                        this.passwordError = true;
                    }, 700)
                    return
                } else {
                    this.passwordError = false;
                }

                if (!this.role) {
                    setTimeout(() => {
                        this.loading = false;
                        this.roleError = true;
                    }, 700)
                    return
                } else {
                    this.roleError = false;
                }

                Login(this.role, LoginData).then(res => {
                    if (!res.success) {
                        setTimeout(() => {
                            this.loading = false;
                        }, 700)
                    } else {
                        setTimeout(() => {
                            //登陆成功
                            console.log(res.data)
                            localStorage.setItem("token", res.data.token)
                            if (this.role === 'worker') {
                                localStorage.setItem("wid", res.data.worker.id)
                            }
                            localStorage.setItem("role", this.role)
                            this.$router.push("/")
                            this.loading = false;
                        }, 700)
                    }
                })

            }
        }
    }
</script>

<style scoped>
    .background{
        width:100%;
        height:100%;  /**宽高100%是为了图片铺满屏幕 */
        z-index:-1;
        position: absolute;
    }
    /*.login {*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    background: #FFFFFF;*/
    /*}*/

    .login-form {
        width: 500px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        letter-spacing: 2px;
    }

    .login-form-header {
        height: 20px;
        padding-left: 40px;
        padding-bottom: 100px;
    }

    .login-form-text {
        color: #000000;
        font-weight: bold;
        font-size: 30px;
        padding-top: 15px;
    }

    .login-form-input {
        margin-bottom: 10px;
    }

    .login-form-button {
        border-radius: 3px;
        width: 100%;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 2px;
        height: 60px;
        background: #5a84fd;
        box-shadow: 0 5px 30px rgb(0 66 8.5%);
        margin-top: 35px;
    }

    .login-form-footer {
        font-weight: bolder;
        color: #91949c;
        padding-top: 40px;
        text-align: center;
    }

    >>> .el-input__inner {
        height: 48px;
    }

    .el-checkbox {
        color: #91949c;
        font-weight: bolder;
        font-size: 15px;
    }

</style>

<template>
  <div class="main">

    <el-table
        v-loading="loading"
        :data="orders"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单ID：">
              <span>{{ props.row.order.id }}</span>
            </el-form-item>
            <el-form-item label="用户ID：">
              <span>{{ props.row.user.id }}</span>
            </el-form-item>
            <el-form-item label="电影ID：">
              <span>{{ props.row.film.id }}</span>
            </el-form-item>
            <el-form-item label="场次ID：">
              <span>{{ props.row.arrangement.id }}</span>
            </el-form-item>
            <el-form-item label="电影名：">
              <span>《 {{ props.row.film.name }} 》</span>
            </el-form-item>
            <el-form-item label="座位号：">
              <span>{{ props.row.order.seats }}</span>
            </el-form-item>
            <el-form-item label="订单金额：">
              <span>{{ props.row.order.price }}</span>
            </el-form-item>
            <el-form-item label="下单时间：">
              <span>{{ props.row.order.createAt }}</span>
            </el-form-item>
            <el-form-item label="支付时间：">
              <span>{{ props.row.order.payAt }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="订单 ID"
          width="400"
          prop="order.id">
      </el-table-column>
      <el-table-column
          width="200"
          label="订单金额"
          prop="order.price">
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.order.status === 2" type="success">支付成功</el-tag>
          <el-tag v-if="scope.row.order.status === 0" type="info">等待支付</el-tag>
          <el-tag v-if="scope.row.order.status === 3" type="warning">已被撤销</el-tag>
          <el-tag v-if="scope.row.order.status === 1" type="danger">支付失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button @click="handle1(scope.$index, scope.row.order)" size="small" type="warning"
                     icon="el-icon-refresh-right"
                     :disabled="scope.row.order.status === 3"
                     plain>撤销订单
          </el-button>
          <el-button @click="handle2(scope.$index, scope.row.order)" size="small" type="danger"
                     icon="el-icon-circle-close"
                     plain>上报异常
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="上报异常表单" :visible.sync="dialogFormVisible">
      <el-form :model="form" style="width: 400px">
        <el-form-item style="width: 100%" label="上报人" label-width="120px">
          <el-input v-model="form.reason" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%" label="上报原因" label-width="120px">
          <el-input v-model="form.reviewer" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {CreateOrderException, FindAllOrder, UpdateOrder} from "@/api/order";

export default {

  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      orders: [],
      form: {
        oid: '',
        reason: '',
        reviewer: '',
      },
    }
  },

  mounted() {
    this.loadOrderList()
  },

  methods: {

    loadOrderList() {
      this.loading = true
      FindAllOrder().then(res => {
        if (res.success) {
          setTimeout(() => {
            this.orders = res.data
            this.loading = false
          }, 700)
        }
      })
    },

    handle1(index, order) {
      this.orders[index].order.status = 3
      UpdateOrder(this.orders[index].order).then(res => {
        console.log(res)
        this.loadOrderList();
        this.$message({
          type: 'success',
          message: '订单撤销成功!'
        });
      })
    },

    handle2(index, order) {
      this.form.oid = order.id
      this.dialogFormVisible = true
    },

    submit() {
      CreateOrderException(this.form).then(res => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '订单异常上报成功!'
          });
          this.dialogFormVisible = false
        }
      })
    }

  }

}
</script>

<style scoped>
.main {
  padding: 30px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>