使用Vue访问后端API

一、前置准备

在我们开始使用Vue访问后端API之前,需要先确保有以下几点准备:

1、已经安装好Vue框架(这里假设我们使用Vue2.x版本)

2、已经有后端API可供访问,并了解其接口文档

3、已经通过npm等方式安装了axios库(用于发送HTTP请求)

二、发送GET请求

为了方便演示,我们假设后端API的接口地址为:http://localhost:8080/api/data

下面是一个简单的Vue组件,它可以向后端API发送GET请求并将返回的数据展示出来:

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        dataList: [],
      };
    },

    created() {
      axios.get('http://localhost:8080/api/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代码中,我们在created生命周期中使用axios.get方法发送GET请求,并将返回的数据保存到组件的dataList属性中。在组件的模板中,我们使用v-for指令遍历dataList数组,并将每个数据项展示出来。

三、发送POST请求

除了GET请求外,我们还常常需要发送POST请求,并且需要在请求体中携带数据。下面的代码展示了如何向后端API发送POST请求并在请求体中携带JSON数据:

<template>
  <div>
    <form @submit.prevent="submitFormData">
      <div>
        <input type="text" v-model="form.name" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        form: {
          name: '',
        },
      };
    },

    methods: {
      submitFormData() {
        axios.post('http://localhost:8080/api/data', this.form)
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      },
    },
  };
</script>

上面的代码中,我们定义了一个表单,并在submitFormData方法中使用axios.post方法发送POST请求。请求体中携带的数据是Vue组件中的form对象。

四、发送带参数的请求

有时候,我们需要在URL中携带一些查询参数,例如分页参数等。下面的代码展示了如何向后端API发送带查询参数的GET请求:

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        dataList: [],
        pageNum: 1,
        pageSize: 10,
      };
    },

    created() {
      axios.get('http://localhost:8080/api/data', {
        params: {
          page_num: this.pageNum,
          page_size: this.pageSize,
        },
      })
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代码中,我们使用axios.get方法向后端API发送GET请求,并在请求中携带pageNumpageSize两个查询参数。

五、发送带Header的请求

在一些场景下,我们需要在请求头中携带一些数据,例如认证token等。下面的代码展示了如何在Vue组件中发送带Header的请求:

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        dataList: [],
      };
    },

    created() {
      axios.get('http://localhost:8080/api/data', {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
      })
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代码中,我们在请求头中添加了一个Authorization字段,并将其值设为当前用户的认证token。这样后端API就可以根据这个token来进行认证和授权。

六、处理请求异常

最后,我们需要学会如何处理请求过程中可能出现的异常。通常,我们会在catch中对异常进行处理,并给用户一个提示。

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
    <p v-if="error">{{ error.message }}</p>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        dataList: [],
        error: null,
      };
    },

    created() {
      axios.get('http://localhost:8080/api/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          this.error = error;
        });
    },
  };
</script>

上面的代码中,我们在组件的data中添加了一个error属性,用于保存异常对象。在模板中,我们可以通过v-if指令来根据异常对象的存在与否展示不同的内容。

原创文章,作者:DTZH,如若转载,请注明出处:https://www.506064.com/n/145318.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
DTZHDTZH
上一篇 2024-10-27 23:48
下一篇 2024-10-27 23:48

相关推荐

  • 使用Vue实现前端AES加密并输出为十六进制的方法

    在前端开发中,数据传输的安全性问题十分重要,其中一种保护数据安全的方式是加密。本文将会介绍如何使用Vue框架实现前端AES加密并将加密结果输出为十六进制。 一、AES加密介绍 AE…

    编程 2025-04-29
  • 掌握magic-api item.import,为你的项目注入灵魂

    你是否曾经想要导入一个模块,但却不知道如何实现?又或者,你是否在使用magic-api时遇到了无法导入的问题?那么,你来到了正确的地方。在本文中,我们将详细阐述magic-api的…

    编程 2025-04-29
  • Vue TS工程结构用法介绍

    在本篇文章中,我们将从多个方面对Vue TS工程结构进行详细的阐述,涵盖文件结构、路由配置、组件间通讯、状态管理等内容,并给出对应的代码示例。 一、文件结构 一个好的文件结构可以极…

    编程 2025-04-29
  • Cookie是后端生成的吗?

    是的,Cookie通常是由后端生成并发送给客户端的。下面从多个方面详细阐述这个问题。 一、什么是Cookie? 我们先来简单地了解一下什么是Cookie。Cookie是一种保存在客…

    编程 2025-04-28
  • Avue中如何按照后端返回的链接显示图片

    Avue是一款基于Vue.js、Element-ui等技术栈的可视化开发框架,能够轻松搭建前端页面。在开发中,我们使用到的图片通常都是存储在后端服务器上的,那么如何使用Avue来展…

    编程 2025-04-28
  • Vertx网关:高效率的API网关中心

    Vertx是一个基于JVM的响应式编程框架,是最适合创建高扩展和高并发应用程序的框架之一。同时Vertx也提供了API网关解决方案,即Vertx网关。本文将详细介绍Vertx网关,…

    编程 2025-04-28
  • Elasticsearch API使用用法介绍-get /_cat/allocation

    Elasticsearch是一个分布式的开源搜索和分析引擎,支持全文检索和数据分析,并且可伸缩到上百个节点,处理PB级结构化或非结构化数据。get /_cat/allocation…

    编程 2025-04-28
  • 解析Azkaban API Flow执行结果

    本文将从多个方面对Azkaban API Flow执行结果进行详细阐述 一、Flow执行结果的返回值 在调用Azkaban API的时候,我们一般都会通过HTTP请求获取Flow执…

    编程 2025-04-27
  • Vue3的vue-resource使用教程

    本文将从以下几个方面详细阐述Vue3如何使用vue-resource。 一、安装Vue3和vue-resource 在使用vue-resource前,我们需要先安装Vue3和vue…

    编程 2025-04-27
  • ThinkPHP6 + Vue.js: 不使用Fetch的数据请求方法

    本文将介绍如何在ThinkPHP6和Vue.js中进行数据请求,同时避免使用Fetch函数。 一、AJAX:XMLHttpRequest的基础使用 在进行数据请求时,最基础的方式就…

    编程 2025-04-27

发表回复

登录后才能评论