管理用户路由

src/components/admin/admin-User.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="20">
+
+      <el-dialog v-model="editUserVisible" title="编辑用户">
+        <el-form :model="formData" ref="vForm"  label-position="left" label-width="80px"
+                 size="default" >
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="formData.username" placeholder="用户名" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="密码(md5)" prop="password">
+            <el-input v-model="formData.password" placeholder="密码"></el-input>
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email" >
+            <el-input v-model="formData.email" placeholder="邮箱" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="是否被ban" prop="banned">
+            <el-input v-model="formData.banned" placeholder="用户状态"></el-input>
+          </el-form-item>
+          <el-form-item label="是否隐藏" prop="hidden">
+            <el-input v-model="formData.hidden" placeholder="用户状态"></el-input>
+          </el-form-item>
+          <el-form-item label="权限" prop="role">
+            <el-input v-model="formData.role" placeholder="0是普通，1是admin"></el-input>
+          </el-form-item>
+          <el-form-item label="描述" prop="affiliation" >
+            <el-input v-model="formData.affiliation" placeholder="" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="网站" prop="website" >
+            <el-input v-model="formData.website" placeholder="" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="country" prop="country">
+            <el-input v-model="formData.country" placeholder="" disabled></el-input>
+          </el-form-item>
+          <el-button type="primary" @click="edit()">提交</el-button>
+        </el-form>
+      </el-dialog>
+
+      <el-table :data="data" row-key="id" style="width: 100%">
+        <el-table-column label="id" prop="id" column-key="id"/>
+        <el-table-column label="用户名" prop="username"/>
+        <el-table-column label="密码(md5值)" prop="password"/>
+        <el-table-column label="是否被ban" prop="banned"/>
+        <el-table-column label="权限" prop="role"/>
+        <el-table-column label="操作" width="180">
+          <template #default="scope">
+            <el-button link type="primary" size="small" @click="editClick(scope.row)"
+            >编辑</el-button>
+            <el-button link type="primary" size="small" @click="handleClick(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data(){
+   return{
+     formData:{
+       id:0,
+       username:"",
+       password:"",
+       email:"",
+       affiliation:"",
+       country:"",
+       website:"",
+       banned:0,
+       hidden:0,
+       role:0,
+       team_id:0,
+     },
+     data:[],
+     editUserVisible:false,
+   }
+  },
+  mounted() {
+    axios.get('/api/v1/admin/users').then(res => {
+      if (res.data.code === 200) {
+        this.data = res.data.data;
+        console.log(this.data);
+      }
+    })
+
+  },
+  methods:{
+    // 修改用户
+    editClick(row){
+      this.editUserVisible=true
+      this.formData.id=row.id
+      this.formData.username=row.username
+      this.formData.password=row.password
+      this.formData.email=row.email
+      this.formData.affiliation=row.affiliation
+      this.formData.country=row.country
+      this.formData.website=row.website
+      this.formData.banned=row.banned
+      this.formData.hidden=row.hidden
+      this.formData.role=row.role
+    },
+    //删除用户
+    handleClick(row){
+      axios.delete('/api/v1/admin/user/'+row.id).then(res => {
+        if (res.data.code === 200) {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          });
+          this.data.splice(this.data.indexOf(row),1);
+        }
+      })
+    },
+    edit(){
+      console.log(this.formData)
+      axios.put('/api/v1/admin/user/'+this.formData.id,this.formData).then(res => {
+        if (res.data.code === 200) {
+          this.$message({
+            message: '修改成功',
+            type: 'success'
+          });
+          this.editUserVisible=false
+        }
+      })
+    }
+  }
+}
+
+</script>

src/router/index.js

@@ -83,6 +83,11 @@ const router = createRouter({
                     path:'challenges',
                     name:'AdminChallenges',
                     component: ()=> import('../views/admin/AdminChal.vue'),
+                },
+                {
+                    path:'user',
+                    name:'AdminUsers',
+                    component: ()=> import('../views/admin/AdminUser.vue'),
                 }
             ]
 

src/views/admin/AdminUser.vue

@@ -0,0 +1,10 @@
+<template>
+  <Auser></Auser>
+</template>
+
+<script>
+import Auser from "../../components/admin/admin-User.vue";
+export default {
+  components: {Auser},
+}
+</script>