github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

use mockjs

pull/34/head
lin-xin 2017-04-14 11:55:27 +08:00
parent 3d4c886a68
commit c495d279e5
10 changed files with 79 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
build/webpack.base.conf.js
View File

@ -61,10 +61,10 @@ module.exports = {
} }
] ]
}, },
plugins: [ // plugins: [
new webpack.DllReferencePlugin({ // new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'), // context: path.resolve(__dirname, '..'),
manifest: require('./vendor-manifest.json') // manifest: require('./vendor-manifest.json')
}) // })
] // ]
} }

2
index.html
View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="./static/js/vendor.dll.js"></script> <!--<script src="./static/js/vendor.dll.js"></script>-->
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function() { (function() {

1
package.json
View File

@ -13,6 +13,7 @@
"axios": "^0.15.3", "axios": "^0.15.3",
"babel-polyfill": "^6.23.0", "babel-polyfill": "^6.23.0",
"element-ui": "^1.2.2", "element-ui": "^1.2.2",
"mockjs": "^1.0.1-beta3",
"vue": "^2.1.10", "vue": "^2.1.10",
"vue-core-image-upload": "^2.0.5", "vue-core-image-upload": "^2.0.5",
"vue-datasource": "^1.0.4", "vue-datasource": "^1.0.4",

45
src/components/page/BaseTable.vue
View File

@ -14,13 +14,11 @@
</el-table-column> </el-table-column>
<el-table-column prop="address" label="地址" :formatter="formatter"> <el-table-column prop="address" label="地址" :formatter="formatter">
</el-table-column> </el-table-column>
<el-table-column prop="tag" label="标签" width="120" <el-table-column label="头像">
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
:filter-method="filterTag">
<template scope="scope"> <template scope="scope">
<el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" close-transition>{{scope.row.tag}} <img :src="scope.row.logo">
</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template scope="scope"> <template scope="scope">
@ -33,6 +31,7 @@
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@current-change ="handleCurrentChange"
layout="prev, pager, next" layout="prev, pager, next"
:total="1000"> :total="1000">
</el-pagination> </el-pagination>
@ -44,30 +43,24 @@
export default { export default {
data() { data() {
return { return {
tableData: [{ tableData: [],
date: '2017-02-02', cur_page: 1
name: '小天才',
address: '东莞市长安镇步步高大道18号',
tag: '家'
}, {
date: '2017-02-04',
name: '小天才',
address: '东莞市长安镇步步高大道17号',
tag: '公司'
}, {
date: '2017-02-01',
name: '小天才',
address: '东莞市长安镇步步高大道19号',
tag: '家'
}, {
date: '2017-02-03',
name: '小天才',
address: '东莞市长安镇步步高大道16号',
tag: '公司'
}]
} }
}, },
created(){
this.getData();
},
methods: { methods: {
handleCurrentChange(val){
this.cur_page = val;
this.getData();
},
getData(){
let self = this;
this.$axios.post('/api/table',{page:self.cur_page}).then((res) => {
self.tableData = res.data.data;
})
},
formatter(row, column) { formatter(row, column) {
return row.address; return row.address;
}, },

6
src/components/page/VueTable.vue
View File

@ -42,8 +42,8 @@
key: 'email', key: 'email',
}, },
{ {
name: 'company', name: 'ip',
key: 'company', key: 'ip',
} }
], ],
actions: [ actions: [
@ -81,7 +81,7 @@
} }
}, },
beforeMount(){ beforeMount(){
axios.get('/static/data.json').then( (res) => { axios.get('/api/source').then( (res) => {
this.information = res.data; this.information = res.data;
}) })
} }

3
src/main.js
View File

@ -1,11 +1,14 @@
import Vue from 'vue'; import Vue from 'vue';
import App from './App'; import App from './App';
import router from './router'; import router from './router';
import axios from 'axios';
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css'; // 默认主题 import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题 // import '../static/css/theme-green/index.css'; // 浅绿色主题
import "babel-polyfill"; import "babel-polyfill";
import './mock/index.js';
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.prototype.$axios = axios;
new Vue({ new Vue({
router, router,
render: h => h(App) render: h => h(App)

21
src/mock/datasource.js Normal file
View File

@ -0,0 +1,21 @@
export const datasource = [
{
path: '/api/source',
data: {
'data|10':[{
'id|+1':1,
'name':'@cname',
'email':'@email',
'ip':'@ip'
}],
"pagination": {
"total": 15,
"per_page": 15,
"current_page": 1,
"last_page": 1,
"from": 1,
"to": 15
}
}
}
]

11
src/mock/index.js Normal file
View File

@ -0,0 +1,11 @@
import Mock from 'mockjs';
import {vuetable} from './vuetable.js';
import {datasource} from './datasource.js';
let data = [].concat(vuetable,datasource);
data.forEach(function(res){
Mock.mock(res.path, res.data);
});
export default Mock;

13
src/mock/vuetable.js Normal file
View File

@ -0,0 +1,13 @@
export const vuetable = [
{
path: '/api/table',
data: {
'data|10':[{
'date':'@date',
'name':'@cname',
'address':'@county(ture)',
'logo':'@image("24x24",@color,@cfirst)'
}]
}
}
]

1
static/css/datasource.css
View File

@ -86,6 +86,7 @@
margin-bottom: 22px; margin-bottom: 22px;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
text-align: center;
} }
.vue-datasource .table > thead > tr > th { .vue-datasource .table > thead > tr > th {
vertical-align: bottom; vertical-align: bottom;