Vue
DAY08
百慕大影城后台管理项目实践
-
项目立项。(领导决定,干一个项目。)
项目背景:有一个老板开了一家私人电影院,最后越做越强,开成了连锁店,想写一套系统来管理电影院的运营:用户可以通过前台手机端进行电影的查看,电影院检索,选择电影院,选座,买票,观影。系统管理员可以通过后台PC端项目进行电影院的管理、演员的管理、导演管理、放映厅管理、排片计划的管理等。
-
需求分析
-
原型设计
目标:搞清楚有多少个页面,每个页面有多少个功能,每个功能的复杂度大概多少,直至可以预估工期与成本。
-
数据库设计
-
编码
-
测试
-
上线
在本机搭建后端服务运行环境
- 安装
mysql
,初始化bmdstudios.sql
脚本。(使用命令行)
如上图,保证mysql
服务为已经启动的状态,默认占用3306
端口。 点击shell
按钮打开命令行,执行命令,登录mysql
,登录成功之后,执行如下命令,创建数据库,使用数据库,执行外部sql
脚本。
# 登录mysql,输入密码 (默认是空)
mysql -uroot -p
# 创建数据库 数据库的名字:bmdstudios
create database bmdstudios default charset utf8;
# 使用数据库 将bmdstudios设置为当前数据库
use bmdstudios;
# 【选做】如果数据库创建错误,先删除数据库,重新初始化
show databases;
drop database bmdstudios;
执行mysql
提供的source
命令,该命令可以在当前环境下运行磁盘下的某一个sql
文件:
source E:/bmdstudios.sql
# mac
source /Users/xxxx/bmdstudio.sql
运行完毕后,数据库表初始化完毕,通过命令,可以查看数据库环境:
show tables;
- 通过可视化工具
navicat
、mysql workbench
,查看数据库的结构及内容
-
启动后端项目。
后端项目:
bmdstudios-server
。其中提供了两个服务:index.js
uploadserver.js
。使用node命令启动两个服务:
index.js:3010
uploadserver.js:9000
node index.js node uploadserver.js
使用**
pm2
进程管理工具启动这两个服务,在pm2工具
**安装完毕后,执行命令即可启动这两个服务:npm install -g pm2 # 安装pm2 进程管理工具 # 在bmdstudios-server文件夹下,执行命令,启动两个服务 pm2 start index.js pm2 start uploadserver.js
停止服务:
pm2 stop index pm2 stop uploadserver
重启服务:
pm2 restart index pm2 restart uploadserver
查看服务的状态:
pm2 status
查看服务器的日志文本:
pm2 logs
-
测试接口:
http://localhost:3010/movie-types
返回所有的电影类型。
在本机搭建前端脚手架运行环境
-
新建项目:
bmdstudios-ms-client
。vue create bmdstudios-ms-client
选择合适的配置,使用
Vue2.x
生成脚手架项目包。 -
进入项目目录中,安装项目中所需要的模块:
cd bmdstudios-ms-client npm i element-ui -S npm i axios npm i qs
-
main.js
中引入配置,引入ElementUI
。import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
-
ftp
中已经上传了一个HomeView.vue
,还上传了logo.svg
。替换相应目录下的资源, 配置路由查看效果。HomeView.vue
覆盖掉views/HomeView.vue
。- 将
logo.svg
放入src/assets/
下即可访问:http://localhost:8080
。
功能实现
为后台管理项目设计嵌套路由
-
明确页面需求,了解都有哪些页面,根据页面的结构,设计嵌套路由:
http://localhost:8080/home/index 看到主体结构中嵌套index页面 http://localhost:8080/home/actor-list 看到主体结构中嵌套 演员列表页 http://localhost:8080/home/actor-add 看到主体结构中嵌套 演员添加页
-
准备所需要的组件:
src/views/Index.vue
src/views/actor/ActorList.vue
src/views/actor/ActorAdd.vue
-
配置嵌套路由:
配置 /home 指向HomeView.vue 配置 /home/index 配置 /home/actor-list 配置 /home/actor-add
-
在
el-main
中添加占位符:<router-view />
完成演员列表页面中的功能
需求整理分析:
- 准备好演员列表静态页面。
- 当页面挂载完毕后,发送
http
请求,加载基础演员列表并显示。 - 当用户输入姓名,点击查询后,发送
http
请求,模糊查询演员列表并显示。