
啊胡
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
timeout: 60000, // 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>
-
再次重启前端项目,输入用户名、密码后,点击【登录】按钮后,控制台可以看到打印出的具体的请求内容了。

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