Vue电影项目

项目地址：https://github.com/J1ong/FilmSys

介绍

这是个人开发的电影售票管理项目，采用的是较为流行的Vue框架和Node的Express框架。

前端页面展示：

后台展示：

项目说明

整体项目目录

├── film 前端页面项目文件
├── film_admin 后台管理系统
├── film_api 前后台接口文件
├── db_film.sql 数据库文件

1. 拉取项目

#依次执行以下命令
git clone https://github.com/J1ong/FilmSys.git
cd FilmSys
cd film
npm install
cd ../film_admin
npm install
cd ../film_api
npm install

2. 导入数据文件db_film.sql (我这里使用的数据库是mysql,用户：root,密码：123456)

3. 项目细节

3.1前端页面项目目录

|-- .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 #兼容性样式

3.2后台管理项目目录

|-- .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 #兼容性样式

3.3前后台统一接口项目目录

|-- .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

4. 启动项目

4.1 启动前后台接口项目（必须先启动）

#输入命令前要先进入到film_api中
nodemon app.js

4.2 启动前端页面项目

#输入命令前同样需要进入到film中
npm start

4.3 启动后台管理项目

#输入命令前同样需要进入到film_admin中
npm start

5. 最后

浏览器地址栏输入http://localhost:8080/ 可看前端页面，切换到移动设备就可以正常看到移动版页面了
浏览器地址栏输入http://localhost:8081/ 可到后台登录界面（账号：admin，密码：admin）
接口服务器启动在3000端口

最后的最后

更多功能还会持续开发更新，欢迎大家交流学习！