Vue 请求传公共参数的操作

我就废话不多说了，大家还是直接看代码吧~

// An highlighted block
//http request拦截器
axios.interceptors.request.use(
	config =>{
  const token = window.sessionStorage.getItem('Tk_token')
  const user_id=window.sessionStorage.getItem('Tk_user_id')

 // config.data = JSON.stringify(config.data);
 // config.headers = {
 //  'Content-Type':'application/x-www-form-urlencoded'
 // }
  if(token){
   config.params = {'token':token,'user_id':user_id}
  }
  console.log(config);
		return config;
	},
	err =>{
		return Promise.reject(err);
	}
)

补充知识：Vue联合axios发送后台post请求时的参数问题

开始用的是vue-resource,后来发现这个已经很久没有更新了，作者已经停止更新了，而且就连作者也推荐用axios，那么我就用axios吧，改成axios之后，就出现了一个问题：参数问题。

怎么个参数问题呢？用vue-response来发送post请求的时候，传入的参数到后台是一个一个分开的，比如传了参数

{
  username:'name1',
  password:'pwd1'
}

就是很简单的用户名和密码，vue-resource传到后台之后，后台的接口方法参数是两个，一个是username，一个是password，都可以分别取到；但是axios不同，axios到后台之后，是一个map结构的对象，需要用@RequestBody Map map这种方式来获取，然后从map中一个一个取出来，这样也可以。但是有没有办法让axios传给后台的参数也是一个一个的呢？当然有。

第一个方法就是URLSearchParams,用这个添加好参数，到后台就是一个一个的，但是这个IE不支持。

还有一个办法，就是qs，qs的话有两种引入方式，一种就是用npm安装好后，直接import，然后就可以用了；另一种就是在页面直接引入qs.js，就是<script src='js/qs.js'></script>这种方式，然后

注意了！

这里要注意了！

如果是import方式引入的，我们就用qs.stringify调用就好了，但是！！！

注意了！

如果是js文件引入的方式，用的Qs，不是qs，Q是大写的Q，也就是Qs.stringify。

然后就可以了！

以上这篇Vue 请求传公共参数的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue之封装公用变量以及实现方式

    阿西八!!!写久了Flutter,前端的知识真的是忘得差不多了,今天就来复习一下Vue中如何封装公用变量以及公用方法 以封装一个正则表达式为例! 第一步 创建我们的公用文件夹 我们来看一下utils.js中的代码 class PublicMethods{ constructor() { this.name = '公用变量' } verificationPhon(phone){ // 大陆手机号码11位数,匹配格式:前三位固定格式+后8位任意数 // 13+任意数 * 15+除4的任意数 * 18

  • vue请求数据的三种方式

    请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 使用步骤: 1.安装vue-resource模块 cnpm install vue-resource --save 加--save是为了在package.json中引用,表示在生产环境中使用.因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,pa

  • vue 中几种传值方法(3种)

    前言 vue项目中,组件跟组件之间数据的传递是很普遍的行为,在这里总结几种常见的vue组件跟组件之间传值方式,其中,主要有父子组件,非父子组件传值. 父组件向子组件传值 方法:父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数props接收即可.具体可参考官方文档. 父组件传递参数代码如下: <template> <center-template :form='userinfo'></center-template&

  • vue中get请求如何传递数组参数的方法示例

    前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 1.问题 示例代码 let params = { statusList: ['OVERDUE', 'DELAY'] } this.$http.get('/list', params) .then(res => {}) .catch(e => {}) 上述代码在不做配置的时候请求信息为:/list?stat

  • Vue 请求传公共参数的操作

    我就废话不多说了,大家还是直接看代码吧~ // An highlighted block //http request拦截器 axios.interceptors.request.use( config =>{ const token = window.sessionStorage.getItem('Tk_token') const user_id=window.sessionStorage.getItem('Tk_user_id') // config.data = JSON.stringif

  • 为spring get请求添加自定义的参数处理操作(如下划线转驼峰)

    1.生成自己的注解(为了确定在哪些位置使用) /** * 关闭patch delete的model处理,否则会报错 */ @Target({ElementType.METHOD}) @Retention(RetentionPolicy.RUNTIME) @Documented public @interface AliasProcessor { } /** * 处理Get 请求参数的驼峰问题 * @author lw */ @Target(ElementType.FIELD) @Retentio

  • vue+axios全局添加请求头和参数操作

    走登录的接口都会返回一个token值,然后存起来方便之后调接口的时候给后台传过去,传给后台的方式有两种:(具体使用哪种需要和后台商量) 1.放在请求头中 2.放在接口的参数中 1.放在请求头中 下面代码是从本地cookie中拿token VueCookie:一个用于处理浏览器cookies的简单Vue.js插件. // 在封装axios的文件中添加拦截器 // 添加请求拦截器,在请求头中加token service.interceptors.request.use( config => { //

  • Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)

    在前端项目中,附件上传是很常用的功能,几乎所有的app相关项目中都会使用到,一般在选择使用某个前端UI框架时,可以查找其内封装好的图片上传组件,但某些情况下可能并不适用于自身的项目需求,本文中实现的附件上传区域支持超多类型附件分类型上传,并且可根据特定条件具体展示某些类型的附件上传,本文中是直接摘自具体的页面,后面会抽时间单独封装出来一个附件上传的组件. 一.Vue页面内附件展示区域代码 <div class="retuinfo"> <div class="

  • Vue如何调用接口请求头增加参数

    目录 Vue调用接口请求头增加参数 Vue取消接口请求 接口js文件 页面中引用 总结 Vue调用接口请求头增加参数 import axios from 'axios' import qs from 'qs' let api_secret = '935bda53552e49cd56fc' // 基础配置 if (process.env.NODE_ENV === 'production') { // axios.defaults.baseURL = 'https://' //线上版本域名 // a

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

  • Vue 设置axios请求格式为form-data的操作步骤

    Cover 在Vue中使用axios 这个老生常谈了,还是先记录一遍,方面后面自己查. !!! 设置form-data请求格式直接翻到后面看. 1. 安装axios 在项目下执行npm install axios. 之后在main.js中,添加: import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios封装了get方法,传入请求

  • Vue 列表页带参数进详情页的操作(router-link)

    首先,仔细看文档!!!一点一点的踩坑过来的~~~ 这里介绍params和query两种方法 1.用params传参 列表页: <router-link :to="{ name:'msgDetail', params: {id: item.msg_id} }">(注意:用params传参这里是命名路由,用name) </router-link> 路由配置如下: export default new Router({ routes: [ { path: '/msgD

  • vue中使用$http.post请求传参的错误及解决

    vue中使用$http.post请求传参的错误及解决

    目录 使用$http.post请求传参的错误 vue post请求之坑 解决方法 使用$http.post请求传参的错误 在使用$http请求后台,照常我们在后端 使用注解@PostMapper或者 @RequestMapping(value = “XXXX”,method = RequestMethod.POST)接受请求 handleAdd(node) { this.$http.post("/item/category/addCategory",{ node:node }) .th

随机推荐