山东大学项目实训（四）——服务器请求体系建立（连上后端接口）及登录注册功能完善（后端对接）（7.5、7.6）

前面已经完成了对一些本地功能的学习和实践，但是我们要完成的web平台肯定要建立在服务器上，所以还需要想办法与后端完成对接。这两天的主要任务就是在我们的本地文件代码上搭建一个服务器请求体系以便与后端接口对接。这个体系的搭建主要建立在ajax上，毕竟现在请求服务器还是以异步为主，这样也能提高计算机运行效率。
首先利用一段时间继续研究ajax，并尝试构造请求函数(主要包含创建、请求拦截器和响应拦截器）

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;

然后为了方便与后端完成对接，下载了Postman并学习了其使用，并且借助Postman模拟了请求服务器并得到数据，对该流程有了一定的理解

然后将后端提供的url与我之前构造的request函数相连接，封装成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
    })
}

其中第一个函数是用来调用本地文件的，这是为了后续先测试本地功能再对接服务器的方便，后面两个函数分别是对登录和注册的请求，方法都为“post”。
接下来就是将前面写的登录注册本地功能对接到服务器上了，这里倒是遇到一个研究了挺久的问题。一开始，我把请求服务器数据封装到函数中，并设置布尔变量进行判断，然后根据布尔变量执行登录操作

      var i=false
      const getdata=()=>{
        fetchdata(param).then((res)=>{
          if (res.data != null) {
            i=true
          }
        })
      }
       function submitForm() {
         getdata（）;
          if (i) {
            ElMessage.success("登录成功");
          localStorage.setItem("ms_username", param.phone);
          localStorage.setItem("ms_pwd", param.pwd);
          router.push("/");}
          else
          {
            ElMessage.error("登录失败");
            return false
          }

但是每次都会先提交表单再进行布尔变量变换，经过一段时间的研究以及打开控制台查看网络发现这是异步造成的，计算机向服务器发送请求需要一段时间才会返回数据，这段时间计算机会继续执行下面的操作，所以等拿到数据进行布尔变量变换时计算机已经提交表单了。
明白原因后，我对代码进行优化改进：

function submitForm() {
        fetchdata(param).then((res) => {
          if (res.data != null) {
            ElMessage.success("登录成功");
          localStorage.setItem("ms_username", param.phone);
          localStorage.setItem("ms_pwd", param.pwd);
          router.push("/");}
          else
          {
            ElMessage.error("登录失败");
            return false
          }
            })}

这样就能成功验证服务器返回的数据了
同理，我继续把注册的本地功能与服务器数据对接：

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("注册成功");
                    localStorage.setItem("ms_username", param.phone);
                    router.push("/");}
                    else{
                    }
                  })

这样也就基本完成了登录与注册功能，也第一次成功与后端进行对接，后面该怎么写也就更加明朗了。