首頁 探索 說明
登入
boz
/
vue-manage-system
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

use mockjs

lin-xin 8 年之前
父節點
3d4c886a68
當前提交
c495d279e5
共有 10 個文件被更改，包括 79 次插入 和 36 次删除
分割檢視 顯示文件統計
  1. 6 6
      build/webpack.base.conf.js
  2. 1 1
      index.html
  3. 1 0
      package.json
  4. 19 26
      src/components/page/BaseTable.vue
  5. 3 3
      src/components/page/VueTable.vue
  6. 3 0
      src/main.js
  7. 21 0
      src/mock/datasource.js
  8. 11 0
      src/mock/index.js
  9. 13 0
      src/mock/vuetable.js
  10. 1 0
      static/css/datasource.css

+ 6 - 6
build/webpack.base.conf.js
查看文件 

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

+ 1 - 1
index.html
查看文件 

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

+ 1 - 0
package.json
查看文件 

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

+ 19 - 26
src/components/page/BaseTable.vue
查看文件 

@@ -14,13 +14,11 @@
 
             </el-table-column>
 
             <el-table-column prop="address" label="地址" :formatter="formatter">
 
             </el-table-column>
 
-            <el-table-column prop="tag" label="标签" width="120"
 
-                    :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
 
-                    :filter-method="filterTag">
 
+            <el-table-column  label="头像">
 
                 <template scope="scope">
 
-                    <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" close-transition>{{scope.row.tag}}
 
-                    </el-tag>
 
+                    <img :src="scope.row.logo">
 
                 </template>
 
+                
             </el-table-column>
 
             <el-table-column label="操作" width="180">
 
                 <template scope="scope">
 
@@ -33,6 +31,7 @@
 
         </el-table>
 
         <div class="pagination">
 
             <el-pagination
 
+                    @current-change ="handleCurrentChange"
 
                     layout="prev, pager, next"
 
                     :total="1000">
 
             </el-pagination>
 
@@ -44,30 +43,24 @@
 
     export default {
 
         data() {
 
             return {
 
-                tableData: [{
 
-                    date: '2017-02-02',
 
-                    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: '公司'
 
-                }]
 
+                tableData: [],
 
+                cur_page: 1
 
             }
 
         },
 
+        created(){
 
+            this.getData();
 
+        },
 
         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) {
 
                 return row.address;
 
             },

+ 3 - 3
src/components/page/VueTable.vue
查看文件 

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

+ 3 - 0
src/main.js
查看文件 

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

+ 21 - 0
src/mock/datasource.js
查看文件 

@@ -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 - 0
src/mock/index.js
查看文件 

@@ -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 - 0
src/mock/vuetable.js
查看文件 

@@ -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 - 0
static/css/datasource.css
查看文件 

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