操作员管理微人事项目 SpringBooot + Vue 前后端分离

操作员管理接口设计

HrController

@RestController
@RequestMapping("/system/hr")
public class HrController {

    @Autowired
    HrService hrService;

    @GetMapping("/")
    public List<Hr> getAllHr(){

        return hrService.getAllHr();
    }

}

HrService

在这里插入图片描述

 public List<Hr> getAllHr() {
        Hr principal = (Hr) SecurityContextHolder.getContext().getAuthentication().getPrincipal();//获取存储在Security当前用户信息
        return hrMapper.getAllHr(principal.getId());
    }

HrMapper

    List<Hr> getAllHr(Integer id);

  <resultMap id="BaseResultMap2" type="com.xyg.pojo.Hr" extends="BaseResultMap">
    <collection property="roles" ofType="com.xyg.pojo.Role" >
      <result column="id" property="id"></result>
      <result column="name" property="name"></result>
      <result column="namezh" property="namezh"></result>
    </collection>
  </resultMap>

  <select id="getAllHr" resultMap="BaseResultMap2">
    select * from hr  LEFT JOIN hr_role as hrr  on hr.id=hrr.hrid LEFT JOIN role on role.id = hrr.rid where hr.id!=#{id}
  </select>

mysql逻辑: 查询Hr 和角色之间的信息每个Hr有哪些角色，除了当前用户不查

操作员管理页面展示

SysHr.vue

<template>
    <div>
        <div style="display: flex ; justify-content: center;margin-top: 20px">
            <el-input type="text" placeholder="请输入用户名" style="width: 500px"></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <div style="display: flex; flex-wrap: wrap; justify-content: space-around ;">
            <el-card style="width: 400px; margin-top: 20px"  v-for="(hr,index) in Hrs" :key="index">
                <div slot="header" class="clearfix" >
                    <span>{{hr.name}}</span>
                    <el-button style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete"></el-button>
                </div>
                <div>
                   <img  style="width: 120px;height: 120px; border-radius: 60px; margin-left: 120px" :src="hr.userface" :alt="hr.name" :title="hr.name"/>
                </div>
                <div style="font-family: 幼圆;color:orange;margin-top: 5px;line-height: 30px ">
                    <div>用户名: {{hr.name}}</div>
                    <div>手机号码： {{hr.phone}}</div>
                    <div>地址: {{hr.telephone}}</div>
                    <div>用户状态: <el-switch
                            v-model="hr.enabled"
                            active-text="启用"
                            inactive-text="禁用">
                    </el-switch>
                    </div>
                    <div>用户角色:
                        <el-tag type="success" style="margin-left: 8px" v-for="(role,index) in hr.roles" :key="index">{{role.namezh}}
                        </el-tag>
                        <el-button size="small" style="" icon="el-icon-more"></el-button>
                    </div>
                    <div>备注：{{hr.remark}}</div>


                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SysHr",
        data(){
            return{
                Hrs:[]
            }
        },

        mounted(){
            this.initHr()
        },
        methods:{
            initHr(){
                this.getRequest("/system/hr/").then(resp=>{
                    if (resp){
                        this.Hrs=resp
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>

展示效果
在这里插入图片描述

问题Bug解决

在这里插入图片描述
还有一个BUG

因:org.apache.ibatis.reflection.ReflectionException:非法重载getter方法，在类class
com.chb.vhr.bean.Hr中启用属性类型不明确。这违反了JavaBeans规范，并可能导致不可预测的结果

解决方式
SpringSecurity 实现UserDetails 重写isEnabled 不能有重复的可能重复生成，或者加了个@Data也重复生成了去掉它就好了

用户状态更新

HrController

    @PutMapping("/")
    public RespBean updateHr(@RequestBody Hr hr){
        if(hrService.updateHr(hr)==1){
            return RespBean.ok("更新成功");
        }
        return RespBean.err("更新失败");
    }

HrService

    public int updateHr(Hr hr) {
        return hrMapper.updateByPrimaryKey(hr);
    }

HrMapper

    int updateByPrimaryKey(Hr record);

  <update id="updateByPrimaryKey" parameterType="com.xyg.pojo.Hr" >
    update hr
    set name = #{name,jdbcType=VARCHAR},
      phone = #{phone,jdbcType=CHAR},
      telephone = #{telephone,jdbcType=VARCHAR},
      address = #{address,jdbcType=VARCHAR},
      enabled = #{enabled,jdbcType=BIT},
      username = #{username,jdbcType=VARCHAR},
      password = #{password,jdbcType=VARCHAR},
      userface = #{userface,jdbcType=VARCHAR},
      remark = #{remark,jdbcType=VARCHAR}
    where id = #{id,jdbcType=INTEGER}
  </update>

前端对接

在这里插入图片描述

eanbledChange(hr){
                console.log(hr)
                this.putRequest("/system/hr/",hr).then(resp=>{
                    if(resp){
                        this.initHr()
                    }
                })
           },

操作员角色更新

具体思路是前端传递用户id和需要更新多个角色id,后端接收用户id和数组角色id
先删除原来的角色和用户关联，在重新新增角色和用户关联

HrController

    @PostMapping("/")
    public RespBean updateHrRole(Integer hrid,Integer[] rid){
        System.out.println(rid);
        if(hrService.updateHrRole(hrid,rid)==rid.length){
            return RespBean.ok("更新成功");
        }
        return RespBean.err("更新失败");
    }

在这里插入图片描述

HrService

    @Transactional
    public Integer updateHrRole(Integer hrid, Integer[] rid) {
        hrRoleMapper.deleteByHrId(hrid);

        return  hrRoleMapper.updateHrRole(hrid,rid);
    }

HrRoleMapper

    void deleteByHrId(Integer hrid);

    Integer updateHrRole(@Param("hrid") Integer hrid,@Param("rids") Integer[] rids);

 <delete id="deleteByHrId">
    delete
    from hr_role
    where  hrid=#{hrid};
  </delete>


  <insert id="updateHrRole">
    insert into hr_role  (hrid, rid) values
    <foreach collection="rids" item="rid" separator=",">
      (#{hrid},#{rid})
    </foreach>
  </insert>

前端布局对接后端

加一个弹出框
在这里插入图片描述

 </el-tag>
                            <el-popover
                                    @hide="hidePop(hr)"
                                    @show="showPop(hr)"
                                    placement="bottom"
                                    title="角色列表"
                                    width="100"
                                    trigger="click">
                                <el-button slot="reference" size="mini" style="color: red" icon="el-icon-more">
                                </el-button>
                                <div>
                                    <el-select  v-model="selectrole"  multiple  placeholder="">
                                        <el-option
                                                v-for="(r,indexk) in allRoles"
                                                :key="indexk"
                                                :label="r.namezh"
                                                :value="r.id">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-popover>

在这里插入图片描述

          hidePop(hr){
                let url ='/system/hr/?hrid='+hr.id

                this.selectrole.forEach(r=>{   //selectrole[]数组存储了角色id
                    url+= '&rid='+r
                })

                this.postRequest(url).then(resp=>{
                    if(resp){
                        this.initHr()
                    }
                })

            },
            showPop(role){
                console.log(role)

                let roles=role.roles;
                this.selectrole=[]
                roles.forEach(r=>{
                    this.selectrole.push(r.id)
                })

弹出的时候进行修改角色，关闭框的时候就更新成功

问题解决

发现并没有选择修改角色，隐藏弹出框会进行网络请求。
具体思路
对比两个数组是否一样长
进行遍历对比两个数组的数据角色id是否一样

两个条件符合那就是用户并没有修改数据

  hidePop(hr){
                let roles = []
                Object.assign(roles,hr.roles);//拷贝hr.roles数据到roles
                let fla = false;
                if(roles.length != this.selectrole.length){//如果数组长度不相等说明修改了角色
                    fla=true;
                }else {
                    for(let i=0;i<roles.length;i++){//
                        let role=roles[i]
                        for (let j=0;j<this.selectrole.length;j++){
                            let sr=this.selectrole[j]//和selectrole每个数据进行比较
                            if(role.id == sr){//如果有相等的
                                roles.splice(i,1);//数组中剔除掉
                                i--;//并且数组roles减少长度
                                break//退出当前循环，进入外层循环，进行遍历判断
                            }
                        }

                    }
                    if(roles.length != 0){//遍历完后就判断，roles数组为0说明数组数据都相等的就不放行，程序结束
                        fla=true
                    }
                }

                if(fla){
                    let url ='/system/hr/?hrid='+hr.id

                    this.selectrole.forEach(r=>{   //selectrole[]数组存储了角色id
                        url+= '&rid='+r
                    })

                    this.postRequest(url).then(resp=>{
                        if(resp){
                            this.initHr()
                        }
                    })
                }
            },

操作员搜索

HrController

在查询用户中加个用户名参数

在这里插入图片描述

HrService

    public List<Hr> getAllHr(String keyW) {
        Hr principal = (Hr) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
        return hrMapper.getAllHr(principal.getId(),keyW);
    }

HrMapper

    List<Hr> getAllHr(@Param("id") Integer id, @Param("keywords") String keywords);

在这里插入图片描述

前端接口对接

在这里插入图片描述

操作员删除

HrController

    @DeleteMapping("/{hid}")
    public RespBean deleteHr(@PathVariable Integer hid){
        if(hrService.deleteHr(hid)==1){
         return RespBean.ok("删除成功");
        }
        return RespBean.err("用户状态开启，请先禁用");
    }

HrService

    public int deleteHr(Integer hid) {
        Hr hr = hrMapper.selectByPrimaryKey(hid);
        if(!hr.isEnabled()){
            return hrMapper.deleteByPrimaryKey(hid);
        }
        return 0;
    }

HrMapper

    Hr selectByPrimaryKey(Integer id);

  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
    select 
    <include refid="Base_Column_List" />
    from hr
    where id = #{id,jdbcType=INTEGER}
  </select>

删除接口对接前端

在这里插入图片描述

 deleteHr(hr){
                this.deleteRequest("/system/hr/"+hr.id).then(resp=>{
                    if(resp){
                        this.initHr()
                    }
                })

            },