前进 四个按钮都绑定remoteCon()事件" />

小言_互联网的博客

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

240人阅读  评论(0)

前面增加的几个按钮,需要绑定事件,传到后台,
前台vue代码:

  <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界面引入这个方法:

要注意,按钮绑定事件remoteCon()和调用接口方法remoteControl()不能重名,之前我都是定义remoteControl(),结果import { remoteControl } from "@/api/robot";是灰色的,‘remoteControl’ is declared but its value is never read.Vetur(6133),意思是已经声明,但未使用

后台代码:

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

    }

运行:


转载:https://blog.csdn.net/weixin_42260782/article/details/117078085
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场