16---实现权限菜单管理（一）

于 2023-01-04 22:52:27 发布
阅读量1.3k 收藏 6
点赞数 1
分类专栏： 从0开始手撸一套前后端分离后台管理系统 文章标签： java 数据库 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56116754/article/details/128555818
版权

1、实现角色管理

  1. 建role表
USE `management`;
DROP TABLE IF EXISTS `role`;

CREATE TABLE `role` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `name` varchar(50) DEFAULT NULL COMMENT '名称',
  `description` varchar(255) DEFAULT NULL COMMENT '描述',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

接下来的操作可以用代码生成器一键生成

  1. 写实体类Role.java
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName(value = "role")
public class Role {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private String description;
}
  1. 写mapper层 RoleMapper.java
@Repository
public interface RoleMapper extends BaseMapper<Role> {
}
  1. 写service层RoleService.java
@Service
public class RoleService extends ServiceImpl<RoleMapper, Role> {
}
  1. 写controller层 RoleController.java
@RestController
@RequestMapping("/role")
public class RoleController {
    @Autowired
    private RoleService roleService;



    //插入和修改操作
    @PostMapping
    public Result save(@RequestBody Role role){
        return Result.success(roleService.saveOrUpdate(role));
    }

    //查询所有数据
    @GetMapping
    public Result findAll(){
        return Result.success(roleService.list());
    }

    //删除
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Integer id){
        return Result.success(roleService.removeById(id));
    }

    //批量删除
    @PostMapping ("/del/batch")
    public Result deleteBatch(@RequestBody List<Integer> ids){
        return Result.success(roleService.removeBatchByIds(ids));
    }

    //根据id查找用户信息
    @GetMapping("{id}")
    public Result findOneById(@PathVariable Integer id){
        return Result.success(roleService.getById(id));
    }

    //分页查询
    @GetMapping("/page")
    public Result findPage(@RequestParam Integer pageNum,
                           @RequestParam Integer pageSize,
                           @RequestParam String name){
        QueryWrapper<Role> queryWrapper = new QueryWrapper<>();
        if (! "".equals(name)){
            queryWrapper.like("name",name);
        }
        queryWrapper.orderByDesc("id");
        return Result.success(roleService.page(new Page<>(pageNum,pageSize),queryWrapper));

    }
}
  1. 前端写Role页面 Role.vue
<template>
    <div>
     <div style="padding:10px 0">
       <el-input style="width:200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
       <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
       <el-button  type="warning" @click="reset">重置</el-button>
      
     </div>

     <div style="margin:10px 0">
       <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
       <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除这些内容吗？"
                @confirm="delBatch"
          >
          <el-button type="danger"  slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
     </div>
     <el-table :data="tableData" border stripe :header-cell-calss-name="'headerBg'"    @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
       <el-table-column prop="name" label="名称" ></el-table-column>
       <el-table-column prop="description" label="描述" ></el-table-column>
       <el-table-column label="操作" width="280" align="center">
         <template slot-scope="scope" >
          <el-button type="info" @click="selectMenu(scope.row.id)">分配菜单<i class="el-icon-menu"></i></el-button>

           <el-button type="success" @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除吗？"
                @confirm="handleDelete(scope.row.id)"
          >
          <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
     <div style="padding:10px 0">
       <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
         :current-page="pageNum"
         :page-sizes="[2, 4, 6, 10]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </div>

      <el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%">
        <el-form label-width="80px" size="small">
          <el-form-item label="名称" >
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" >
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="分配菜单" :visible.sync="menuDialogVisable" width="30%">
        <el-tree
            :data="menuData"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[1]"
            :default-checked-keys="[4]"
            @check-change="handleCheckChange">
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="menuDialogVisable = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default{
    name:"User",
    data() {
     return {
       tableData:[],
       total: 0 ,
       pageNum:1,
       pageSize:4,
       name:"",
       form:{},
       dialogFormVisible:false,
       menuDialogVisable:false,
       multipleSelection:[],
       menuData: [
          {
          id: 1,
          label: '主页',
          children: []
          },
          {
          id: 2,
          label: '系统管理',
          children: [{
            id:3,
            label:'用户管理',
            children:[]
          },
          {
            id:4,
            label:'角色管理',
            children:[]
          },
          {
            id:5,
            label:'菜单管理',
            children:[]
          },
          {
            id:6,
            label:'文件管理',
            children:[]
          }]
          }
        ]
     }
    },
    created(){
        this.load()
    },
    methods:{
        load(){
      this.request.get("/role/page",{
        params:{
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        name:this.name

      }
        }).then(res=>{
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total 
      })
     },
     save(){
      this.request.post("/role",this.form).then(res=>{
        if(res.data){
          this.$message.success("保存成功!")
          this.dialogFormVisible=false
          this.load()
        }else{
          this.$message.error("保存失败！")
        }
      })


     },
     handleAdd(){

      this.dialogFormVisible=true
      this.form={}

     },
     handleUpdate(row){
      this.form={...row}
      this.dialogFormVisible=true
     
     },
     handleDelete(id){
      this.request.delete("/role/" + id).then(res=>{
        if(res.data){
          this.$message.success("删除成功!")
          this.load()
        }else{
          this.$message.error("删除失败！")
        }
      })
     },
     delBatch(){
      let ids=this.multipleSelection.map(v => v.id)  //把对象数组转化为id数组【1,2,3】
      this.request.post("/role/del/batch",ids).then(res=>{
        if(res.data){
          this.$message.success("批量删除成功!")
          this.load()
        }else{
          this.$message.error("批量删除失败！")
        }
      })

     },
     handleSelectionChange(val){
      this.multipleSelection=val



     },
     reset(){
      this.name=""
      this.load()

     },
    
     handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
     },
     handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
     },
    selectMenu(roleId){
      this.menuDialogVisable=true;

    },
    handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      }
    }
}

</script>

<style>
.headerBg{
    background: #eee!important;
}
</style>
  • 基本都是复制粘贴的代码（User页面），不过要改一下请求后端接口的url，和数据对应的字段名
  1. 去注册路由 index.js
  {
        path: 'role',
        name:'角色管理',
        component: () => import('../views/Role.vue')
      },
  1. 在aside中添加角色管理 Aside.vue
  <el-menu-item index="/role">
        <i class="el-icon-s-custom"></i>
        <span slot="title">角色管理</span>
         </el-menu-item>
  1. 去页面测试

在这里插入图片描述

进行增删改查的操作测试是否可以正常操作数据库

2、实现菜单管理

  1. 建表menu表
USE `management`;
DROP TABLE IF EXISTS `menu`;

CREATE TABLE `menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `name` varchar(255) DEFAULT NULL COMMENT '名称',
  `path` varchar(255) DEFAULT NULL COMMENT '路径',
  `icon` varchar(255) DEFAULT NULL COMMENT '图标',
  `description` varchar(255) DEFAULT NULL COMMENT '描述',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
  1. 写实体类Menu.java
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName(value = "menu")
public class Menu {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private String path;
    private String icon;
    private String description;
}
  1. 写Mapper层MenuMapper.java
@Repository
public interface MenuMapper extends BaseMapper<Menu> {
}
  1. 写service层MenuService.java
@Service
public class MenuService extends ServiceImpl<MenuMapper, Menu> {
}
  1. 写controller层MenuController.java
@RestController
@RequestMapping("/menu")
public class MenuController {
    @Autowired
    private MenuService menuService;



    //插入和修改操作
    @PostMapping
    public Result save(@RequestBody Menu menu){
        return Result.success(menuService.saveOrUpdate(menu));
    }

    //查询所有数据
    @GetMapping
    public Result findAll(){
        return Result.success(menuService.list());
    }

    //删除
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Integer id){
        return Result.success(menuService.removeById(id));
    }

    //批量删除
    @PostMapping ("/del/batch")
    public Result deleteBatch(@RequestBody List<Integer> ids){
        return Result.success(menuService.removeBatchByIds(ids));
    }

    //根据id查找用户信息
    @GetMapping("{id}")
    public Result findOneById(@PathVariable Integer id){
        return Result.success(menuService.getById(id));
    }

    //分页查询
    @GetMapping("/page")
    public Result findPage(@RequestParam Integer pageNum,
                           @RequestParam Integer pageSize,
                           @RequestParam String name){
        QueryWrapper<Menu> queryWrapper = new QueryWrapper<>();
        if (! "".equals(name)){
            queryWrapper.like("name",name);
        }
        queryWrapper.orderByDesc("id");
        return Result.success(menuService.page(new Page<>(pageNum,pageSize),queryWrapper));

    }
}
  1. 前端实现菜单管理页面 Menu.vue
<template>
    <div>
     <div style="padding:10px 0">
       <el-input style="width:200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
       <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
       <el-button  type="warning" @click="reset">重置</el-button>
      
     </div>

     <div style="margin:10px 0">
       <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
       <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除这些内容吗？"
                @confirm="delBatch"
          >
          <el-button type="danger"  slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
     </div>
     <el-table :data="tableData" border stripe :header-cell-calss-name="'headerBg'"    @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
       <el-table-column prop="name" label="名称" ></el-table-column>
       <el-table-column prop="path" label="路径" ></el-table-column>
       <el-table-column prop="icon" label="图标" ></el-table-column>
       <el-table-column prop="description" label="描述" ></el-table-column>
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope" >
           <el-button type="success" @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除吗？"
                @confirm="handleDelete(scope.row.id)"
          >
          <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
     <div style="padding:10px 0">
       <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
         :current-page="pageNum"
         :page-sizes="[2, 4, 6, 10]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </div>

      <el-dialog title="菜单信息" :visible.sync="dialogFormVisible" width="30%">
        <el-form label-width="80px" size="small">
          <el-form-item label="名称" >
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路径" >
            <el-input v-model="form.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" >
            <el-input v-model="form.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" >
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default{
    name:"User",
    data() {
     return {
       tableData:[],
       total: 0 ,
       pageNum:1,
       pageSize:4,
       name:"",
       form:{},
       dialogFormVisible:false,
       multipleSelection:[]
     }
    },
    created(){
        this.load()

    },
    methods:{
        load(){
      this.request.get("/menu/page",{
        params:{
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        name:this.name

      }
        }).then(res=>{
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total 
      })
     },
     save(){
      this.request.post("/menu",this.form).then(res=>{
        if(res.data){
          this.$message.success("保存成功!")
          this.dialogFormVisible=false
          this.load()
        }else{
          this.$message.error("保存失败！")
        }
      })


     },
     handleAdd(){

      this.dialogFormVisible=true
      this.form={}

     },
     handleUpdate(row){
      this.form={...row}
      this.dialogFormVisible=true
     
     },
     handleDelete(id){
      this.request.delete("/menu/" + id).then(res=>{
        if(res.data){
          this.$message.success("删除成功!")
          this.load()
        }else{
          this.$message.error("删除失败！")
        }
      })
     },
     delBatch(){
      let ids=this.multipleSelection.map(v => v.id)  //把对象数组转化为id数组【1,2,3】
      this.request.post("/menu/del/batch",ids).then(res=>{
        if(res.data){
          this.$message.success("批量删除成功!")
          this.load()
        }else{
          this.$message.error("批量删除失败！")
        }
      })

     },
     handleSelectionChange(val){
      this.multipleSelection=val



     },
     reset(){
      this.name=""
      this.load()

     },
    
     handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
     },
     handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
     }

    }
}

</script>

<style>
.headerBg{
    background: #eee!important;
}
</style>
  1. 注册路由 index.js
const routes = [
  {
    path: '/',
    component: () => import('../views/Manage.vue'),
    redirect:"/home",
    children:[
      {
        path:'home',
        name:'首页',
        component:()=>import('../views/Home.vue')
      },
      {
        path: 'user',
        name:'用户管理',
        component: () => import('../views/User.vue')
      },
      {
        path: 'role',
        name:'角色管理',
        component: () => import('../views/Role.vue')
      },
      {
        path: 'menu',
        name:'菜单管理',
        component: () => import('../views/Menu.vue')
      },
     
      {
        path:'password',
        name:'修改密码',
        component:()=>import('../views/Password.vue')
      },
      {
        path:'person',
        name:'个人信息',
        component:()=>import('../views/Person.vue')
      },
      {
        path:'file',
        name:'文件管理',
        component:()=>import('../views/Files.vue')
      }
    ]
  },

都是Manage路由的子路由

  1. 去页面测试

在这里插入图片描述

同样进行以下增删改查的操作，看是否正常

创建这两个页面，主要代码都是复制粘贴前面user页面的代码，后端代码也是一样，都是实现同样的接口。所以后端建完表后就可以用代码生成器一键生成，前端代码注意修改一下请求后端的接口，然后数据库的字段要一一对应绑定好

Zero摄氏度
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zero摄氏度

感谢鼓励！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值