SpringBoot新聞項目學習day3--后臺權限的增刪改查以及權限管理分配

- - 新增管理員
  - 修改管理員
  - 刪除管理員
  - 登錄

新增管理員

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

登錄

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