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 请求传公共参数的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2020-07-29

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

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

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

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

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

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

vue请求数据的三种方式

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

Action获取请求参数的三种方式

方式一:Action本身作为Model对象,通过属性注入(Setter)方法讲参数数据封装到Action中 具体为:在Action中,提供和参数名相同的几个属性,并为其提供set方法,那么,该参数会被自动封装 到该几个属性中. 方式二:创建独立的Model对象,还是通过属性注入的方法将请求数据封装到Model对象中 具体为:另外创建一个专门的类,并在其中添加几个和请求参数名相同的属性,,此时,在表单中,需要讲参数名, 写成Model的一个具体对象名.参数名的方式,然后在Action中,需要定义一

SpringMVC返回json数据的三种方式

Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring 可插入的 MVC架构,从而在使用Spring进行WEB开发时,可以选择使用Spring的SpringMVC框架或集成其他MVC开发框架,如Struts1,Struts2等. 1.第一种方式是spring2时代的产物,也就是每个json视图controller配置一个Jsoniew. 如:<bean

iOS开发中UIWebView的加载本地数据的三种方式

UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): UIWebView加载内容的三种方式: 1 加载本地数据文件 指定文件的MIMEType 编码格式使用@"UTF-8" 2加载html字符串(可以加载全部或者部分html

Oracle批量插入数据的三种方式【推荐】

第一种: begin insert into tableName(column1, column2, column3...) values(value1,value2,value3...); insert into tableName(column1, column2, column3...) values(value1,value2,value3...); insert into tableName(column1, column2, column3...) values(value1,val

详解tensorflow载入数据的三种方式

Tensorflow数据读取有三种方式: Preloaded data: 预加载数据 Feeding: Python产生数据,再把数据喂给后端. Reading from file: 从文件中直接读取 这三种有读取方式有什么区别呢? 我们首先要知道TensorFlow(TF)是怎么样工作的. TF的核心是用C++写的,这样的好处是运行快,缺点是调用不灵活.而Python恰好相反,所以结合两种语言的优势.涉及计算的核心算子和运行框架是用C++写的,并提供API给Python.Python调用这些A

详解vue组件通信的三种方式

1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu

vue组件创建的三种方式小结

1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 template : "<h3>使用vue.extend创建的组件</h3>" }) //1.2使用Vue.component('组件名称',创建出来的组件模板对象) Vue.component('myCom1',com1) 把名称以标签的形式放到页面中<m

vue组件传值的实现方式小结【三种方式】

本文实例讲述了vue组件传值的实现方式.分享给大家供大家参考,具体如下: 前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式 1.父传子 子组件的代码: <template> <div id="container"&

基于$.ajax()方法从服务器获取json数据的几种方式总结

一.什么是json json是一种取代xml的数据结构,和xml相比,它更小巧但描述能力却很强,网络传输数据使用流量更少,速度更快. json就是一串字符串,使用下面的符号标注. {键值对} : json对象 [{},{},{}] :json数组 "" :双引号内是属性或值 : :冒号前为键,后为值(这个值可以是基本数据类型的值,也可以是数组或对象),所以 {"age": 18} 可以理解为是一个包含age为18的json对象,而[{"age":