技术分享 | 一步一步学测试平台开发-Vue restful请求

最新推荐文章于 2023-05-30 19:16:36 发布

测试小迷糊

最新推荐文章于 2023-05-30 19:16:36 发布

阅读量266

点赞数

文章标签： restful vue.js 前端压力测试

本文链接：https://blog.csdn.net/hog_ceshiren/article/details/124585104

版权

本文介绍了如何使用axios在Vue.js项目中实现RESTful请求，包括axios的基本使用、创建注册页面、查看后端API文档、创建axios实例以及运行调试。通过POST请求实现用户注册功能，详细讲解了每个步骤，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

一般在构建应用时需要访问后端的 API 接口获取后端数据并展示。做这件事的方法有很多种（比如 axios，vue-resource，fetch-jsonp），使用 promise 的 HTTP 客户端 axios 是其中非常流行的一种方式。axios 也支持 RESTful 请求调用规范。
promise 是一个用来传递异步操作信息的对象，主要是用来解决回调的问题。

axios介绍

axios 是一个易用、简洁且高效的 HTTP 库。axios 主要是用于向后台发起请求，或者在请求中做更多可控的功能（比如拦截请求，请求伪造等）。它是一个第三方插件，所以使用之前要先安装。

安装axios插件

github 地址：https://github.com/axios/axios
可以直接使用 npm 工具进行安装

npm install --save axios

从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
axios实现RESTful请求规范

axios 其实和原生的 ajax，jquery 中的 $ajax 类似，都是用于向后端请求数据，axios 也是 Vue 官方推荐的插件。

基于 RESTful 风格的请求规范，基本请求方式有 5 种：

GET（SELECT）：从服务器取出资源（一项/多项）
- POST（CREATE）：在服务器新建一个资源
- PUT（UPDATE）：用来修改数据，需要把所有的字段传过去，相当于全部更新
- PATCH（UPDATE）：用来修改数据，是在 PUT 的基础上改进的，适用于局部更新。比如只想修改用户名，只传用户名的字段就可以了，而不需要像 PUT 一样把所有字段传过去
- DELETE（DELETE）：从服务器删除资源
代码示例-注册功能

注册功能使用的是 POST 请求。具体请求参数与返回数据可以通过查看 API 文档获取（ http://stuq.ceshiren.com:8089/swagger-ui.html#/）。一般开发者都会拿到这样一个接口文档说明。

从文档可以查看到，后端服务的注册接口接收请求的参数有三个 userName，password 和 email，如下：

{
  "email": "string",
    "password": "string",
      "userName": "string"
      }

也可以通过查看文档，获取到它的返回数据用于后续处理。

创建注册页面

对于页面设计需要提前知道页面的组成以及摆放位置，一般会有相应的页面设计文档或者参照页面。一般推荐使用 Vuetify 完成组件的开发（提前安装 Vuetify 插件）。

官方文档：
https://vuetifyjs.com/en/api/v-form/

根据官方文档，选择适合自己项目的组件样式，添加到页面中。这里需要用到标题标签

，表单相关标签，以及按钮标签。

SignUp.vue

<template>
    <div class="sign-up">
            <h1>注册</h1>
                    <v-text-field v-model="username" label="用户名"></v-text-field>
                            <v-text-field v-model="password" label&