前后端分离如何传递参数（接口传参）

前后端分离如何传递参数（接口传参）

前端后端概念

后端：提供数据，处理业务逻辑，Server-side MVC架构，代码跑到服务器上
前端：接收数据，返回数据，处理渲染逻辑，Client-side MV*架构，代码跑到服务器上

前端后端数据传输形式

后端提供给前端的数据以json的形式进行传递
前段以Ajax的形式接受数据及返回数据

接口规范

接口返回数据即显示：前端仅做渲染逻辑处理；

渲染逻辑禁止跨多个接口调用；

前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；

请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；

请求的基本格式

GET请求、POST请求必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中，示例如下：

• GET请求：

xxx/login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}

• post请求

响应的基本格式

{    code: 200,    data: {        message: "success"    }}

code : 请求处理状态

200: 请求处理成功

500: 请求处理失败

401: 请求未认证，跳转登录页

406: 请求未授权，跳转未授权提示页

data.message: 请求处理消息

code=200 且 data.message=“success”: 请求处理成功

code=200 且 data.message!=“success”: 请求处理成功, 普通消息提示：message内容

code=500: 请求处理失败，警告消息提示：message内容

响应实体格式

{    code: 200,    data: {        message: "success",        entity: {            id: 1,            name: "XXX",            code: "XXX"        }    }}

data.entity: 响应返回的实体数据

响应列表格式：data.list: 响应返回的列表数据

响应的分页格式

{    code: 200,    data: {        recordCount: 2,        message: "success",        totalCount: 2,        pageNo: 1,        pageSize: 10,        list: [            {                id: 1,                name: "XXX",                code: "H001"            },            {                id: 2,                name: "XXX",                code: "H001"            } ],        totalPage: 1    }}

data.recordCount: 当前页记录数

data.totalCount: 总记录数

data.pageNo: 当前页码

data.pageSize: 每页大小

data.totalPage: 总页数

前后端交换

一、接口详解

1.接口的概念

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口(简称接口)。同时，每个接口必须有请求方式

2.接口的请求过程

3.接口测试工具

为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。

好处:接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。

• postman
• Apifox
• Swgger

二、接口文档

1.概念

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

2.接口文档的组成部分

①.接口名称:用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。

②.接口URL:接口的调用地址。

③.调用方式:接口的调用方式，如GET 或 POST。

④.参数格式:接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
⑤．响应格式:接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。

⑥.返回示例(可选)︰通过对象的形式，例举服务器返回数据的结构。
3.案例

前后端数据传参详解

1.Http数据传参的两种方式

• uri传参
  数据参数写在uri地址中，可以为查询参数，也可以为路径参数，一般get请求方式用的多。
  优点：一个TCP传输就可以将参数传递给服务器，速度快。
  缺点：参数直接暴露在浏览器中，不安全。
• body传参
  数据参数写在body体中，有多种content-type格式：json、xml、form-data，一般post请求方式用的多。
  优点：相对安全，没有大小限制。
  缺点：需要两个TCP传输，第一次传输head，第二次传输body。

2.案例：SpringBoot后端处理前端传参的例子。

uri参数

• @PathVariable
  获取路径参数。即url/{id}。
• @RequestParam
  获取查询参数。即url?name=panda。

@GetMapping("/demo/{id}")
public void demo(@PathVariable(name = "id") String id, @RequestParam(name = "name") String name) {
    System.out.println("id="+id);
    System.out.println("name="+name);
}

Body参数（context-type）

• @RequestBody
  获取并解析body中的application/json格式数据

@PostMapping(path = "/demo")
public void demo1(@RequestBody Person person) {
    System.out.println(person.toString());
}

• 无注解 或者 @RequestParam
  获取并解析body中的multipart/form-data和x-www-form-urlencodedmultipart/form-data既可以用做文件数据的传输也可以做键值对的传输（一般做文件传输的时候都要使用这种格式）x-www-form-urlencoded只能用做键值对

  @PostMapping(path = "/demo2")
  public void demo2(Person person) {
      System.out.println(person.toString());
  }
  
  

  SpringMVC通过使用HandlerAdapter 配置的HttpMessageConverters来解析HttpEntity中的数据，然后绑定到相应的bean上

前后端的传参与接参

前端传参

1.URL传参

• ?传参
  http(s): //域名/项目名/接口名?key1=value1&key2=value2

• restful风格（地址传参）
  http(s): //域名/项目名/接口名/value1/value2（这种方法传的参数不是键值对）

2.表单传参

• action : 传参的地址
• method : 传参的方式,get/post
• enctype: 上传文件的格式 multipart/form-data

3.Json传参

后端接参

1、直接把表单的参数写在Controller相应的方法的形参中，适用于GET 和 POST请求方式。

@RestController
@RequestMapping("/test")
public class testController {
    @RequestMapping("/login")
    public String login(String username,String password) {
        System.out.println("username is:"+username);
        System.out.println("password is:"+password);
        return "success";
    }
}

2、通过HttpServletRequest接收，适用于GET 和 POST请求方式。

@RestController
@RequestMapping("/test")
public class testController {
    @RequestMapping("/login")
    public String login(HttpServletRequest request) {
    	String username=request.getParameter("username");
        String password=request.getParameter("password");
        System.out.println("username is:"+username);
        System.out.println("password is:"+password);
        return "success";
    }
}

3、用注解@RequestParam绑定请求参数到方法入参，适用于GET 和 POST请求方式。

@RestController
@RequestMapping("/test")
public class testController {
    @RequestMapping("/login")
    public String login(@RequestParam("username") String username,@RequestParam("password") String password) {
        System.out.println("username is:"+username);
        System.out.println("password is:"+password);
        return "success";
    }
}

4.用注解@PathVariable接受rest风格请求参数到方法入参 ，适用于GET 和 POST请求方式。

@RestController
@RequestMapping("/test")
public class testController {
    @RequestMapping("/login/{username}/{password}")
    public String login(@PathVariable("username") String username,@PathVariable("password") String password) {
        System.out.println("username is:"+username);
        System.out.println("password is:"+password);
        return "success";
    }
}

5、用注解@RequestBody绑定请求参数到方法入参 ，用于POST请求

@RestController
@RequestMapping("/test")
public class InnerController {
 
    @RequestMapping(value="/login",method=RequestMethod.POST)
    public String login(@RequestBody User user) {
        System.out.println("username is:"+user.getUsername());
        System.out.println("password is:"+user.getPassword());
        return "success";
    }
}