专栏首页学习猿地Web前端学习 第7章 Vue基础教程9 数据交互
原创

Web前端学习 第7章 Vue基础教程9 数据交互

一、概述

基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本节主要讲解在Vue项目中,如何安装和使用Axios。

二、安装axios

Vue项目中使用如下命令安装

npm install axios --save

在要引用axios的页面引用

1 import axios from 'axios'

三、发送请求

如果希望页面加载时便显示数据,可以直接将axios方法写在created函数中。

1 created(){
2     axios.get('/data').then(function(res){
3         this.goodsList = res.data;
4     }).catch(function (error) {
5         console.log(error);
6     });
7 }

关于axios的语法,我们在上一章已经讲解了,这里不做过多的说明。

四、封装请求方法

统一处理后台的验证信息

五、封装Api模块

六、课后练习

后台数据数据如下所示,

["香蕉","苹果","鸭梨"]

在Vue项目中使用axios实现后台数据列表的增删改查,要求如下:

  1. get方法获取数据列表
  2. post添加数据,然后重新查询
  3. put修改数据,然后重新查询
  4. delete删除数据,善后重新查询

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【融职培训】Web前端学习 第7章 Vue基础教程9 数据交互

    基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本节主要讲解在Vue项目中,如何安装和使用Axio...

    学习猿地
  • 【融职培训】Web前端学习 第3章 JavaScript基础教程3 表达式与运

    在上一节,赋值符号=右边某种数据类型的值,就是字面量,例如字符串"hello world",或是数字100。都是字面量。

    学习猿地
  • 【融职培训】Web前端学习 第2章 网页重构17 媒体查询

    这个是bootstrap的中文文档网站,大家可以用chrome浏览器来模拟手机端的浏览效果,可以看到手机端和电脑端访问同一个网页时,都能获得比较好的浏览体验。也...

    学习猿地
  • 【融职培训】Web前端学习 第7章 Vue基础教程9 数据交互

    基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本节主要讲解在Vue项目中,如何安装和使用Axio...

    学习猿地
  • JS的 HTTP 库 Axios

    Axios 是一个基于 promise 的 HTTP 库,可以工作于浏览器中,也可以在 node.js 中使用,提供了一个API用来处理 XMLHttpRequ...

    dys
  • 一文让你认识 axios

    如果要全局使用axios就需要在main.js中设置成全局的,然后再组件中通过this调用

    公众号---志学Python
  • VueJS ajax

    vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新 到2.0之后,作...

    cwl_java
  • Vue笔记:使用 axios 发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource...

    朝雨忆轻尘
  • Vue-CLI项目-axios模块前后端交互(类似ajax提交)

    小小咸鱼YwY
  • Vue 的axios的使用

    axios直接进行访问会出现跨域问题,需要配置代理了。(前提是服务器没有设置禁止跨域的权限问题)

    我不是费圆

扫码关注云+社区

领取腾讯云代金券