We have learned and practiced some local functions, but the web platform we want to complete must be built on the server, so we still need to find a way to connect with the back end. The main task of these two days is to build a server request system on our local file code to connect with the back-end interface. The construction of this system is mainly based on ajax. After all, the request server is still asynchronous, which can also improve the operation efficiency of the computer.
First, continue to study ajax for a while and try to construct request functions (mainly including creation, request interceptor and response interceptor)

import axios from 'axios';
const service = axios.create({
    url:"http://106.14.19.174"
})

service.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        console.log(1);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return response.data;
        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);
export default service;

Then, in order to facilitate the docking with the back-end, I downloaded Postman and learned how to use it. With the help of Postman, I simulated the request server and got the data. I have a certain understanding of the process

Then connect the url provided by the back-end with the request function I constructed earlier and encapsulate it into an API

import request from '../utils/request';
export const fetchData = query => {
    return request({
        url: './table.json',
        method: 'get',
        params: query
    });
};
export const fetchdata = query => {
    return request({
        url: 'http://106.14.19.174:8080/login',
        method: 'post',
        params: query
    });
};
export const setdata=query=>{
    return request({
        url: 'http://106.14.19.174:8080/register',
        method: 'post',
        params: query
    })
}

The first function is used to call the local file for the convenience of testing the local function and then connecting to the server. The latter two functions are the login and registration requests respectively, and the method is "post".
The next step is to connect the login registration local function to the server, which has been studied for a long time. At the beginning, I encapsulated the request server data into the function, set the boolean variable to judge, and then perform the login operation according to the boolean variable

      var i=false
      const getdata=()=>{
        fetchdata(param).then((res)=>{
          if (res.data != null) {
            i=true
          }
        })
      }
       function submitForm() {
         getdata();
          if (i) {
            ElMessage.success("Login succeeded");
          localStorage.setItem("ms_username", param.phone);
          localStorage.setItem("ms_pwd", param.pwd);
          router.push("/");}
          else
          {
            ElMessage.error("Login failed");
            return false
          }

However, each time, the form will be submitted before boolean variable transformation. After a period of research and opening the console to view the network, it is found that this is caused by asynchrony. It takes a period of time for the computer to send a request to the server before returning data. During this period, the computer will continue to perform the following operations, So when we get the data for Boolean transformation, the computer has submitted the form.
After understanding the reason, I optimized and improved the code:

function submitForm() {
        fetchdata(param).then((res) => {
          if (res.data != null) {
            ElMessage.success("Login succeeded");
          localStorage.setItem("ms_username", param.phone);
          localStorage.setItem("ms_pwd", param.pwd);
          router.push("/");}
          else
          {
            ElMessage.error("Login failed");
            return false
          }
            })}

In this way, the data returned by the server can be successfully verified
Similarly, I continue to connect the registered local functions with the server data:

const submitForm = () => {
            login.value.validate((valid) => {
                if (valid && param.pwd==param.pwdt&&param.phone.length==11) {
                  setdata(param).then((res)=>{
                    if(res.data!=null)
                    {
                    ElMessage.success("login was successful");
                    localStorage.setItem("ms_username", param.phone);
                    router.push("/");}
                    else{
                    }
                  })

In this way, the login and registration functions are basically completed, and the connection with the back-end is successful for the first time. It is more clear how to write later.