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

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  #兼容性样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

后台管理项目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  #兼容性样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

前后台接口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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

部分用户账号密码：
管理员账号密码（账号：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获取项目，码字不易，还望三连