Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)


Posted in Javascript onSeptember 01, 2019

Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下:

Vue-CLI项目-axios前后端交互

一.模块的安装

npm install axios --save
#--save可以不用写

二.配置main.js

import axios from 'axios'
Vue.prototype.$axios = axios;

三.使用

created() { // 组件创建成功的钩子函数
  // 拿到要访问课程详情的课程id
  let id = this.$route.params.pk || this.$route.query.pk || 1;
  this.$axios({
    url: `http://127.0.0.1:8000/course/detail/${id}/`, // 后台接口
    method: 'get', // 请求方式
  }).then(response => { // 请求成功
    console.log('请求成功');
    console.log(response.data);
    this.course_ctx = response.data; // 将后台数据赋值给前台变量完成页面渲染
  }).catch(error => { // 请求失败
    console.log('请求失败');
    console.log(error);
  })
}

与ajax提交不同的一些设置

  • ajax 中的tyle这里是method
  • ajax中的success这里是them且不在大括号内后面接着.出来
  • catch请失败
  • 内容是在$axios之前

总结

以上所述是小编给大家介绍的Vue CLI项目 axios模块前后端交互的使用(类似ajax提交),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
js实现飞机大战游戏
Aug 26 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
简单分析js中的this的原理
Aug 31 #Javascript
微信小程序image图片加载完成监听
Aug 31 #Javascript
JS实现使用POST方式发送请求
Aug 30 #Javascript
node.js处理前端提交的GET请求
Aug 30 #Javascript
Node.js系列之连接DB的方法(3)
Aug 30 #Javascript
Node.js系列之发起get/post请求(2)
Aug 30 #Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP新手上路(八)
2006/10/09 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
用python爬取租房网站信息的代码
2018/12/14 Python
超简单使用Python换脸实例
2019/03/27 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
tensorflow 变长序列存储实例
2020/01/20 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
应届大学生自荐信
2013/12/05 职场文书
简短证婚人证婚词
2014/01/09 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js