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

更新时间：2019年09月01日 08:34:07 作者：小小咸鱼YwY

这篇文章主要介绍了Vue-CLI项目-axios模块前后端交互的使用详解(类似ajax提交),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

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提交)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

Vue安装浏览器开发工具的步骤详解
这篇文章主要介绍了Vue安装浏览器开发工具步骤详解，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
vue-cli安装使用流程步骤详解
这篇文章主要介绍了 vue-cli安装使用流程,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
vue前端框架vueuse的useScroll函数使用源码分析
这篇文章主要为大家介绍了vueuse的useScroll函数源码分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue+element-ui中form输入框无法输入问题的解决方法
很多初次接触element-ui的同学,在用到element form组件时可能会遇到input框无法输入文字的问题,下面这篇文章主要给大家介绍了关于vue+element-ui中form输入框无法输入问题的解决方法,需要的朋友可以参考下
2023-04-04
vue简单练习桌面时钟的实现代码实例
这篇文章主要介绍了vue简单练习桌面时钟的实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值的相关资料,需要的朋友可以参考下
2019-09-09
vue项目中添加electron的详细代码
这篇文章通过实例代码给大家介绍了vue项目中添加electron的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2021-11-11
vue+elementUI实现表单和图片上传及验证功能示例
这篇文章主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
2019-05-05
详解element-ui 组件el-autocomplete使用踩坑记录
最近使用了el-autocomplete组件，本文主要介绍了element-ui 组件el-autocomplete使用踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
VUE 常规截取和特殊字符之前之后截取(实例代码)
这篇文章主要介绍了VUE 常规截取和特殊字符之前之后截取,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
Vue中利用better-scroll组件实现横向滚动功能
横向滚动这个功能是我们日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于Vue中如何利用better-scroll组件实现横向滚动的相关资料,需要的朋友可以参考下
2021-06-06