Vue使用axios实现Ajax请求

news2024/11/11 5:43:37

1、什么是 axios

在实际开发过程中,浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后,官方推荐使用 axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。

关于 promise 的介绍,请点击浏览文章:《ECMAScript6语法:Promise》

axios 的主要特点如下:

  • 从浏览器中创建 XMLHttpRequest。
  • 从 node.js 发出 HTTP 请求。
  • 支持 Promise API。
  • 拦截请求和响应。
  • 转换请求和响应数据。
  • 取消请求。
  • 自动转换JSON数据。
  • 客户端支持防止CSRF/XSRF。

官方文档:《Axios中文文档》

2、安装 axios

如果在项目中使用 axios,则可以使用 npm 方式进行安装。在命令提示符窗口中输入如下命令:

npm install axios --save

或者使用 yarn 安装,命令如下:

yarn add axios –save

3、axios 的语法格式

在实际项目开发中,前端页面中所需的数据通常要从服务器端获取,这就需要实现本地与服务器端的通信,Vue 使用 axios 实现 Ajax 请求。

语法格式和参数说明:

axios({
    url: '',             //请求的路径
    method: 'GET',       //请求的方式,默认为GET
    params: {},          //GET请求方式:传递的参数
    data: {},            //POST请求方式:传递的参数
    headers: {},         //自定义请求头
    timeout: 1000,       //请求超时时间(毫秒)
    responseType: 'JSON' //响应的数据类型,默认为JSON
}).then(
    // then() 函数:处理请求成功的回调函数
    function (response) {
        console.log("返回的数据", response.data);
    }
).catch(function (error) {
    // catch() 函数:处理请求失败的回调函数
    console.log("发生异常:" + error.message);
});

4、解决跨域问题

如果 Vue 前端应用请求后端 API 服务器,出现跨域问题(CORS),如下图:

解决方法:在 Vue 项目中,打开 vue.config.js 配置文件,在配置文件中使用代理解决跨域问题。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy: 'http://localhost:8085',  //使用代理,解决跨域问题
  }
})

详情的解决方法,请点击浏览文章:《Vue使用代理方式解决跨域问题》

5、综合实例

【实例】使用 axios 实现 Ajax 请求,实现用户信息的查询和新增功能。执行结果如下图:

(1)创建 Java、SpringBoot 项目,编写 UserController.java 用户信息控制器。

package com.pjb.pm.controller;

import com.pjb.pm.entity.UserInfo;
import org.springframework.web.bind.annotation.*;

/**
 * 用户信息控制器
 * @author pan_junbiao
 **/
@RestController
@RequestMapping("/user")
//@CrossOrigin //解决跨域问题
public class UserController
{
    /**
     * 获取用户信息
     */
    @RequestMapping(value = "/getUserInfo/{id}", method = RequestMethod.GET)
    public UserInfo getUserInfo(@PathVariable("id") Long userId)
    {
        //模拟用户查询功能
        UserInfo userInfo = new UserInfo();
        userInfo.setUserId(userId);
        userInfo.setUserName("pan_junbiao的博客");
        userInfo.setSex("男");
        userInfo.setAge(36);
        userInfo.setBlogName("您好,欢迎访问 pan_junbiao的博客");
        userInfo.setBlogUrl("https://blog.csdn.net/pan_junbiao");
        return userInfo;
    }

    /**
     * 新增用户信息
     */
    @RequestMapping(value = "/saveUserInfo", method = RequestMethod.POST)
    public boolean saveUserInfo(@RequestBody UserInfo userInfo)
    {
        //忽略相关功能...
        return true;
    }
}

(2)在 Vue 项目中,创建 UserInfo.vue 组件。

<template>
    <fieldset>
        <legend>用户信息</legend>
        <p>用户名称:<input type="text" v-model="userInfo.userName" /></p>
        <p>用户年龄:<input type="text" v-model="userInfo.age" /></p>
        <p>用户性别:<input id="male" type="radio" value="男" v-model="userInfo.sex" />
            <label for="male">男</label>
            <input id="female" type="radio" value="女" v-model="userInfo.sex" />
            <label for="female">女</label>
        </p>
        <p>博客信息:<input type="text" v-model="userInfo.blogName" /></p>
        <p>博客地址:<input type="text" v-model="userInfo.blogUrl" /></p>
        <button @click="getUserInfo(1)">查询用户</button>
        <button @click="saveUserInfo">新增用户</button>
    </fieldset>
</template>

<script setup>
//导入axios
import axios from 'axios';

import { ref } from 'vue';

//注意:这里使用 ref(),不要使用 reactive(),否则重新赋值后,响应式状态就缺失了
let userInfo = ref({});

//获取用户信息
function getUserInfo(userId) {
    //使用 axios 的 GET 请求(写法一)
    axios({
        method: 'GET',
        url: `/user/getUserInfo/${userId}`
    }).then(
        function (response) {
            userInfo.value = response.data;
        }
    ).catch(function (error) {
        alert("发生异常:" + error.message);
    });
}

//新增用户信息
function saveUserInfo() {
    //使用 axios 的 POST 请求(写法二)
    let promise = axios({
        method: 'POST',
        url: `/user/saveUserInfo`,
        data: userInfo.value
    });

    //处理请求成功的回调函数
    promise.then(
        function (response) {
            if (response) {
                alert("操作成功");
            } else {
                alert("操作失败");
            }
        }
    ).catch(function (error) {
        alert("发生异常:" + error.message);
    });
}

</script>

<!-- CSS样式 -->
<style scoped>
input[type="text"] {
    width: 300px;
    padding: 3px;
    font-size: 16px;
}

button {
    margin-right: 10px;
}
</style>

执行结果:

(1)查询用户信息:

(2)新增用户信息:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2151693.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C#开源的一个能利用Windows通知栏背单词的软件

前言 今天给大家推荐一个C#开源且免费的能利用Windows通知栏背单词的软件&#xff0c;可以让你在上班、上课等恶劣环境下安全隐蔽地背单词&#xff08;利用摸鱼时间背单词的软件&#xff09;&#xff1a;ToastFish。 操作系统要求 目前该软件只支持Windows10及以上系统&…

Scrapy爬虫实战——某瓣250

# 按照我个人的习惯&#xff0c;在一些需要较多的包作为基础支撑的项目里&#xff0c;习惯使用虚拟环境&#xff0c;因为这样能极大程度的减少出现依赖冲突的问题。依赖冲突就比如A、B、C三个库&#xff0c;A和B同时依赖于C&#xff0c;但是A需要的C库版本大于N&#xff0c;而B…

Linux系统查找文件的所属目录

在Linux下查找文件的所属目录方法较多&#xff0c;既可以在图形桌面系统中用搜索功能查找文件&#xff0c;也可以在字符终端窗口中用不同的命令查找不同类型文件并显示其所在目录&#xff0c;针对不同的文件类型&#xff0c;有不同的命令。 一、在图形桌面系统中查找 如图1&a…

利用 ARMxy边缘计算网关和 BLiotlink 软网关,实现工业智能化升级

在当今数字化、智能化的时代浪潮中&#xff0c;工业领域也在不断寻求创新与突破&#xff0c;以提高生产效率、降低成本并提升竞争力。ARM 工业计算机与 BLiotlink 协议转换软件的结合&#xff0c;为工业智能化带来了新的机遇和解决方案。 一、ARM 工业计算机的优势 ARM 工业计…

【4.4】图搜索算法-BFS和DFS两种方式解岛屿数量

一、题目 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向或竖直方向上相邻的陆地连接形成。此外&#xff0c;你可以假设该网格的四条…

I2C中继器TCA9517A(TI)

一、芯片介绍 本芯片是一款具有电平转换功能的双向缓冲器&#xff0c;适用于I2C和SMBus系统&#xff0c;同时支持各种拓扑结构的扩展使用。芯片支持SCL和SDA缓冲&#xff0c;因此允许两条总线的负载电容达到400pF。 TCA9517A的A和B侧驱动器是不同的&#xff0c;但是均可耐受5…

Obsidian 全部笔记共享配置文件,obsidian仓库-文件夹配置统一化

obsidian仓库-文件夹配置统一化 在每次新建obsidian仓库(vaults)时&#xff0c;仓库的主题和快捷键等都需要重新设置&#xff0c;这是因为每次创建新的仓库时 新仓库的配置文件都是默认配置但是如果通过复制粘贴旧配置文件来达到新仓库的配置和旧仓库一致的话&#xff0c;无法…

kafka3.8的基本操作

Kafka基础理论与常用命令详解&#xff08;超详细&#xff09;_kafka常用命令和解释-CSDN博客 [rootk1 bin]# netstat -tunlp|grep 90 tcp6 0 0 :::9092 :::* LISTEN 14512/java [rootk1 bin]# ./kafka-topics.s…

MVCC机制解析:提升数据库并发性能的关键

MVCC机制解析&#xff1a;提升数据库并发性能的关键 MVCC&#xff08;Multi-Version Concurrency Control&#xff09; 多版本并发控制 。 MVCC只在事务隔离级别为读已提交(Read Committed)和可重复读(Repeated Read)下生效。 MVCC是做什么用的 MVCC是为了处理 可重复读 和…

数据安全治理

数据安全治理 1.数据安全治理2.终端数据安全加密类权限控制类终端DLP类桌面虚拟化安全桌面 3.网络数据安全4.存储数据安全5.应用数据安全6.其他话题数据脱敏水印与溯源 7.UEBA8.CASB 1.数据安全治理 数据安全治理最为重要的是进行数据安全策略和流程制订。在企业或行业内经常发…

酸枣病虫害智能化防控系统的探索与实践,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建枣类作物种植场景下酸枣病虫害智能检测识别系统

智慧农业&#xff0c;作为现代农业的高级形态&#xff0c;通过集成物联网、大数据、人工智能等先进技术&#xff0c;实现了农业生产过程的精准化、智能化管理。在酸枣等经济作物的种植过程中&#xff0c;病虫害的及时监测与防控直接关系到作物的产量与质量&#xff0c;进而影响…

Vue报错 ‘vite‘ 不是内部或外部命令,也不是可运行的程序或批处理文件

报错 vue-project0.0.0 dev vite‘vite’ 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。解决 第1步. 控制台输入 npm install -g create-vite第2步. 控制台输入 npm install -g vite第3步. 运行就ok啦

伊犁linux 创建yum 源过程

首先要创建yum 源这样后期的服务才能大面积部署 在su 用户下创建 清理缓存&#xff0c;一定要配置 这说明yum安装成功

笔记整理—内核!启动!—kernel部分(8)动态编译链接库与BSP文件

linux的C语言程序是用编译的&#xff0c;但是如果要在开发板上运行的话就不能使用默认的ubuntu提供的gcc编译器&#xff0c;而是使用arm-linux版本的一类的编译器。我们可以用file xx去查看一个程序的架构。 &#xff08;arm架构&#xff09; &#xff08;intel的80386架构&…

Linux命令 —— grep/sed

一、grep命令 grep是Linux中最常用的“文本处理工具”之一&#xff0c;grep与sed、awk合称为Linux中的三剑客。 grep的全称为&#xff1a; Global search Regular Expression and Print out the line 所以&#xff0c;从grep的全称中可以了解到&#xff0c;grep是一个可以利用…

运维开发之堡垒机(Fortress Machine for Operation and Development)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

十种果冻的做法

菠萝果冻 1.在菠萝的1/5处切开&#xff0c;切去顶做盖子用&#xff0c;用水果刀在四周划一圈使皮和果肉分离 2.注意底部切透了&#xff0c;用水果刀把菠萝肉挖出&#xff0c;菠萝肉切丁用盐水浸泡备用 3.把菠萝丁放入料理机中加入少许纯净水&#xff0c;打成菠萝汁备用 4.打好…

伊犁-linux root 密码忘记咋办

1 root 密码忘记了 或者reboot 重启之后在引导界面 按住 e 进入如下界面 然后按住ctrlx 进入这个界面 root 修改成功

为什么512G的固态硬盘,电脑显示只有476G可用?

硬盘的标称容量与操作系统显示的可用容量存在差异&#xff0c;这是由于硬盘制造商和操作系统在计算容量时采用不同的进制标准所致。硬盘制造商通常使用10进制来标注硬盘容量&#xff0c;即1GB等于1000MB&#xff0c;而操作系统则使用2进制&#xff0c;即1GB等于1024MB。因此&am…

无人机视角电力巡检资产检测与异常判别数据集

无人机视角电力巡检资产检测与异常判别&#xff0c;资产检测关注17类目标&#xff0c;共10000余张无人机图像&#xff0c;json方式标注&#xff0c;类别如下&#xff1a; 1.Spiral Damper - 螺旋阻尼器 2.Stockbridge Damper - 斯托克布里奇阻尼器 3.Glass Insulator - 玻璃绝缘…