@RequestParam与@PathVariable使用的区别

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