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

2021-07-09 10:34:29 阅读：173 来源： 互联网

标签：return 登录 request param 7.6 实训服务器功能完善 query

前面已经完成了对一些本地功能的学习和实践，但是我们要完成的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{
                    }
                  })

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

标签：return,登录,request,param,7.6,实训,服务器,功能完善,query
来源： https://blog.csdn.net/Devillllived/article/details/118598448

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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