更新

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "pc-adminsys",
+  "name": "website-admin",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -1352,8 +1352,8 @@
     },
     "@types/mini-css-extract-plugin": {
       "version": "0.9.1",
-      "resolved": "https://registry.npm.taobao.org/@types/mini-css-extract-plugin/download/@types/mini-css-extract-plugin-0.9.1.tgz",
-      "integrity": "sha1-1L3eUZcyb8oDnUGPS92gPcdNxFE=",
+      "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
+      "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -1782,17 +1782,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-3.0.0.tgz?cache=0&sync_timestamp=1591687042638&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-3.0.0.tgz",
-          "integrity": "sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-6.0.0.tgz?cache=0&sync_timestamp=1597606145227&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-6.0.0.tgz",
@@ -1846,13 +1835,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-3.0.0.tgz",
@@ -1943,16 +1925,6 @@
             "ansi-regex": "^5.0.0"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611878833&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz",
@@ -1970,21 +1942,6 @@
             "webpack-sources": "^1.4.3"
           }
         },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.5",
-          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.5.tgz?cache=0&sync_timestamp=1597130792222&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.5.tgz",
-          "integrity": "sha1-BO3IiUkrA6RF56xm6SJqcBdcqKA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/mini-css-extract-plugin": "^0.9.1",
-            "chalk": "^3.0.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^1.2.3",
-            "merge-source-map": "^1.1.0",
-            "source-map": "^0.6.1"
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-6.2.0.tgz",
@@ -11376,6 +11333,86 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
+      "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/mini-css-extract-plugin": "^0.9.1",
+        "chalk": "^3.0.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^1.2.3",
+        "merge-source-map": "^1.1.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-meta": {
       "version": "2.4.0",
       "resolved": "https://registry.npm.taobao.org/vue-meta/download/vue-meta-2.4.0.tgz",

src/components/common/Sidebar.vue

@@ -57,6 +57,11 @@ export default {
           index: 'test',
           title: '测试菜单',
         },
+         {
+          icon: 'el-icon-s-home',
+          index: 'lunbo',
+          title: '轮播测试',
+        },
       ],
     };
   },

src/router/index.js

@@ -25,6 +25,11 @@ export default new Router({
           component: () => import('../views/test/index.vue'),
           meta: { title: '测试菜单' },
         },
+        {
+          path: '/lunbo',
+          component: () => import('../views/lunbo/index.vue'),
+          meta: { title: '轮播测试' },
+        },
       ],
     },
     {

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
 import login from './login';
+//第二步引入自己创建的文件
 import lunbo from './lunbo';
 
 Vue.use(Vuex);
@@ -13,6 +14,7 @@ export default new Vuex.Store({
   actions: {},
   modules: {
     login,
+    //声明引用文件
     lunbo,
   },
 });

src/store/lunbo.js

@@ -1,3 +1,4 @@
+//第一步
 import Vue from 'vue';
 import Vuex from 'vuex';
 import _ from 'lodash';

src/views/lunbo/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24">
+        <el-button type="text" @click="dialogFormVisible = true">添加</el-button>
+        <el-dialog title="轮播信息" :visible.sync="dialogFormVisible">
+          <el-form :model="form">
+            <el-form-item label="名称" :label-width="formLabelWidth">
+              <el-input v-model="form.name" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="图片路径" :label-width="formLabelWidth">
+              <el-input v-model="form.filepath" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="发布时间" :label-width="formLabelWidth">
+              <!-- <el-input v-model="form.create_time" autocomplete="off"></el-input> -->
+              <div class="block">
+                <!-- <span class="demonstration">设置默认时间</span> -->
+                <el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间" default-time="12:00:00"> </el-date-picker>
+              </div>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="dialogFormVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+          </div>
+        </el-dialog>
+      </el-col>
+      <el-col :span="24">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column prop="name" label="名称" width="180"> </el-table-column>
+          <el-table-column prop="filepath" label="图片路径" width="180"> </el-table-column>
+          <el-table-column prop="create_time" label="发布时间"> </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: lunbo } = createNamespacedHelpers('lunbo');
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      tableData: [],
+      dialogTableVisible: false,
+      dialogFormVisible: false,
+      form: {
+        name: '',
+        filepath: '',
+        create_time: '',
+      },
+      formLabelWidth: '120px',
+      value3: '',
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...lunbo(['query', 'fetch', 'create', 'update', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `tableData`, res.data);
+      }
+    },
+    async onSubmit() {
+      // this.form的数据集合用data变量接收
+      let data = this.form; // 判断data中有无id,有id:走修改，无id:走创建
+      if (data.id) {
+        const res = await this.update(data);
+        if (this.$checkRes(res)) {
+          // vant组件中，消息提示方法
+          this.$notify({
+            message: '修改成功',
+            type: 'success',
+          }); // 执行完方法，修改再走一遍查询，查询数据更新之后的数据
+          this.search();
+        }
+      } else {
+        const res = await this.create(data);
+        if (this.$checkRes(res)) {
+          this.$notify({
+            message: '添加成功',
+            type: 'success',
+          });
+          this.search();
+        }
+      }
+    },
+    // handleEdit(index, row) {
+    //   console.log(index, row);
+    // },
+    async handleDelete(row) {
+      // console.log(index, row);
+      const res = await this.delete(row.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '恭喜你，这是一条成功消息',
+          type: 'success',
+        });
+        this.search();
+      }
+    },
+    // dialogFormVisible() {
+
+    // },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/test/index.vue

@@ -12,8 +12,8 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: lunbo } = createNamespacedHelpers('lunbo');
 export default {
-  metaInfo() {
-    return { title: this.route.meta.title };
+    metaInfo() {
+    return { title: this.$route.meta.title };
   },
   name: 'index',
   props: {},