目前最新《VueCli3.0全栈项目-资金管理系统带权限》

本文重点：web项目融合Restful风格

百度百科了解一下Restful

RESTful
一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

Restful风格的web项目最直观的两点

♦ url的规范

非REST风格的URL：http://localhost:8080/user?id=1&type=1

REST风格的URL：http://localhost:8080/user/1/1

对比起来，不难感觉REST风格的URL自带牛逼属性，看起来就是舒服

♦ 用HTTP的4个动词标识对资源的操作类型

GET：获取

扫描二维码关注公众号，回复： 5761379 查看本文章

POST：新增

PUT：修改

DELETE：删除

《========优雅分割=====进入主题========》

《========WEB如何实现REST风格========》

♦♦ Step One：配置spring支持Put/Delete请求

Spring默认是不支持Put/Delete请求的，那我们该如何配置呢？

打开web.xml，添加如下配置

<filter>
   <filter-name>HttpMethodFilter</filter-name>
   <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
   <filter-name>HttpMethodFilter</filter-name>
   <url-pattern>/*</url-pattern>
</filter-mapping>
♦♦ Step Two：准备Pojo

public class User {
private String name;
private Integer age;
//省略Get、Set
}
♦♦ Step Three：四种请求的Controller层代码

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mote.pojo.User;
import com.mote.service.UserService;

@RequestMapping("/user")
@Controller
public class UserConroller {

   @Autowired
   private UserService userService;

   /**
   * GET请求：获取用户
   *
   * @param id
   * @return
   */
   @GetMapping("/{id}")
   @ResponseBody
   public ResponseEntity<User> getUser(@PathVariable("id") int id) {

       User user = userService.getUser(id);

       return new ResponseEntity<User>(user, HttpStatus.OK);
   }

   /**
   * POST请求：添加用户
   * @param user
   * @return
   */
   @PostMapping()
   @ResponseBody
   public ResponseEntity<Integer> addUser(@RequestBody User user) {

       Integer numb = userService.addUser(user);

       return new ResponseEntity<Integer>(numb, HttpStatus.OK);
   }

   /**
   * PUT请求：修改用户
   *
   * @param user
   * @return
   */
   @PutMapping()
   @ResponseBody
   public ResponseEntity<Integer> updUser(@RequestBody User user) {

       Integer numb = userService.updUser(user);

       return new ResponseEntity<Integer>(numb, HttpStatus.OK);
   }

   /**
   * DELETE请求：删除用户
   *
   * @param id
   * @return
   */
   @DeleteMapping("/{id}")
   @ResponseBody
   public ResponseEntity<Integer> delUser(@PathVariable("id") int id) {

       Integer numb = userService.delUser(id);

       return new ResponseEntity<Integer>(numb, HttpStatus.OK);
   }
}
♦♦Step Four：四种请求对应的Ajax请求

//获取ID为1的用户
   function getUser() {
       $.ajax({
           url : "/restful/user/1",
           type : "get",
           success : function(data) {
               console.log(data);
           },
           error : function(data) {
               alert("服务器繁忙");
           }
       })
   }

   //添加用户
   function addUser() {
       var params = {
           name : "MrsY",
           age : 23
       }
       $.ajax({
           url : "/restful/user",
           contentType : 'application/json',
           data : JSON.stringify(params),
           type : "post",
           success : function(data) {
               console.log(data);
           },
           error : function(data) {
               alert("服务器繁忙");
           }
       })
   }

   //更新用户
   function updUser() {
       var params = {
           id : 1,
           name : "MrsY",
           age : 23
       }
       $.ajax({
           url : "/restful/user",
           contentType : 'application/json',
           data : JSON.stringify(params),
           type : "put",
           success : function(data) {
               console.log(data);
           },
           error : function(data) {
               alert("服务器繁忙");
           }
       })
   }

   //添加ID为1的用户
   function delUser() {
       $.ajax({
           url : "/restful/user/1",
           type : "delete",
           success : function(data) {
               console.log(data);
           },
           error : function(data) {
               alert("服务器繁忙");
           }
       })
   }

tip:实践过程中最容易碰到Ajax请求进不去后台方法，控制台报各种40x错误，这时候注意参考上面的代码，后台注意Spring注解的使用，前端注意Ajax参数的配置。

---------------------
作者：fly_鸡肉
来源：CSDN
原文：https://blog.csdn.net/qq_37936542/article/details/88877185
版权声明：本文为博主原创文章，转载请附上博文链接！

目前最新《VueCli3.0全栈项目-资金管理系统带权限》

猜你喜欢