refine code && document

This commit is contained in:
Pan 2017-06-14 18:02:12 +08:00
parent f82ec2d5d7
commit bd607b4728
26 changed files with 143 additions and 151 deletions

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

View file

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

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>

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>

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>

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>

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>

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() {

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>

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>

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>

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: ''
}
},

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;

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>

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;

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>

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>

View file

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

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()
}
}
}

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;

View file

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

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;

View file

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

View file

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

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>

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>