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

 更新时间:2022年09月07日 09:52:23   投稿:jingxian  
这篇文章主要介绍了Vue向后端传数据后端接收为null问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Vue表单验证 trigger:'blur'OR trigger:'change'区别解析

    Vue表单验证 trigger:'blur'OR trigger:'change&ap

    利用 elementUI 实现表单元素校验时,出现下拉框内容选中后校验不消失的异常校验情形,这篇文章主要介绍了Vue表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别,需要的朋友可以参考下
    2023-09-09
  • vue-table实现添加和删除

    vue-table实现添加和删除

    这篇文章主要为大家详细介绍了vue-table实现添加和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 简单理解Vue条件渲染

    简单理解Vue条件渲染

    这篇文章主要帮助大家简单理解Vue条件渲染,什么是Vue条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • VUE3安装element ui失败的原因以及解决办法

    VUE3安装element ui失败的原因以及解决办法

    这篇文章主要给大家介绍了关于VUE3安装element ui失败的原因以及解决的相关资料,很多朋友升级使用Vue3了,但在安装element ui失败出错了,这里给大家总结下,需要的朋友可以参考下
    2023-09-09
  • vue 过滤器和自定义指令的使用

    vue 过滤器和自定义指令的使用

    本文主要介绍Vue.js中过滤器和自定义指令相关的知识点,包括过滤器的定义方式,和使用方法,以及自定义指令的概念和注册方式。
    2021-05-05
  • vue引入css文件导致全局污染的问题

    vue引入css文件导致全局污染的问题

    这篇文章主要介绍了vue引入css文件导致全局污染的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue数组双向绑定问题及$set用法说明

    vue数组双向绑定问题及$set用法说明

    这篇文章主要介绍了vue数组双向绑定问题及$set用法说明,具有很好的参考价值,希望大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue项目报错:Uncaught SyntaxError: Unexpected token <

    Vue项目报错:Uncaught SyntaxError: Unexpected token <

    这篇文章主要介绍了Vue项目报错:Uncaught SyntaxError: Unexpected token <,在引入第三方依赖的 JS 文件时,遇到的一个问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue自适应布局postcss-px2rem详解

    vue自适应布局postcss-px2rem详解

    这篇文章主要介绍了vue自适应布局(postcss-px2rem)的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-05-05
  • 在vue中使用回调函数,this调用无效的解决

    在vue中使用回调函数,this调用无效的解决

    这篇文章主要介绍了在vue中使用回调函数,this调用无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论