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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 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
一些星际专用术语解释
2020/03/04 星际争霸
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
node.js的事件机制
2017/02/08 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python 为什么说eval要慎用
2019/03/26 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
青年文明号事迹材料
2014/01/18 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
学校宣传标语
2014/06/18 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
Nginx限流和黑名单配置
2022/05/20 Servers