【028】仿猫眼、淘票票的电影后台管理和售票系统系统(含后台管理)(含源码、数据库、运行教程)

30 篇文章 6 订阅
17 篇文章 5 订阅


在这里插入图片描述

1.项目概要介绍

前言:这是基于Vue+Node+Mysql的模仿猫眼、淘票票的电影购票系统,有 附源码、数据库、运行教程
技术栈:Vue、element-ui、mint-ui、axios、express、Mysql

项目前端FILM目录:

|-- .gitignore  #git中忽略的文件
|-- index.html  #根文件
|-- package.json  #项目描述文件
|-- README.md  #项目介绍文件
|-- build  #webpack开发和打包的配置文件
|-- config  #vue-cli的配置文件
|-- src #资源文件夹
|   |-- App.vue  #页面入口文件
|   |-- main.js  #程序入口文件
|   |-- api  #请求接口文件
|   |   |-- ajax.js  #基于axios封装ajax文件
|   |   |-- index.js  #调用接口文件
|   |-- common  #公共资源文件
|   |   |-- css
|   |   |   |-- style.css  #字体图标样式文件
|   |   |   |-- fonts  #字体图标文件
|   |   |-- util  #公共工具方法文件
|   |       |-- util.js
|   |-- components  #组件文件
|   |   |-- CinemaDetail  #影院详情组件
|   |   |-- DatePicker  #日期选择器组件
|   |   |-- Login  #登录组件 
|   |   |-- MovieDetail  #电影详情组件
|   |   |   |-- MovieDetail.vue
|   |   |   |-- children
|   |   |   |   |-- CommentPanel.vue  #影评组件
|   |   |-- MovieItem  #单个电影组件
|   |   |-- Pay  #支付组件
|   |   |-- SelectCinema  #选择影院组件
|   |   |-- SelectSeat  #选择座位组件
|   |   |-- SubmitOrder  #提交订单组件
|   |   |-- TabBar  #底部导航组件
|   |-- pages  #页面文件
|   |   |-- Cinema  #影院页
|   |   |   |-- Cinema.vue
|   |   |   |-- children
|   |   |       |-- SearchCinema.vue  #搜索影院页
|   |   |-- Home  #主页
|   |   |   |-- Home.vue
|   |   |   |-- children
|   |   |   |   |-- SearchAll.vue  #全局搜索页
|   |   |-- Movie  #电影页
|   |   |   |-- Movie.vue
|   |   |   |-- children
|   |   |   |   |-- SearchMovie.vue  #搜索电影页
|   |   |-- My  #个人页
|   |       |-- My.vue
|   |       |-- children
|   |       |   |-- ModifyUserName.vue  #修改用户名页
|   |       |   |-- ModifyUserSign.vue  #修改性别页
|   |       |   |-- MyInfo.vue  #个人信息页
|   |       |   |-- MyMovie.vue  #收藏电影页
|   |       |   |-- MyOrder.vue  #订单页
|   |-- router  #路由
|   |   |-- index.js  #路由配置
|   |-- store  #vuex状态管理
|-- static  #静态文件
    |-- css
        |-- adapter.css  #屏幕自适应样式
        |-- reset.css  #兼容性样式

后台管理项目FILM_ADMIN目录

|-- .gitignore  #git中忽略的文件
|-- index.html  #根文件
|-- package.json  #项目描述文件
|-- README.md  #项目介绍文件
|-- build  #webpack开发和打包的配置文件
|-- config  #vue-cli的配置文件
|-- src  #资源文件夹
|   |-- App.vue  #页面入口文件
|   |-- main.js  #程序入口文件
|   |-- api  #请求接口文件
|   |   |-- ajax.js  #基于axios封装ajax文件
|   |   |-- index.js  #调用接口文件
|   |-- common  #公共资源文件
|   |   |-- css
|   |       |-- style.css  #字体图标样式文件
|   |       |-- fonts  #字体图标文件
|   |-- components  #组件文件
|   |-- pages  #页面文件
|   |   |-- Home  #主页
|   |   |   |-- Home.vue
|   |   |   |-- children
|   |   |       |-- CinemaManage.vue  #影院管理页
|   |   |       |-- CommentManage.vue  #评论管理页
|   |   |       |-- HallManage.vue  #影厅管理页
|   |   |       |-- MovieManage.vue  #电影管理页
|   |   |       |-- MovieSchedule.vue  #电影排片页
|   |   |       |-- OrderManage.vue  #订单管理页
|   |   |       |-- UserManage.vue  #用户管理页
|   |   |-- Login  #登录页
|   |       |-- Login.vue
|   |-- router  #路由
|       |-- index.js  #路由配置
|-- static  #静态文件
    |-- css
        |-- reset.css  #兼容性样式

前后台接口FILM_ADMIN目录

|-- .gitignore  #git中忽略的文件
|-- app.js  #启动文件
|-- package.json  #项目描述文件
|-- README.md  #项目介绍文件
|-- bin  #存放可执行文件
|   |-- www
|-- db  #数据库连接文件
|   |-- db.js
|-- public  存放静态资源文件
|   |-- images
|       |-- admin  #存放管理员图片文件
|       |-- avatar  #存放用户图片文件
|       |-- movie  #存放电影海报图片文件
|-- routes  #路由
|   |-- index.js
|-- util  #工具包
|   |-- util.js
|-- views  #视图
    |-- error.ejs
    |-- index.ejs

部分用户账号密码:
管理员账号密码(账号:admin,密码:admin)
在这里插入图片描述

2.用户运行界面截图

用户运行界面截图:
首页:
在这里插入图片描述
电影:在这里插入图片描述

登录在这里插入图片描述
选择电影院、座位在这里插入图片描述
在这里插入图片描述
确认订单、锁定座位
在这里插入图片描述
模拟支付:
在这里插入图片描述
在这里插入图片描述
评分:
在这里插入图片描述
电影评分:
在这里插入图片描述

在这里插入图片描述
个人中心:
在这里插入图片描述

3.后台管理员界面截图

用户管理(增删改查):
在这里插入图片描述
在这里插入图片描述
影院管理:(增删改查)
在这里插入图片描述
在这里插入图片描述

电影管理(新增电影、编辑、删除、查找影片)
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
电影排片(排片、撤销、搜索):
在这里插入图片描述
在这里插入图片描述
评论管理(通过、查找、删除):在这里插入图片描述
订单管理:
在这里插入图片描述

4.后端启动教程

  1. 安装好mysql,不会安装可看这里安装:
    【超详细】MYSQL 8.0 数据库安装与配置教程
  2. 登录数据库,打开sqlyog(不一定得是sqlyog,navicat或者命令行也可以创建数据库),建立好连接后,创建数据库,导入数据文件db_film.sql:
    在这里插入图片描述
    数据库名称:db_film
    在这里插入图片描述
    在这里插入图片描述
    点击执行,导入成功:
    在这里插入图片描述
  3. 切换到目录file_api,根据自己数据库的信息修改数据库配置信息db.js(/film_api/db/db.js)的内容,改为自己数据库的密码
    在这里插入图片描述
  4. npm i 安装依赖
    nodemon app.js启动后端
    在这里插入图片描述在这里插入图片描述

5.前端启动教程

1.切换到目录file_admin,这个是电影后台管理的前端,
npm i 安装依赖
npm start启动项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
打开弹出的网站便可进入售票管理后台
在这里插入图片描述

2.切换到目录FILM,这个是电影购票系统的前端,
npm i 安装依赖
npm start启动项目
在这里插入图片描述
打开弹出的网站便可进入售票网站前台
在这里插入图片描述

6.源码获取

百度云链接:https://pan.baidu.com/s/1nEaWHDCpfeVpsq0zqIJWJg?pwd=syop
提取码:syop

也可以联系cynm-2233获取项目,码字不易,还望三连

  • 11
    点赞
  • 84
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值