Vue&Project DAY03

百慕大影城后台管理项目实践

1. 项目立项。（领导决定，干一个项目。）

   项目背景：有一个老板开了一家私人电影院，最后越做越强，开成了连锁店，想写一套系统来管理电影院的运营：用户可以通过前台手机端进行电影的查看，电影院检索，选择电影院，选座，买票，观影。系统管理员可以通过后台PC端项目进行电影院的管理、演员的管理、导演管理、放映厅管理、排片计划的管理等。

2. 需求分析

3. 原型设计

   目标：搞清楚有多少个页面，每个页面有多少个功能，每个功能的复杂度大概多少，直至可以预估工期与成本。

4. 数据库设计

5. 编码

6. 测试

7. 上线

在本机搭建后端服务运行环境

1. 安装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;

2. 通过可视化工具navicat、mysql workbench，查看数据库的结构及内容

3. 启动后端项目。

   后端项目：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 
   

4. 测试接口：

   http://localhost:3010/movie-types
   

   返回所有的电影类型。

在本机搭建前端脚手架运行环境

1. 新建项目：bmdstudios-ms-client。

   vue create bmdstudios-ms-client
   

   选择合适的配置，使用Vue2.x生成脚手架项目包。

2. 进入项目目录中，安装项目中所需要的模块：

   cd bmdstudios-ms-client
   npm i element-ui -S
   npm i axios
   npm i qs
   

3. main.js中引入配置，引入ElementUI。

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);
   

4. ftp中已经上传了一个HomeView.vue，还上传了 logo.svg。替换相应目录下的资源， 配置路由查看效果。

   1. HomeView.vue覆盖掉views/HomeView.vue。
   2. 将logo.svg放入src/assets/下即可访问：http://localhost:8080。

功能实现

为后台管理项目设计嵌套路由

1. 明确页面需求，了解都有哪些页面，根据页面的结构，设计嵌套路由：

   http://localhost:8080/home/index   看到主体结构中嵌套index页面
   http://localhost:8080/home/actor-list  看到主体结构中嵌套 演员列表页
   http://localhost:8080/home/actor-add  看到主体结构中嵌套 演员添加页
   

2. 准备所需要的组件：

   1. src/views/Index.vue
   2. src/views/actor/ActorList.vue
   3. src/views/actor/ActorAdd.vue

3. 配置嵌套路由：

   配置  /home  指向HomeView.vue
   配置  /home/index
   配置  /home/actor-list
   配置  /home/actor-add
   

4. 在el-main中添加占位符：<router-view />

完成演员列表页面中的功能

需求整理分析：

1. 准备好演员列表静态页面。
2. 当页面挂载完毕后，发送http请求，加载基础演员列表并显示。
3. 当用户输入姓名，点击查询后，发送http请求，模糊查询演员列表并显示。