foreword

Interface joint debugging refers to the process of interface docking, testing and debugging between the front end and the back end. This article introduces in detail the common methods of interface joint debugging by the front end, and gives specific steps and sample codes of the use process:

1. Using mock data

Mock data is a way to simulate the data returned by the interface, which can be used in the early stage of front-end development for rapid page development and debugging. You can use tools such as Mock.js to generate simulated data and simulate the returned results of the interface.

(1) Install Mock.js

Mock.js can be installed using npm:

npm install mockjs --save-dev

(2) Generate mock data

In the front-end code, you can use Mock.js to generate simulated data, for example:

import Mock from 'mockjs'

Mock.mock('/api/user', 'get', {
  'list|10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1,
    'email': '@EMAIL'
  }]
})

The above code uses Mock.js to generate a GET request, returning a list of 10 user information. The path of this interface is `/api/user`.

(3) Intercept request

In the front-end code, you can use request libraries such as Axios to send simulated requests and intercept the returned response results. For example:

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

const mock = new MockAdapter(axios)

mock.onGet('/api/user').reply(200, {
  code: 200,
  message: 'success',
  data: Mock.mock({
    'list|10': [{
      'id|+1': 1,
      'name': '@cname',
      'age|18-60': 1,
      'email': '@EMAIL'
    }]
  })
})

The above code uses Axios to send a GET request, intercepts the returned result, and returns a list containing 10 user information. The path of this interface is `/api/user`.

2. Use Postman and other tools for interface testing

Postman is a commonly used interface testing tool, which can be used to simulate the request backend interface, debug interface parameters and request header information, so as to quickly locate interface problems.

(1) Install and start Postman

You can download Postman from the official website and start the tool after installation.

(2) Create a request

In Postman, you can create a new request and specify the request method, path, parameters, and request header information. For example, create a GET request in Postman, the request path is `http://localhost:3000/api/user`, the parameter is `{id: 1}`, and the request header is `{Authorization: 'Bearer token'}` .

(3) Send request

After creating a request, you can click the Send button to send the request and view the returned response result. In the response result, you can view information such as the status code, response header, and response body to locate interface problems.

3. Debugging with Chrome Developer Tools

In the Chrome browser, you can use the Network tab in the developer tools to view the detailed information of the interface request and response in order to locate interface problems.

(1) Open the developer tool

In the Chrome browser, you can use the shortcut key `F12` to open the developer tools.

(2) Select the Network tab

In the developer tools, select the Network tab to see all the network requests of the current page.

(3) View request and response information

In the Network tab, you can view request and response parameters, status codes, request headers, and response bodies to locate interface problems.

4. Add debugging statements to the code

In the front-end code, you can add some debugging statements to output information such as request parameters and response results, so as to better locate interface problems. For example, when using a request library such as Axios, you can add debugging statements to the request and response interceptors.

(1) Add debugging statements to the request interceptor

axios.interceptors.request.use(config => {
  console.log('request config:', config)
  return config
}, error => {
  console.error('requestconfig error:', error)
  return Promise.reject(error)
})

The above code adds a debug statement to the request interceptor to output request parameters and configuration information.

(2) Add debugging statements to the response interceptor

axios.interceptors.response.use(response => {
  console.log('response data:', response.data)
  return response
}, error => {
  console.error('response error:', error)
  return Promise.reject(error)
})

The above code adds a debugging statement to the response interceptor to output the response data and error information.

5. Joint debugging with the backend

After the initial development and testing of the front-end is completed, joint debugging with the back-end is required to test whether the interface connection between the front-end and the back-end is normal. After the backend interface has been developed and deployed to the test environment, the following steps need to be taken:

(1) Modify the request path in the front-end code

In the front-end code, modify the request path to the interface path of the test environment deployed in the back-end.

(2) Test interface

Use any of the above methods to test and debug the interface, so as to locate and solve the interface problem. It is necessary to work closely with back-end engineers to timely feedback and solve interface problems.

Summarize

Tip: Here is a summary of the article:
For example: the above is what I will talk about today. This article only briefly introduces the use of pandas, and pandas provides a large number of functions and methods that allow us to process data quickly and easily.

The method of front-end interface joint debugging