博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
11.Vue安装Axios及使用
阅读量:6852 次
发布时间:2019-06-26

本文共 1239 字,大约阅读时间需要 4 分钟。

1.安装:npm install axios --save-dev

2.main.js中导入
  import axios from 'axios'; /* 引入axios进行地址访问*/
  Vue.prototype.$http = axios;
  (注意:不使用use来使用该例,而是用prototype原型来使用)

3.login.vue中:

  import axios from 'axios';

  axios.post("/api/login?", params).then(function(res) {

    var data = res.data;
    // console.log(data);
    let role = data.result.user.role;
    let token = data.result.token;
    localStorage.setItem("currentUser_token", token); //将token存到本地的localStorage中
    // console.log(localStorage);
    if (data.code == 1) {
    alert(data.msg);
    let _username;
    // console.log(localStorage.getItem("currentUser_token"))
    // console.log(userName)
    that.$router.push({path: "/index",query: { name: userName, role: role }}); //跳转到 index页面中并传递name和role的值

    (在index页面中接受参数:PS:let userName = this.$route.query.name;let userRole = this.$route.query.role;)

  } else {

    alert(data.msg);

  }
  }).catch(function(err) {
    console.log("LOGIN_" + err);
  });
(注意:若要使用全局路径访问请求则需要在config中的index.js中配置proxyTable)
举例:proxyTable: {
    '/api': {
      target: 'IP+端口', //后端接口地址
      changeOrigin: true, //是否允许跨越
      pathRewrite: {
      '^/api': '/api', //重写,
      }
     }
   },

转载于:https://www.cnblogs.com/xintao/p/10751806.html

你可能感兴趣的文章
lodash.js 学习记录
查看>>
1.4 Genymotion模拟器安装
查看>>
简说设计模式——外观模式
查看>>
简说设计模式——模板方法模式
查看>>
php 图片写字
查看>>
linux之权限
查看>>
Deep Learning(深度学习)学习笔记整理系列之(三)
查看>>
网页布局之Div vs Table (2)
查看>>
可变参数列表
查看>>
BouncyCastle.Crypto的RSA算法调用源码
查看>>
vs2017 + Python3.6 +Django1.11 连接mysql数据库
查看>>
一张思维导图带你梳理HashMap相关知识
查看>>
MVC 从Excel导入到DataTable
查看>>
Symbol
查看>>
Selenium WebDriver + IE11 问题汇总
查看>>
Oracle数据库设置Scott登录
查看>>
IOS开发之UIScrollVIew运用
查看>>
iOS 基础-----关于UIView 的 frame 与 bounds
查看>>
ISO GPS定位,坐标转换以及如何显示
查看>>
深入理解Java:类加载机制及反射
查看>>