更多技术文章分享和免费资料领取
https://qrcode.testing-studio.com/f?from=Aliyun&url=https://ceshiren.com/t/topic/16586
一般在构建应用时需要访问后端的 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="密码" type="password"></v-text-field>
        <v-text-field v-model="email" label="邮箱" ></v-text-field>
        <v-btn color="primary" @click="register()">注册</v-btn>
    </div>
</template>
<script>
export default {
    data(){
        return {
            username: '',
            password: '',
            email: ''
        }
    },
    methods:{
        register(){
            let post_data = {
                userName: this.username,
                password: this.password,
                email: this.email,
            }
            console.log('注册')
            // this.$rouster.push({name:'SignUp'})
            this.$api.user.signUp(post_data).then(res => {
                console.log(res)
            });
        }
    }

}
</script>
<style scoped>
    .sign-up{
        width: 500px;
        margin: 0 auto;
        text-align: center;
    }
</style>

1、首先，在 components/ 目录下创建 SignUp.vue 文件。这里添加了一个

标题标签，然后使用v-text-field 实现用户名、密码、邮箱的输入框。使用v-btn 标签实现注册按钮。

2、这里在v-text-field 标签中使用 v-model 属性对数据进行双向绑定，它会根据控件类型自动选取正确的方法来更新元素。在标签中添加 data() 方法来获取用户输入的数据（用户名，密码和邮箱）。

3、当点击注册按钮时，会触发 register() 方法。将用户输入的数据传递给后端接口，并拿到返回数据 res，打印输出到浏览器的 console 中。

4、在 中添加一个 div 样式 sign-up，设置宽为 500px，margin 外边距设置为 0 auto（0 为外边距为 0，auto 指平分剩余空间，会展示居中的效果），text-align: center; 设置文字居中。

5、this.$api 向后端发送请求，这里会提前将$api 作为全局变量在main.js 中声明
关于 main.js 等其他代码参照贴子：
https://ceshiren.com/t/topic/12235

查看后端文档

后端文档：
http://stuq.ceshiren.com:8089/swagger-ui.html
Swagger 是一个规范并且完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。Swagger 可以使前端开发者通过可视化页面查看接口文档。后台开发也可以通过简单配置实现文档的自动生成。（官网地址：http://swagger.io/），查看用户管理中的注册接口详细信息。
实例
a
x可以使用 axios.create() 方法创建一个拥有通用配置的 axios 实例。
i实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也很可能是不同的，可以通过 axios.create() 创建不同的实例来处理。
o在路径 src 目录下，新建目录层级如下：
s`
注src/
意 api/
： http.js
前
端`
代
码
中 主要是用来编写调用后端请求的地址以及请求的格式。下面配置后端服务的地址和头信息，代码如下：
发
送`
请import axios from 'axios'
求
的var instance = axios.create({
参 headers: {
数 'Content-Type': 'application/json'
名 },
要 baseURL: 'http://stuq.ceshiren.com:8089'
与})
接export default instance
口
文`
档
中
定- axios 是向后端服务发请求的插件库（提前已安装）这里使用 import 完成导入
义- headers 是向后端传参的头部信息
的- baseURL 是后端服务的地址。
参下面先创建两个文件 api.js 和 user.js
数- user.js：用来管理所有用户相关的后端接口。如果有其它同一类型的接口，也可以创建一个文件管理起来（比如任务管理，用例管理等）
名- api.js：主要是用来管理不同类别的接口文件，方便后续维护
保目录结构如下：
持
一`
致src/
（ api/
参 api.js
数 user.js
名
大`
小
写
敏user.js 代码如下：
感
）`
。import axios from './http'

后const user = {
端 signUp(params){
接 return axios.post('/user/register',params)
收 }
到}
前
端export default user

S`
i
g
n解析上面的代码：
U先定义一个变量 user，然后注册一个 signUp(params) 方法，方法中使用 axios 调用后端的接口服务（使用 GET 还是 POST 还是其它的动作，需要根据接口文档确定）。然后通过 export default user 将 api 暴露出去，这样其它的 js 文件才能调用到它。后面就会在 api.js 中引用这个 user 变量。
papi.js 代码如下：

组`
件import user from './user'
发
来const api = {
的 user
注}
册
请export default api
求
，`
需
要
传上面的代码，引用了当前目录下 user.js 内的 user 变量。也可以在变量 api 中引用其它的 js 文件。api 定义好了之后，需要使用export default api 将 api 这个变量暴露出去，然后就可以在其它页面中引用它了。
递
的另外，所有页面中需要用到的代码和插件，都需要在 main.js 里面配置。
参
数在 main.js 中添加下面代码：
如
下`
图import api from './api/api'
：省略...

Vue.prototype.$api = api

省略...
!
[`
]
(
h ：将 api 这个变量导入到 main.js 中。
t 将会在所有的 Vue 实例中可用，甚至在 Vue 实例被创建之前也可以调用到
t，注意一定要加上"$"符。
p## 运行调试
s
:将前端页面的代码开发完成，并且配置了相关的路由，就可以执行下面的运行命令：
/
/`
cnpm run serve
e
s`
h
i
r然后，访问地址：
ehttp://localhost:8080/
n输入用户名，密码和邮箱，点击注册，然后在调试页面的 network 中可以查看到返回结果，如下：
.
c
o
m从检查页面，network 中查看 register 这个接口的返回（Response）数据， 展示如下内容，说明我们请求后端服务成功的注册了一个帐号。
/
u`
p{
l "resultCode": 1,
o "message": "成功",
a "data": {
d "id": 198,
s "userName": "hogwarts",
/ "password": "cf955f0d016f1da3fc79d468593057d5",
d "email": "hogwarts@ceshiren.com",
e "autoCreateCaseJobName": null,
f "startTestJobName": null,
a "defaultJenkinsId": null,
u "createTime": 1620716523579,
l "updateTime": 1620716523579
t }
/}
o
r`
i
g
i这样就使用 POST 的方式向后端发送了请求，完成了用户的注册功能。其它请求方式的具体用法，请查看官方文档https://github.com/axios/axios。
n
a推荐学习
l
/内容全面升级，4 个月 20+ 项目实战强化训练，资深测试架构师、开源项目作者亲授 BAT 大厂前沿最佳实践，带你一站式掌握测试开发必备核心技能（对标阿里P6+，年薪50W+）！直推 BAT 名企测试经理，普遍涨薪 50%+！
3
X
/###
b⬇️ 点击“阅读原文”，提升测试核心竞争力！
/原文链接
1
/### ⬇️ 点击“下方链接”，提升测试核心竞争力！
b> 更多技术文章分享和免费资料领取
1https://qrcode.testing-studio.com/f?from=Aliyun&url=https://ceshiren.com/t/topic/1658657810ddb9620365c19affd7243982f16134fcc.png)