jinql
/
vue-element-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refine code && document

pull/437/head
Pan 2017-06-14 18:02:12 +08:00
parent f82ec2d5d7
commit bd607b4728
26 changed files with 143 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -8,11 +8,9 @@
**注意：该项目目前使用element-ui@1.3.3版本,所以最低兼容 Vue 2.3.0**
## 前言
> 这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在次项目基础上改造开发时请移除mock文件。
> 这半年来一直在用vue写管理后台，目前后台已经有百来个个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包.由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在次项目基础上改造开发时请移除mock文件。
后续会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统（如权限验证，二次登录等），如何二次开发组件（如富文本），如何整合七牛等等文章，各种后台开发经验等等。莫急~~
相应需求，开了一个qq群 591724180 方便大家交流
写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
@ -20,12 +18,14 @@
- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手，带你封装一个vue component](https://segmentfault.com/a/1190000009090836)
相应需求，开了一个qq群 591724180 方便大家交流
**如有问题请先看上述文章和Wiki,若不能满足，欢迎issue和pr~**
**该项目并不是一个脚手架，更倾向于是一个集成解决方案方案**
**该项目不支持低版本游览器，有需求请自行添加polyfill[详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
## 功能
- 登录/注销
@ -47,6 +47,7 @@
- table example
- 动态table example
- 拖拽table example
- 内联编辑table example
- form example
- 多环境发布
- dashboard

1
src/components/Charts/mixchart.vue
View File

@ -51,7 +51,6 @@
backgroundColor: '#344b58',
title: {
text: '统计',
subtext: 'from http://gallery.echartsjs.com',
x: '4%',
textStyle: {
color: '#fff',

2
src/views/charts/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="components-container" >
<code>
这里的所有的图表都基于echarts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实echarts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。
这里的所有的图表都基于ECharts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实ECharts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。<a target='_blank' class='lin' href="https://segmentfault.com/a/1190000009762198#articleHeader16">相关教程</a>
</code>
</div>
</template>

11
src/views/charts/keyboard.vue
View File

@ -1,14 +1,13 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<keyboardChart height='100%' width='100%' />
<keyboardChart height='100%' width='100%' />
</div>
</div>
</template>
<script>
import keyboardChart from 'components/Charts/keyboard';
export default {
components: { keyboardChart }
};
@ -16,9 +15,9 @@
<style scoped>
.chart-container{
position: relative;
width: 100%;
height: 90%;
position: relative;
width: 100%;
height: 90%;
}
</style>

11
src/views/charts/keyboard2.vue
View File

@ -1,14 +1,13 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<keyboardChart2 id='apple' height='100%' width='100%' />
<keyboardChart2 id='apple' height='100%' width='100%' />
</div>
</div>
</template>
<script>
import keyboardChart2 from 'components/Charts/keyboard2';
export default {
components: { keyboardChart2 }
};
@ -16,9 +15,9 @@
<style scoped>
.chart-container{
position: relative;
width: 100%;
height: 90%;
position: relative;
width: 100%;
height: 90%;
}
</style>

13
src/views/charts/line.vue
View File

@ -1,16 +1,13 @@
<template>
<div class="components-container" style='height:100vh'>
https://github.com/ecomfe/echarts/blob/master/index.js
http://echarts.baidu.com/tutorial.html
<div class='chart-container'>
<lineMarker height='100%' width='100%' />
<lineMarker height='100%' width='100%' />
</div>
</div>
</template>
<script>
import lineMarker from 'components/Charts/lineMarker';
export default {
components: { lineMarker }
};
@ -18,9 +15,9 @@
<style scoped>
.chart-container{
position: relative;
width: 100%;
height: 80%;
position: relative;
width: 100%;
height: 80%;
}
</style>

13
src/views/charts/mixchart.vue
View File

@ -1,14 +1,13 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<mixchart id='apple' height='100%' width='100%' />
<mixchart id='apple' height='100%' width='100%' />
</div>
</div>
</template>
<script>
import mixchart from 'components/Charts/mixchart';
export default {
components: { mixchart }
};
@ -16,10 +15,10 @@
<style scoped>
.chart-container{
position: relative;
width: 100%;
height: 90%;
padding-bottom: 40px;
position: relative;
width: 100%;
height: 90%;
padding-bottom: 40px;
}
</style>

6
src/views/components/countTo.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="components-container">
<code>countTo 组件 <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>线上地址</a></code>
<code> <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>countTo component</a></code>
<count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
<count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
:separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false' />
<div style='margin-left: 25%;margin-top: 40px;'>
<label class="label" for="startValInput">startVal: <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
@ -20,9 +20,9 @@
:separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27; :autoplay=false&gt;</code>
</div>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data() {

2
src/views/components/dndlist.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="components-container">
<code>拖拽https://github.com/SortableJS/Vue.Draggable 项目：Vue.Draggable</code>
<code>drag-list base on <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a></code>
<div class="editor-container">
<DndList :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池" />
</div>

4
src/views/components/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="components-container">
<code>这里暂时列出了自己在项目中自己封装和用到的组件，如有补充可以提<a href='https://github.com/PanJiaChen/vue-element-admin/issues' target='_blank'>issue</a><br/>
我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，很多时候第三方封装是满足不了需求的，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
<code>这里暂时列出了自己在项目中用到的组件和一些自己封装的组件，如有补充可以提<a target='_blank' href='https://github.com/PanJiaChen/vue-element-admin/issues'> issue </a><br/>
我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，而且第三方封装的组件灵活性可控性都不高，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
</code>
</div>
</template>

7
src/views/components/jsoneditor.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="components-container" style='height:100vh'>
<code>有校验</code>
<code>jsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>,lint base on json-lint </code>
<div class="editor-container">
<json-editor ref="jsonEditor" v-model="value"></json-editor>
</div>
</div>
</template>
<script>
import jsonEditor from 'components/jsonEditor';
const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]';
@ -21,8 +22,8 @@
<style scoped>
.editor-container{
position: relative;
height: 100%;
position: relative;
height: 100%;
}
</style>

8
src/views/components/markdown.vue
View File

@ -1,21 +1,21 @@
<template>
<div class="components-container">
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
<code>Markdown 我们这里选用了 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader14'> 相关文章 </a></code>
<div class="editor-container">
<MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
<MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
</div>
<el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button>
<div v-html="html"></div>
</div>
</template>
<script>
import MdEditor from 'components/MdEditor';
export default {
components: { MdEditor },
data() {
return {
content: 'Simplemde',
content: '## Simplemde',
html: ''
}
},

16
src/views/errlog/index.vue
View File

@ -1,26 +1,19 @@
<template>
<div class="errPage-container">
<!--error code-->
<err-code/>
<!--error code-->
<err-code/>
<h3>请点击右上角bug小图表</h3>
<code>
<code>
现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会怎增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在Vue官网提供了一个方法来捕获处理异常
</code>
<a href="#"><img src='../../../documentImg/code1.png'></a>
</div>
</template>
<script>
import errCode from './errcode';
// import code1Img from
export default {
components: { errCode },
data() {
return {
}
},
methods: {
back() {
this.$router.go(-1)
@ -28,6 +21,7 @@
}
};
</script>
<style scoped>
.errPage-container{
padding: 30px;

70
src/views/error/401.vue
View File

@ -4,7 +4,7 @@
<el-row>
<el-col :span="12">
<h1 class="text-jumbo text-ginormous">Oops!</h1>
gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
<h2>你没有权限去该页面</h2>
<h6>如有不满请联系你领导</h6>
<ul class="list-unstyled">
@ -26,9 +26,9 @@
</el-dialog>
</div>
</template>
<script>
import errGif from 'assets/401.gif';
export default {
data() {
return {
@ -50,38 +50,38 @@
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.errPage-container {
width: 800px;
margin: 100px auto;
.pan-back-btn {
background: #008489;
color: #fff;
}
.pan-gif {
margin: 0 auto;
display: block;
}
.pan-img{
display: block;
margin: 0 auto;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
color: #484848;
}
.list-unstyled {
font-size: 14px;
li {
padding-bottom: 5px;
}
a {
color: #008489;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.errPage-container {
width: 800px;
margin: 100px auto;
.pan-back-btn {
background: #008489;
color: #fff;
}
.pan-gif {
margin: 0 auto;
display: block;
}
.pan-img {
display: block;
margin: 0 auto;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
color: #484848;
}
.list-unstyled {
font-size: 14px;
li {
padding-bottom: 5px;
}
a {
color: #008489;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
</style>

4
src/views/error/404.vue
View File

@ -9,7 +9,7 @@
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
<div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
<a href="/" class="bullshit__return-home">返回首页</a>
@ -17,6 +17,7 @@
</div>
</div>
</template>
<script>
export default {
computed: {
@ -26,6 +27,7 @@
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.wscn-http404 {
position: relative;

31
src/views/example/table/dynamictable.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-checkbox-group v-model="formThead">
<el-checkbox-group v-model="formThead">
<el-checkbox label="apple">apple</el-checkbox>
<el-checkbox label="banana">banana</el-checkbox>
<el-checkbox label="orange">orange</el-checkbox>
@ -18,22 +18,21 @@
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '水果',
list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }]
}, {
name: '水果2',
list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }]
}],
formThead: ['apple', 'banana']
export default {
data() {
return {
tableData: [{
name: '水果',
list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }]
}, {
name: '水果2',
list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }]
}],
formThead: ['apple', 'banana']
}
}
}
};
};
</script>

25
src/views/example/table/table.vue
View File

@ -22,10 +22,10 @@
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
<el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
<el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
<el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
</div>
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="序号" width="65">
<template scope="scope">
@ -58,10 +58,9 @@
</template>
</el-table-column>
<el-table-column width="80px" label="重要性">
<template scope="scope">
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
</template>
</el-table-column>
@ -71,28 +70,28 @@
</template>
</el-table-column>
<el-table-column class-name="status-col" label="状态" width="90">
<el-table-column class-name="status-col" label="状态" width="90">
<template scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="150">
<el-table-column align="center" label="操作" width="150">
<template scope="scope">
<el-button v-if="scope.row.status!='published'" size="small" type="success" @click="handleModifyStatus(scope.row,'published')">发布
</el-button>
<el-button v-if="scope.row.status!='draft'" size="small" @click="handleModifyStatus(scope.row,'draft')">草稿
</el-button>
<el-button v-if="scope.row.status!='deleted'" size="small" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
</el-button>
</el-button>
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
@ -138,14 +137,14 @@
</el-dialog>
<el-dialog title="阅读数统计" :visible.sync="dialogPvVisible" size="small">
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="key" label="渠道"> </el-table-column>
<el-table-column prop="pv" label="pv"> </el-table-column>
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="key" label="渠道"> </el-table-column>
<el-table-column prop="pv" label="pv"> </el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogPvVisible = false">确 定</el-button>
</span>
</el-dialog >
</el-dialog>
</div>
</template>

1
src/views/excel/index.vue
View File

@ -32,6 +32,7 @@
</el-table>
</div>
</template>
<script>
import { getList } from 'api/article';
export default {

4
src/views/layout/AppMain.vue
View File

@ -11,9 +11,7 @@
name: 'AppMain',
computed: {
key() {
return this.$route.name !== undefined
? this.$route.name + +new Date()
: this.$route + +new Date()
return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
}
}
}

4
src/views/layout/Layout.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
<div class="sidebar-wrapper">
<Sidebar class="sidebar-container"/>
<Sidebar class="sidebar-container" />
</div>
<div class="main-container">
<Navbar/>
@ -27,9 +27,9 @@
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.app-wrapper {
@include clearfix;
position: relative;

1
src/views/layout/Levelbar.vue
View File

@ -34,6 +34,7 @@
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-levelbar.el-breadcrumb {
display: inline-block;

7
src/views/layout/Navbar.vue
View File

@ -6,15 +6,15 @@
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
<i class="el-icon-caret-bottom"/>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<router-link class='inlineBlock' to="/">
<router-link class='inlineBlock' to="/">
<el-dropdown-item>
首页
</el-dropdown-item>
</router-link>
<router-link class='inlineBlock' to="/admin/profile">
<router-link class='inlineBlock' to="/admin/profile">
<el-dropdown-item>
设置
</el-dropdown-item>
@ -62,6 +62,7 @@
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
height: 50px;

1
src/views/layout/Sidebar.vue
View File

@ -16,6 +16,7 @@
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-menu {
min-height: 100%;

1
src/views/layout/SidebarItem.vue
View File

@ -34,6 +34,7 @@
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.wscn-icon {
margin-right: 10px;

10
src/views/permission/index.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="app-container">
<div style='margin-bottom:15px;'>你的权限： {{roles}}</div>
切换权限：
<el-radio-group v-model="role">
<el-radio-button label="editor"></el-radio-button>
</el-radio-group>
<div style='margin-bottom:15px;'>你的权限： {{roles}}</div>
切换权限：
<el-radio-group v-model="role">
<el-radio-button label="editor"></el-radio-button>
</el-radio-group>
</div>
</template>

26
src/views/theme/index.vue
View File

@ -76,17 +76,17 @@ export default {
</script>
<style scoped>
.box-card{
width: 400px;
margin: 20px auto;
}
.block{
padding: 30px 24px;
}
.alert-item{
margin-bottom: 10px;
}
.tag-item{
margin-right: 15px;
}
.box-card{
width: 400px;
margin: 20px auto;
}
.block{
padding: 30px 24px;
}
.alert-item{
margin-bottom: 10px;
}
.tag-item{
margin-right: 15px;
}
</style>