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();
  });

有兴趣的同学可以关注我的个人公众号，期待我们共同进步！！！