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: ""<