Vue完整前后台项目介绍

版权声明:本文为博主原创文章,未经博主允许不得转载 https://blog.csdn.net/liujun03/article/details/84492909

vue-manage

此为一个完整的使用vue2.0、vue-cli 3.0、iView3.0 包含前后端的项目

Github地址为vue-manage

vue-manage包含了两个项目,一个为后台项目:vue-serevr-backend,提供基本的数据服务,另一个为前台项目:vue-backend-mange,提供可视化界面服务

后台项目: vue-server-backend

后台项目的启动流程为:

  1. 执行数据库文件

    在这里插入图片描述

    在项目的资源文件夹static目录下是后台的数据库文件,在自己的数据库中新建一个数据库,名为 vue-manage,之后运行SQL文件就可以了

  2. 修改配置文件中数据库的配置

    在这里插入图片描述

    将数据库连接配置改为自己的就可以了

上述两步执行之后,就可以启动整个后台工程了。

前台项目:vue-backend-mange

由于前台项目是根据vue-cli 3.0构建的,所以编译启动之前要将vue-cli升级到3.0

之后的步骤无外乎这几步了:

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build
  1. 项目登录界面:

    在这里插入图片描述

  2. 项目主页:

在这里插入图片描述

主页没写内容,哈哈
  1. 用户管理界面:

    在这里插入图片描述

    用户管理界面基本的增删查改都有,分页功能也包含了。

    导出功能为将后台传回的流文件导出为Excel表格

在这里插入图片描述

用户导入功能为将Excel表格数据导入数据库中
  1. 专辑管理界面

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    专辑管理界面包含基本的增删查改,以及下拉树框,百度富文本框以及文件的上传

  2. 单集管理界面

    在这里插入图片描述

    在这里插入图片描述

    单集管理界面基本的增删查改,图片以及音频文件的上传,以及表格数据的多选操作

  3. 专辑分类

    在这里插入图片描述

    专辑分类界面是一个树形结构界面,自定义iView组件的内容实现,基本的增删查改功能也包含了,Tree组件的异步加载也实现了

猜你喜欢

转载自blog.csdn.net/liujun03/article/details/84492909