vue项目中使用axios发送ajax

首先使用npm安装axios:

安装好后可以去package.json中查看相关依赖

在HOME.VUE中引入axios

在static目录下新建一个文件夹mock，在里面存放各种模拟数据

定义一个获取首页数据的方法，把获取到的数据打印出来

获取成功:

在本地测试的时候需要使用mock数据，但是在正式上线或者和服务器联调的时候需要把本地的地址改成获取数据api的地址，有时候请求很多，批量修改就可能出现麻烦

在config目录中index.js中proxyTable做如下修改就可以实现

接下来把获取到的数据转发到各个子组件中去

父组件传值

子组件通过props接收

传值

完成动态绑定：

接下来组件的数据依样画葫芦绑定即可

需要注意的是SWIPER组件最好在获取到数据之再实例化轮播图

到此为止首页的数据就绑定完成了

把完成的提交到码云上https://gitee.com/delisteam/Travel

原文地址：https://www.cnblogs.com/rmty/p/11030255.html

时间： 2024-10-10 02:21:53

vue项目中使用axios发送ajax的相关文章

在vue项目中的axios使用配置记录

默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withC

vue中采用axios发送post请求

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 1 let qs = require

Vue项目中遇到的一些问题总结

一.开发环境使用Ajax请求,报错网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 changeOrigin:true, pathRewrite:{ '^/api':'' //这里理解为用api代替target中的地址 } } } 配置完后,请求依然报错,大致是https证书的问题 [HPM] Error occured while trying to proxy request /xxx/

通过在jquery中添加函数发送ajax请求来加载数据库数据，以json的格式发送到页面

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面从数据库中查询仓库信息,显示在下拉菜单中: 首先,引入js插件,这里使用jquery-1.8.3.js <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> 当页面加载完成后,就应该发送ajax请求到数据库,

Vue 项目中使用 jsPlumb

jsPlumb 介绍 jsPlumb 是一个强大的 JavaScript 连线库,它可以将 html中的元素用箭头.曲线.直线等连接起来,适用于开发 Web 上的图表.建模工具.流程图.关系图等. jsPlumb 参考网站博客园:http://www.cnblogs.com/leomYili/p/6346526.html?utm_source=itdadao&utm_medium=referral 官网:https://www.jsplumbtoolkit.com/ 安装 jsPlumb v

vue项目中使用阿里iconfont图标

在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种方法一:简单粗暴法 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车例如我现在选择三个图标点击购物车,添加至项目为了方便可以给项目起一个名字选

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 原文网址如何在Vue项目中使用vw实现移动端适配作者:大漠日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

在vue项目中如何定义全局变量全局函数

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数定义全局变量原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可. 全局变量模块文件: Global.vue文件: <script> const serverSr

前端框架Vue.js——vue-i18n ，vue项目中如何实现国际化

每天学习一点点编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.前言趁着10月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo 做出来嘛. 二.demo 场景需求分析需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化