# manage-system #
基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
[更新日志](https://github.com/lin-xin/vue-manage-system/releases)
## 捐赠
![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)
## 前言 ##
之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成。从寻找组件,到使用组件的过程中,遇到了很多问题,也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验,总结成这个后台管理系统解决方案。
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于vue.js,使用vue-cli脚手架快速生成项目目录,引用Element UI组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。
## 功能 ##
- [x] Element UI
- [x] 登录/注销
- [x] Dashboard
- [x] 表格
- [x] Tab选项卡
- [x] 表单
- [x] 图表 :bar_chart:
- [x] 富文本编辑器
- [x] markdown编辑器
- [x] 图片拖拽/裁剪上传
- [x] 支持切换主题色 :sparkles:
- [x] 列表拖拽排序
- [x] 权限测试
- [x] 404 / 403
## 目录结构介绍 ##
|-- build // webpack配置文件
|-- config // 项目打包路径
|-- src // 源码目录
| |-- components // 组件
| |-- common // 公共组件
| |-- bus.js // Event Bus
| |-- Header.vue // 公共头部
| |-- Home.vue // 公共路由入口
| |-- Sidebar.vue // 公共左边栏
| |-- Tags.vue // 页面切换标签组件
| |-- page // 主要路由页面
| |-- 403.vue
| |-- 404.vue
| |-- BaseCharts.vue // 基础图表
| |-- BaseForm.vue // 基础表单
| |-- BaseTable.vue // 基础表格
| |-- DashBoard.vue // 系统首页
| |-- DragList.vue // 拖拽列表组件
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Premission.vue // 权限测试组件
| |-- Upload.vue // 图片上传
| |-- VueEditor.vue // 富文本编辑器
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 代码编写规格
|-- .gitignore // 忽略的文件
|-- index.html // 入口html文件
|-- package.json // 项目及工具的依赖配置文件
|-- README.md // 说明
## 安装步骤 ##
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
cd vue-manage-system // 进入模板目录
npm install // 安装项目依赖,等待安装完成之后
## 本地开发 ##
// 开启服务器,浏览器访问 http://localhost:8080
npm run dev
## 构建生产 ##
// 执行构建命令,生成的dist文件夹放在服务器下即可访问
npm run build
## 组件使用说明与演示 ##
### vue-schart ###
vue.js封装sChart.js的图表组件。访问地址:[vue-schart](https://github.com/linxin/vue-schart)
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
```JavaScript
<template>
<div>
<schart :canvasId="canvasId"
:type="type"
:width="width"
:height="height"
:data="data"
:options="options"
></schart>
</div>
</template>
<script>
import Schart from 'vue-schart'; // 导入Schart组件
export default {
data: function(){
return {
canvasId: 'myCanvas', // canvas的id
type: 'bar', // 图表类型
width: 500,
height: 400,
data: [
{name: '2014', value: 1342},
{name: '2015', value: 2123},
{name: '2016', value: 1654},
{name: '2017', value: 1795},
],
options: { // 图表可选参数
title: 'Total sales of stores in recent years'
}
}
},
components: {
Schart
}
}
</script>
```
### element-ui ###
一套基于vue.js2.0的桌面组件库。访问地址:[element](http://element.eleme.io/#/zh-CN/component/layout)
### Vue-Quill-Editor ###
基于Quill、适用于Vue2的富文本编辑器。访问地址:[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
(IE10及以下不支持)
### mavonEditor ###
基于Vue的markdown编辑器。访问地址:[mavonEditor](https://github.com/hinesboy/mavonEditor)
### vue-cropperjs ###
一个封装了 cropperjs 的 Vue 组件,用于裁剪图片。访问地址:[vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
## 其他注意事项 ##
### 一、如果我不想用到上面的某些组件呢,那我怎么在模板中删除掉不影响到其他功能呢? ###
举个栗子,我不想用 Vue-Quill-Editor 这个组件,那我需要分四步走。
第一步:删除该组件的路由,在目录 src/router/index.js 中,找到引入改组件的路由,删除下面这段代码。
```JavaScript
{
// 富文本编辑器组件
path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
},
```
第二步:删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
第三步:删除该页面的入口。在目录 src/components/common/Sidebar.vue 中,找到该入口,删除下面这段代码。
```js
{
index: 'editor',
title: '富文本编辑器'
},
```
第四步:卸载该组件。执行以下命令:
npm un vue-quill-editor -S
完成。
### 二、如何切换主题色呢? ###
第一步:打开 src/main.js 文件,找到引入 element 样式的地方,换成浅绿色主题。
```javascript
import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题
```
第二步:打开 src/App.vue 文件,找到 style 标签引入样式的地方,切换成浅绿色主题。
```javascript
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/
```
第三步:打开 src/components/common/Sidebar.vue 文件,找到 el-menu 标签,把 background-color/text-color/active-text-color 属性去掉即可。
## 项目截图 ##
### 默认皮肤 ###
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
### 浅绿色皮肤 ###
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
没有合适的资源?快使用搜索试试~ 我知道了~
金融风控数据平台-基于springboot+springcloud设计实现
共1107个文件
java:650个
xml:82个
js:49个
5星 · 超过95%的资源 需积分: 49 99 下载量 105 浏览量
2019-12-26
11:20:31
上传
评论 8
收藏 104.92MB 7Z 举报
温馨提示
金融风控数据平台-基于springboot+springcloud设计实现 cloud模块包括eureka,config,gateway, springboot模块基于微服务调用方式
资源推荐
资源详情
资源评论
收起资源包目录
金融风控数据平台-基于springboot+springcloud设计实现 (1107个子文件)
.babelrc 488B
PermisFilter.class 5KB
AuthResponseFilter.class 5KB
JwtUtil.class 4KB
StateCode.class 3KB
RmesGatewayLog.class 2KB
ServiceFallbackProvider$1.class 2KB
MyConfiguration.class 2KB
ApiZuulApplication.class 2KB
ErrorFilter.class 1KB
ServiceFallbackProvider.class 968B
ApiEurekaApplication.class 944B
ApiConfigApplication.class 882B
ConfigAppTest.class 665B
AuthorizationController.class 552B
RmesAuthorizationImpl.class 526B
TokenInfoDao.class 485B
RmesAuthorization.class 155B
.classpath 1KB
.classpath 1KB
.classpath 1KB
config 343B
index.css 191KB
iconfont.css 87KB
demo.css 6KB
main.css 3KB
color-green.css 701B
color-dark.css 448B
description 73B
风控平台数据库设计.doc 107KB
权限管理设计文档.docx 634KB
风控平台调用百融查询新接口V2.docx 172KB
V1.0.0-C1-申请信息上报及征信数据查询合并接口.docx 46KB
风控平台INSTINCT接口文档.docx 43KB
V1.0.0-D2-单笔贷款账户数据上报接口.docx 41KB
V1.0.0-D3-单笔贷款贷后数据上报接口.docx 41KB
风控平台调用中诚信征信个人身份验证查询相关接口.docx 39KB
风控平台调用增信通相关接口.docx 29KB
风控平台调用天行数科个人身份查询相关接口.docx 23KB
风控平台GEO接口文档.docx 23KB
风控平台调用查博士车况查询相关接口.docx 20KB
风控平台调用百度黑名单相关接口.docx 20KB
.editorconfig 156B
iconfont.eot 88KB
exclude 240B
.gitignore 48B
.gitignore 9B
.gitignore 9B
.gitignore 9B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
HEAD 209B
HEAD 209B
HEAD 32B
HEAD 23B
demo_symbol.html 201KB
demo_fontclass.html 148KB
demo_unicode.html 134KB
index.html 854B
favicon.ico 914B
pack-4e6606c39cdda1607ef03e835238674654eb21eb.idx 38KB
bqrzzl-rmes-back-vue.iml 469B
index 142KB
bqrzzl-cloud-system-eureka-1.0.5.jar 39.26MB
bsApi-3.5.1-shaded.jar 16MB
guava-16.0.1.jar 2.12MB
ant.jar 1.97MB
aspectjweaver-1.8.7.jar 1.78MB
ojdbc14dms.jar 1.47MB
ojdbc14.jar 1.47MB
mybatis-3.3.0.jar 1.35MB
dubbo-2.5.3.jar 1.3MB
netty-3.7.0.Final.jar 1.15MB
zookeeper-3.4.8.jar 786KB
netty-3.2.5.Final.jar 774KB
DA.jar 746KB
httpclient-4.5.3.jar 730KB
httpclient-4.5.3.jar 730KB
httpclient-4.5.3.jar 730KB
httpclient-4.5.3.jar 730KB
javassist-3.15.0-GA.jar 633KB
c3p0-0.9.1.2.jar 596KB
zmxy-sdk-java-20180323113845.jar 440KB
fastjson-1.2.7.jar 407KB
jcifs-1.3.17-osgi.jar 391KB
log4j-1.2.14.jar 359KB
httpcore-4.4.6.jar 316KB
httpcore-4.4.6.jar 316KB
httpcore-4.4.6.jar 316KB
httpcore-4.4.6.jar 316KB
jtds-1.3.1-osgi.jar 312KB
dms.jar 281KB
curator-framework-2.10.0.jar 191KB
jline-0.9.94.jar 85KB
zkclient-0.7.jar 72KB
curator-client-2.10.0.jar 72KB
共 1107 条
- 1
- 2
- 3
- 4
- 5
- 6
- 12
资源评论
- weixin_449317222021-07-27压缩包损坏了 可以拜托博主重新发一下吗?非常感谢!
步道师就是我
- 粉丝: 5543
- 资源: 10
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功