啊胡

V1

2022/09/24阅读:26主题:绿意

06 接口测试平台 前端登录接口对接

别人写的平台再垃圾,也是用来淘汰你的。

代码更新地址:https://github.com/ahu965/api-automator.git

Python环境没有的,请自行安装,本教程采用的是python 3.9。

Django官网 https://www.djangoproject.com/

Node环境没有的,请自行安装,本教程采用的是node v17.6.0。

Vue.js官网 https://cn.vuejs.org/

上节已经完成了后端登录接口编写,下节将介绍前端如何进行接口对接。

安装axios

在vue项目中通常使用axios完成对接口的请求,首先通过命令npm install axios -save安装依赖(后面其他模块的安装也是如此,将不再赘述)。安装完成后在main.js文件中进行引入。

编写登录逻辑

首先给登录页面上的【登录】按钮添加点击事件login

<a-form-item>
  <a-button type="primary" class="btn-login" @click="login"
    >
登录</a-button
  >

</a-form-item>

然后在login事件中调用后端接口

<script setup>
import { inject, reactive } from "vue";

const axios = inject("$axios");

const formState = reactive({
  username"",
  password"",
});

const login = () => {
  axios
    .post("http://127.0.0.1:8000/login/", {
      username: formState.username,
      password: formState.password,
    })
    .then((val) => {
      console.log(val);
    });
};
</script>

再次启动项目,输入用户名和密码,打开开发者工具,点击【登录】按钮后可以看到接口正常请求了,但是报错了,"CORS"跨域请求。

解决跨域问题

解决跨域问题的方案有很多种,可以前端实现也可以后端实现

  • 后端实现
    • 在相应头中新增Access-Control-Allow-Origin
  • 前端实现
    • 通过node配置,在本地启动时可以进行接口转发
    • 通过nginx配置,在服务启动时可以进行接口转发

本节先采用后端实现的方案

  • 打开后端项目,安装django-cors-headers插件
  • 在配置文件中新增配置项
  • 在配置文件中新增跨域配置,这里为了方便直接允许全部,生产上最好进行限制,给出白名单
  • 全部配置完成后,重启后端项目

后端设置允许跨域之后,再次点击页面【登录】按钮,可以看到控制台已经打印出token信息了。

前端代码优化

上面已经完成了前端对login接口的调用,接下来进行前端代码的美化:

第一个优化点:如果要对接多个接口,是不是每个ip和端口都要重复写一遍,如果后期ip和端口变更需要全部进行更改,因此需要配置axios的基本路径。

  • 在src下创建一个utils文件夹,用来存放项目中的工具类,然后在utils下创建request.js文件,用来放置接口的配置。
  • 然后设置baseURL
import axios from "axios";

// create an axios instance
const service = axios.create({
  baseURL"http://127.0.0.1:8000/"// url = base url + request url
  timeout60000// request timeout
});

export default service;

第二个优化点:如果要对接的一个接口需要在很多页面使用,那就需要在每个页面重复写很多次接口调用,因此可以将接口调用逻辑抽取出来单独存放,后面每个页面只需要传递参数调用方法就可以了。

  • 在src下创建一个apis文件夹,用来存放各个模块的接口请求,然后在apis下创建user.js文件,用来放置用户相关接口的请求,比如登录请求。
import request from "@/utils/request";

export function loginApi(username, password{
  return request({
    url"login/",
    method"post",
    body: {
      username,
      password,
    },
  });
}

第三个优化点:一般项目中接口返回的响应都是固定格式的,如果在每个请求中去单独处理同样要写很多重复的代码,因此可以使用axios的响应拦截器去完成这个工作。

  • request.js文件中新增响应拦截器,主要是在响应成功过的时候直接返回响应内容,在响应失败的时候,根据状态码提示错误信息。
service.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      return response.data;
    }
  },
  (error) => {
    let response = error.response;
    let currentPath = router.currentRoute.value.path;
    switch (response.status) {
      case 400:
        console.log(response);
        break;
      case 401:
        // 判断当前页面
        if (currentPath === "/login") {
          console.error("用户名或密码错误");
        } else {
          console.error("TOKEN过期,请重新登录");
          router.push("/login");
        }
        break;
    }
    return Promise.reject(error);
  }
);
  • 完成上述优化后,就可以将LoginView中接口调用的方式改写了。
<script setup>
import { reactive } from "vue";
import { loginApi } from "../apis/user";

const formState = reactive({
  username"",
  password"",
});

const login = () => {
  loginApi(formState.username, formState.password).then((val) => {
    console.log(val);
  });
};
</script>
  • 再次重启前端项目,输入用户名、密码后,点击【登录】按钮后,控制台可以看到打印出的具体的请求内容了。

到这里,前端登录接口已经对接完毕了,项目中所有的接口都是按这个步骤进行对接的,当然接口对接后,还有很多逻辑要进行完善,但是权限控制(包括登录、用户管理等)并不是接口测试平台的核心,核心在于接口测试的业务逻辑,所以通过登录页面和接口只是简单将整个前后端逻辑对接起来。后面的章节会将权限控制模块先放放,优先开始核心功能的开发,等核心功能基本完成后,再来完善平台的权限控制等模块。

分类:

后端

标签:

软件测试

作者介绍

啊胡
V1