在具体的前后端分离项目中,我们经常会遇到点击表格中的某一行的按钮,获取这一行的某一项值的需求,前端点击拿到这个值,再传给后端使用

例如:在此例中点击同步的按钮,需要获取到表格中的ip地址的内容,再传输给后端使用,

  • 此处前端想后端发送的请求方式为post,post请求用实体类接收、map、json都可以,(这里采用JSON接收

 前端页面:点击同步按钮,获取到同一行中的IP地址

1. 前端部分 

前端代码部分:利用(record.key)获取到当行的全部信息

<a-button type="text" size="small" style="color: #1890FF;font-size: 3px;" @click="handSync(record.key)">同步</a-button>

JavaScript部分:定义一个变量负责用于后端接收,与指定的前端的指定字段对应,

 handSync(key) {
      request.post('/device_manage/sync',{
        //点击同步时将该行的ip地址发送给后端
        deviceNumber: this.accessTableDate[key]['deviceNumber'],
 }).then(res=>{ 
  }

其中accessTableDate来自最开始定义表格时的数据来源部分

 <!-- -----------------------------表格区域------------------------------------ -->
      <div>
        <a-table
            :columns="accessColumns" :data-source="accessTableDate" size="small" :pagination="pagination" bordered
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            style="width: 100%;font-size: 3px;margin-top: 10px"
        >

2. 后端部分

  • 后端采用JSON格式接收数据,并使用getString的方式取出数据,getString(“前端中用于与前端表格内容作对应的变量”)
 //点击同步所调用的接口
    @PostMapping("/sync")
    public CommonResp syncMember(@RequestBody JSONObject json) {

        //后端接收前端发送过来的JSON数据,并从中取出具体的值
        String deviceNumber = json.getString("deviceNumber"); 
        
        }

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐