1.配置axios

  1. 前端请求后端接口进行数据交互的时候,需要配置axios

  2. 导入axios包, main.js

import axios from 'axios'

  3. 挂载到原型配置上,便于所有的组件都可以访问this.$http

// 挂载全局对象
Vue.prototype.$http = axios

  4. 设置axios 请求的根路径

// 配置后端api接口路径
axios.defaults.baseURL = 'http://127.0.0.1:5000/v1'

  

2. 通过axios访问登陆接口

  1. components -> Form.vue , 对预验证进行校验,如果验证不正确就跳出,如果正确,就通过axios请求token接口,并且传入用户名密码

// 预验证
validForm() {
this.$refs.FormRef.validate(valid => {
if (!valid) return
const res = this.$http.post("token", this.Form)
console.log(res)
});
}

  2. 结果验证

  3. 结果是promise , promise,通过async await(只用户async异步函数) 简化promise操作

// 预验证
validForm() {
this.$refs.FormRef.validate(async valid => {
if (!valid) return
const {data:res} = await this.$http.post("token", this.Form)
console.log(res)
});
}
}

  

【VUE】4.配置axios发起请求的更多相关文章

  1. Vue2使用Axios发起请求教程详细

    当你看到该文章时希望你已知晓什么是跨域请求以及跨域请求的处理,本文不会赘述 本文后台基于Springboot2.3进行搭建,Controller中不会写任何业务逻辑仅用于配合前端调试 Controll ...

  2. vue全局使用axios插件请求ajax

    vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...

  3. vue中配置axios.js文件,发送请求

    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...

  4. vue.js 配置axios 用来ajax请求数据

    * 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...

  5. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  6. 把axios挂载到vue实例上面/==Axios 各种请求方式传递参数格式

    /*ajax请求*/   import axios from 'axios'   axios.defaults.baseURL = 'https://api.douban.com/v2/movie' ...

  7. vue项目使用axios发送请求让ajax请求头部携带cookie

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

  8. VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

    正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...

  9. vue中使用axios发送请求

    我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

随机推荐

  1. 【bug录】安装项目编译环境bug录

    安装mySQL是遇到一些问题: 刚开始按照教程配置int文件,看着图标没有显示正确,把隐藏文件夹后缀名去掉, mysql由两种版本,zip和msi格式,我用的是zip格式,mysql后进行解压,记住解 ...

  2. JS-根据身份证获取 出生日期和性别

    一.根据身份证获取出生日期和性别/** * 根据身份证获取出生日期(yyyy-MM-dd) * @param psidno * @returns {birthday:yyyy-MM-dd} * @co ...

  3. CSS动画之过渡模块

    :hover伪类选择器可以用于所有的选择器(只有在悬停时,执行选择器的属性)CSS3中新增过渡模块:transition property(属性)duration(过渡效果花费的时间)timing-f ...

  4. 使用 scrapy-redis实现分布式爬虫

    Scrapy 和 scrapy-redis的区别 Scrapy 是一个通用的爬虫框架,但是不支持分布式,Scrapy-redis是为了更方便地实现Scrapy分布式爬取,而提供了一些以redis为基础 ...

  5. soloPi安装使用

    SoloPi脚本转化器正式发布,支持转化为 Appium 与 Macaca 脚本:https://github.com/soloPi/SoloPi-Convertor,脚本转化器使用教程: https ...

  6. Java并发(一):线程

    目录 一.什么是线程 二.中断线程 三.线程状态 四.线程属性 前言: 本文将简单的介绍JAVA并发中的线程. 操作系统的多任务(multitasking):计算机在同一刻运行多个程序的能力,即并发. ...

  7. python爬虫03 Urllib库

    Urllib   这可是 python 内置的库 在 Python 这个内置的 Urllib 库中 有这么 4 个模块 request request模块是我们用的比较多的 就是用它来发起请求 所以我 ...

  8. 【实战分享】从选型到项目落地,漫谈 gRPC

    什么是 gRPC? gRPC 的几种常见模式 在学习 gRPC 的时候,相信大家对于它的四种模式都有了解,我们来简单回顾一下: 简单模式(Simple RPC):这种模式最为传统,即客户端发起一次请求 ...

  9. ESP8266交叉编译环境变量设置

    在build目录下执行sudo cp -r xtensa-lx106-elf /opt 修改xtensa-lx106-elf目录权限:这一步非常重要,否则在后续编译中很容易出现没有权限问题:sudo ...

  10. Jenkins - Linux下启动Jenkins报错hudson.WebAppMain#contextDestroyed: Shutting down a Jenkins instance that was still starting up

    报错截图 在Linux下直接运行jenkins.war报错,导致启动失败 报错原因 运行端口已被其他进程占用 解决方法 换个启动端口就可以啦!