vue 使用 axios 前后端数据传输 Post请求参数问题

你的名字 2023-07-02 03:20 11阅读 0赞

后端 java 接口，前端 vue

# 第一种方法:使用 qs 模块处理参数（推荐使用） #

1、安装

npm install axios qs --save

2、引入

//引入 axios
    import axios from 'axios'
    Vue.prototype.$http=axios; // 将 $http 替换成  axios 
    Vue.prototype.$http.defaults.baseURL = 'http://192.168.31.13:41000' //请求地址的公有部分
    
    import qs from 'qs';
    Vue.prototype.$qs = qs;

3、使用

login(){ 
            var params = {
              account: this.account,
              password: this.password
            }
    
            this.$http.post("/api/admin/login", this.$qs.stringify(params))
            .then(function (data) {
              console.log(data)
            })
            .catch(function (error) {
              console.log(error)
            })
          }

# 第二种方法：使用URLSearchParams对象处理参数 #

1、安装axios

npm install axios --save

2、main.js  引入

//引入 axios
    import axios from 'axios'
    Vue.prototype.$http=axios; //将 $http 变量替换成 axios
    Vue.prototype.$http.defaults.baseURL = 'http://192.168.31.13:41000' //公有请求地址

3、发送post请求

login(){  
            var params = new URLSearchParams();
            params.append('account', this.account);
            params.append('password', this.password);
    
            this.$http.post("/api/admin/login", params)
            .then(function (data) {
              console.log(data)
            })
            .catch(function (error) {
              console.log(error)
            })
          }

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot+Vue前后端文件传输问题总结

![在这里插入图片描述][14b5edfcab284af3a7e3bc3dcd7b69cd.png_pic_center] SpringBoot+Vue前后端文件传输问题总

我不是女神ヾ/ 2024年02月22日 08:48/ 0 赞/ 51 阅读

相关 Vue+SpringBoot前后端分离教程四：前后端数据交互之Axios

前后端数据交互之Axios 一、Axios的安装二、封装Request请求三、前后端数据交互测试一、Axios的安装 axios 是一个基

港控/mmm°/ 2023年09月29日 12:47/ 0 赞/ 36 阅读

相关 vue使用axios发送post请求携带json body参数，后端使用@RequestBody进行接收

前言最近在做自己项目中，做一个非常简单的新增用户场景，但是使用原生axios发送post请求的时候，还是踩了不少坑的。唉，说多了都是泪，小小一个新增业务，在自己前后

清疚/ 2023年09月24日 18:48/ 0 赞/ 23 阅读

相关 Vue---axios-get/post请求

注：以下的 $axios 是将 axios 挂到了Vue的原型链上，这样页面可直接使用 $axios ，而不需要在页面导入axios。 Get请求方式一(不常用)：

淩亂°似流年/ 2023年07月21日 06:08/ 0 赞/ 47 阅读

相关 vue 使用 axios 前后端数据传输 Post请求参数问题

后端 java 接口，前端 vue 第一种方法:使用 qs 模块处理参数（推荐使用） 1、安装 npm install axios qs --save 2、

你的名字/ 2023年07月02日 03:20/ 0 赞/ 12 阅读

相关 axios post请求传两个参数

![在这里插入图片描述][2019122611525794.png] 备用实例数据需要根据接入实例id和模式名称来获取改变模式名称时,获取备用实例数据,故在模式名称上

旧城等待，/ 2023年06月25日 06:03/ 0 赞/ 26 阅读

相关 vue中的axios.post数据传输问题

问题描述：在本地使用： > axios.post(url, params).then(res => res.data); 进行表单数据提交时，没有任何问题，但是

叁歲伎倆/ 2022年04月23日 01:26/ 0 赞/ 351 阅读

相关 axios post 参数请求不到

1、记录axios填坑之路最近用vue编写项目。用axios请求后端数据时。 ![20181108152533829.png][] 后台没有接收到数据。纳闷。查看浏

ゝ一世哀愁。/ 2022年04月18日 04:35/ 0 赞/ 328 阅读

相关 vue+axios post请求

vue+axios post请求 axios 全局默认配置 axios.defaults.baseURL = 'https://api.example.com';

淩亂°似流年/ 2022年04月10日 13:19/ 0 赞/ 355 阅读

相关 vue axios拦截器处理post请求中添加qs处理参数问题

Axios拦截器 (1)在发送之前和接收之前的一些判断 (2)参数为当前网络请求信息 (3)config.method为请求方法

迷南。/ 2021年07月24日 18:23/ 0 赞/ 698 阅读