# 后台管理系统

**Repository Path**: pengfeilv/background_management_system

## Basic Information

- **Project Name**: 后台管理系统
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-08-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# operate-system

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test
```

## 开发记录

- 角色列表的增删改查
- 角色列表的分页引入
- 表单校验方法（放在添加用户或是文章中、配置复杂的校验）
- api接口引入（多个api接口，配置，增加一个mockjs接口）
- 将上一步的api接口分组调用mock  api
- 上传图像处理
- 全局header添加参数
- 登录页面处理（增加极验验证）




### 使用技术

- vue、vuex、axios、vue-router
- mockjs、elementui
- 封装组件：上传腾讯云组件、分页组件
- 插件

### 后台组成
- 系统设置：修改密码、上传图像
- 管理员列表：增删改查
- 页面加载动画


### 主要实现
- 后台管理基于vue+elementUi构建
- mockjs引入模拟数据（get方法传递参数得使用）
- 上传组件的构建
- 换肤效果展示
- 页面切换动画
- 权限管理
- scss 配置（不需要编译直接使用）
- 菜单的拖动
- 滑过展开搜索框
- 封装ui库，上传npm,并应用于自己的项目
- 前端数据筛选
- 自己封装一个分页组件

## 样式实现
- 管理后台折叠菜单的实现
- 各种管理后台目录的展示方式，实现技巧


---

## 已完成
- 页面后台页面布局
- nprogress进度条使用
- 页面导航面包屑的统一引入
- 父子组件的传值
- 将axios统一调用接口
- 富文本组件的引入
- 路由懒加载
- 统计数据：echart
- 全局过滤组件的配置
- 


## 各种小技巧汇总

- 页面懒加载
- 加载动画
- 封装组件注意组件值冲突
- 统一调用接口
- 路由拦截
- 路由切换路由未刷新
- 找不到路由404页面
- echart 引入
- highchart 引入


```
一、阿里：鼠标滑过展开，没有展开的固定，大类下面另外生成细分菜单类目录，分类菜单可以选择折叠展开，目录可拖动可删除
腾讯：选择了可控制的目录菜单折叠展开，最上header增加了可配置模块，个人感觉比较好，增加最上面的云产品，滑过显示全部产品，腾讯的滚动条做的很棒

二、

```



## 备注

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).