AntDesign vue学习笔记(二)axios使用
之前在vue页面中引入axios使用,本篇在mainjs中引入,这样就不用单独在每个页面引入
1、mainjs中引入axios,设置基础url
import axios from 'axios'
axios.defaults.baseURL = 'https://localhost:8080/'
Vue.prototype.axios = axios
2、在vue页面中,注意axios前需要加this.
methods: {
login () {
let that = this
console.log(this.userName)
console.log(this.password)
this.axios
.get('/api/login', {
params: {
userName: that.userName,
password: that.password
}
})
.then(function (response) {
console.log(response)
if (response.data.data.result === 'success') {
that.$router.push('second')
} else {
alert(response.data.data.message)
}
})
.catch(function (error) {
console.log(error)
})
}
}
3、function (response)中必须使用that才能获取到$router对象,有没有办法直接获取到呢,代码如下
methods: {
login () {
let that = this
console.log(this.userName)
console.log(this.password)
this.axios
.get('/api/login', {
params: {
userName: that.userName,
password: that.password
}
})
.then((response) => {
console.log(response)
if (response.data.data.result === 'success') {
this.$router.push('second')
} else {
alert(response.data.data.message)
}
})
.catch(function (error) {
console.log(error)
})
}
}
ES6中的 箭头函数 "=>" 内部的this是词法作用域,由上下文确定(也就是由外层调用者vue来确定)。
4、关于api/login,api login是模拟的一个json数据
4.1在项目根目录下添加data.json,内容如下
{
"loginresult": {
"result": "success",
"message": ""
}
}
4.2修改webpack.dev.conf.js文件,添加红色部分代码,关闭服务器重新npm run dev.
4.3、点击登录按钮就可以工作了。
5、如果传递比较复杂的请求,比如header添加数据,方法如下
this.axios(
{
method:"post",
url:'/api/Login',
data:{
username: that.userName,
password: that.password
},
headers: {
'Content-Type':'application/json;charset=UTF-8'
}
})
.then((response) => {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
}
6、配置跨域的方法
找到config/index.js添加如下代码
proxyTable: {
'/api': {
target: 'http://xx.xx.xx.xx:8080/',
changeOrigin: true,
pathRewrite: {'^/api': '' }
} }
这样所有访问api接口都会走这个重定向。
7、跨域下接口两次请求处理屏蔽方法
1、可以在后端设置Access-Control-Max-Age
2、或者请求限制只允许Post,Get.
AntDesign vue学习笔记(二)axios使用的更多相关文章
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- AntDesign vue学习笔记(九)自定义文件上传
第七节时提到,上传文件时实际可能需要传输一个token. 1.查看vue antdesign文档https://vue.ant.design/components/upload-cn/ 2.使用cus ...
- AntDesign vue学习笔记(四)使用组件切换
同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...
- AntDesign vue学习笔记(一)初始化项目
最近学习AntDesign组件使用,官方Pro例子集成度太高,不容易学习,将从最基础组件一个一个搭建. 1.创建Vue Cli项目 2.引入ant design组件 $ cnpm i --save a ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue3 学习笔记 (二)——axios 的使用有变化吗?
本篇文章主要目的就是想告诉我身边,正在学 vue3 或者 准备学 vue3 的同学,vue3中网络请求axios该如何使用,防止接触了一点点 vue3 的同学会有个疑问?生命周期.router .vu ...
- Vue学习笔记二:v-cloak,v-text,v-html的使用
目录 v-cloak:解决插值表达式闪烁问题 安装插件Live Server 右键以HTTP形式运行HTML v-text:以属性方式使用插值表达式 v-cloak和v-text的区别 v-html: ...
- VUE 学习笔记 二 生命周期
1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...
- AntDesign vue学习笔记(八)Table服务端分页使用
本文是AntDesign后端分页方法 1.设置pagination <a-table :columns="columns" :dataSource="data&qu ...
随机推荐
- Spring扩展点之BeanPostProcessor
前言 BeanPostProcessor接口是Spring中一个非常重要的接口,它的接口定义如下 public interface BeanPostProcessor { Object postPro ...
- 【开发笔记】- grails框架中在使用domain的save方法保存时保存不成功
1.如果报错,自行根据异常查找错误,这里不说明 2.如果为报错,我遇到的就是domain中的字段属性与数据库中为同步 (1)你的domain是新的,在增加新的字段属性时未使用update更新数据库,造 ...
- .net web api 权限验证
做一个登录权限验证. 开始吧. using System; using System.Collections.Generic; using System.Drawing; using System.D ...
- ORACLE监听理解
参考官方文档Net Services Reference的7 Oracle Net Listener Parameters (listener.ora) 1 监听概念 oracle监听,是个服务器端进 ...
- 206--Reverse A Singly Linked List
package LinedList; public class ReverseASinglyLinkedList { //解法一:迭代. public ListNode reverseList(Lis ...
- OSI、TCP/IP
计算机网络分层的目的:支持异构网络系统的互联互通 7层OSI参考模型是法定标准(国际标准化组织ISO提出) 4层TCP/IP参考模型是事实标准 OSI参考模型 应用层.表示层.会话层.传输层.网络层. ...
- python快速生成验证码
利用python库random,string生成大小写字母和数字的随机验证码 import random import string def generate_code(bit_num): ''' : ...
- apache2.4
介绍 Apache HTTP server是Apache软件基金会的一个开源的网页服务器,可以运行在几乎所有广泛使用的计算机平台上,由于跨平台和安全性被广泛使用,是目前最流行的web服务器软件之一,目 ...
- angular-依赖注入 显示注入/隐式注入
1.隐式注入:不需要开发人员干预,angularJS自动根据参数的名称识别和注入数据 app.controller("myCtrl".function($scope) { $sco ...
- np.append()
1.numpy.append() np.append(arr,values,axis=None) 功能:在array后面追加values 参数: arr:array_like 值将附加到此数组的副本. ...