vue之axios请求

本文介绍了在Vue项目中利用Axios进行开发的相关内容。包括Axios的安装与配置,如在main.js里配置请求信息,在config的index.js里设置代理;还展示了登录点击事件中Axios的使用,包含参数传递、MD5加密及根据后台返回错误码处理结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,利用npm安装npm install axios --save

2,配置

(1)main.js里:

import Axios from 'axios'

// 配置请求信息
var $http = Axios.create({
  baseURL: '请求路径',
  timeout: '3000',  //请求超时时间
  headers: {'X-Custom-Header': 'foobar'}     //header传值,例如:Authorization
})

Vue.prototype.$http = $http

(2)config里面的index.js:

assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/api': {

    target: '域名',   //后台给的域名

    changeOrigin: true,
    pathRewrite: {
      '^/api':'/api'
    }
  }

},

3,使用;登录的点击事件

import axios from 'axios';

methods: {
  login() {  
    if (this.username == "" || this.password == "") {
       alert("请输入用户名或密码")

    } else {

      var data = new URLSearchParams();   //一定要这样写,否则后台收不到参数的

      data.append('name', this.username);       //你要传给后台的参数值 key/value

      data.append('password', md5((this.username+this.password)));

      //password 这里用了MD5加密的,可根据自己的情况而定

      axios.post('/api/backManage/userLogin', data).then(function (res) {  //后台给的接口名
        console.log(res);

        if(res.data.error==0){

          //后台返回的错误码,如果是0表示请求正确,继续操作,否则给客户一个提示框

        }else {
          alert(res.data.msg);
        }

      }).catch(function (error) {

      });
    }
  },
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值