实现created(初始化)状态axios获取数据

最新推荐文章于 2024-09-13 14:40:07 发布
最新推荐文章于 2024-09-13 14:40:07 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： vue axios 文章标签： html5 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/laoli360/article/details/120853916
版权
本文介绍了如何在Vue.js应用中利用axios的GET方法从后端获取数据，并在created生命周期钩子中初始化数据。通过将响应数据赋值给data对象，实现了页面的动态显示。同时，利用v-for指令处理可能的多条数据，以及通过切换isShow变量实现内容的显示与隐藏，简化了代码实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 这里我们利用 axios请求  get方式获取 后端地址的数据 

然后通过前端网页控制台看res打印出来什么

我们知晓了 他的具体位置 然后在data里面保存一个空对象用来存放这个书籍数据

this.Bookobj = res.data.data

 然后让bookobj 接收这些数据

然后实现页面数据显示

 这里 用了 v-for 是防止以后 书籍数据是多个 没法全部铺展 而设置的

这里的obj.author 就是 res.data.data.author   依次类推

我们就可以实现页面铺设数据

然后 有一个小小的知识点

实现单击来回切换 而且不用定义函数 来执行等等的

isShow 我们这里是true  定义一开始是隐藏的

如果想实现来回切换 用 函数来实现的话 会过于臃肿~ 而只需要 写成 isShow=!iShow 他就会在 布尔值来回切换 实现 显示隐藏来回切换  

 

最低0.47元/天 解锁文章
vue中使用axios从后台获取数据到echarts中，实现数据联动
lihaoxuan666的博客
09-20 4574
基于若依 最近在若依这个前后端分离项目的基础上开发一些自己的功能。 主要功能是在vue中使用axios异步技术来从springboot后台获取数据库中的数据到echarts中。 首先导入前后端代码： 使用若依自带的代码生成器，注意在使用代码生成器之前要先创建好数据库。 这里数据库名叫sys_chipan. 生成的main是后端代码，前端代码在vue中。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200920140459939.png?x-oss-proc
Axios异步通信.md
01-25
- `beforeCreate`：在实例初始化之后，数据观测、事件配置、`watcher`等都未被初始化时调用。 - `created`：实例创建完成，所有数据已经绑定，但是还没有挂载到DOM中。 2. **挂载阶段：** - `beforeMount`：在...
【Vue】5 - promise、axios、created
充电五分钟...
02-09 505
文章目录1.回调函数2. Promise3. axios的简单用法 1.回调函数 回调函数:将后续的处理逻辑传入到当前要做的事情中,当前事情结束后调用执行回调函数; function cookie(callback) { setTimeout(() => { let food = '炒饭'; //执行完这个异步操作,在调用回调 callback(f...
axios.create的使用
weixin_43222587的博客
04-13 1万+
axios.create()是添加了自定义配置的新的axios 1.用axios发送请求 axios({ method:'POST', url:'http://localhost:8080/login', data }) 2.用axios.create创建一个新的axios发请求 cosnt instance = axios.create({ baseURL:'http://localhost:8080/' //基础路径 }) instance({ url: '/login',
Vue.created异步加载如何获取数据
qq_35312560的博客
10-20 5956
问题现象 使用Vue时需要加载初始化数据 如果在created异步加载初始化数据,然后把请求到的数据赋值为this.data. 此时,如果在mounted函数里获取this.data,是获取不到的, 因为异步加载需要时间,如果延迟时间是可以获取到的,但是问题是不知道延迟时间,而且这个方法也不是太好 那么如何获取到这个异步加载的数据呢, 使用watch方法的数据监听 1. wacth:...
使用axios获取JSON文件数据（vue）
weixin_65314914的博客
08-07 5414
axios是一个基于Promise的HTTP客户端库，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，并提供了许多强大而且易于使用的功能，使得进行HTTP通信变得简单、直观和高效。axios的一些详细介绍：支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中都使用。这意味着你可以在多种前端和后端开发场景中统一使用axios进行网络请求。简单易用的API：axios提供了简洁、直观的API，使得发送HTTP请求变得非常容易。
十.在vue中，发送axios请求应该放在created里还是mounted里？详解
qq_44849312的博客
09-13 521
事实上，axios请求在created和mounted中发生是都可以的，但是具体根据业务来判断使用，比如存在父子组件，并且业务上要求子组件的数据要比父组件的数据先出来，那么就应该是：子组件请求放在created或mounted里，父组件请求必须仿真mounted里。在回答这个问题之前，我们需要知道vue的生命周期钩子顺序：beforecreated（组件创建前，dom元素、data都为undefined）beforemounted（组件挂载前，dom元素为undefined、data有值）
vue异步axios获取的数据渲染到页面的方法
10-18
这样页面在初始化时不会因为数据还未获取完成而报错。 这里还需要注意的是，Vue提供了$nextTick()方法。这个方法可以确保在下一个DOM更新循环之后执行延迟回调，对于等待数据更新后的DOM操作非常有用。例如，我们...
vue组件初始化加载显示数据，通常在什么函数中进行axios请求数据?
最新发布
10-30
myData: null, // 初始化时数据默认为空 }; }, created() { axios.get('your-api-url') .then(response => { this.myData = response.data; // 设置数据 }) .catch(error => { console.error('Error ...
axios基础学习——通过 Vue + axios 获取接口数据的小demo
黛琳ghz的博客，期待你的关注。
01-09 7055
关于这个Vue + axios 获取接口数据的小demo，实现效果很简单，就是在Vue语法中，通过axios来获取接口的数据，然后打印出来，这里我们使用的是一个笑话的接口，其中重点关注的是如何使用axios、通过axios获取接口数据，因此这里就不介绍Vue的代码了。
vue + axios使用总结
似水流年，是谁苍白了等待
12-29 2437
之前很期望能做项目，看着别人做项目挺羡慕的，当自己做项目的时候就发现没有自己想象种的那么简单，这次做项目也有一段时间了，其实接触的时间长了就真的理解经常说的那句话了，语言是相同的。从最开始做项目的时候啥也看不懂，到现在开快发完已经有个大概的认识，总的来说还是学到了很多知识，现在总结总结。 一、知识点 1.页面初始化 在刚开始做的时候一直在想，为什么我们每次打开页面的时候就会显示内容，通过什么...
vue.js中created()与activated()的个人使用理解
Y4258的博客
10-20 6396
个人理解 一、 created和mounted生命周期 created： 初始化生命周期，加载初始化数据。创建vue时，当html渲染前调用，只执行一次。 mounted： 在模板挂载之后执行，即html渲染之后调用，更新dom变化，执行一次。 二、actived是什么周期？ 在官网上，actived在keep-alive有提到过 三、actived与created actived与created都只执行一次，都可以用来加载数据 acteved在进入页面进行切换时，如果vue存在，会立刻触发函数，执
axios.create()
JEFF_xieyuzhi的博客
11-28 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
axios之Vue请求初始化数据放在Created还是Mounted？
weixin_42776027的博客
05-20 2897
先分析下生命周期 beforecreated：el 和 data 并未初始化 created:完成了 data 数据的初始化，el没有 beforeMount：完成了 el 和 data 初始化 mounted ：完成挂载 （1）mounted 　　很多人跟我说初始化放在Mounted里面， 我问她(他)们为什么？她(他)们回答说因为这个时候DOM初始化渲染好啦。然后我继续问DOM初始化渲染和请求初始化数据有什么关系？他们会说可以显示请求出来的数据啦。（大家觉得有冲突吗？） DOM初始.
axios的使用
curry_zhao的博客
03-13 5065
Axios基于Promise的HTTP请求客户端，可同时在浏览器和node.js中使用 axios 基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据自动转换 JSO
axios基本用法
热门推荐
汉堡请不要欺负面条
03-28 8万+
一.axios1.什么是axiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有以下特征： a.从浏览器中创建 XMLHttpRequest b.从 node.js 发出 http 请求 c.支持 Promise API e.拦截请求和响应 f.转换请求和响应数据 g.取消...
vue使用axios后，访问不到this中的变量
archer的技术故事
03-21 1万+
本文主要针对vue中使用axios进行与后台交互后，从后台拿到数据绑定到前台的时候发现绑定不上的问题进行处理。下面是出现问题的代码：testget: function () { this.$ajax({ method: 'get', url: 'zk/connect?connectionString=' + this.connec...
Vue中axios请求顺序问题
wy827349995的博客
04-18 5675
问题 今天在写Vue时，发现有一个axios请求发送失败，因为它所需要的参数是undefined的。该参数id来自于另一个axios请求。 讲道理，我在created钩子中按照如下图所示写好代码。 方法getStudentInfo( )执行后会初始化当前的studentInfo对象，然后getVerify( )以该对象中的sid为参数继续发送请求，从而初始化verify对象。目前的情况是veri...
vue生命周期、axios以及动画
aadcb的博客
03-24 1245
1.生命周期 vue有八个生命周期，它们跟el、data、methods平级 分别是： beforeCreate() 、create() 、beforeMount()、mounted()、beforeUpdate()、updated()、beforeDestroy()、destroyed() 2.axios Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。使用时需要链入axios的js文件。 它是需要写在vue八个生命周期中的created
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值