This is the third day of my participation in the August More Text Challenge

Encapsulating request module

• Data requests need to be made through an interface in a project, and the functions used to request operations need to be encapsulated for ease of operation.
• AJAX request operations are usually done with Axios in vue.js.

If you’re not familiar with Axios, check out this article: Axios for Common Ajax libraries

If you’re not familiar with Ajax, check out this article: Ajax Basics and Handwriting Encapsulating Ajax Functions

• Small operation: Finding a directory every time is cumbersome, using @/ is equivalent to starting the search from the SRC directory.

• The request is sent using Axios and an Object is received after the request is successful.

Interface processing

• Encapsulating request module

Axios requests interceptors (do different things by judging the base address)

• When any request is sent, the AXIos interceptor determines that the address of the request is: “Front? Boss?”
• You can set an interceptor to the request to determine the URL prefix, and then set the base address to config.baseurl
  • Axios has request interceptors and corresponding interceptors for pre-processing of requests and responses.
  • Please refer to the interceptor parameter config as the relevant configuration information of this request. Here, the base address of the request is changed through baseURL.
  • After the operation is complete, you must return to config for the configuration modification to take effect; otherwise, the request cannot be sent successfully.

The login function

The page layout

• The login page body is a Form, using Element’s Form Form.
  • With ESLint, copy array configuration objects with a semicolon and space after function names
  • Give the password< el - input > set type = "password"
• Concrete implementation code

• Use Flex layout processing

Functional analysis

• Data binding
• Form validation
• Request landing
• Request result processing (response processing)
  • successful
  • failure

The interface test

• The interface tests in two ways
  • Testing capabilities provided through the interface documentation
  • Using the current popular testing tools Postman interface test (download address: www.postman.com/downloads >)
• The following is a screenshot of the Postman test

Interstitial use Postman:

• Note: When writing, if you often need to manipulate certain interfaces, you can create collections in Postman to store interface information for testing purposes.

• If the interfaces under test have the same base address, you can set variables to the collection to simplify writing

• Used in the interface as {{variable name}}. After updating the address of the existing interface, click the Save button to save the changes.

The login request

• To prepare, declare the data that stores the content of the form

Form validation

• This is verified by the Form validation feature of the Form component in Element.
• The following describes the attributes to be used:
  • Need to give<el-form>Bound properties
    • Model: Object to bind form data
    • Rules: Form validation object with internal attribute names corresponding to validation<el-form-item>Prop (property set to array, multiple rules can be specified internally simultaneously)
      • Required: Specifies whether this parameter is mandatory
      • Message: indicates the message indicating authentication failure
      • Trigger: indicates the name of an incoming event
      • Max: indicates the maximum length
      • Min: indicates the minimum length
      • Pattern: indicates the regular rule for verification
  • For validation<el-form-item>Set properties
    • Prop: Indicates the property in the model
• Actual code demo

The Form method on Element: validate

• Introduction to the method
  • The validate method validates the entire form using a callback function. The callback function is called after the verification is complete, passing in two parameters: whether the verification succeeded and the field that failed. If the callback function is not passed in, a Promise is returned
  • Function(callback: Function(boolean, object))
• Functional analysis:
  • The authentication is complete, but the request can be sent normally regardless of the authentication result, and should be processed according to the authentication result.
    • Judge the form verification results in onSubmit.
      • By giving<el-form>Add the ref attribute to be accessed through this.$refs in onSubmit.
      • This is handled by the Form component’s validate() method.
        • Incoming callback processing

         // Element document example: validate Is passed to the callback function as argument 1, which is of type Boolean
        this.$refs[formName].validate((valid) = > {
          if (valid) {
            alert('submit! ');
          } else {
            console.log('error submit!! ');
            return false; }})Copy the code

        • No callback processing: after testing, it is found that the check is true, and an exception is raised if the check is not passed. Catch processing.

        async onSubmit () {
          try {
          // 1. Form validation
            await this.$refs.form.validate()
            / / 2. The request
            // 3. Response processing
          } catch (err) {
              console.log('Verification failed', err)
          }
        }
        Copy the code