zoukankan      html  css  js  c++  java
  • 11.Vue安装Axios及使用

    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', //重写,
          }
         }
       },

  • 相关阅读:
    GIT提交修改的项目到远程仓库
    MySQL基础知识总结
    IDEA集成码云gitee
    SpringBoot整合ueditor编辑器
    word2010中统一调整表格格式
    Afinal简介和使用方法
    Java 8 安装——使用华为镜像
    微信小程序调用第三方组件
    webpack-dev-server first try
    性能测试应用领域
  • 原文地址:https://www.cnblogs.com/xintao/p/10751806.html
Copyright © 2011-2022 走看看