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;})

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

力扣 279. 完全平方数

力扣 279. 完全平方数

题目来源&#xff1a;https://leetcode.cn/problems/perfect-squares/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a; 动规五部曲分析如下&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义。dp[j]&#xff1a;和为j的完全平方…
阅读更多...
【C++11】智能指针

【C++11】智能指针

文章目录 一.为什么要有智能指针二.内存泄漏1. 什么是内存泄漏&#xff0c;内存泄漏的危害2. 内存泄漏分类3. 检测内存泄漏4.如何避免内存泄漏 三.智能指针的原理与使用1. RAII2. auto_ptr 四.常用的智能指针1. unique_ptr2. shared_ptr3. 循环引用4. weak_ptr5. 定制删除器 五…
阅读更多...
静态时序分析与时序约束

静态时序分析与时序约束

一、时序分析的基本概念 1. 时钟 理性的时钟模型是一个占空比为50%且周期固定的方波&#xff1a; 实际电路中输入给FPGA的晶振时钟信号是正弦波&#xff1a; 2. 时钟抖动 Clock Jitter&#xff0c;时钟抖动&#xff0c;相对于理想时钟沿&#xff0c;实际时钟存在不随时钟存在…
阅读更多...
结构体和数组结合使用

结构体和数组结合使用

1、定义结构体 struct Student {int num;char name[32]; }; 2、结构体数组定义 #include<iostream> using namespace std;struct Student {int num;char name[32]; }; int main() {//结构体变量复制方式2struct Student arr[2] { {1,"张三"}, {2,"李四…
阅读更多...
【Java学习】System.Console使用

【Java学习】System.Console使用

背景 在自学《Java核心技术卷1》的过程中看到了对System.Console的介绍&#xff0c;编写下列测试代码&#xff0c; public class ConsoleTest {public static void main(String[] args) {Console cs System.console();String name cs.readLine("AccountInfo: ");…
阅读更多...
相互之间差异较大的15种颜色、35种颜色 | 颜色 色卡 色盘 RGB HEX十六进制

相互之间差异较大的15种颜色、35种颜色 | 颜色 色卡 色盘 RGB HEX十六进制

任意两个颜色之间&#xff0c;RGB的欧氏距离大于120 1: (211, 44, 31), #d32c1f 2: (205, 140, 149), #CD8C95 3: (67, 107, 173), #436bad 4: (205, 173, 0), #CDAD00 5: (4, 244, 137), #04f489 6: (254, 1, 154), #fe019a 7: (6, 71, 12), #06470c 8: (97, 222, 42), #61de…
阅读更多...
基于springboot线上礼品商城

基于springboot线上礼品商城

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…
阅读更多...
docker通用镜像方法，程序更新时不用重新构建镜像

docker通用镜像方法，程序更新时不用重新构建镜像

docker通用镜像方法&#xff0c;程序更新时不用重新构建镜像。更新可执行文件后&#xff0c;重新启动容器就可运行。 功能 1、在demo目录下添加脚本文件start.sh&#xff0c;里面执行demo.jar文件。 2、将demo目录映射到镜像下的 /workspace目录。 3、Dockerfile文件中默认…
阅读更多...
使用路由器更改设备IP_跨网段连接PLC

使用路由器更改设备IP_跨网段连接PLC

在一些设备IP已经固定,但是需要采集此设备的数据,需要用到跨网段采集 1、将路由器WAN&#xff08;外网拨号口&#xff09;设置为静态IP 2、设置DMZ主机&#xff0c;把DMZ主机地址设置成跨网段的PLC地址 DMZ主机 基本信息. DMZ (Demilitarized Zone)即俗称的非军事区&#xff0…
阅读更多...
LC-链表的中间节点（遍历）

LC-链表的中间节点（遍历）

LC-链表的中间节点&#xff08;遍历&#xff09; 链接&#xff1a;https://leetcode.cn/problems/middle-of-the-linked-list/description/ 描述&#xff1a;给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个…
阅读更多...
推断统计（配对样本t检验）

推断统计（配对样本t检验）

根据题目我们也可以看出配对样本 t 检验是用来检验两配对正态总体的均值是否存在显著差异的一种假设检验方法&#xff0c;虽然是两组数据但是其来自同一部分个体在两个时间段内的测试数据&#xff0c;是同一部份个体&#xff01; 进行配对样本 t 检验之后也是分别做出原假设和备…
阅读更多...
2024软考系统架构设计师论文写作要点

2024软考系统架构设计师论文写作要点

一、写作注意事项 系统架构设计师的论文题目对于考生来说&#xff0c;是相对较难的题目。一方面&#xff0c;考生需要掌握论文题目中的系统架构设计的专业知识;另一方面&#xff0c;论文的撰写需要结合考生自身的项目经历。因此&#xff0c;如何将自己的项目经历和专业知识有机…
阅读更多...
PAT 1079 Total Sales of Supply Chain

PAT 1079 Total Sales of Supply Chain

个人学习记录&#xff0c;代码难免不尽人意。 A supply chain is a network of retailers&#xff08;零售商&#xff09;, distributors&#xff08;经销商&#xff09;, and suppliers&#xff08;供应商&#xff09;-- everyone involved in moving a product from supplier…
阅读更多...
应用层协议——TCP(上)

应用层协议——TCP(上)

文章目录 1. TCP协议1.1 TCP协议段格式1.2 确认应答(ACK)机制1.3 16位窗口大小1.4 6位标志位1.4.1 TCP三次握手 1.5 确认应答(ACK)机制1.6 超时重传机制1.7 连接管理机制1.7.1 理解TIME_WAIT状态1.7.2 理解 CLOSE_WAIT 状态 1. TCP协议 TCP全称为传输控制协议&#xff0c;意思…
阅读更多...
基于C#的无边框窗体阴影绘制方案 - 开源研究系列文章

基于C#的无边框窗体阴影绘制方案 - 开源研究系列文章

今天介绍无边框窗体阴影绘制的内容。 上次有介绍使用双窗体的方法来显示阴影&#xff0c;这次介绍使用API函数来进行绘制。这里使用的是Windows API函数&#xff0c;操作系统的窗体也是用的这个来进行的绘制。 1、 项目目录&#xff1b; 下面是项目目录&#xff1b; 2、 函数介…
阅读更多...
Kubernetes网络模型

Kubernetes网络模型

Kubernetes 用来在集群上运行分布式系统。分布式系统的本质使得网络组件在 Kubernetes 中是至关重要也不可或缺的。理解 Kubernetes 的网络模型可以帮助你更好的在 Kubernetes 上运行、监控、诊断你的应用程序。 网络是一个很宽泛的领域&#xff0c;其中有许多成熟的技术。对于…
阅读更多...
剑指offer-2.1数组

剑指offer-2.1数组

数组 数组可以说是最简单的一种数据结构&#xff0c;它占据一块连续的内存并按照顺序存储数据。创建数组时&#xff0c;我们需要首先指定数组的容量大小&#xff0c;然后根据大小分配内存。即使我们只在数组中存储一个数字&#xff0c;也需要为所有的数据预先分配内存。因此数…
阅读更多...
C++ 之动态链接库DLL使用注意事项及C#调用详解

C++ 之动态链接库DLL使用注意事项及C#调用详解

C 之动态链接库DLL使用注意事项及C#调用详解 有时候算法开发完成之后需要封装成动态链接库DLL来进行集成&#xff0c;一方面增加了算法or代码的复用或者广泛使用性&#xff0c;另一方面也起了保密的效果平时封装成DLL之后放到一台新的电脑上会出现问题&#xff0c;所以本文总结…
阅读更多...
初识结构体

初识结构体

文章目录 目录1. 结构体类型的声明1.1 结构的基础知识1.2 结构的声明1.3 结构成员的类型1.4 结构体变量的定义和初始化 2. 结构体成员的访问3. 结构体传参 目录 结构体类型的声明结构体初始化结构体成员访问结构体传参 1. 结构体类型的声明 1.1 结构的基础知识 结构是一些值的…
阅读更多...
发布属于自己的 npm 包

发布属于自己的 npm 包

1 创建文件夹&#xff0c;并创建 index.js 在文件中声明函数&#xff0c;使用module.exports 导出 2 npm 初始化工具包&#xff0c;package.json 填写包的信息&#xff08;包的名字是唯一的&#xff09; npm init 可在这里写包的名字&#xff0c;或者一路按回车&#xff0c;后…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023