1.在src/下新建api文件夹,api/下新建index.js和public.js

在public.js中:

import axios from 'axios';
import qs from 'qs'
import router from '../router'
import { MessageBox} from 'mint-ui'// 注意点,按照以下写
var instance = axios.create();
instance.defaults.timeout = 10000;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';export default {fetchGet(url, params = {}) {return new Promise((resolve, reject) => {axios.get(url, params).then(res => {if(res.data.code === 302) {MessageBox('提示', '登录失效,请重新登录');MessageBox.alert('登录失效,请重新登录', '提示').then(action => {   router.push("/login");});}resolve(res.data);}).catch(error => {reject(error);})})},fetchPost(url, params = {}) {/*  axios post请求后端接收不到参数问题:解决方案一:有效,但是兼容性不是很好,不是所有浏览器都支持let data = new URLSearchParams()for (var key in params) {data.append(key, params[key])}*/// 解决方案二:使用qs模块(axios中自带),使用qs.stringify()序列化paramsreturn new Promise((resolve, reject) => {axios.post(url, qs.stringify(params)).then(res => {resolve(res.data);}).catch(error => {reject(error);})})}
}

2.在index.js中:

import http from './public'export const getStation = (params) => {return http.fetchGet('/hydro/rest/getBelongUser', params);
}export const userLogin = (params) => {return http.fetchPost("/hydro/rest/login", params);
}

3.在Login.vue中调用post请求方法:

<template><div class="login"><h1>登录页面</h1><input type="text" placeholder="请输入用户名" v-model="Username"><input type="password" placeholder="请输入密码" v-model="Password"><input type="button" value="登录" @click="toLogin"></div>
</template><script>
import {userLogin} from "../../api/index"export default {name: 'app',data() {return {Username: "",Password: ""}},methods: {toLogin() {let params = {username: this.Username,password: this.Password};userLogin(params).then(res => {if(res.code === 200) {this.$router.push("/home")}})}}
}
</script>

#### 4.在Home.vue调用get请求方法

<template><h1 class="home">{{stationName}}</h1>
</template><script>
import {getStation} from "../../api/index"export default {data() {return{stationName: ""}},created() {getStation().then(res => {this.stationName = res.msg;})}
}
</script>

转载于:https://www.cnblogs.com/mica/p/10879770.html

Vue简单封装axios—解决post请求后端接收不到参数问题相关推荐

  1. 【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题

    原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...

  2. axios delete有请求体吗_封装 axios 取消重复请求

    编者按:本文作者舒丽琦,奇舞团前端开发工程师 在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...

  3. 封装 axios 取消重复请求

    编者按:本文作者舒丽琦,奇舞团前端开发工程师 在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...

  4. axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  5. 每天一点点之vue框架开发 - axios解决跨越问题

    每天一点点之vue框架开发 - axios解决跨越问题 参考文章: (1)每天一点点之vue框架开发 - axios解决跨越问题 (2)https://www.cnblogs.com/cap-rq/p ...

  6. uni.request POST 请求后台接收不到参数

    uni.request POST 请求后台接收不到参数 问题描述 前端用 uni.reauest 发送 POST 请求,后台接收不到参数. 原因分析 是因为 uni.request 对传入 data ...

  7. 微信小程序request请求后台接收不到参数问题

    微信小程序request请求后台接收不到参数问题 一. 小程序部分代码 二. 后端 三. 问题代码 四. 请求头 一. 小程序部分代码 发一个普通的request请求 wx.request({url: ...

  8. promise的应用和在VUE中使用axios发送AJAX请求服务器

    promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...

  9. axios使用post请求服务端不能获取参数的解决方法

    项目中使用到axios作为ajax请求插件,用到post请求是常见的,诸如以下场景的一个普通的post请求: export function listManage(params) {     retu ...

最新文章

  1. Go 语言同一个包内函数调用、包名和实际路径最后一个目录不一致问题
  2. npoi上传xlsx文件,并读取数据
  3. android classloader异常,Android中ClassLoader类加载机制
  4. access 合并多行字符串_八种方法玩转字符串合并,这篇文章全都给你讲明白!...
  5. 操作系统(十)进程通信
  6. boost::is_sorted相关的测试程序
  7. 在iOS中安装OpenCV
  8. Swift之深入解析可选类型Optional的底层原理
  9. VC++ 删除当前读取行 代码
  10. web性能压测——webbench
  11. 电信运营商x86服务器定制策略
  12. 程序员过关斩将--Http请求中如何保持状态?
  13. 数字图像处理:各种变换滤波和噪声的类型和用途总结
  14. 如何基于阿里云搭建适合初创企业的轻量级架构?
  15. 一步一步学Remoting之二:激活模式
  16. arcgis server mysql_ArcGIS Server 10.1发布要素服务时遇到的数据库注册问题总结 (二)...
  17. 计算机二级北京工业大学耿丹学院官网,北京工业大学耿丹学院
  18. 三维电子沙盘大数据互动触摸交互可视化地理信息系统
  19. Spreadsheet_Excel_Writer
  20. 使用路由器上网微信qq绝地求生腾讯系打开慢或打不开的问题

热门文章

  1. 搭建基于spring MVC框架 + RESTful架构风格技术总结
  2. Packstack安装havana后,计算节点连接DB错误解决
  3. 20佳精美404错误页面设计欣赏
  4. Windows7优化开机、关机速度的方法
  5. pom添加依赖后不报错但是代码依然缺少依赖
  6. 编译Flink项目的时候遇到cannot find symbol   symbol:   variable Time
  7. js中输出变量的类型和输出对象的的属性/方法/成员函数
  8. 对几个submission文件迅速做voting操作
  9. scipy实现的共轭梯度法以及相关原理图解
  10. SecureCRT连接CentOS阿里云,小键盘在VIM情况下,无法输入数字反而出现英文