vue按钮绑定事件向后台传值

前面增加的几个按钮,需要绑定事件,传到后台,
前台vue代码:
vue按钮绑定事件向后台传值_第1张图片

  <el-button 
    :disabled="changeBtn"
     plain
     @click="remoteCon(1)"
     :class="pixelType == 0 ? 'btnin' : ''"
     >前进</el-button
   >

四个按钮都绑定remoteCon()事件,参数分别为1,2,3,4,对应前进后退,左转右转,

在methods里面定义按钮事件:

  remoteCon(num,roId){
     
      roId=this.robotId;
        console.log(num,roId);
        console.log(roId);
        remoteControl(num,roId);
        return ;
    }

参数num为当前是哪个按钮,roId为当前机器人id;
在js里面定义 remoteControl(num,roId);,调用后台接口:

export function remoteControl(num,roId) {
     
  return request({
     
    url: 'web/robot/remoteConRobot',
    method: 'post',
    params: {
     
      num,
      roId
    }
  })
}

在vue界面引入这个方法:
vue按钮绑定事件向后台传值_第2张图片
要注意,按钮绑定事件remoteCon()和调用接口方法remoteControl()不能重名,之前我都是定义remoteControl(),结果import { remoteControl } from "@/api/robot";是灰色的,‘remoteControl’ is declared but its value is never read.Vetur(6133),意思是已经声明,但未使用
vue按钮绑定事件向后台传值_第3张图片

后台代码:

  @PostMapping(value = "remoteConRobot")
    @ApiOperation("远程遥控机器人")
    @ApiImplicitParams({
     
            @ApiImplicitParam(name = "num", value = "num", required = true, dataType = "int", paramType = "query"),
            @ApiImplicitParam(name = "roId", value = "roId", required = true, dataType = "int", paramType = "query"),
    })
    @SystemLog(module = "远程遥控机器人", methods = "远程遥控机器人", description = "远程遥控机器人")
    public RestResponse remoteConRobot(int num, int roId) {
     
        if (EmptyUtil.isEmpty(roId)) {
     
            return RestResponse.fail("机器人id不能为空");
        }
        RobotEntity robotEntity = robotService.getById(roId);
        if (EmptyUtil.isEmpty(robotEntity)) {
     
            return RestResponse.fail("该机器人不存在");
        }
        String macId = robotEntity.getSeria();
        String action = null;
        switch (num){
     
            case 1:
                action="前进";
                break;
            case 2:
                action="后退";
                break;
            case 3:
                action="左转";
                break;
            case 4:
                action="右转";
                break;
        }
        Map<Object,String> map=new HashMap<>();
            map.put("点击了",action);
            map.put("当前机器人mac地址",macId);
        return RestResponse.ok(map);

    }

运行:
vue按钮绑定事件向后台传值_第4张图片

你可能感兴趣的:(work)