前后端分离开发 axios请求后端接口数据 渲染页面

本文介绍了在前后端分离的开发模式下,如何利用Axios库在Vue.js应用中发送HTTP请求,与Java后端Tomcat服务器进行数据交互。在组件的mounted生命周期钩子中调用methods方法进行接口请求,并详细阐述了Vue.js的生命周期,包括beforeCreate、created、beforeMount、mounted等阶段。

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

1.Axios 是一个功能强大、易于使用和高度可定制的HTTP 客户端工具,适用于前后端分离的应用程序开发以及与服务器进行数据交互。

定义 methods方法 在mounted生命周期钩子函数中调用methods方法

 methods: {
            imgSrc(imgName) {
                return '/imgC?action=getImgByName&imgName=' + imgName
            },
            getAllImgNames() {
                axios.get("/imgC?action=getAllImgNames").then((res) => {
                    console.log(res.data)
                    this.imgNames = res.data;
                })
            },
        },

vue mounted生命周期

mounted() {
            this.getAllImgNames()
            console.log(this.imgNames)
        }

什么是vue生命周期?   

 从实例创建到销毁的过程,就是生命周期。

从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期

总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

第一次页面加载会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值