这一期我们将介绍Vue与axios实现前后端交互的技术。在上一期中，我们已经编写了基本的交互函数，包括开始压测和停止按钮的交互。这一期的任务是在函数中实现前后端的交互，需要调用接口。通常使用axios来实现前后端交互。
·首先需要安装axios，可以使用以下命令进行安装。安装完成后，使用方法非常简单，只需要在需要调用的Vue中导入axios，例如在Settings.vue中，在提交时需要调用接口。在submit时，先将Vue导入进来。
·调post和调get的方法都是固定的写法，可以直接复制这段代码。如果需要代码，可以在评论区获取。在这里，可以使用form表格的数据直接填写value参数。如果是get请求，可以使用下面的写法。这是一个模板代码，适用于任何地方，非常方便，只需要编写一次，然后就可以直接调用了。根据不同的接口和参数，可以实现前后端的交互。
·将项目发布后，可以在network中查看是否真正调用了接口。此时可以看到发送的请求，并将父表单的参数包含在内，实现了前后端的交互。
·当然，还需要进行一些优化。例如，将提交按钮的重置按钮移到此处，删除提交按钮。重置按钮可以放在前面的位置，并进行样式调整。
·首先，将card-header的display属性设置为flex选择器，以便适应不同的尺寸。这样，标题就会显示在左侧，按钮就会显示在右侧。然后，将调整后的属性代码复制下来。刷新页面后，检查class属性是否正确。检查后发现果然写错了。重置按钮的作用是在更改后不想更改时进行重置。如果不需要重置功能，也可以删除重置按钮。
·接下来，添加一个小优化。由于之前使用kalkalh进行了前后端交互，例如这里调用时可能会出现04错误。对于这种提示信息，如何给出呢？可以使用element plus中的air message来给出消息提示。只需点击一下即可出现消息，然后将其导入即可使用。
使用方式可以参考提供的使用方法。Logs为error，在这里将错误记录下来。此时重新审视，若再次点击按钮，日志中即可显示404，只需实现接口并正确调用，即可实现Monkey压测功能。感谢各位的阅读，期待与您下期再见。