从自定义视图向 Spring 启动管理服务器发出请求？

Question

我正在尝试将带有一些管理实用程序的自定义视图添加到 Spring Boot Admin。我的想法是在 Springboot Admin 中将这些实现为端点并从我的自定义视图中调用这些端点，但我不知道如何调用服务器本身。

当自定义视图具有 parent: 'instances' 时，它将获得一个 axios 客户端以连接到当前实例，但由于我正在构建的视图未绑定到特定实例，因此它不会有这个。我知道我可以将 axios 安装为依赖项，但我想尽可能避免这种情况以减少构建时间。由于 SBA 本身依赖于 axios 看来我不应该自己安装它。

基于this sample，这是我现在拥有的：

index.js

/* global SBA */
import example from './example';
import exampleEndpoint from './example-endpoint';

SBA.use({
    install({viewRegistry}) {
        viewRegistry.addView({
            name: 'example',
            path: '/example',
            component: example,
            label: 'Example',
            order: 1000,
        });
    }
});

example.vue

<template>
    <div>
        <h1>Example View</h1>
        <p>
            <b>GET /example:</b> <span v-text="exampleResponse" />
        </p>
    </div>
</template>

<script>
export default {
    props: {
        applications: {
            type: Array,
            required: true
        }
    },
    data: () => ({ exampleResponse: "No response" }),
    async created() {
        const response = await this.axios.get("example");
        this.exampleResponse = response.response;
    },
};
</script>

ExampleController.kt

@RestController
@RequestMapping("/example")
class ExampleController {
    @GetMapping
    fun helloWorld() = mapOf("response" to "Hello world!")
}

控制台说它无法读取未定义的属性 get（即 this.axios 未定义）。文本显示为“GET /example：无响应”

Answer 1

根据给定的代码，您似乎没有 axios 初始化为您想要的使用方式。

您通过 this.axios 调用它，但它不在您的组件中，即

data() {
  return {
    axios: require("axios") // usually this is imported at the top
  }
}

或全球公开即

Vue.prototype.axios = require("axios")

您可以简单地导入 axios 并引用它。

<script>
import axios from 'axios';

export default {
  created() {
    axios.get()
  }
}
</script>

Answer 2

我不确定这是否是最好的方法，但这是一种方法。

我注意到我确实可以访问 SBA.use { install(...) { } } 块中所需的 axios 实例，并且了解到这可以作为属性向下传递到视图。

index.js

/* global SBA */
import example from './example';
import exampleEndpoint from './example-endpoint';

SBA.use({
    install({viewRegistry, axios}) {
        viewRegistry.addView({
            name: 'example',
            path: '/example',
            component: example,
            label: 'Example',
            order: 1000,
            // this is where we pass it down with the props
            // first part is the name, second is the value
            props: { "axios": axios },
        });
    }
});

example.vue

<template>
    <div>
        <h1>Example View</h1>
        <p>
            <b>GET /example:</b> <span v-text="exampleResponse" />
        </p>
    </div>
</template>

<script>
export default {
    props: {
        applications: { type: Array, required: true },
        // this is where we retrieve the prop. the name of the field should
        // correspond to the name given above
        axios: { type: Object, required: true },
    },
    data: () => ({
        exampleResponse: "No response",
    }),
    async created() {
        // Now we can use our axios instance! And it will be correctly
        // configured for talking to Springboot Admin
        this.axios.get("example")
            .then(r => { this.exampleResponse = r.data.response; })
            .catch(() => { this.exampleResponse = "Request failed!" });
    },
};
</script>

从自定义视图向 Spring 启动管理服务器发出请求？

Making request to Spring Boot Admin server from custom view?

vue.js

spring-boot-admin