![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/55f548dc6c650cd852c860f44078caff.jpeg#pic_center)
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.后端启动教程
- 安装好mysql,不会安装可看这里安装:
【超详细】MYSQL 8.0 数据库安装与配置教程
- 登录数据库,打开sqlyog(不一定得是sqlyog,navicat或者命令行也可以创建数据库),建立好连接后,创建数据库,导入数据文件db_film.sql:
数据库名称:db_film
点击执行,导入成功:
- 切换到目录file_api,根据自己数据库的信息修改数据库配置信息db.js(/film_api/db/db.js)的内容,改为自己数据库的密码
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获取项目,码字不易,还望三连