Vue实战—项目数据交互-axios（4）

wh469012917 发布于2019-08-23 18:10 / 2925人阅读

1.axios地址

https://github.com/axios/axios

2.安装

npm install axios

3.使用

1.用在哪？

    main.js 全局

2.什么时候用？

    生命周期：https://cn.vuejs.org/v2/guide/instance.html

    created 的时候 发起异步请求获取数据

3.怎么用

数据从哪里来：

1.美团API接口，

优点：贴近工作情形

缺点：官方接口申请有门槛，手续繁琐，限制多，速度慢，非官方不稳定,容易失效

2.自己搭建线上服务器数据

优点：贴近工作情形，自己造数据想怎玩怎么玩

缺点：写JSON麻烦，不稳定，速度慢，域名空间收费，繁琐

3.搭建本地模拟数据

优点：贴近工作情形，自己造数据想怎玩怎么玩，访问速度快，稳定

缺点：写JSON、配置服务器麻烦（如使用express或者mockjs）

结论：为了工作使用1，为了灵活性使用3，自己有现成的服务器或空间，从2、3中选的话，选择2

我们使用1,按照工作标准来：

美团外卖官方接口：

http://developer.waimai.meitu...

GET例子：

axios.get("/user?ID=12345")
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

POST例子：

axios.post("/user", {
    firstName: "Fred",
    lastName: "Flintstone"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

总结

本文我们从安装，到axios，让我们对vue的数据相关的技术点有了一定了解，我们将一步步完善项目，丰富我们的技术经验。

下篇：我们通过为项目header组件添加数据交互功能，敬请关注。

服务器托管私有云项目实战人机交互项目 python实战项目 python项目实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104779.html

Vue.js学习

摘要：一基础学习模式下图不仅概括了模式，还描述了在中是如何和以及进行交互的。关于这一点我们将在后续反应系统中讨论。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这个对象必须是普通对象原生对象，及原型属性会被忽略。 Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。其实和Jquery一样...

TIGERB 2019-08-21 14:15 评论0 收藏0
vue服务端渲染demo将vue-cli生成的项目转为ssr

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 评论0 收藏0
Vue实战—路由轻松设置vue-router（3）

摘要：决定将组建渲染在哪，打开，添加配置路由打开文件夹下引入各个组件配置路由路径组件路由重定向我们在数组设定为。官方文档注意，当前激活导航设置方法固定属性值。所以使用保留组件状态，避免重新渲染购物车的数据丢失。上篇我们说了vue项目的目录设计，本篇我们来学习一下vue路由。路由的作用：在web端路由（route）就是URL到函数的映射，vue的router就像一个容器，分配，处理每一个...

timger 2019-08-23 18:08 评论0 收藏0
从0到1使用VUE-CLI3开发实战（四）: Axios封装

摘要：从到使用开发实战四封装有很多同学看了本系列的前几篇之后建议我暂时先不用，于是小肆之后将把换成继续下面的文章。前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从0到1使用VUE-CLI3开发实战（四）: Axios封装有很多同学看了本系列的前几篇之后建议我暂时先不用TS，于是小肆之后将把TS换成JS继续下面的文章。今天给大家带来项目中非常...

ThinkSNS 2019-08-23 14:57 评论0 收藏0
手摸手，带你用vue撸后台系列一(基础篇)

摘要：详细具体的使用可以见文章手摸手，带你优雅的使用。为了加速线上镜像构建的速度，我们利用源进行加速并且将一些常见的依赖打入了基础镜像，避免每次都需要重新下载。完整项目地址：vue-element-admin系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列四(vueAdmin 一...

xiaotianyi 2019-08-22 11:03 评论0 收藏0