1, Style modification

The styles to be modified are listed below

When we provide the wrong user name and password, the status code of this request is normal (but the success field is false) and there is no network error, so axios will not report an error. As shown below

• Set the logo on the login form

• 

• Set the background picture of the whole page

• 

• Sets the font color in the input box

• 

• Set the style of login button (Note: be sure to add class="loginBtn" to El button)

• 

• Modify the displayed prompt text content

• 

• Set the overall background color of the input form (just change the bacgroup attribute)

• 

• Set the color of error message (prompt message when form verification fails)

• 

  Summary:

• one  @ It is a path alias that we set in vue.config.js, specifying the src root directory, which makes it easy to find files

• two   If you need to use the @ alias in the style sheet, you need to add a ~ symbol in front of @ otherwise it will not be recognized

• .login-container {
    background-image: url('~@/assets/common/login.jpg'); // Set background picture
    background-position: center; // Set the picture position to fill the entire screen
  }

• 3. In a single file component, if the style is only used in the current component, it can be written to the area marked with scoped. If it is written to the area not marked with scoped, it will become a global style

• 2, Form validation

  step

  View the interface document and replace it in the current page.

• Review of El form verification

• |- el-form     binding model and rules rule
  |-------- el-form-item    binding prop attribute
  |------------------------ el-input  binding v-model

• 1. View the interface and set the form data item name according to the interface

• 

• 

   

• Summary

  When submitting the form, it is recommended that the data item name should be consistent with the requirements of the back-end interface.

  Replace with ctrl+F/ H;

• 2. Modify user-defined verification rules (crtl + p search validate.js)
•   2.1 mobile phone number verification
  Add a custom verification rule for mobile phone number in validate.js and export it

  export function validMobile(str) {
    return /^1[3-9]\d{9}$/.test(str) // Verify mobile phone number
  }

   

    2.2 password verification

• 

    2.3 form verification summary

• Complete form verification requires three components to complete the matching, namely El form, El form item and form item, such as El input

  El form is responsible for binding model and rules

  El form item is responsible for binding prop

  El input is responsible for bidirectional binding of specific form data

• The built-in verification configuration can be directly used for simple verification, such as non empty, length, etc. if the verification rules are complex, it is recommended to use the verification function for verification.

  For example, our mobile phone numbers are more complex, so we use more flexible verification functions

  For example, the password is relatively simple. We can directly use the built-in verification configuration

• Manual bottom verification

• 

    III   Encapsulate login interface

• Add a method to src/api/user.js

  export function login(data) {
    return request({
      url: 'api/sys/login',
      method: 'post',
      data
    })
  }

  Set baseUrl in request

  const service = axios.create({
    baseURL: 'http://IHRM Java. Itheima. Net ', / / set the base address of the axios request
    timeout: 5000 // Define 5-second timeout
  })

  The base address is the online address. In the later learning, we will switch to the offline address. Here is just a test

• Calling login interface in component

• In src/views/login/index.vue:

• Import login method;

• After passing the form verification, execute the login action

• import { login } from '@/api/user.js'

   async doLogin() {
        try {
          const res = await login(this.loginForm)
          console.log('Login succeeded', res)
        } catch (err) {
          console.log('Login failed,as a result of', err)
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          // The request cannot be sent until the verification is passed
          if (valid) {
            this.doLogin()
          }
        })
      }

  Modify the response interceptor of axios

• problem

• It is troublesome to get the return result of ajax: res.data.data.XXXX

• When logging in, fill in the wrong user name and password without error prompt (not entering the catch branch) (no response interceptor is set)

• Solve the problem of no error when login fails

  Analysis reason:

  Internal error reporting mechanism of axios: (there are only two possibilities for error reporting)

• If the status code of the response to this request does not start with 2 (e.g. 400500), it will actively throw an error.

• If there is a network error in this request, it will actively throw an error

Solution:

In the response interceptor, determine whether to actively throw an error according to the value of the success field in the data returned by this request.

resolvent:

In src/utils/request.js, the supplementary request interceptor is as follows:

// Response interception
service.interceptors.response.use(response => {
  if (response.data.success) {
    // When success is true, the request is truly successful
  } else {
    // When success is false, it is set to be captured by the catch branch
    return Promise.reject(new Error('Login failed'))
  }
}, error => { // Catch other axios errors
  return Promise.reject(error) // An execution error is returned to make the current execution chain jump out successfully and directly enter the catch
}

)