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

新增管理员

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;
}

Admin增加属性

后端主要的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;//封装菜单列表

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>

修改前：

修改后：

删除管理员

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);
}

@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;
}