用户模块的代码

这一部分的代码是管理后台的前端页面，感觉参考的视频写的(只完成了一部分，用户模块的）。
前端的代码：

<template>
    <div>
        <h3>用户列表页面</h3>
        <a-card>
            <a-row :gutter="20">
                <a-col :span="6">
                    <a-input-search v-model="queryParam.username" placeholder="输入用户名查找" enter-button allowClear @search="getUserList"/>
                </a-col>
                <a-col :span="4">
                    <a-button type="primary" @click="addUserVisible =true">新增用户</a-button>
                </a-col>
            </a-row>
            <a-table 
            rowKey="username" 
            :columns="columns" 
            :pagination='pagination' 
            :dataSource="userlist"
             bordered  
             @change="handlerTableChange"
            >
            <span slot="role" slot-scope="role">{{role==1?'管理员':'普通用户'}}</span>
            <template slot="action"  slot-scope="data">
                <div class="actionSlot">
                    <a-button type="primary" style="margin-right:15px" @click="editUser(data.ID)">编辑</a-button>
                    <a-button type="danger" @click="deleteUser(data.ID)" >删除</a-button>
                </div>
            </template>
          
            </a-table>
        </a-card>
        <!-- 新增用户地区 -->
        <a-modal 
        closable
        title="新增用户"
        :visible="addUserVisible"
        width="35%"
        @ok="addUserOk"
        @cancel="addUserCancel" 
        :destroyOnClose='true'
        > 
        <a-form-model :model="userInfo" :rules="userRules"  ref="addUserRef">
            <a-form-model-item label="用户名" prop="username">
                <a-input v-model="userInfo.username"></a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback label="密码" prop="password">
                 <a-input-password v-model="userInfo.password"></a-input-password>
            </a-form-model-item>
            <a-form-model-item label="确认密码" prop="checkpass">
                   <a-input-password v-model="userInfo.checkpass"></a-input-password>
            </a-form-model-item>
            <a-form-model-item label="是否为管理员" prop="role">
                <a-select defaultValue="2" style="120px" @change="adminChange">
                    <a-select-option key="1" value="1">是</a-select-option>
                     <a-select-option key="2" value="2">否</a-select-option>
                </a-select>
            </a-form-model-item>
        </a-form-model>
         </a-modal>
         <!-- 编辑用户区 -->
         <a-modal 
        closable
        title="编辑用户"
        :visible="editUserVisible"
        width="35%"
        @ok="editUserOk"
        @cancel="editUserCancel" 
        > 
        <a-form-model :model="userInfo" :rules="userRules"  ref="addUserRef">
            <a-form-model-item label="用户名" prop="username">
                <a-input v-model="userInfo.username"></a-input>
            </a-form-model-item>
           
            <a-form-model-item label="是否为管理员" prop="role">
                <a-select defaultValue="2" style="120px" @change="adminChange">
                    <a-select-option key="1" value="1">是</a-select-option>
                     <a-select-option key="2" value="2">否</a-select-option>
                </a-select>
            </a-form-model-item>
        </a-form-model>
         </a-modal>
    </div>
</template>
<script>

const columns=[
    {
        title:'ID',
        dataIndex:'ID',
        width:'10%',
        key:'id',
        align:'center'
        },
    {
        title:'用户名',
        dataIndex:'username',
        width:'20%',
        key:'username',
         align:'center'
        },
     {
        title:'角色',
        dataIndex:'role',
        width:'20%',
        key:'role',
         align:'center',
        scopedSlots:{customRender:'role'}
        },
    {
        title:'操作',
        width:'30%',
        key:'action',
         align:'center',
        scopedSlots:{customRender:'action'}
        }
]
export default{
    data(){
        return{
            pagination:{
                pageSizeOptions:['5','10','20'],
                pageSize:5,
                total:0,
                showSizeChanger:true,
                showTotal:(total)=>`共${total}条`,
            },
            userlist:[],
            columns,
            queryParam:{
                username:'',
                pagesize:5,
                pagenum:1,
            },
            userInfo:{
                id:0,
                username:'',
                password:'',
                checkpass:'',
                role:2,
            },
            visible:false,
            addUserVisible:false,
            userRules:{
                username:[
                // {required:true,message:'请输入用户名',trigger:'blur'},
                // {min:4,max:12,message:'用户名应该在4到12位字符之间',trigger:'blur'},
                {validator:(rule,value,callback) =>{

                    if (this.userInfo.username==""){
                        callback(new Error('请输入用户名'))
                    }
                    if([...this.userInfo.username].length<4||[...this.userInfo.username].length>12){
                        callback(new Error('密码应该在4到12为字符之间'))
                    }else{
                        callback()
                    }
                 },
                trigger:'blur',}, ],
               
                password:[{validator:(rule,value,callback) =>{

                    if (this.userInfo.password==""){
                        callback(new Error('请输入密码'))
                    }
                    if([...this.userInfo.password].length<6||[...this.userInfo.password].length>20){
                        callback(new Error('密码应该在6到20为字符之间'))
                    }else{
                        callback()
                    }
            },trigger:'blur',
            },
            ],
            checkpass:[
                {validator:(rule,value,callback) =>{

                    if (this.userInfo.password==""){
                        callback(new Error('请输入密码'))
                    }
                    if(this.userInfo.password!=this.userInfo.checkpass){
                        callback(new Error('密码不一致，请重新输入'))
                    }else{
                        callback()
                    }
            },trigger:'blur',}
            ]
            },
            editUserVisible:false,
        }
        
    },
    created(){
        this.getUserList()
    },
    methods:{
       async getUserList(){
           const {data:res}=await this.$http.get('users',{
            params:{
                username:this.queryParam.username,
                pagesize:this.queryParam.pagesize,
                pagenum:this.queryParam.pagenum,
            },
            })
            if (res.status!=200)return this.$message.error(res.message)
            this.userlist=res.data
            this.pagination.total=res.total
        },
        //更改分页
       handlerTableChange(pagination,filters,sorter){
            var pager={ ...this.pagination}
            pager.current=pagination.current
            pager.pageSize=pagination.pageSize
            this.queryParam.pagesize=pagination.pageSize
            this.queryParam.pagenum=pagination.current
            if (pagination.pageSize != this.pagination.pageSize){
                this.queryParam.pagenum=1
                pager.current=1
            }
            this.pagination=pager
            console.log(filters,sorter)
            this.getUserList()
        },
        //删除用户
        deleteUser(id){
         
           this.$confirm({
               title:'提示：请确认',
               content:'确定要删除该用户吗?一旦删除，无法恢复',
               onOk:async()=>{
                const res =await this.$http.delete(`user/${id}`)
                if (res.status!=200) return this.$message.error(res.message)
                
                this.$message.success('删除成功')
                this.getUserList()
               },
               onCancel:()=>{
                   this.$message.info('已取消删除')
               },
           })      
       },
       //新增用户
       addUserOk(){
            this.$refs.addUserRef.validate(async (valid)=>{
                if (!valid) return this.$message.error('参数不符合要求，请重新输入')
                const { data:res } = await this.$http.post('user/add',{
                    username:this.userInfo.username,
                    password:this.userInfo.password,
                    role:this.userInfo.role,
                })
                if (res.status!=200) return this.$message.error(res.message)
                
                this.addUserVisible=false
                this.$message.success('添加用户成功')
                this.getUserList()
            })
       },
       addUserCancel(){
            this.$refs.addUserRef.resetFields()
            this.addUserVisible=false
              this.$message.info('编辑已取消')
       },
       adminChange(value){
           this.userInfo.role=value
          
       },
       //编辑用户
      async editUser(id){
           this.editUserVisible=true
          const { data:res }=await this.$http.get(`user/${id}`)
          this.userInfo=res.data
          this.userInfo.id=id
       },
       editUserOk(){
              this.$refs.addUserRef.validate(async (valid)=>{
                if (!valid) return this.$message.error('参数不符合要求，请重新输入')
                const { data:res } = await this.$http.put(`user/${this.userInfo.id}`,{
                    username:this.userInfo.username,
                    role:this.userInfo.role,
                })
                if (res.status!=200) return this.$message.error(res.message)
                
                this.editUserVisible=false
                this.$message.success('更新用户信息成功')
                this.getUserList()
            })
       },
      editUserCancel(){
             this.$refs.addUserRef.resetFields()
            this.editUserVisible=false
            
              this.$message.info('编辑已取消')
       }
    },
}
</script>
<style scoped>
.actionSlot{
    display:flex;
    justify-content: center;
}
</style>

<template>
    <a-layout-sider breakpoint="lg" v-model="collapsed">
        <div class="log">
            <span>{{collapsed? 'Blog':'My Blog'}}</span>
        </div>   
        <a-menu theme="dark" mode="inline" @click="goToPage">
            <a-menu-item key="index"
            ><a-icon type="dashboard"></a-icon><span>仪表盘</span> </a-menu-item
            >
             <a-sub-menu >
                 <span slot="title"><a-icon type="file"/><span></span>文章管理</span>
                <a-menu-item key="addart"><a-icon type="form"/><span>写文章</span> </a-menu-item>
                 <a-menu-item key="artlist"><a-icon type="snippets"/><span>文章列表</span> </a-menu-item>
                
               </a-sub-menu>
                <a-menu-item key="catelist"><a-icon type="book"/><span>分类列表</span> </a-menu-item>
                 <a-menu-item key="userlist"><a-icon type="user"/><span>用户列表</span> </a-menu-item>
           </a-menu>
       </a-layout-sider>
</template>
<script>
export default{
    data(){
        return {
            collapsed:false
        }
    },
    methods:{
        goToPage(item){
            this.$router.push('/admin/'+item.key).catch((err) => err)
        }
    }
}
</script>


<style scoped>
.log{
    height: 32px;
    margin: 16px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
}
</style>

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import './plugin/antui'
import './assets/css/style.css'

axios.defaults.baseURL = 'http://localhost:3000/api/v1'

axios.interceptors.request.use(config=>{
    config.headers.Authorization=`Bearer ${window.sessionStorage.getItem('token')}`
    return config
})
Vue.prototype.$http = axios

Vue.config.productionTip = false
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

结果：

用户列表

删除用户的话：
删除第一个用户

删除结果：

编辑只是改了用户名。
新增用户：

新增结果