Vue中的post、get、put、delete含义及使用

含义

复制代码
POST、DELETE、PUT、GET 就像对应着数据库的 CRUD(增、删、改、查)
使用标准:

        POST          /uri           创建

        GET           /uri/xxx       查询

        PUT          /uri/xxx       更新或创建

        DELETE       /uri/xxx       删除

GET请求,用于向服务器发送查询数据的请求,只是查询,不会增加、修改数据,不会影响服务器上资源的内容。无论进行多少次都,执行后的结果都是一样的,具有幂等性。

PUT请求,是用于向服务器发送数据,从而改变数据,修改数据内容。但是不会增加数据的种类。无论进行多少次操作,其结果也都一样,具有幂等性。

POST请求,与PUT请求类似。都是向服务器端发送数据,但是改请求会增加数据的种类,创建新的内容。不具有幂等性。

DELETE请求,用来删除某一资源。

幂等性:幂等意味着对同一个URL的多次请求会返回一样的结果
复制代码

使用

  • POST
  • // 前端发起POST请求
    const {data:res} = await this.$http.post("addUser", this.addForm);
    复制代码
    // 后台接收POST请求
    @RequestMapping("/addUser")
    public String addUser(@RequestBody User user) {
        System.out.println(user);
        user.setRole("普通用户");
        user.setState(false);
        int i = userDao.addUser(user);
        String str = i > 0 ? "success" : "error";
        return str;
    }
    复制代码
  • GET
  • // 前端发起GET请求
    const {data:res} = await this.$http.get("getUpdate?id=" + id);
    // 后台接收GET请求
    @RequestMapping("/getUpdate")
    public String getUpdateUser(int id) {
        System.out.println("编号:" + id);
        User updateUser = userDao.getUpdateUser(id);
        String users_json = JSON.toJSONString(updateUser);
        return users_json;
    }
  • PUT
  • // 前端发起PUT请求
    const {data:res} = await this.$http.put("editUser", this.editForm);
    // 后台接收PUT请求
    @RequestMapping("/editUser")
    public String editUser(@RequestBody User user){
        System.out.println(user);
        int i = userDao.editUser(user);
        String str = i > 0 ? "success" : "error";
        return str;
    }
  • DELETE
  • // 前台发起DELETE请求
    const {data:res} = await this.$http.delete("deleteUser?id=" + id);
    // 后台接收DELETE请求
    @RequestMapping("/deleteUser")
    public String deleteUser(int id) {
        System.out.println(id);
        int i = userDao.deleteUser(id);
        String str = i > 0 ? "success" : "error";
        return str;
    }

     

注意

  • 一般我们需要提交表单在 Vue 中需要表单验证
  • 复制代码
    // 表单验证
    this.$refs.editFormRef.validate(async valid =>{
      console.log(valid);
      if( !valid ) {
        return;
      }
      // 发起请求
      const {data:res} = await this.$http.put("editUser", this.editForm);
      console.log(res);
      if (res != "success") {
        return this.$message.error("操作失败!!!");
      }
      this.$message.success("操作成功!!!");
      // 隐藏修改对话框
      this.editDialogVisible = false;
      this.getUserList();
    });
    复制代码

     

posted @   世界因你而小  阅读(2414)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示