Vue-project 影城后台管理项目实践

DAY1

项目前期构想：

1、项目立项。

项目背景：

2、需求分析

3、原型设计

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

4、数据库设计

5、编码

6、测试

7、上线

 搭建后端服务运行环境

1、安装MySQL，初始化数据脚本。（略）

2、通过可视化工具navicat、MySQL workbench，查看数据库的结构及内容。（略）

3、启动后端项目。

后端项目：bmdstudios-server。

使用node命令启动两个服务：index.js : 3010 、uploadserver.js : 9000

使用 pm2 进程管理工具启动这两个服务，在 pm2工具安装完毕后，执行命令即可启动这两个服务：

npm  install  -g  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

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

1、新建项目：bmdstudios-ms-client（使用vue2.x生成脚手架项目包）

vue create bmdstudios-ms-client

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

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、明确页面需求，了解有哪些页面，根据页面的结构，设计嵌套路由：

2、准备所需要的组件：

3、配置嵌套路由：

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