幽灵资源网 Design By www.bzswh.com

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()序列化params
    return 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>

总结

以上所述是小编给大家介绍的Vue简单封装axios之解决post请求后端接收不到参数问题,希望对大家有所帮助!

标签:
vue,封装axios,vue,post请求参数,axios,post请求参数

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?