当前位置： 首页 > news >正文

SpringBoot新闻项目学习day3--后台权限的增删改查以及权限管理分配

news 2025/7/22 13:44:55

      • 新增管理员
      • 修改管理员
      • 删除管理员
      • 登录

新增管理员

1.点击新增按钮打开一个对话框

2.确定新增对话框要显示哪些内容

3.提交

4.后端处理、保存

5.响应前端

vue代码

<template><!-- 新增代码内容是比较多的,建议抽取出来,定义到一个独立的vue文件中在列表组件中导入添加组件--><el-dialog title="新增管理员" :visible.sync="dialogVisible" width="50%"><el-form ref="form" label-width="80px"><el-form-item label="账号"><el-input v-model="form.account"></el-input></el-form-item><el-form-item label="性别"><el-radio-group v-model="form.gender"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item>
<!-- 			<el-form-item label="生日"><el-date-picker type="date"   placeholder="选择日期" value-format="yyyy-MM-dd"  v-model="form.birthday"style="width: 100%;"></el-date-picker></el-form-item> --><el-form-item label="电话"><el-input v-model="form.phone"></el-input></el-form-item><el-form-item label="菜单"><!-- 动态获取--><el-checkbox v-model = "form.menuIds" v-for="menu in menuList" :label="menu.id" :key="menu.id">{{menu.name}}</el-checkbox></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="save()">保 存</el-button></span></el-dialog>
</template><script>export default {data() {return {dialogVisible: false,menuList:[],form: {account: "",gender: "",phone: "",menuIds:[]}}},methods: {save(){this.$http.post("adminCtl/addAdmin",this.form).then((resp)=>{if(resp.data.code == 200){this.$message({message:resp.data.message,type:'success'})dialogVisible:false,this.$router.go();//更新当前路由路件}})}},mounted() {this.$http.get("adminCtl/menus").then((resp)=>{if(resp.data.code == 200){this.menuList = resp.data.data;}})}}
</script><style>
</style>

打开添加界面的逻辑代码

openDialog(){this.$refs.add.dialogVisible=true;
}

image-20250616205910002

Admin增加属性

image-20250616210054552

后端主要的Service层逻辑

//1.从Token中获取用户id

在JWTUtil中增加通过Token来获取id

/** 通过Token获取Admin对象id* */public static Admin getAdmin(String token){DecodedJWT jwt = JWTUtil.getTokenInfo(token);Integer id = jwt.getClaim("id").asInt();Admin operAdmin = new Admin();operAdmin.setId(id);return operAdmin;}

在Service层

//1.从Token中获取用户idAdmin operAdmin = JWTUtil.getAdmin(adminToken);admin.setAdmin(operAdmin);//封装操作人

//2.生成默认密码

//2.生成默认密码 md5加密 111111为初始密码并进行加密
String md5Password = DigestUtils.md5DigestAsHex("111111".getBytes());admin.setPassword(md5Password);

//3.保存管理信息到admin表

//3.保存管理信息到admin表
adminDao.insertAdmin(admin);

<insert id="insertAdmin" parameterType="Admin" useGeneratedKeys="true" keyColumn="id" keyProperty="id">INSERT INTO admin (account, password, phone, gender, type, adminid, oper_time)VALUES (#{account}, #{password}, #{phone}, #{gender}, #{type}, #{admin.id}, now())
</insert>

//4.保存管理员和菜单关系

Integer[] menuIds = admin.getMenuIds();if(menuIds!=null){for(Integer menuId:menuIds){adminDao.insertAdminMenu(admin.getId(),menuId);}}

 public void addAdmin(@RequestBody Admin admin,String adminToken) {//1.从Token中获取用户idAdmin operAdmin = JWTUtil.getAdmin(adminToken);admin.setAdmin(operAdmin);//封装操作人//2.生成默认密码 md5加密 111111为初始密码并进行加密String md5Password = DigestUtils.md5DigestAsHex("111111".getBytes());admin.setPassword(md5Password);//3.保存管理信息到admin表adminDao.insertAdmin(admin);//4.保存管理员和菜单关系Integer[] menuIds = admin.getMenuIds();if(menuIds!=null){for(Integer menuId:menuIds){adminDao.insertAdminMenu(admin.getId(),menuId);}}}

接收端Controller

public Result addAdmin(@RequestBody Admin admin, @RequestHeader("Token")String adminToken) {adminService.addAdmin(admin,adminToken);return new Result(200,"success",null);}

修改管理员

1.点击编辑按钮，打开修改对话框

​ 获取修改记录的id

​ 查询管理员的信息

el-dialog title="修改管理员" :visible.sync="dialogVisible" width="50%"><el-form ref="form" label-width="80px"><el-form-item label="账号" ><el-input v-model="form.account" disabled></el-input></el-form-item><el-form-item label="性别"><el-radio-group v-model="form.gender"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item><el-form-item label="电话"><el-input v-model="form.phone"></el-input></el-form-item><el-form-item label="菜单"><!-- 动态获取--><el-checkbox v-model = "form.menuIds" v-for="menu in menuList" :label="menu.id" :key="menu.id">{{menu.name}}</el-checkbox></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="save()">保 存</el-button></span></el-dialog>

2.在修改页面显示管理员信息

前端1.获取被修改用户id

openUpdateDialog(id){this.$refs.update.dialogVisible=true;this.$refs.update.findAdminById(id);
}

findAdminById(id){this.$http.get("adminCtl/findAdminById?id="+id).then((resp)=>{if(resp.data.code == 200){this.form.account = resp.data.data.account;this.form.gender = resp.data.data.gender;this.form.phone = resp.data.data.phone;this.form.menuIds = resp.data.data.menuIds;}})}

后端

​ 1.controller层

@RequestMapping(path = "/findAdminById",method = RequestMethod.GET)public Result findAdminById(Integer id) {Admin admin = adminService.findAdminById(id);return new Result(200,"success",admin);}

​ 2.Service层

public Admin findAdminById(Integer id) {Admin admin = adminDao.findAdminById(id);//把菜单的每个id转化为数组Integer[] menusId = admin.getMenus().stream().map(Menu::getId).toArray(Integer[]::new);System.out.println(Arrays.toString(menusId));admin.setMenuIds(menusId);return admin;}

​ 3.Dao层

Admin findAdminById(Integer id);

​ 4.mybatis

resultMap

666666666+<id column="menuid" property="id"/></collection></resultMap>

​ 5.select语句

<select id="findAdminById" parameterType="Integer" resultMap="AdminMenuMap">SELECTa.`id`,a.`account`,a.`gender`,a.`phone`,am.`menuid`FROM admin a LEFT JOIN admin_menu am ON a.id = am.adminid WHERE a.`id` = #{id}</select>

由于查出来的菜单id封装在Menu数组里面

new attribute of Admin class

private List<Menu> menus;//封装菜单列表

image-20250617183743493

3.修改管理员信息

前端：将修改的信息放在表单

form: {account: "",gender: "",phone: "",menuIds:[]
}

4.提交修改信息到后端

save(){this.$http.post("adminCtl/addAdmin",this.form).then((resp)=>{if(resp.data.code == 200){this.$message({message:resp.data.message,type:'success'})dialogVisible:false,this.$router.go();//更新当前路由路件}})}

5.后端修改并且响应

Controller层：

修改和更新可以同时在一个方法里，如何区分修改和删除？？

答：当传入的数据id不等于null那么就是修改操作

@RequestMapping(path = "/addAdmin",method = RequestMethod.POST)/*添加管理员* */public Result addAdmin(@RequestBody Admin admin, @RequestHeader("Token")String adminToken) {if(admin.getId() == null){adminService.addAdmin(admin,adminToken);}else{adminService.updateAdmin(admin,adminToken);}return new Result(200,"success",null);
}

Service层：

public void updateAdmin(Admin admin, String adminToken) {//1.从Token中获取用户idAdmin operAdmin = JWTUtil.getAdmin(adminToken);admin.setAdmin(operAdmin);//封装操作人//2.更新管理员数据到管理员表adminDao.updateAdmin(admin);//3.更新菜单关系//3.1先删除原有关系adminDao.deleteAdminMenu(admin.getId());//3.2再插入新的关系Integer[] menuIds = admin.getMenuIds();if(menuIds!=null){for(Integer menuId:menuIds){adminDao.insertAdminMenu(admin.getId(),menuId);}}}

Dao层

void updateAdmin(Admin admin);void deleteAdminMenu(Integer id);

Mapper.xml层

<!--    更新管理员信息--><update id="updateAdmin" parameterType="Admin">UPDATE admin SET account = #{account}, phone = #{phone}, gender = #{gender}, oper_time = now() WHERE id = #{id}</update><!--    删除管理员信息--><delete id="deleteAdminMenu" parameterType="Integer">DELETE FROM admin_menu WHERE adminid = #{id}</delete>

修改前：

image-20250618210351635

image-20250618210405383

修改后：

image-20250618210428534

image-20250618210745641

image-20250618210822333

删除管理员

1.前端方法 传递所要删除的管理员id

deleteAdmin(id){alert(id)this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$http.get("adminCtl/deleteAdminById?id=" + id).then((resp) => {this.$message({type: 'success',message: '删除成功!'});this.$router.go();})}).catch(() => {// 用户点击了取消按钮，这里可以什么也不做，或者给用户一个反馈  // 例如，可以使用 this.$message 来显示一个消息  this.$message({type: 'info',message: '已取消删除操作'});});}

2.后端

controller层

@RequestMapping(path = "/deleteAdminById",method = RequestMethod.GET)public Result deleteAdminById(Integer id) {adminService.deleteAdminById(id);return new Result(200, "success", null);}

Service层

public void deleteAdminById(Integer id) {//先删除菜单关系adminDao.deleteAdminMenu(id);//再删除管理员adminDao.deleteAdminById(id);
}

登录

1.认证：登录时候账号是否存在，验证上号是否可用

​ 由于进行md5加密后，数据库密码是加密之后的，所以登录后端程序需要做以下修改

controller层

@RequestMapping(path = "/login")public Result login(@RequestBody Admin admin){ admin.setPassword(DigestUtils.md5DigestAsHex(admin.getPassword().getBytes()));System.out.println(loginService);Admin admin1 = loginService.login(admin);if(admin1 != null){return new Result(200,"success",admin1);}else {return new Result(400,"fail","用户名或密码错误");}}

2.授权：根据给管理员分配的权限菜单进行查询

前端Main界面做一下修改

2.1将管理菜单改为动态

 <el-container><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1']"  router><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>操作菜单</template><el-menu-item-group><el-menu-item :index="menu.url" v-for="menu in menuList">{{menu.name}}</el-menu-item><!-- 路由地址 --></el-menu-item-group></el-submenu></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container>

2.2向后端传送get请求获取登陆者权限菜单

后端Login模块

controller层

@RequestMapping(path = "/menus",method = RequestMethod.GET)public Result menus(@RequestHeader("adminToken")String adminToken){List<Menu> menus = loginService.getMenus(adminToken);return new Result(200,"success",menus);}

2.3Service层

public List<Menu> getMenus(String adminToken) {Admin admin = JWTUtil.getAdmin(adminToken);return loginDao.getMenus(admin.getId());}

2.4Dao层

List<Menu> getMenus(Integer id);

2.5Mapper.xml

<select id="getMenus" resultType="Menu">SELECT m.name, m.urlFROM admin_menu amLEFT JOIN menu m ON am.menuid = m.idWHERE am.adminid = #{id}</select>

注意：Menu类里面必修加url属性

package org.example.model;import lombok.Data;
import org.springframework.stereotype.Component;@Component
@Data
public class Menu {private Integer id;private String name;//增加url属性private String url;
}

测试：

1.添加zhuguan赋予所有权限（初始密码为手机后四位）过程略

结果如下

image-20250619112453838

3.扩展作业

image-20250619111736390

http://www.lqws.cn/news/441523.html

相关文章：

  • 算法导论第十九章 并行算法：解锁计算新维度
  • Oracle 数据库性能优化之重做日志（redo）
  • 刘波卸任OPPO法定代表人、经理等职务，段要辉“接棒”
  • FPGA基础 -- Verilog 禁止语句
  • django rest_framework 自定义403 Forbidden错误页面
  • NetworkManager介绍与用法
  • 【Bluedroid】蓝牙启动之 btif_init_ok 流程源码解析
  • 二叉树基本学习
  • “开放原子园区行”太原站：openKylin以开源之力，赋能产业发展
  • Go 运维巡检系统（opsxj）开发与实践
  • 01.线性代数是如何将复杂的数据结构转化为可计算的数学问题，这个过程是如何进行的
  • 前端跨域解决方案（5）：websocket
  • SQL注入安全研究
  • JMeter 高阶玩法：分布式压测的技术核心技术要点
  • 容器运行时保护：用Falco构建云原生安全防线
  • Java同步机制四大工具对比
  • 国产USRP X440 PRO：超大带宽、多通道相参同步的旗舰型软件无线电设备
  • 自主学习-《WebDancer:Towards Autonomous Information Seeking Agency》
  • leetcode:461. 汉明距离（python3解法，数学相关算法题）
  • 中国医科大借iMeta影响因子跃升至33.2（中科院1区）东风，凭多组学联合生信分析成果登刊
  • 视觉大语言模型未能充分利用视觉表征
  • Oracle 中唯一索引对行锁的影响
  • 工具 | vscode 发出声音，如何关闭
  • Uniapp 网络请求封装专题
  • 使用Charles抓包工具提升API调试与性能优化效率
  • 【LLM学习笔记3】搭建基于chatgpt的问答系统（下）
  • 从“看懂”到“行动”： VLM 与 VLA
  • MySQL读写分离技术详解：架构设计与实践指南
  • Hive优化详细讲解
  • vue项目插入腾讯地图