From d8ef99bd3d335066f11590027ad54b93907d56e2 Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Mon, 10 Jul 2023 11:00:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E7=AE=A1=E7=90=8650%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  30 +-
 package.json                                  |   3 +-
 src/components/Home/SearchInput.vue           |   1 -
 src/components/System/AdminAside.vue          |  32 ++-
 src/components/System/AdminHeader.vue         |   4 +-
 src/components/System/AdminHome.vue           | 164 ++++++++++-
 src/components/System/BreadCrumb.vue          |   4 +-
 .../System/Manage/projectManage.vue           |   2 +-
 src/components/System/Manage/systemManage.vue | 232 ++++++++++++++-
 src/components/System/Manage/userManage.vue   | 269 +++++++++++++++++-
 src/main.js                                   |   8 +-
 src/views/systemIndex.vue                     |   6 +-
 12 files changed, 723 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0cb32d1..cfb0c14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,8 @@
         "vue": "^2.6.14",
         "vue-cookie": "^1.1.4",
         "vue-router": "^3.5.1",
-        "vuex": "^3.6.2"
+        "vuex": "^3.6.2",
+        "vxe-table": "^3.6.13"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -14509,6 +14510,15 @@
         "vue": "^2.0.0"
       }
     },
+    "node_modules/vxe-table": {
+      "version": "3.6.13",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-3.6.13.tgz",
+      "integrity": "sha512-Lm4J1dH4CAHnHWO/JKPo77SCaggPTdk7RFhCNvkMWRsReBvWwTR4zBUnEwmnomhNorRVdBYETjOnsbfor7us9Q==",
+      "peerDependencies": {
+        "vue": "^2.6.0",
+        "xe-utils": "^3.5.0"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
@@ -15105,6 +15115,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/xe-utils": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.11.tgz",
+      "integrity": "sha512-lyKc/lTBga1Zb63p+FED8mtxLnYIjSS8PVJM1N64NGdCu/3d1XubaVeke2p91RHssP0ExVAl2LUqZYperoz76Q==",
+      "peer": true
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
@@ -26456,6 +26472,12 @@
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
       "requires": {}
     },
+    "vxe-table": {
+      "version": "3.6.13",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-3.6.13.tgz",
+      "integrity": "sha512-Lm4J1dH4CAHnHWO/JKPo77SCaggPTdk7RFhCNvkMWRsReBvWwTR4zBUnEwmnomhNorRVdBYETjOnsbfor7us9Q==",
+      "requires": {}
+    },
     "w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
@@ -26919,6 +26941,12 @@
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
       "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q=="
     },
+    "xe-utils": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.11.tgz",
+      "integrity": "sha512-lyKc/lTBga1Zb63p+FED8mtxLnYIjSS8PVJM1N64NGdCu/3d1XubaVeke2p91RHssP0ExVAl2LUqZYperoz76Q==",
+      "peer": true
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index 46d42e4..28796bd 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "vue": "^2.6.14",
     "vue-cookie": "^1.1.4",
     "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "vxe-table": "^3.6.13"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
diff --git a/src/components/Home/SearchInput.vue b/src/components/Home/SearchInput.vue
index f57d99c..b6a85d9 100644
--- a/src/components/Home/SearchInput.vue
+++ b/src/components/Home/SearchInput.vue
@@ -149,7 +149,6 @@ export default {
                 params: {
                 }
             }).then((res)=>{
-                console.log(res.data.length);
                 that.historySearch=res.data;
 
             });
diff --git a/src/components/System/AdminAside.vue b/src/components/System/AdminAside.vue
index b0ce276..0be8a5b 100644
--- a/src/components/System/AdminAside.vue
+++ b/src/components/System/AdminAside.vue
@@ -1,12 +1,14 @@
 <template>
     <div>
-        <div style="height: 60px;width: 200px;display: flex;align-items: center;justify-content: center">
-            <span style="font-size: 18px;font-weight: bold;color: #42b983;">
-                {{systemName}}
+        <div style="height: 60px;display: flex;align-items: center;justify-content: center">
+            <span @click="toHome" style="cursor: pointerc;display: flex;flex-direction:row;flex-wrap: nowrap;font-size: 18px;font-weight: bold;color: #42b983;align-items: center">
+                <el-avatar :size="40" :src="require('@/assets/logo/logo.png')"></el-avatar>
+                <h5 style="margin-left: 10px">{{ isCollapse ? "" : "HelloGithub" }}</h5>
             </span>
         </div>
         <el-menu
             :collapse="isCollapse"
+            :collapse-transition="false"
             @close="handleClose"
             @open="handleOpen"
             active-text-color="#ffd04b"
@@ -16,15 +18,16 @@
             width="200px"
             :default-active="$route.path"
             router
+            index="1"
         >
 
-        <el-menu-item   index="/adminHome"><i class="el-icon-s-home"></i>首页</el-menu-item>
-        <el-menu-item index="/systemManage"><i class="el-icon-s-tools"></i>系统管理</el-menu-item>
-        <el-menu-item index="/userManage"><i class="el-icon-user-solid"></i>用户管理</el-menu-item>
-        <el-menu-item index="/projectManage"><i class="el-icon-s-help"></i>项目管理</el-menu-item>
-        <el-menu-item index="/articleManage"><i class="el-icon-s-management"></i>文章管理</el-menu-item>
-        <el-menu-item index="/categoryManage"><i class="el-icon-s-flag"></i>标签管理</el-menu-item>
-        <el-menu-item index="/commentManage"><i class="el-icon-s-comment"></i>评论管理</el-menu-item>
+        <el-menu-item   index="/adminHome"><i class="el-icon-s-home"></i><span v-show="!isCollapse">首页</span></el-menu-item>
+        <el-menu-item index="/systemManage"><i class="el-icon-s-tools"></i><span v-show="!isCollapse">管理员</span></el-menu-item>
+        <el-menu-item index="/userManage"><i class="el-icon-user-solid"></i><span v-show="!isCollapse">用户管理</span></el-menu-item>
+        <el-menu-item index="/projectManage"><i class="el-icon-s-help"></i><span v-show="!isCollapse">项目管理</span></el-menu-item>
+        <el-menu-item index="/articleManage"><i class="el-icon-s-management"></i><span v-show="!isCollapse">文章管理</span></el-menu-item>
+        <el-menu-item index="/categoryManage"><i class="el-icon-s-flag"></i><span v-show="!isCollapse">标签管理</span></el-menu-item>
+        <el-menu-item index="/commentManage"><i class="el-icon-s-comment"></i><span v-show="!isCollapse">评论管理</span></el-menu-item>
 
         </el-menu>
     </div>
@@ -42,11 +45,16 @@ export default {
     },
     methods: {
         handleOpen(key, keyPath) {
-            console.log(key, keyPath);
+            // console.log(key, keyPath);
         },
         handleClose(key, keyPath) {
-            console.log(key, keyPath);
+            // console.log(key, keyPath);
         },
+        toHome(){
+            this.$router.push({
+                path:'/home'
+            })
+        }
 
     },
     computed:{
diff --git a/src/components/System/AdminHeader.vue b/src/components/System/AdminHeader.vue
index 5f995ef..3652498 100644
--- a/src/components/System/AdminHeader.vue
+++ b/src/components/System/AdminHeader.vue
@@ -1,7 +1,7 @@
 <template>
     <div style="display:flex;flex-direction: row;justify-content: space-between;background:rgb(84, 92, 100);align-items:center">
-        <div>
-            <el-button @click="handleMenu" icon="el-icon-menu" size="mini"></el-button>
+        <div style="display: flex;flex-direction: row;align-items: center;justify-content: center">
+            <el-button style="background-color: transparent;border: none" @click="handleMenu" size="mini"><i style="color: #eeeeee" class="el-icon-menu"></i></el-button>
             <BreadCrumb></BreadCrumb>
         </div>
 
diff --git a/src/components/System/AdminHome.vue b/src/components/System/AdminHome.vue
index 3744871..16d3080 100644
--- a/src/components/System/AdminHome.vue
+++ b/src/components/System/AdminHome.vue
@@ -1,12 +1,173 @@
 <template>
-    <div style="display: flex;flex-direction: ">
+    <div style="display: flex;flex-direction: row;flex-wrap: nowrap">
+        <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
+            <div>
+                <el-card style="border: none">
+                    <div slot="header" class="clearfix" style="display: flex;flex-direction: row;flex-wrap: nowrap">
+                        <div style="width: 150px;height: 150px;cursor: pointer" >
+                            <el-avatar style="background-color: #969896" :src="require('@/assets/logo/tx.png')"
+                                       :size="150"></el-avatar>
+                        </div>
+                        <div style="margin-left: 30px;margin-right: 30px;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;justify-content: center">
+                            <span style="font-size: 50px;">
+                                {{ this.$cookie.get("adminName") }}
+                            </span>
+                            <span style="margin-top: 10px;font-size: 16px;color: #969896">
+                                超级管理员
+                            </span>
+                        </div>
+                    </div>
+                    <div class="text item" style="display: flex;justify-content: flex-start">
+                        <span style="font-size: 16px;color: #9ca3af">
+                            登录时间: 2023-7-9
+                        </span>
+                    </div>
+                </el-card>
+            </div>
+            <div style="margin-top: 20px">
+                <el-card class="box-card" style="border: none">
+                    <div id="Echart_1">
 
+                    </div>
+                </el-card>
+            </div>
+        </div>
+        <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
+            <div style="display: flex;flex-direction: row;flex-wrap: wrap">
+                <el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
+                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
+                        <i class="el-icon-s-finance"
+                           style="width: 100px;
+                        height: 100px;
+                        background-color: #2ec7c9;
+                        line-height: 100px;
+                        text-align: center;
+                        font-size: 30px;
+                        color: #fff;"
+                        ></i>
+                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
+                            <span style="font-size: 30px;font-weight: bold">
+                                678993 <span>/个</span>
+                            </span>
+                            <span style="font-size: 15px;color: #9ca3af">总共项目数量</span>
+                        </div>
+                    </div>
+                </el-card>
+
+                <el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
+                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
+                        <i class="el-icon-user-solid"
+                           style="width: 100px;
+                        height: 100px;
+                        background-color: #ffb980;
+                        line-height: 100px;
+                        text-align: center;
+                        font-size: 30px;
+                        color: #fff;"
+                        ></i>
+                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
+                            <span style="font-size: 30px;font-weight: bold">
+                                678993 <span>/个</span>
+                            </span>
+                            <span style="font-size: 15px;color: #9ca3af">总共用户数量</span>
+                        </div>
+                    </div>
+                </el-card>
+
+                <el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
+                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
+                        <i class="el-icon-s-tools"
+                           style="width: 100px;
+                        height: 100px;
+                        background-color: #5ab1ef;
+                        line-height: 100px;
+                        text-align: center;
+                        font-size: 30px;
+                        color: #fff;"
+                        ></i>
+                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
+                            <span style="font-size: 30px;font-weight: bold">
+                                678993 <span>/个</span>
+                            </span>
+                            <span style="font-size: 15px;color: #9ca3af">总共管理员数量</span>
+                        </div>
+                    </div>
+                </el-card>
+
+                <el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
+                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
+                        <i class="el-icon-s-management"
+                           style="width: 100px;
+                        height: 100px;
+                        background-color: rgb(255,208,20);
+                        line-height: 100px;
+                        text-align: center;
+                        font-size: 30px;
+                        color: #fff;"
+                        ></i>
+                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
+                            <span style="font-size: 30px;font-weight: bold">
+                                678993 <span>/个</span>
+                            </span>
+                            <span style="font-size: 15px;color: #9ca3af">总共文章数量</span>
+                        </div>
+                    </div>
+                </el-card>
+
+                <el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
+                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
+                        <i class="el-icon-s-flag"
+                           style="width: 100px;
+                        height: 100px;
+                        background-color: rgba(87,218,93,0.86);
+                        line-height: 100px;
+                        text-align: center;
+                        font-size: 30px;
+                        color: #fff;"
+                        ></i>
+                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
+                            <span style="font-size: 30px;font-weight: bold">
+                                678993 <span>/个</span>
+                            </span>
+                            <span style="font-size: 15px;color: #9ca3af">总共标签数量</span>
+                        </div>
+                    </div>
+                </el-card>
+
+                <el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
+                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
+                        <i class="el-icon-s-comment"
+                           style="width: 100px;
+                        height: 100px;
+                        background-color: #ea64bb;
+                        line-height: 100px;
+                        text-align: center;
+                        font-size: 30px;
+                        color: #fff;"
+                        ></i>
+                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
+                            <span style="font-size: 30px;font-weight: bold">
+                                678993 <span>/个</span>
+                            </span>
+                            <span style="font-size: 15px;color: #9ca3af">总共评论数量</span>
+                        </div>
+                    </div>
+                </el-card>
+            </div>
+<!--            eChart 图-->
+            <div style="margin-top: 23px;margin-left: 40px">
+                <el-card style="border: none">
+
+                </el-card>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
 import Vue from "vue";
+
 Vue.prototype.$echarts = echarts;
 
 
@@ -14,7 +175,6 @@ export default {
     data() {
         return {
 
-
         }
     },
     methods: {
diff --git a/src/components/System/BreadCrumb.vue b/src/components/System/BreadCrumb.vue
index 7b5fd74..d4ddd89 100644
--- a/src/components/System/BreadCrumb.vue
+++ b/src/components/System/BreadCrumb.vue
@@ -16,14 +16,14 @@ export default {
         }
     },
     created() {
-        console.log(this.$route.matched)
+        // console.log(this.$route.matched)
         this.lists = this.$route.matched  //获取路由内的全部信息
     },
     //这里必须使用监听，否则无法实时获取路由变动信息。
     // 监听后路由会实时变动，不然需要手动刷新路径才会改变
 watch:{
     $route(to,from)  {
-        console.log(to)
+        // console.log(to)
         this.lists = to.matched
     }
 },
diff --git a/src/components/System/Manage/projectManage.vue b/src/components/System/Manage/projectManage.vue
index 1117461..a51cfbd 100644
--- a/src/components/System/Manage/projectManage.vue
+++ b/src/components/System/Manage/projectManage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-      项目管理
+
   </div>
 </template>
 
diff --git a/src/components/System/Manage/systemManage.vue b/src/components/System/Manage/systemManage.vue
index 5eee529..5e6133e 100644
--- a/src/components/System/Manage/systemManage.vue
+++ b/src/components/System/Manage/systemManage.vue
@@ -1,12 +1,236 @@
 <template>
-  <div>
-      系统管理
-  </div>
+    <div>
+        <div style="display: flex;justify-content: flex-start">
+            <el-button type="primary" @click="addAdmin" icon="el-icon-plus">新增</el-button>
+        </div>
+        <el-table
+            border
+            stripe
+            :data="dataTable"
+            style="width: 100%;margin-top: 20px">
+            <el-table-column
+                prop="adminId"
+                label="ID"
+                sortable
+                align="center"
+            >
+            </el-table-column>
+            <el-table-column
+                prop="adminName"
+                align="center"
+                label="管理员">
+            </el-table-column>
+            <el-table-column
+                prop="adminPassword"
+                align="center"
+                label="密码">
+            </el-table-column>
+            <el-table-column
+                prop="loginTime"
+                align="center"
+                label="登录时间">
+            </el-table-column>
+            <el-table-column
+                prop="isValid"
+                align="center"
+                label="是否有效">
+                <template slot-scope="scope">
+                    <el-switch
+                        v-model="scope.row.isValid"
+                        :active-value="1"
+                        :inactive-value="0"
+                        active-color="#13ce66"
+                        inactive-color="#ff4949"
+                    >
+                    </el-switch>
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                fixed="right"
+                align="center"
+                label="操作">
+                <template slot-scope="scope">
+                    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
+                    <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog :title="modalType === 0 ? '添加' : '编辑'" :visible.sync="dialogVisible" width="26%"
+                   append-to-body
+                   :close-on-click-modal="false"
+                   :before-close="closeDialog"
+                   >
+            <el-form ref="ruleForm" class="login_container" :model="form" status-icon :rules="rules" label-width="70px">
+                <el-form-item label="账 户" prop="username">
+                    <el-input v-model="form.adminName"  placeholder='请输入用户名' clearable></el-input>
+                </el-form-item>
+
+                <el-form-item label="密 码" prop="password">
+                    <el-input type="password" v-model="form.adminPassword"
+                              placeholder='请输入密码'
+                              clearable></el-input>
+                </el-form-item>
+
+                <el-form-item>
+                    <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+                        <el-button @click="resetForm('ruleForm')">重置</el-button>
+                        <el-button @click="submit('ruleForm')"  type="primary" style=";margin-top:10px">提交</el-button>
+                    </div>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
+
+import axios from "axios";
+import Vue from "vue";
+
 export default {
-    name: "systemManage"
+    name: "systemManage",
+    data() {
+        return {
+            modalType: 0,
+            dialogVisible:false,
+            dataTable:null,
+            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
+            // 登陆数据
+            form: {
+                adminName: '',
+                adminPassword: '',
+            },
+            // 校验规则
+            rules: {
+                username: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }],
+                password: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }],
+
+            }
+        }
+    },
+    mounted() {
+        this.getAllAdmin();
+    },
+    methods: {
+        getAllAdmin(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectAdmin',
+                // URL 中的查询参数
+                params: {
+                }
+            }).then(function (res) {
+                that.dataTable=res.data;
+            })
+        },
+        submit(formName){
+            var _this=this;
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+
+                    //调用方法提交
+                    axios({
+                        method: 'post',
+                        // 请求的地址
+                        url: 'http://localhost:8082/helloGithub_war_exploded/adminRegister',
+                        // URL 中的查询参数
+                        params: {
+                            adminname: this.login.username,
+                            password: this.login.password,
+                        }
+                    }).then(function (res) {
+                        if (res.data.code === 200) {
+                            Vue.prototype.$notify({
+                                title: '成功',
+                                message: ('i', {style: 'color: teal'}, res.data.msg),
+                                type: 'success',
+                                offset: 50
+                            });
+                            _this.dialogVisible=false;
+                           _this.getAllAdmin();
+                        } else {
+                            Vue.prototype.$notify.error({
+                                title: '错误',
+                                message: res.data.msg,
+                                offset: 50
+                            });
+                        }
+                    });
+                } else {
+                    return false;
+                }
+            });
+        },
+        resetImg() {
+            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        addAdmin(){
+            this.dialogVisible=true;
+        },
+        handleEdit(index) {
+            console.log(index);
+            this.modalType = 1;
+
+            this.addAdmin();
+            // 深拷贝
+            this.form = index;
+
+        },
+        // 删除按钮
+        handleDelete(index) {
+            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                axios({
+                    method: 'post',
+                    // 请求的地址
+                    url: 'http://localhost:8082/helloGithub_war_exploded/adminRegister',
+                    // URL 中的查询参数
+                    params: {
+                        id: index.id,
+                    }
+                }).then(function (res) {
+                    if (res.data.code === 200) {
+                        Vue.prototype.$notify({
+                            title: '成功',
+                            message: ('i', {style: 'color: teal'}, res.data.msg),
+                            type: 'success',
+                            offset: 50
+                        });
+
+                    } else {
+                        Vue.prototype.$notify.error({
+                            title: '错误',
+                            message: res.data.msg,
+                            offset: 50
+                        });
+                    }
+
+                });
+            }).catch(() => {
+                // 点击取消:不删除了
+                this.$message({
+                    type: 'info',
+                    message: '已取消删除'
+                });
+            });
+        },
+        closeDialog() {
+            // 先重置
+            this.form={}
+            // 后关闭
+            this.dialogVisible = false
+        },
+    }
 }
 </script>
 
diff --git a/src/components/System/Manage/userManage.vue b/src/components/System/Manage/userManage.vue
index b595c66..7aff652 100644
--- a/src/components/System/Manage/userManage.vue
+++ b/src/components/System/Manage/userManage.vue
@@ -1,12 +1,277 @@
 <template>
   <div>
-      用户管理
+      <el-table
+              border
+              stripe
+              :data="dataTable"
+              style="width: 100%;margin-top: 20px">
+          <el-table-column
+                  prop="userId"
+                  label="ID"
+                  sortable
+                  align="center"
+          >
+          </el-table-column>
+          <el-table-column
+                  prop="userName"
+                  align="center"
+                  label="用户名">
+          </el-table-column>
+          <el-table-column
+                  prop="userPassword"
+                  align="center"
+                  label="密码">
+          </el-table-column>
+          <el-table-column
+                  prop="creatTime"
+                  align="center"
+                  label="注册时间">
+          </el-table-column>
+          <el-table-column
+                  prop="userLevel"
+                  align="center"
+                  label="等级">
+          </el-table-column>
+          <el-table-column
+                  prop="projectNum"
+                  align="center"
+                  label="项目数">
+          </el-table-column>
+          <el-table-column
+                  prop="contributionValue"
+                  align="center"
+                  label="贡献值">
+          </el-table-column>
+          <el-table-column
+                  prop="searchHistory"
+                  align="center"
+                  label="搜索历史">
+          </el-table-column>
+          <el-table-column
+                  prop="userAvatar"
+                  align="center"
+                  label="头像">
+          </el-table-column>
+
+          <el-table-column
+                  prop="isValid"
+                  align="center"
+                  label="是否有效">
+              <template slot-scope="scope">
+                  <el-switch
+                          v-model="scope.row.isValid"
+                          :active-value="1"
+                          :inactive-value="0"
+                          active-color="#13ce66"
+                          inactive-color="#ff4949"
+                  >
+                  </el-switch>
+              </template>
+          </el-table-column>
+
+          <el-table-column
+                  align="center"
+                  fixed="right"
+                  label="操作">
+              <template slot-scope="scope">
+                  <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="small" circle></el-button>
+                  <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle size="small"></el-button>
+              </template>
+          </el-table-column>
+      </el-table>
+
+
+      <el-dialog title="编辑" :visible.sync="dialogVisible" width="26%"
+                 append-to-body
+                 :close-on-click-modal="false"
+      >
+          <el-form ref="ruleForm" class="login_container" :model="form" status-icon  label-width="70px">
+              <el-form-item label="ID" prop="username">
+                  <el-input v-model="form.userId"  placeholder='ID' clearable disabled></el-input>
+              </el-form-item>
+              <el-form-item label="用户名" prop="username">
+                  <el-input v-model="form.userName"  placeholder='用户名' clearable></el-input>
+              </el-form-item>
+
+              <el-form-item label="密 码" prop="password">
+                  <el-input type="password" v-model="form.userPassword"
+                            placeholder='请输入密码'
+                            clearable></el-input>
+              </el-form-item>
+
+              <el-form-item label="项目数" prop="projectNum">
+                  <el-input v-model="form.projectNum"  placeholder='项目数量' clearable></el-input>
+              </el-form-item>
+
+              <el-form-item label="贡献值" prop="contributionValue">
+                  <el-input v-model="form.contributionValue"  placeholder='贡献值' clearable></el-input>
+              </el-form-item>
+              <el-form-item label="等级" prop="userLevel">
+                  <el-input v-model="form.userLevel"  placeholder='用户等级' clearable></el-input>
+              </el-form-item>
+
+              <el-form-item label="搜索历史" prop="searchHistory">
+                  <el-input v-model="form.searchHistory"  placeholder='搜索历史' clearable></el-input>
+              </el-form-item>
+              <el-form-item label="头像" prop="userAvatar">
+                  <el-input v-model="form.userAvatar"  placeholder='头像' clearable></el-input>
+              </el-form-item>
+              <el-form-item label="是否有效" prop="isValid">
+                  <el-radio-group v-model="form.isValid">
+                      <el-radio :label="1">有效</el-radio>
+                      <el-radio :label="0">无效</el-radio>
+                  </el-radio-group>
+              </el-form-item>
+
+              <el-form-item>
+                  <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
+                      <el-button @click="resetForm('ruleForm')">重置</el-button>
+                      <el-button @click="submit('ruleForm')"  type="primary" style=";margin-top:10px">提交</el-button>
+                  </div>
+              </el-form-item>
+          </el-form>
+      </el-dialog>
+
+
   </div>
 </template>
 
 <script>
+import axios from "axios";
+import Vue from "vue";
+
 export default {
-    name: "userManage"
+    name: "userManage",
+    data(){
+        return {
+            dataTable:[],
+            dialogVisible:false,
+            form:{
+                userId:'',
+                userName:'',
+                userPassword:'',
+                creatTime:'',
+                userLevel:'',
+                projectNum:'',
+                contributionValue:'',
+                searchHistory:'',
+                userAvatar:'',
+                isValid:'',
+            },
+        }
+    },
+    mounted() {
+        this.getAllUser();
+    },
+    methods:{
+        getAllUser(){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectUser',
+                // URL 中的查询参数
+                params: {
+                }
+            }).then(function (res) {
+                that.dataTable=res.data;
+            })
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        openDialog(){
+            this.dialogVisible=true;
+        },
+        submit() {
+            var _this = this;
+            //调用方法提交
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/updateUser',
+                // URL 中的查询参数
+                params: {
+                    userId: this.form.userId,
+                    userName: this.form.userName,
+                    userPassword: this.form.userPassword,
+                    creatTime: this.form.creatTime,
+                    userLevel: this.form.userLevel,
+                    projectNum: this.form.projectNum,
+                    contributionValue: this.form.contributionValue,
+                    searchHistory: this.form.searchHistory,
+                    userAvatar: this.form.userAvatar,
+                    isValid: this.form.isValid,
+                }
+            }).then(function (res) {
+                if (res.data.code === 500) {
+                    Vue.prototype.$notify.error({
+                        title: '错误',
+                        message: res.data.msg,
+                        offset: 50
+                    });
+
+                } else {
+                    _this.dialogVisible = false;
+                    _this.getAllUser();
+                    Vue.prototype.$notify({
+                        title: '成功',
+                        message: ('i', {style: 'color: teal'}, "更新成功！"),
+                        type: 'success',
+                        offset: 50
+                    });
+                }
+            });
+        },
+
+        handleEdit(index) {
+
+            this.openDialog();
+            // 深拷贝
+            this.form = index;
+        },
+        handleDelete(index) {
+            var that=this;
+            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                axios({
+                    method: 'post',
+                    // 请求的地址
+                    url: 'http://localhost:8082/helloGithub_war_exploded/deleteUser',
+                    // URL 中的查询参数
+                    params: {
+                        id: index.userId,
+                    }
+                }).then(function (res) {
+                    if (res.data.code === 500) {
+                        Vue.prototype.$notify.error({
+                            title: '错误',
+                            message: res.data.msg,
+                            offset: 50
+                        });
+                    } else {
+                        Vue.prototype.$notify({
+                            title: '成功',
+                            message: ('i', {style: 'color: teal'}, "删除成功"),
+                            type: 'success',
+                            offset: 50
+                        });
+                        that.getAllUser();
+                    }
+
+                });
+            }).catch(() => {
+                // 点击取消:不删除了
+                this.$message({
+                    type: 'info',
+                    message: '已取消删除'
+                });
+            });
+        },
+    }
 }
 </script>
 
diff --git a/src/main.js b/src/main.js
index a87c4f9..eda186f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,8 +26,14 @@ import cookie from 'vue-cookie'
 Vue.prototype.$cookie = cookie;
 
 Vue.config.productionTip = false
-
 Vue.use(Element);
+
+import 'xe-utils'
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+Vue.use(VXETable)
+Vue.prototype.$VXETable = VXETable
+
 new Vue({
     router,
     axios,
diff --git a/src/views/systemIndex.vue b/src/views/systemIndex.vue
index b6fffa0..758ddf4 100644
--- a/src/views/systemIndex.vue
+++ b/src/views/systemIndex.vue
@@ -1,15 +1,15 @@
 <template>
     <el-container style="width: 100%;height: 100%;position:fixed;top:0;left: 0;">
-        <el-aside width="200px" style="background: rgb(84, 92, 100);top:0;left: 0;">
+        <el-aside width="auto" style="background: rgb(84, 92, 100);top:0;left: 0;">
             <AdminAside></AdminAside>
         </el-aside>
-        <el-container style="height:calc(100% - 60px)">
+        <el-container>
             <el-header style="padding:0;">
                 <AdminHeader></AdminHeader>
             </el-header>
             <AdminTags></AdminTags>
             <el-main>
-                <div style="border:1px solid red;">
+                <div>
                     <router-view></router-view>
                 </div>
             </el-main>