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

新增管理员

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

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

3.提交

4.后端处理、保存

5.响应前端

vue代码

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>

打开添加界面的逻辑代码

js 复制代码

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

Admin增加属性

后端主要的Service层逻辑

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

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

java 复制代码

/*
    * 通过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层

java 复制代码

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

//2.生成默认密码

java 复制代码

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

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

java 复制代码

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

xml 复制代码

<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.保存管理员和菜单关系

java 复制代码

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

java 复制代码

 public void addAdmin(@RequestBody Admin admin,String adminToken) {
        //1.从Token中获取用户id
        Admin 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

java 复制代码

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

修改管理员

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

获取修改记录的id

查询管理员的信息

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" 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

js 复制代码

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

js 复制代码

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层

java 复制代码

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

2.Service层

java 复制代码

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层

java 复制代码

Admin findAdminById(Integer id);

4.mybatis

resultMap

xml 复制代码

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

    </resultMap>

5.select语句

xml 复制代码

<select id="findAdminById" parameterType="Integer" resultMap="AdminMenuMap">
        SELECT
            a.`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

java 复制代码

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

3.修改管理员信息

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

js 复制代码

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

4.提交修改信息到后端

js 复制代码

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那么就是修改操作

java 复制代码

@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层：

java 复制代码

public void updateAdmin(Admin admin, String adminToken) {
        //1.从Token中获取用户id
        Admin 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层

java 复制代码

void updateAdmin(Admin admin);

void deleteAdminMenu(Integer id);

Mapper.xml层

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

js 复制代码

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层

java 复制代码

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

Service层

java 复制代码

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将管理菜单改为动态

vue 复制代码

 <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层

Java 复制代码

@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层

java 复制代码

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

2.4Dao层

java 复制代码

List<Menu> getMenus(Integer id);

2.5Mapper.xml

xml 复制代码

<select id="getMenus" resultType="Menu">
        SELECT m.name, m.url
        FROM admin_menu am
                 LEFT JOIN menu m ON am.menuid = m.id
        WHERE am.adminid = #{id}
    </select>

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

java 复制代码

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赋予所有权限（初始密码为手机后四位）过程略

结果如下

3.扩展作业

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

新增管理员

修改管理员

删除管理员

登录