11.Vue安装Axios及使用
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', //重写,
}
}
},
相关文章
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- 【Vue】Vue组件或页面中查看当前Vm对象的方法
- 关于Vue的两种API写法——选项API和组合API
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- [转]Vue CLI 3搭建vue+vuex 最全分析
- Vue——vue中的双向数据绑定
- Node.js安装使用-VueCLI安装使用-工程化的Vue.js开发
- (31)Vue安装
- vue 全局变量
- Idea使用技巧14--idea安装vue插件
- 02-vue基础-Vue常用特性
- vue基础---事件处理
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue实战入门进阶篇十:vue+elementui实现网站后台-代码重构及发布
- vue实战入门基础篇三:从零开始仿门户网站实例-公共组件实现
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- vue学习笔记三:Jquery VS Vue之差异比较概览
- vue-router路由安装与使用
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- vue-cli安装webpack项目及初始配置
- 浅析vue-class-component介绍:用类的方式编写组件
- vue中的css作用域、vue中的scoped坑点
- Vue-cli 4在vue.config.js中配置别名
- Vue.js中过滤器(filter)的使用
- 06-vue-cli -axios模块和域名代理
- flask+vue:创建一个数据列表并实现简单的查询功能(一)
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- 使用Vue脚手架(CLI)创建Vue项目并分析项目结构
- Vue安装并使用路由和路由器实现页面跳转
- Element + Vue I18n动态import加载国际化语言包翻译文件
- vue-cli构建项目 npm run build后应该怎么运行在本地查看效果
- 前端vue导入excel并读取内容