1、采用常规的方式发送链接
<div id="app" align="center">
<a href="peot_insert.html">新增</a>
<table border="1">
<tr>
<th>id</th>
<th>author</th>
<th>gender</th>
<th>dynasty</th>
<th>title</th>
<th>style</th>
<th>操作</th>
</tr>
<tr v-for="peot in peotList">
<td>{{peot.id}}</td>
<td>{{peot.author}}</td>
<td>{{peot.gender}}</td>
<td>{{peot.dynasty}}</td>
<td>{{peot.title}}</td>
<td>{{peot.style}}</td>
<td>
<button type="button" @click="deleteId(peot.id)">删除</button>
<a :href="'peot_delete2.html?id='+peot.id">删除</a>
<a :href="'peot_edit.html?id='+peot.id">修改</a>
</td>
</tr>
</table>
</div>
采用按钮的方式进行删除。
<script>
new Vue({
el:"#app",
data() {
return {
peotList:[]
}
},
methods:{
findAll:function () {
var _this = this;
axios.post('/findAllJsoon', {
})
.then(function (response) {
_this.peotList = response.data.data;//响应数据给peotList赋值
})
.catch(function (error) {
console.log(error);
});
},
//采用参数的方式传递
deleteId:function (id) {
var _thisd = this;
if (window.confirm("确定要删除该条数据吗???")){
axios.post('/deletePeot?id='+id)
.then(function (response) {
alert("删除成功")
_thisd.findAll();
})
.catch(function (error) {
console.log(error);
});
}
}
},
created() {
this.findAll();
},
})
</script>
controller文件中的写法,采用的是@RequestParam:
@RequestMapping("/deletePeot")
public void deletePeot(@RequestParam("id") Integer id) {
peotService.deletePeot(id);
}
2、采用restful风格来发送链接,html部分没有变化。script部分的url发生了变化。
<script>
new Vue({
el:"#app",
data() {
return {
peotList:[]
}
},
/* mounted(){
axios.get('/findAllJsoon').then(res=>{
if(res.data.code){
this.peotList = res.data.data;
}
}
)},*/
methods:{
findAll:function () {
var _this = this;
axios.get('/peots', {
})
.then(function (response) {
_this.peotList = response.data.data;//响应数据给peotList赋值
})
.catch(function (error) {
console.log(error);
});
},
// 采用restful模式,url来传递。
deleteId:function (id) {
var _thisd = this;
if (window.confirm("确定要删除该条数据吗???")){
//${this.id}
var url = `peots/${id}` //注意这里是反引号
// 当您想要引用当前对象或类的实例的 id 属性时,使用 this.id。
//当您想要引用一个名为 id 的变量(无论它是在函数外部定义的,还是作为参数传递的),使用 id。
axios.delete(url)
.then(function (response) {
alert("删除成功")
_thisd.findAll();
})
.catch(function (error) {
console.log(error);
});
}
}
},
created() {
// 获得参数id值
// this.id = location.href.split("?id=")[1]
// 通过id查询详情
this.findAll();
},
})
</script>
controller文件,采用的是@PathVariable
@DeleteMapping("/peots/{id}")
public void deletePeot1(@PathVariable("id") Integer id) {
peotService.deletePeot(id);
}
3、原理
在Spring框架中,特别是在Spring MVC中,@RequestParam
和@PathVariable
是两个常用的注解,用于从HTTP请求中提取参数值,但它们的使用场景和方式是不同的。
@RequestParam
@RequestParam
用于从请求参数(通常是GET或POST请求的查询参数)中提取值,并将其绑定到方法参数上。这个注解通常与@GetMapping
、@PostMapping
等一起使用。
例如,如果你有一个GET请求,其URL可能是这样的:/greet?name=John
。在Spring MVC的Controller中,你可以使用@RequestParam
来捕获这个name
参数:
java复制代码
@GetMapping("/greet") | |
public String greet(@RequestParam String name) { | |
// 在这里,name的值就是"John" | |
return "greeting"; | |
} |
如果你有一个带有多个参数的请求,你可以为每个参数都使用@RequestParam
:
java复制代码
@GetMapping("/greet") | |
public String greet(@RequestParam String name, @RequestParam int age) { | |
// ... | |
} |
@PathVariable
@PathVariable
用于从URL路径中提取值,并将其绑定到方法参数上。这个注解通常与@GetMapping
、@PostMapping
等一起使用,但只有当URL中包含路径变量时才有意义。
例如,如果你有一个GET请求,其URL可能是这样的:/users/123
。在Spring MVC的Controller中,你可以使用@PathVariable
来捕获这个123
:
java复制代码
@GetMapping("/users/{id}") | |
public String getUser(@PathVariable Long id) { | |
// 在这里,id的值就是123 | |
// ... | |
} |
如果你有一个URL路径包含多个路径变量,你可以为每个变量都使用@PathVariable
:
java复制代码
@GetMapping("/users/{id}/orders/{orderId}") | |
public String getOrder(@PathVariable Long id, @PathVariable String orderId) { | |
// ... | |
} |
总结
@RequestParam
用于从请求参数(查询参数)中提取值。@PathVariable
用于从URL路径中提取值。
在使用这两个注解时,你需要确保你的URL模板和参数名称与Controller方法中的参数名称匹配,或者你可以明确指定它们之间的映射关系。