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方法中的参数名称匹配，或者你可以明确指定它们之间的映射关系。