操作员管理微人事项目 SpringBooot + Vue 前后端分离-Toy模板网

这篇具有很好参考价值的文章主要介绍了操作员管理微人事项目 SpringBooot + Vue 前后端分离。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

操作员管理接口设计

HrController

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

    @Autowired
    HrService hrService;

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

        return hrService.getAllHr();
    }

}

HrService

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

 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>

展示效果
操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

问题Bug解决

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot
还有一个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>

前端对接

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

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("更新失败");
    }

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

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>

前端布局对接后端

加一个弹出框
操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

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

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

          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

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

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

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

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

前端接口对接

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot

操作员删除

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>

删除接口对接前端

操作员管理微人事项目 SpringBooot + Vue 前后端分离,vue.js,前端,spring boot
文章来源地址https://www.toymoban.com/news/detail-668819.html

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

            },

到了这里，关于操作员管理微人事项目 SpringBooot + Vue 前后端分离的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

操作员管理接口设计

HrController

HrService

HrMapper

操作员管理页面展示

问题Bug解决

用户状态更新

HrController

HrService

HrMapper

前端对接

操作员角色更新

HrController

HrService

HrRoleMapper

前端布局对接后端

问题解决

操作员搜索

HrController

HrService

HrMapper

前端接口对接

操作员删除

HrController

HrService

HrMapper

删除接口对接前端

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

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

操作员管理接口设计

HrController

HrService

HrMapper

操作员管理页面展示

问题Bug解决

用户状态更新

HrController

HrService

HrMapper

前端对接

操作员角色更新

HrController

HrService

HrRoleMapper

前端布局对接后端

问题解决

操作员搜索

HrController

HrService

HrMapper

前端接口对接

操作员删除

HrController

HrService

HrMapper

删除接口对接前端

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

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