添加黑名单页面

mock/controller/blacklist.js

@@ -0,0 +1,30 @@
+const data = [
+  {
+    name: "奉/fendou飘逸的梦",
+    qq: "812770127",
+    excuse: "上来就开骂，不可原谅",
+  },
+  {
+    name: "江荻",
+    qq: "2324945654",
+    excuse: "上来就开骂，不可原谅",
+  },
+  {
+    name: "Diamond",
+    qq: "494904935",
+    excuse: "跟我道歉可以选择原谅",
+  },
+];
+export default [
+  {
+    url: "/blacklist/getList",
+    type: "post",
+    response: () => {
+      return {
+        code: 200,
+        msg: "success",
+        data,
+      };
+    },
+  },
+];

src/api/blacklist.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function getList(data) {
+  return request({
+    url: "/blacklist/getList",
+    method: "post",
+    data,
+  });
+}

src/router/index.js

@@ -410,6 +410,12 @@ export const asyncRoutes = [
         component: () => import("@/views/vab/more/index"),
         meta: { title: "更多组件", permissions: ["admin"] },
       },
+      {
+        path: "blacklist",
+        name: "Blacklist",
+        component: () => import("@/views/vab/blacklist/index"),
+        meta: { title: "黑名单", permissions: ["admin"] },
+      },
     ],
   },
   {

src/views/vab/blacklist/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="blacklist-container">
+    <el-divider content-position="left">
+      vue-admin-beautiful禁止以下人员使用
+    </el-divider>
+    <el-alert :closable="false">
+      这世界嘲笑你的人有很多，你又不是圣人，干嘛对每个人都仁慈，面对无端的辱骂和攻击，你只能选择将他记在这里，时刻提醒自己。
+    </el-alert>
+    <br />
+    <el-table :data="tableData" style="width: 100%;">
+      <el-table-column prop="name" label="QQ昵称" width="180"></el-table-column>
+      <el-table-column prop="qq" label="QQ号" width="180"></el-table-column>
+      <el-table-column prop="excuse" label="是否可原谅"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  import { getList } from "@/api/blacklist";
+  export default {
+    name: "Blacklist",
+    components: {},
+    data() {
+      return { tableData: [] };
+    },
+    created() {
+      this.fetchData();
+    },
+    mounted() {},
+    methods: {
+      fetchData() {
+        getList().then(({ data }) => {
+          this.tableData = data;
+        });
+      },
+    },
+  };
+</script>