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

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 。

后端使用：

@WebServlet("/imgC")注解

代码展示：<