Vue+springboot前台向后台传值

Vue+SpringBoot前台向后台传值

主要记录两种方式，第一种是只传递id，第二种是自己定义内容进行传值

1.只传id

只传id比较普遍的使用，通过id就可以进行大部分操作，具体代码如下

后端代码

  /**
     * 通过id获取基本信息详细信息
     */
    //  @GetMapping(value = "/{ID}")就是通过get方式获取id
    @GetMapping(value = "/{ID}")
    public AjaxResult getInfo(@PathVariable("ID") Long ID)
    {
        //在这里就可以进行操作，ID就是前台传递过来的
        //yhBaseinfoService.selectYhBaseinfoByID(ID)这句就是通过id进行查询
        return success(yhBaseinfoService.selectYhBaseinfoByID(ID));
    }

前台代码

// 再**.js进行路径的配置
export function getBaseinfo(ID) {
  return request({
    url: '/project/baseinfo/' + ID,
    method: 'get'
  })
}

//导入js
  import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo ,chuanzhi} from "@/api/project/baseinfo";

 /** 修改按钮操作 */
    handleUpdate(row) {
//获取选中的id
      const ID = row.ID || this.ids
//给getBaseinfo方法一个id，传递到后台
      getBaseinfo(ID).then(response => {
        this.form = response.data;
      });
    },

2.自定义传递

流程是一样的

后台代码

 /*
    * 接收前台的传值，通过post传递，注意传递的值必须是yhBaseinfo里面的属性
    * */
    @PostMapping("/chuanzhi")
    public AjaxResult save(@RequestBody YhBaseinfo yhBaseinfo) {
        // 处理前端传来的数据
        System.out.println(yhBaseinfo.getBIRTH()+ ", " + yhBaseinfo.getAGE());
        return success();
    }

export function chuanzhi(data) {
  return request({
    url: '/project/baseinfo/chuanzhi',
    method: 'post',
    data: data
  })
}

//按钮
 <el-button  style="border: none;" @click="chuan" >
        传值
      </el-button>

//导入js
  import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo ,chuanzhi} from "@/api/project/baseinfo";

chuan(row){
//这里可以自己定义想要传什么，但是注意必须是yhBaseinfo里面的属性
  const data = {
    birth: 15,
    age: 18
  };
  chuanzhi(data).then(response => {
  });
},