当前位置: 首页 > news >正文

Vue3 Axios网络请求简单应用

cd 到项目 安装Axios:cnpm install --save axios

post传递参数 需要安装querystring 用于转换参数格式cnpm install --save querystring

运行示例:

后台接口: GetTestData.java

package com.csdnts.api;import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.csdnts.dto.User;    
import com.google.gson.Gson;/*** Servlet implementation class GetTest*/
@WebServlet("/getTestData.jspx")
public class GetTestData extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public GetTestData() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO doGet() 后台解决跨越问题//数据List<User> users = new ArrayList<>();User user = new User();user.setName("张三丰");user.setAge(25);user.setSex("男");User user2 = new User();user2.setName("周芷若");user2.setAge(22);user2.setSex("女");users.add(user);users.add(user2);Gson gson = new Gson();//[{"name":"张三丰","sex":"男","age":25},{"name":"周芷若","sex":"女","age":22}]String userString = gson.toJson(users);/**设置响应头 解决跨越问题* 这样,你的Servlet将允许来自任何域名的跨域请求,并且能够正常返回数据。* 请注意,CORS是一种安全机制,它在浏览器中执行。因此,即使你在后台配置了CORS头信息,* 浏览器仍然会根据这些头信息来判断是否允许跨域请求。* 如果浏览器不支持CORS或者请求中包含不允许的头信息,仍然会被浏览器拦截。* 你可以根据需要修改Access-Control-Allow-Origin头信息的值来指定允许访问的域名,* 如果你希望允许来自任何域名的访问,可以将其设置为"*"。* */response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");response.setHeader("Access-Control-Allow-Headers", "Content-Type");response.setHeader("Access-Control-Max-Age", "3600");//输出到页面response.setContentType("text/html");response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.print(userString);out.flush();}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO doPost 后台没有解决跨越问题//数据List<User> users = new ArrayList<>();User user = new User();user.setName("张三");user.setAge(25);user.setSex("男");User user2 = new User();user2.setName("李四");user2.setAge(22);user2.setSex("女");users.add(user);users.add(user2);Gson gson = new Gson();//[{"name":"张三","sex":"男","age":25},{"name":"李四","sex":"女","age":22}]String userString = gson.toJson(users);//输出到页面response.setContentType("text/html");response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.print(userString);out.flush();}}

后台接口: Login.java

package com.csdnts.api;import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class Login*/
@WebServlet("/login.jspx")
public class Login extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public Login() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO 参数传递  在后台没有解决跨越问题,在前台处理了//获取参数String userName = request.getParameter("userName");String passWord = request.getParameter("passWord");System.out.println("userName:"+userName);System.out.println("passWord:"+passWord);if(userName != null && !"".equals(userName) && passWord != null && !"".equals(passWord)){//有数据if(userName.equals("admin") && passWord.equals("123456")){//用户名密码正确//输出到页面outPrint(response,"恭喜"+userName+"登录成功");}else{//用户名密码正确错误outPrint(response,"用户名或密码错误");}}else{//空outPrint(response,"用户名或密码为空");}}private void outPrint(HttpServletResponse response, String msg) throws IOException {// TODO 把结果输出到页面response.setContentType("text/html");response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.print(msg);out.flush();}}

前台代码: HelloWorld.vue

<template><div class="hello"><h2>Vue Axios网络请求</h2><h3>从网络上获取到的数据get:{{ getmsg }}</h3><h3>从网络上获取到的数据post:{{ postmsg }}</h3><h3>登录状态:{{ loginMsg }}</h3></div>
</template><script>import axios from "axios"import querystring from "querystring"export default {name: 'HelloWorld',data(){return{getmsg:"",postmsg:"",loginMsg:""}},// 组件生命周期方法 组件渲染完成执行此方法mounted(){axios({//get 请求 method:"get",//    http://www.csdnts.com 你的域名  这个是假的url: "http://www.csdnts.com/getTestData.jspx"   //get// 成功}).then(res =>{console.log(res);console.log(res.data);this.getmsg = res.data;// 失败}).catch(err =>{console.log(err);this.getmsg =err;})axios({// post请求 由于post请求后台没有解决跨越问题 会发生报错。AxiosError: Network Error// 也可以在前台 解决跨越问题 打开vue.config.js 文件 设置proxy  重启服务再次运行就可以了method:"post",url: "/getTestData.jspx"                                //post// 成功}).then(res =>{console.log(res);console.log(res.data);this.postmsg = res.data;// 失败}).catch(err =>{console.log(err);this.postmsg =err;})//post 传递参数 需要安装 queryString 转换参数格式   cnpm install --save querystringaxios({// 请求 postmethod:"post",//http://www.csdnts.com/login.jspx?userName=admin&passWord=123456url: "/login.jspx",//.stringifydata:querystring.stringify({userName:"admin",passWord:"123456"})// 成功}).then(res =>{console.log(res);console.log(res.data);this.loginMsg = res.data;// 失败}).catch(err =>{console.log(err);this.loginMsg =err;})/** //简写getaxios.get("http://www.csdnts.com/getTestData.jspx").then(res =>{console.log(res.data);this.getmsg = res.data;}).catch(err =>{console.log(err);this.getmsg =err;})//简写postaxios.post("/login.jspx",querystring.stringify({userName:"admin",passWord:"123456"})).then(res =>{console.log(res.data);this.loginMsg = res.data;}).catch(err =>{console.log(err);this.loginMsg =err;})*/}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

文件:vue.config.js 

vue.config.js 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer:{proxy:{'/api':{target:'http://www.csdnts.com', //你的域名 演示用这个是假的changeOrigin:true}}}})

扩展 :全局引用Axios

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//引入axios
import axios from 'axios'// 把Axios 挂载到全局  起的名字 $axios,引用 this.$axios.get()  this.$axios.post()
const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

使用

//引用全局的简写getthis.$axios.get("http://www.csdnts.com/getTestData.jspx").then(res =>{console.log(res.data);this.getmsg = res.data;}).catch(err =>{console.log(err);this.getmsg =err;})//引用全局的简写postthis.$axios.post("/api/login.jspx",querystring.stringify({userName:"admin",passWord:"123456"})).then(res =>{console.log(res.data);this.loginMsg = res.data;}).catch(err =>{console.log(err);this.loginMsg =err;})

相关文章:

Vue3 Axios网络请求简单应用

cd 到项目 安装Axios&#xff1a;cnpm install --save axios post传递参数 需要安装querystring 用于转换参数格式&#xff1a;cnpm install --save querystring 运行示例&#xff1a; 后台接口&#xff1a; GetTestData.java package com.csdnts.api;import java.io.IOExce…...

day-18 代码随想录算法训练营(19)二叉树 part05

513.找树左下角的值 思路一&#xff1a;层序遍历&#xff0c;每一层判断是不是最后一层&#xff0c;是的话直接返回第一个; 如何判断是不是最后一层呢&#xff0c;首先队列头部&#xff0c;其次记录左右子节点都没有的节点数是不是等于que.size()&#xff1b;或…...

【数据结构OJ题】移除链表元素

原题链接&#xff1a;https://leetcode.cn/problems/remove-linked-list-elements/description/ 1. 题目描述 2. 思路分析 我们可以定义一个结构体指针变量cur&#xff0c;让cur一开始指向头结点&#xff0c;同时定义一个结构体指针prev&#xff0c;令prev初始化为空指针NULL…...

centos 安装 virtualbox

参考 https://phoenixnap.com/kb/how-to-install-virtualbox-centos-7 遇到 Gpg Keys Failue 这样解决 将 rpm 包下载到本地 –disablerepovirtualbox sudo yum --disablerepovirtualbox localinstall VirtualBox-7.0-7.0.10_158379_el7-1.x86_64 failure: repodata/repomd…...

Java8之Optional类的基本使用

文章目录 一、简介二、常见的Optional用法&#xff1a;1、创建Optional对象&#xff1a;1.1 使用of()方法&#xff1a;1.2 使用ofNullable()方法&#xff1a;1.3 使用empty()方法&#xff1a; 2、判断Optional是否包含值&#xff1a;2.1 使用isPresent()方法&#xff1a; 3、获…...

LinuxPTP时间同步

参考文献&#xff1a; http://linuxptp.sourceforge.net/ 0、硬件支持 查看网卡是否支持软硬件时间戳&#xff1a; sudo ethtool -T eno1 Time stamping parameters for eno1: Time stamping parameters for eno1: Capabilities: hardware-transmit (SOF_TIMESTAMPIN…...

【Django】Task1安装python环境及运行项目

【Django】Task1安装python环境及运行项目 写在最前 8月份Datawhale组队学习&#xff0c;在这个群除我佬的时代&#xff0c;写一下blog记录学习过程。 参考资源&#xff1a; 学习项目github&#xff1a;https://github.com/Joe-2002/sweettalk-django4.2 队长博客&#xff1a…...

00 - 环境配置

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 1. 环境说明2. 安装配置2.1 配置user信息2.2 config的三个作用域 3. 建git仓库3.1 把已有的项目代码纳入git管理3.2 新建的项目直接用git管理3.3 配置local的user和email3.4 优先级&…...

R语言实现计算净重新分类指数(NRI)和综合判别改善指数(IDI)

两个模型比较&#xff0c;与第一个模型相比&#xff0c;NRI&#xff08;重新分对的 - 重新分错的&#xff09;/总人数。IDI&#xff08;新模型患者平均预测概率-旧模型患者平均预测概率&#xff09;-&#xff08;新模型非患者平均预测概率-旧模型非患者平均预测概率&#xff09…...

【面试总结】八股①

目录 数据库缓存穿透是什么常见的sql调优方法有哪些使用表的别名为什么能优化查询性能MySQL事务特性是哪些事务隔离级别有哪些 Java基础StringBuffer和StringBuilder的区别String直接引号新建和new String新建的区别Java中继承和实现的各种关系 消息队列Redis计算机常识缓冲击穿…...

AI绘画 | 一文学会Midjourney绘画,创作自己的AI作品(快速入门+参数介绍)

一、生成第一个AI图片 首先&#xff0c;生成将中文描述词翻译成英文 然后在输入端输入&#xff1a;/imagine prompt:Bravely running boy in Q version, cute head portrait 最后&#xff0c;稍等一会即可输出效果 说明&#xff1a; 下面的U1、U2、U3、U4代表的第一张、第二张…...

MongoDB 数据库详细介绍

MongoDB 数据库详细介绍 MongoDB&#xff08;来自“Humongous”&#xff0c;意为巨大的&#xff09;是一个开源、高性能、无模式&#xff08;NoSQL&#xff09;、文档导向的分布式数据库。它以其灵活性、可扩展性和强大的查询功能而闻名于世。MongoDB 使用 JSON 格式的文档来存…...

Qt在mac安装

先在app store下载好Xcode 打开Xcode 随便建个文件给它取个名字找个地方放提醒没建立git link,不用理他打开终端, 输入/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"...

STM32 F103C8T6学习笔记1:开发环境与原理图的熟悉

作为一名大学生&#xff0c;学习单片机有一段时间了&#xff0c;也接触过嵌入式ARM的开发&#xff0c;但从未使用以及接触过STM32C8T6大开发使用&#xff0c;于是从今日开始&#xff0c;将学习使用它~ 本文介绍STM32C8T6最小系统开发环境搭建注意问题&#xff0c;STM32C8T6单片…...

【Linux命令详解 | ps命令】 ps命令用于显示当前系统中运行的进程列表,帮助监控系统状态。

文章标题 简介一&#xff0c;参数列表二&#xff0c;使用介绍1. 基本用法2. 显示所有进程3. 显示进程详细信息4. 根据CPU使用率排序5. 查找特定进程6. 显示特定用户的进程7. 显示进程内存占用8. 查看进程树9. 实时监控进程10. 查看特定进程的详细信息11. 查看特定用户的进程统计…...

“超越传统的HTTP请求:深度解析Axios,打造前端开发的终极利器“

解锁前端开发的新境界 - 深入探索Axios&#xff0c;构建卓越的互联网应用 在当今数字化世界中&#xff0c;互联网应用的需求日益增长&#xff0c;而无论是大型企业还是初创公司&#xff0c;都需要一个强大而可靠的工具来处理与后端服务器之间的通信。这就是Axios的光辉时刻。作…...

【Tomcat】tomcat的多实例和动静分离

多实例&#xff1a; 在一台服务器上有多台Tomcat&#xff1b;就算是多实例 安装telnet服务&#xff0c;可以用来测试端口通信是否正常 yum -y install telnettelnet 192.168.220.112 80 tomcat的日志文件 cd /usr/local/tomcat/logsvim catalina.out Tomcat多实例部署&…...

Python爬虫IP代理池的建立和使用

写在前面 建立Python爬虫IP代理池可以提高爬虫的稳定性和效率&#xff0c;可以有效避免IP被封锁或限制访问等问题。 下面是建立Python爬虫IP代理池的详细步骤和代码实现&#xff1a; 1. 获取代理IP 我们可以从一些代理IP网站上获取免费或付费的代理IP&#xff0c;或者自己租…...

Java面试题(dubbo)

目录 什么是dubbo&#xff1f;为什么要用&#xff1f; dubbo的使用场景和核心功能&#xff1f; dubbo核心组件 dubbo服务注册与发现的流程 dubbo与spring的关系 dubbo与springCloud的区别 dubbo有哪些注册中心&#xff1f; dubbo使用的什么通讯框架&#xff1f; dubbo…...

JVM源码剖析之Caused by: java.lang.OutOfMemoryError: GC overhead limit exceeded异常

写在前面&#xff1a; 版本信息&#xff1a; jdk版本&#xff1a;jdk8u40 垃圾回收器&#xff1a;ParallelScavenge new/old最近在群里看到有一位老哥拿着异常信息到处问&#xff0c;而发生的就是java.lang.OutOfMemoryError: GC overhead limit exceeded异常&#xff0c;恰好…...

手把手教你用FUTURE POLICE:会议录音秒变带时间轴字幕

手把手教你用FUTURE POLICE&#xff1a;会议录音秒变带时间轴字幕 1. 为什么需要高精度字幕对齐&#xff1f; 在日常工作中&#xff0c;我们经常遇到这样的场景&#xff1a;重要会议录音需要整理成文字稿&#xff0c;但人工听写耗时耗力&#xff1b;视频剪辑时需要添加字幕&a…...

深入S32K3XX以太网内部:用逻辑分析仪抓取MII时序,图解数据收发全过程

深入S32K3XX以太网内部&#xff1a;用逻辑分析仪抓取MII时序&#xff0c;图解数据收发全过程 在嵌入式系统开发中&#xff0c;以太网通信的底层实现往往像一个黑盒子——我们配置好寄存器&#xff0c;数据就神奇地传输了。但对于真正追求技术深度的开发者来说&#xff0c;理解信…...

AI应用架构师讲解AI在金融市场应用案例的模型构建

AI应用架构师讲解&#xff1a;AI在金融市场应用案例的模型构建 一、引入与连接&#xff1a;当AI成为金融市场的“智能分析师” 2023年&#xff0c;某头部量化基金的AI策略实现了35%的年化收益率&#xff0c;远超市场平均水平&#xff1b;同年&#xff0c;某国有银行用AI风险模型…...

Phi-4-mini-reasoning一文详解:专为多步推理设计的开源大模型实战

Phi-4-mini-reasoning一文详解&#xff1a;专为多步推理设计的开源大模型实战 1. 模型概述 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理需要多步分析的复杂问题。与通用聊天模型不同&#xff0c;它被设计用来解决数学题、逻辑题等需要逐…...

融合多尺度特征与注意力机制的YOLOv5红外小目标检测优化方案

1. 红外小目标检测的技术挑战 红外遥感图像中的小目标检测一直是计算机视觉领域的难点问题。与可见光图像相比&#xff0c;红外图像具有低对比度、高噪声、目标尺寸小等特点&#xff0c;这使得传统检测算法难以取得理想效果。在实际应用中&#xff0c;军事侦察中的无人机识别、…...

Windows 11 离线部署 WSL2 与 Ubuntu:绕过商店限制的完整实战

1. 为什么需要离线部署 WSL2 与 Ubuntu 很多开发者在 Windows 11 上使用 WSL2 时都会遇到一个头疼的问题&#xff1a;微软商店经常无法正常访问或下载速度极慢。我自己就遇到过好几次&#xff0c;明明网络连接正常&#xff0c;但就是卡在下载环节&#xff0c;进度条一动不动。这…...

VMware Workstation 16开机自启踩坑实录:从环境变量报错到bat脚本优化,一篇搞定

VMware Workstation 16开机自启全攻略&#xff1a;从环境变量到脚本优化的深度实践 每次重启服务器后手动打开虚拟机实在是个体力活。上周我负责维护的测试环境又因为忘记启动虚拟机导致整个团队阻塞了半天&#xff0c;这种低级错误让我决定彻底解决VMware Workstation的开机自…...

Leaf控制台终极指南:实时监控游戏服务器运行状态的完整教程

Leaf控制台终极指南&#xff1a;实时监控游戏服务器运行状态的完整教程 【免费下载链接】leaf A game server framework in Go (golang) 项目地址: https://gitcode.com/gh_mirrors/lea/leaf Leaf控制台是Go语言游戏服务器框架Leaf的强大实时监控工具&#xff0c;为游戏…...

**实时内核中的任务调度机制:从理论到C++实现的深度探索**在嵌入式系统和高实时性应用中,**实时内核(Real-

实时内核中的任务调度机制&#xff1a;从理论到C实现的深度探索 在嵌入式系统和高实时性应用中&#xff0c;实时内核&#xff08;Real-Time Kernel&#xff09; 是整个系统稳定运行的核心。它不仅负责资源分配&#xff0c;还承担着任务调度、中断响应、同步机制等关键职责。本文…...

SimpleMem:基于语义无损压缩的三阶段 Agent 终身记忆框架

&#x1f4cc; 一句话总结&#xff1a; 本工作提出 SimpleMem&#xff0c;一个基于语义结构化压缩的终身记忆系统&#xff0c;通过“压缩—合成—规划”三阶段机制&#xff0c;在固定上下文预算下显著提升 LLM Agent 的长期交互能力与检索效率。 &#x1f50d; 背景问题&…...