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 相关文章推荐
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
Node.js文件操作详解
Aug 16 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
在vue中使用console.log无效的解决
Aug 09 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php&mysql 日期操作小记
2012/02/27 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JS实现灯泡开关特效
2020/03/30 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python flask搭建web应用教程
2019/11/19 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
营业经理岗位职责
2013/11/10 职场文书
考试不及格的检讨书
2014/01/22 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
大学生创业项目方案
2014/03/08 职场文书
校长创先争优承诺书
2014/08/30 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL