Vue向后端传数据后端接收为null问题及解决

目录
  • Vue向后端传数据后端接收为null
    • 他们的格式
    • 安装qs
    • mian.js中添加
    • vue请求
  • Vue捕获后端抛出异常
    • 设置前
    • 设置后

Vue向后端传数据后端接收为null

由于axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，后端数据就为null，所以在发送之前，需要使用qs模块对其进行处理。

他们的格式

  • Request Payload：http://localhost:8080/login?zh=123,pw=123
  • Form Data:http://localhost:8080/login,{zh=“123”,pw=“123”}

安装qs

npm install qs

mian.js中添加

import qs from 'qs'      //引入qs
Vue.prototype.$qs = qs

vue请求

axios.post('http://localhost:8080/manage/doctor/login.do',
		this.$qs.stringify({
		doctorName:this.form.username,
			password:this.form.password,
			// test:3,
		})
		)
		.then(response=>{
			 console.log(response);
		})
		//获取失败
		.catch(error=>{
			  console.log(error);
			  alert('网络错误，不能访问');
		})

我的后端用的java，给你们看下效果图吧：

Vue捕获后端抛出异常

修改vue项目中 src/utils/request.js中 service.interceptors.response.use内容

设置前

设置后

service.interceptors.response.use(
  (response) => {
    loadingInstance &&
      setTimeout(function () {
        loadingInstance.close()
      }, 500)
    const res = response.data
    return res
  },
  (error) => {
    loadingInstance &&
      setTimeout(function () {
        loadingInstance.close()
      }, 500)

    if (error && error.response) {
      var { status, data } = error.response
      if (status === 401 || status === 403) {
        if (!loginInstance && whiteRoutes.indexOf(requestUrl) === -1) {
          loginInstance = MessageBox.confirm('登录超时请重新登录', '重新登录', {
            confirmButtonText: '好的',
            type: 'warning'
          })
            .then(() => {
              loginInstance = null
              store.dispatch('user/resetToken').then(() => {
                location.reload()
              })
            })
            .catch(() => {
              loginInstance = null
            })
        }
      } else {
        if (data) {
          Message({
            message: data,
            type: 'error',
            duration: 5 * 1000
          })
        } else {
          Message({
            message: data.message || '服务器异常，请稍后再试或联系管理员',
            type: 'error',
            duration: 5 * 1000
          })
        }

      }
    } else {
      Message({
        message: '服务器异常，请稍后再试或联系管理员',
        type: 'error',
        duration: 5 * 1000
      })
    }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何理解Vue前后端数据交互与显示

    如何理解Vue前后端数据交互与显示

    一.技术概述 将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面,再传值给后端.该技术是Web开发必备,是前后端交互的纽带.难点在于获取后端数据并且防止数据联动. 二.技术详述 1. 从接口获取后端数据 (1) 仔细查看后端所传数据的类型.主要是区分数组和单个数据.查看后端的请求方式,区分post或者get. (2) 首先,在data中return一个xxxData:[]数组或一个变量xxxData:<类型>来接收后端传来的数据. (3) 在方法中定义一个请求函数

  • 解决vue中post方式提交数据后台无法接收的问题

    最近用vue做项目,遇到ajax提交值的问题. 用post方式提交,后台无法接收到值.百度了半天,各种解决方式都有,下载中间件之类的,都试了. 最后咨询大牛才知道是数据没有序列化的问题. 下面是源码: 因为我没有使用箭头函数,所以需要在外面重新定义this,这样不太好,因为有时忘了的话就很尴尬了. 不过不知道为什么,我之前用 JSON.stringify( ) 完全没有效果. 改成 : var qs = require('querystring') qs.stringify(data) 就ok了

  • 基于vue 添加axios组件,解决post传参数为null的问题

    好,下面上货. 1.安装axios npm install axios --save 2.添加axios组件 import axios from 'axios' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.baseURL = 'http://localhost:7878/zkview'; Vue.prototype.$ajax = axios;

  • Vue向后台传数组数据,springboot接收vue传的数组数据实例

    用axios前台代码: let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{ console.log(result) }) 后台代码: @RequestMapping(&qu

  • Vue向后端传数据后端接收为null问题及解决

    目录 Vue向后端传数据后端接收为null 他们的格式 安装qs mian.js中添加 vue请求 Vue捕获后端抛出异常 设置前 设置后 Vue向后端传数据后端接收为null 由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端数据就为null,所以在发送之前,需要使用qs模块对其进行处理. 他们的格式 Request Payload:http://localhost:8080/login?zh=123,pw=123 Form D

  • 使用vue插件axios传数据的Content-Type及格式问题详解

    目录 1.一般来说,前后台对接,常用的Content-Type有: 2.get请求 3.post请求 1.一般来说,前后台对接,常用的Content-Type有: application/json,application/x-www-form-urlencoded 以及 multipart/form-data,当我们使用axios时,一般不需要我们主动去设置Content-Type,而是跟着我们传的数据格式自动适应. 2.get请求 get请求时传递的参数是会出现在url里面的,我们使用aixo

  • jsp传参 servlet接收中文乱码问题的解决方法

    在公司实习了8个月,一直都是做android和h5的,但是发现做程序连一点服务都不会该怎么办,所以最近开始学起了java,不知道是不是因为框架学多了,现在看起springmvc框架比以前看起来简单太多了,这里我是准备从hibernate开始学习,毕竟数据是根本嘛,首先我用的是hibernate+servlet,但是在jsp页面传参到servlet的时候中文一直乱码,我尝试了好多方法,最后还是解决了. 第一,首先看清项目的编码,jsp页面的编码 第二,修改tomcat 下面的server.xml文

  • Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数

    目录 1.未进行二次封装之前的操作 1.1 前端调用接口设计 1.2 后端接口设计 2.使用二次封装axios后的设计 2.1 封装的接口类型(只展示关键的接口调用部分) 2.2 前端调用接口设计 2.3 后端接口设计 3.友情提示 4.效果展示 在对axios进行二次封装的时候.为了统一接口的设计.有些传递的参数是直接拼接到URL地址栏中的.但是为了统一管理.不能将传递的参数直接拼接到地址栏中.如何自定义传递的参数到后端,后端如何获取到这些自定义的参数?如果解决这一问题,我就能随便传递参数,不

  • vue中使用echarts实现动态数据绑定以及获取后端接口数据

    vue中使用echarts实现动态数据绑定以及获取后端接口数据

    目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数

  • vue在body和query中如何向后端传参

    目录 在body和query中向后端传参 data params vue往后台传参(不是传对象) example 在body和query中向后端传参 在vue向Django后端传参的时候,常常会出现request.body或者其他为空的现象,主要原因是参数存放的位置不对.这里总结一下两种传参方式. data 我们需要传递的数据可以放在data中以键值对的形式来传递到后端. export function registerM(username, password) {     return req

  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na

  • Layui数据表格 前后端json数据接收的方法

    先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量

  • spring boot前后端传参的实现

    获取传参 @PathVariable注解主要用来获取URL参数.即这种风格的 URL:http://localhost:8080/user/{id} @GetMapping("/user/{id}") public String testPathVariable(@PathVariable Integer id) { System.out.println("获取到的id为:" + id); return "success"; } 对于多个参数的获

随机推荐