Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
绝世唐门三哥
Vue Manage System
提交
df14656d
Vue Manage System
项目概览
绝世唐门三哥
/
Vue Manage System
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Vue Manage System
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
df14656d
编写于
4月 23, 2018
作者:
L
lin-xin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
'新增dashboard,移除readme.vue'
上级
96018184
变更
12
显示空白变更内容
内联
并排
Showing
12 changed file
with
271 addition
and
112 deletion
+271
-112
README.md
README.md
+4
-1
README_EN.md
README_EN.md
+4
-1
src/components/common/Sidebar.vue
src/components/common/Sidebar.vue
+2
-2
src/components/common/Tags.vue
src/components/common/Tags.vue
+2
-3
src/components/page/403.vue
src/components/page/403.vue
+1
-1
src/components/page/404.vue
src/components/page/404.vue
+1
-1
src/components/page/Dashboard.vue
src/components/page/Dashboard.vue
+247
-0
src/components/page/Login.vue
src/components/page/Login.vue
+1
-1
src/components/page/Readme.vue
src/components/page/Readme.vue
+0
-88
src/main.js
src/main.js
+4
-2
src/router/index.js
src/router/index.js
+5
-5
static/css/main.css
static/css/main.css
+0
-7
未找到文件。
README.md
浏览文件 @
df14656d
...
...
@@ -37,15 +37,18 @@
| |-- 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 // 权限测试组件
| |-- Readme.vue // 自述组件
| |-- Upload.vue // 图片上传
| |-- VueEditor.vue // 富文本编辑器
| |-- App.vue // 页面入口文件
...
...
README_EN.md
浏览文件 @
df14656d
...
...
@@ -31,15 +31,18 @@ The scheme as a set of multi-function background frame templates, suitable for m
| |-- Header.vue // Header component
| |-- Home.vue // Home component
| |-- Sidebar.vue // Sidebar component
| |-- Tags.vue
| |-- page // Router page
| |-- 403.vue
| |-- 404.vue
| |-- BaseCharts.vue // BaseCharts
| |-- BaseForm.vue // BaseForm
| |-- BaseTable.vue // BaseTable
| |-- Login.vue // Login
| |-- Dashboard.vue
| |-- DragList.vue
| |-- Markdown.vue // Markdown
| |-- Premission.vue
| |-- Readme.vue // Readme
| |-- Upload.vue // Upload
| |-- VueEditor.vue // VueEditor
| |-- App.vue // Main component
...
...
src/components/common/Sidebar.vue
浏览文件 @
df14656d
...
...
@@ -32,8 +32,8 @@
items
:
[
{
icon
:
'
el-icon-setting
'
,
index
:
'
readme
'
,
title
:
'
自述文件
'
index
:
'
dashboard
'
,
title
:
'
系统首页
'
},
{
icon
:
'
el-icon-tickets
'
,
...
...
src/components/common/Tags.vue
浏览文件 @
df14656d
...
...
@@ -40,14 +40,13 @@
if
(
item
)
{
delItem
.
path
===
this
.
$route
.
path
&&
this
.
$router
.
push
(
item
.
path
);
}
else
{
this
.
$router
.
push
(
'
/
readme
'
);
this
.
$router
.
push
(
'
/
'
);
}
},
// 关闭全部标签
closeAll
(){
console
.
log
(
1111
);
this
.
tagsList
=
[];
this
.
$router
.
push
(
'
/
readme
'
);
this
.
$router
.
push
(
'
/
'
);
},
// 关闭其他标签
closeOther
(){
...
...
src/components/page/403.vue
浏览文件 @
df14656d
...
...
@@ -3,7 +3,7 @@
<div
class=
"error-code"
>
4
<span>
0
</span>
3
</div>
<div
class=
"error-desc"
>
啊哦~ 你没有权限访问该页面哦
</div>
<div
class=
"error-handle"
>
<router-link
to=
"/
readme
"
>
<router-link
to=
"/"
>
<el-button
type=
"primary"
size=
"large"
>
返回首页
</el-button>
</router-link>
<el-button
class=
"error-btn"
type=
"primary"
size=
"large"
@
click=
"goBack"
>
返回上一页
</el-button>
...
...
src/components/page/404.vue
浏览文件 @
df14656d
...
...
@@ -3,7 +3,7 @@
<div
class=
"error-code"
>
4
<span>
0
</span>
4
</div>
<div
class=
"error-desc"
>
啊哦~ 你所访问的页面不存在
</div>
<div
class=
"error-handle"
>
<router-link
to=
"/
readme
"
>
<router-link
to=
"/"
>
<el-button
type=
"primary"
size=
"large"
>
返回首页
</el-button>
</router-link>
<el-button
class=
"error-btn"
type=
"primary"
size=
"large"
@
click=
"goBack"
>
返回上一页
</el-button>
...
...
src/components/page/Dashboard.vue
0 → 100644
浏览文件 @
df14656d
<
template
>
<div>
<el-row
:gutter=
"20"
>
<el-col
:span=
"8"
>
<el-row>
<el-col>
<el-card
shadow=
"hover"
class=
"mgb20"
>
<div
class=
"user-info"
>
<img
src=
"static/img/img.jpg"
class=
"user-avator"
alt=
""
>
<div
class=
"user-info-cont"
>
<div
class=
"user-info-name"
>
{{
name
}}
</div>
<div>
{{
role
}}
</div>
</div>
</div>
<div
class=
"user-info-list"
>
上次登录时间:
<span>
2018-01-01
</span></div>
<div
class=
"user-info-list"
>
上次登录地点:
<span>
东莞
</span></div>
</el-card>
<el-card
shadow=
"hover"
>
<div
slot=
"header"
class=
"clearfix"
>
<span>
语言详情
</span>
</div>
Vue
<el-progress
:percentage=
"57.2"
color=
"#42b983"
></el-progress>
JavaScript
<el-progress
:percentage=
"29.8"
color=
"#f1e05a"
></el-progress>
CSS
<el-progress
:percentage=
"11.9"
></el-progress>
HTML
<el-progress
:percentage=
"1.1"
color=
"#f56c6c"
></el-progress>
</el-card>
</el-col>
</el-row>
</el-col>
<el-col
:span=
"16"
>
<el-row
:gutter=
"20"
class=
"mgb20"
>
<el-col
:span=
"8"
>
<el-card
shadow=
"hover"
:body-style=
"
{padding: '0px'}">
<div
class=
"grid-content grid-con-1"
>
<i
class=
"el-icon-view grid-con-icon"
></i>
<div
class=
"grid-cont-right"
>
<div
class=
"grid-num"
>
1234
</div>
<div>
用户访问量
</div>
</div>
</div>
</el-card>
</el-col>
<el-col
:span=
"8"
>
<el-card
shadow=
"hover"
:body-style=
"
{padding: '0px'}">
<div
class=
"grid-content grid-con-2"
>
<i
class=
"el-icon-message grid-con-icon"
></i>
<div
class=
"grid-cont-right"
>
<div
class=
"grid-num"
>
321
</div>
<div>
系统消息
</div>
</div>
</div>
</el-card>
</el-col>
<el-col
:span=
"8"
>
<el-card
shadow=
"hover"
:body-style=
"
{padding: '0px'}">
<div
class=
"grid-content grid-con-3"
>
<i
class=
"el-icon-goods grid-con-icon"
></i>
<div
class=
"grid-cont-right"
>
<div
class=
"grid-num"
>
5000
</div>
<div>
数量
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-card
shadow=
"hover"
:body-style=
"
{ height: '304px'}">
<div
slot=
"header"
class=
"clearfix"
>
<span>
待办事项
</span>
<el-button
style=
"float: right; padding: 3px 0"
type=
"text"
>
添加
</el-button>
</div>
<el-table
:data=
"todoList"
:show-header=
"false"
height=
"304"
style=
"width: 100%;font-size:14px;"
>
<el-table-column
width=
"40"
>
<template
slot-scope=
"scope"
>
<el-checkbox
v-model=
"scope.row.status"
></el-checkbox>
</
template
>
</el-table-column>
<el-table-column>
<
template
slot-scope=
"scope"
>
<div
class=
"todo-item"
:class=
"
{'todo-item-del': scope.row.status}">
{{
scope
.
row
.
title
}}
</div>
</
template
>
</el-table-column>
<el-table-column
width=
"60"
>
<
template
slot-scope=
"scope"
>
<i
class=
"el-icon-edit"
></i>
<i
class=
"el-icon-delete"
></i>
</
template
>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</div>
</template>
<
script
>
export
default
{
data
()
{
return
{
name
:
localStorage
.
getItem
(
'
ms_username
'
),
todoList
:
[
{
title
:
'
今天要修复100个bug
'
,
status
:
false
,
},
{
title
:
'
今天要修复100个bug
'
,
status
:
false
,
},
{
title
:
'
今天要写100行代码加几个bug吧
'
,
status
:
false
,
},
{
title
:
'
今天要修复100个bug
'
,
status
:
false
,
},
{
title
:
'
今天要修复100个bug
'
,
status
:
true
,
},
{
title
:
'
今天要写100行代码加几个bug吧
'
,
status
:
true
,
}
]
}
},
computed
:
{
role
()
{
return
this
.
name
===
'
admin
'
?
'
超级管理员
'
:
'
普通用户
'
;
}
}
}
</
script
>
<
style
scoped
>
.el-row
{
margin-bottom
:
20px
;
}
.grid-content
{
display
:
flex
;
align-items
:
center
;
height
:
100px
;
}
.grid-cont-right
{
flex
:
1
;
text-align
:
center
;
font-size
:
12px
;
color
:
#999
;
}
.grid-num
{
font-size
:
30px
;
font-weight
:
bold
;
}
.grid-con-icon
{
font-size
:
50px
;
width
:
100px
;
height
:
100px
;
text-align
:
center
;
line-height
:
100px
;
color
:
#fff
;
}
.grid-con-1
.grid-con-icon
{
background
:
rgb
(
45
,
140
,
240
);
}
.grid-con-1
.grid-num
{
color
:
rgb
(
45
,
140
,
240
);
}
.grid-con-2
.grid-con-icon
{
background
:
rgb
(
100
,
213
,
114
);
}
.grid-con-2
.grid-num
{
color
:
rgb
(
45
,
140
,
240
);
}
.grid-con-3
.grid-con-icon
{
background
:
rgb
(
242
,
94
,
67
);
}
.grid-con-3
.grid-num
{
color
:
rgb
(
242
,
94
,
67
);
}
.user-info
{
display
:
flex
;
align-items
:
center
;
padding-bottom
:
20px
;
border-bottom
:
2px
solid
#ccc
;
margin-bottom
:
20px
;
}
.user-avator
{
width
:
120px
;
height
:
120px
;
border-radius
:
50%
;
}
.user-info-cont
{
padding-left
:
50px
;
flex
:
1
;
font-size
:
14px
;
color
:
#999
;
}
.user-info-cont
div
:first-child
{
font-size
:
30px
;
color
:
#222
;
}
.user-info-list
{
font-size
:
14px
;
color
:
#999
;
line-height
:
25px
;
}
.user-info-list
span
{
margin-left
:
70px
;
}
.mgb20
{
margin-bottom
:
20px
;
}
.todo-item
{
font-size
:
14px
;
}
.todo-item-del
{
text-decoration
:
line-through
;
color
:
#999
;
}
</
style
>
src/components/page/Login.vue
浏览文件 @
df14656d
...
...
@@ -41,7 +41,7 @@
this
.
$refs
[
formName
].
validate
((
valid
)
=>
{
if
(
valid
)
{
localStorage
.
setItem
(
'
ms_username
'
,
this
.
ruleForm
.
username
);
this
.
$router
.
push
(
'
/
readme
'
);
this
.
$router
.
push
(
'
/
'
);
}
else
{
console
.
log
(
'
error submit!!
'
);
return
false
;
...
...
src/components/page/Readme.vue
已删除
100644 → 0
浏览文件 @
96018184
<
template
>
<div>
<div
class=
"crumbs"
>
<el-breadcrumb
separator=
"/"
>
<el-breadcrumb-item><i
class=
"el-icon-setting"
></i>
自述
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div
class=
"ms-doc"
>
<h3>
README.md
</h3>
<article>
<h1>
manage-system
</h1>
<p>
基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案
</p>
<h2>
前言
</h2>
<p>
之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成。从寻找组件,到使用组件的过程中,遇到了很多问题,也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验,总结成这个后台管理系统解决方案。
</p>
<p>
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于vue.js,使用vue-cli脚手架快速生成项目目录,引用Element UI组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。
</p>
<h2>
功能
</h2>
<el-checkbox
disabled
checked
>
Element UI
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
登录/注销
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
表格
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
表单
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
图表
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
富文本编辑器
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
markdown编辑器
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
图片拖拽/裁剪上传
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
支持切换主题色
</el-checkbox>
<br>
<el-checkbox
disabled
checked
>
列表拖拽排序
</el-checkbox>
<br>
</article>
</div>
</div>
</
template
>
<
style
scoped
>
.ms-doc
{
width
:
100%
;
max-width
:
980px
;
font-family
:
-apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
Helvetica
,
Arial
,
sans-serif
;
}
.ms-doc
h3
{
padding
:
9px
10px
10px
;
margin
:
0
;
font-size
:
14px
;
line-height
:
17px
;
background-color
:
#f5f5f5
;
border
:
1px
solid
#d8d8d8
;
border-bottom
:
0
;
border-radius
:
3px
3px
0
0
;
}
.ms-doc
article
{
padding
:
45px
;
word-wrap
:
break-word
;
background-color
:
#fff
;
border
:
1px
solid
#ddd
;
border-bottom-right-radius
:
3px
;
border-bottom-left-radius
:
3px
;
}
.ms-doc
article
h1
{
font-size
:
32px
;
padding-bottom
:
10px
;
margin-bottom
:
15px
;
border-bottom
:
1px
solid
#ddd
;
}
.ms-doc
article
h2
{
margin
:
24px
0
16px
;
font-weight
:
600
;
line-height
:
1.25
;
padding-bottom
:
7px
;
font-size
:
24px
;
border-bottom
:
1px
solid
#eee
;
}
.ms-doc
article
p
{
margin-bottom
:
15px
;
line-height
:
1.5
;
}
.ms-doc
article
.el-checkbox
{
margin-bottom
:
5px
;
}
</
style
>
\ No newline at end of file
src/main.js
浏览文件 @
df14656d
...
...
@@ -12,8 +12,10 @@ Vue.prototype.$axios = axios;
//使用钩子函数对路由进行权限跳转
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
if
(
to
.
meta
.
permission
){
const
role
=
localStorage
.
getItem
(
'
ms_username
'
);
if
(
!
role
){
next
(
'
/login
'
);
}
else
if
(
to
.
meta
.
permission
){
// 如果是管理员权限则可进入,这里只是简单的模拟管理员权限而已
role
===
'
admin
'
?
next
()
:
next
(
'
/403
'
);
}
else
{
...
...
src/router/index.js
浏览文件 @
df14656d
...
...
@@ -7,17 +7,17 @@ export default new Router({
routes
:
[
{
path
:
'
/
'
,
redirect
:
'
/
login
'
redirect
:
'
/
dashboard
'
},
{
path
:
'
/
readme
'
,
path
:
'
/
'
,
component
:
resolve
=>
require
([
'
../components/common/Home.vue
'
],
resolve
),
meta
:
{
title
:
'
自述文件
'
},
children
:[
{
path
:
'
/
'
,
component
:
resolve
=>
require
([
'
../components/page/
Readme
.vue
'
],
resolve
),
meta
:
{
title
:
'
自述文件
'
}
path
:
'
/
dashboard
'
,
component
:
resolve
=>
require
([
'
../components/page/
Dashboard
.vue
'
],
resolve
),
meta
:
{
title
:
'
系统首页
'
}
},
{
path
:
'
/table
'
,
...
...
static/css/main.css
浏览文件 @
df14656d
...
...
@@ -103,13 +103,6 @@ a {
padding-bottom
:
0
;
}
/*Readme*/
.ms-doc
.el-checkbox__input.is-disabled
+
.el-checkbox__label
{
color
:
#333
;
cursor
:
pointer
;
}
/*Upload*/
.pure-button
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录