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 => {
});
},