如何在 Laravel 9 中的 DarkaOnLine / L5-Swagger 中使用 Swagger UI 的自定义布局

问题描述 投票：0回答：2

我正在尝试对 L5-Swagger Laravel 包使用自定义布局。但每次我尝试在“插件”中输入“OperationsLayout”时，都会出现不存在错误。在这种情况下我将如何使用它？这是有问题的代码：

<body>
<div id="swagger-ui"></div>

<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-bundle.js') }}"></script>
<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-standalone-preset.js') }}"></script>

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<script type="text/babel">
    import React from "react"

    // Create the layout component
    class OperationsLayout extends React.Component {
        render() {
            const {
                getComponent
            } = this.props
            const Operations = getComponent("operations", true)
            return (
                <div>
                    <Operations />
                </div>
            )
        }
    }

    // Create the plugin that provides our layout component
    const OperationsLayoutPlugin = () => {
        return {
            components: {
                OperationsLayout: OperationsLayout
            }
        }
    }

    // Provide the plugin to Swagger-UI, and select OperationsLayout
    // as the layout for Swagger-UI
    SwaggerUIBundle({
        url: "{!! $urlToDocs !!}",
        plugins: [ OperationsLayoutPlugin ],
        layout: "OperationsLayout"
    })
</script>

<script>
    window.onload = function() {
        // Build a system
        const ui = SwaggerUIBundle({
            dom_id: '#swagger-ui',
            url: "{!! $urlToDocs !!}",
            operationsSorter: {!! isset($operationsSorter) ? '"' . $operationsSorter . '"' : 'null' !!},
            configUrl: {!! isset($configUrl) ? '"' . $configUrl . '"' : 'null' !!},
            validatorUrl: {!! isset($validatorUrl) ? '"' . $validatorUrl . '"' : 'null' !!},
            oauth2RedirectUrl: "{{ route('l5-swagger.'.$documentation.'.oauth2_callback', [], $useAbsolutePath) }}",

            requestInterceptor: function(request) {
                request.headers['X-CSRF-TOKEN'] = '{{ csrf_token() }}';
                return request;
            },

            presets: [
                SwaggerUIBundle.presets.apis,
                SwaggerUIStandalonePreset
            ],

            plugins: [
                SwaggerUIBundle.plugins.DownloadUrl
            ],

            layout: "StandaloneLayout",
            docExpansion : "{!! config('l5-swagger.defaults.ui.display.doc_expansion', 'none') !!}",
            deepLinking: true,
            filter: {!! config('l5-swagger.defaults.ui.display.filter') ? 'true' : 'false' !!},
            persistAuthorization: "{!! config('l5-swagger.defaults.ui.authorization.persist_authorization') ? 'true' : 'false' !!}",

        })

        window.ui = ui
    }
</script>
</body>

我如何获得第二个脚本标签来抓取我的 OperationsLayout？

我尝试过的： 我尝试使用 localStorage 看看也许我可以获取类变量和插件变量可供代码的第二个 js 内联部分访问。

reactjs laravel swagger swagger-ui darkaonlinel5-swagger
2个回答
3
投票

感谢Helen指出了这一点。

我是这样做的。

我添加了 babel CDN，然后将我的内联脚本合并为一个。

最后对于类型我添加了“text/babel”。

就是这样，伙计们！您现在可以遵循 Swagger 的文档并在 L5-Swagger 的 index.blade.php 文件中工作。

这是代码：

<div id="swagger-ui"></div>

<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-bundle.js') }}"></script>
<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-standalone-preset.js') }}"></script>

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
    // Create the layout component
    class SidebarLayout extends React.Component {
        render() {
            const {
                getComponent
            } = this.props
            const StandaloneLayout = getComponent("StandaloneLayout", true)
            const Operations = getComponent("operations", true)
            return (
                <div>
                    <StandaloneLayout />
                </div>
            )
        }
    }
    
    // Create the plugin that provides our layout component
    const SidebarLayoutPlugin = () => {
        return {
            components: {
                SidebarLayout: SidebarLayout
            }
        }
    }

    window.onload = function() {
        // Build a system
        const ui = SwaggerUIBundle({
            dom_id: '#swagger-ui',
            url: "{!! $urlToDocs !!}",
            operationsSorter: {!! isset($operationsSorter) ? '"' . $operationsSorter . '"' : 'null' !!},
            configUrl: {!! isset($configUrl) ? '"' . $configUrl . '"' : 'null' !!},
            validatorUrl: {!! isset($validatorUrl) ? '"' . $validatorUrl . '"' : 'null' !!},
            oauth2RedirectUrl: "{{ route('l5-swagger.'.$documentation.'.oauth2_callback', [], $useAbsolutePath) }}",

            requestInterceptor: function(request) {
                request.headers['X-CSRF-TOKEN'] = '{{ csrf_token() }}';
                return request;
            },

            presets: [
                SwaggerUIBundle.presets.apis,
                SwaggerUIStandalonePreset
            ],

            plugins: [
                SidebarLayoutPlugin,
                SwaggerUIBundle.plugins.DownloadUrl
            ],

            layout: "SidebarLayout",
            docExpansion : "{!! config('l5-swagger.defaults.ui.display.doc_expansion', 'none') !!}",
            deepLinking: true,
            filter: {!! config('l5-swagger.defaults.ui.display.filter') ? 'true' : 'false' !!},
            persistAuthorization: "{!! config('l5-swagger.defaults.ui.authorization.persist_authorization') ? 'true' : 'false' !!}",

        })

        window.ui = ui
    }
</script>
0
投票

我要感谢罗德里戈·阿尔瓦雷斯的回答。

我只想补充一些额外的信息。

因为很难找到构建 Swagger 布局的 React 组件的文档。

构建 

StandaloneLayout
组件的 React 布局代码位于 https://github.com/swagger-api/swagger-ui/blob/master/src/standalone/plugins/stadalone-layout/components/StandaloneLayout。 jsx

因此，根据代码和 Swagger-UI 中的第二个示例，这里是一个刀片模板片段，它在 

Topbar
和 
BaseLayout

之间添加了自定义链接 

<div id="swagger-ui"></div>

<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-bundle.js') }}"></script>
<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-standalone-preset.js') }}"></script>

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
    // Create the layout component
    class AugmentingLayout extends React.Component {
      render() {
        const {
          getComponent
        } = this.props
        const Container = getComponent("Container")
        const Row = getComponent("Row")
        const Col = getComponent("Col")
        const Topbar = getComponent("Topbar", true)
        const BaseLayout = getComponent("BaseLayout", true)
        const OnlineValidatorBadge = getComponent("onlineValidatorBadge", true)

        return (
          <Container className='swagger-ui'>
            {Topbar ? 
                <Topbar>
                    
                </Topbar> : null}
            <nav><a href="">My link</a></nav>    
            <BaseLayout />
            <Row>
              <Col>
                <OnlineValidatorBadge />
              </Col>
            </Row>
          </Container>
        )
      }
    }
    // Create the plugin that provides our layout component
    const AugmentingLayoutPlugin = () => {
      return {
        components: {
          AugmentingLayout: AugmentingLayout
        }
      }
    }

    window.onload = function() {
        // Build a system
        const ui = SwaggerUIBundle({
            dom_id: '#swagger-ui',
            url: "{!! $urlToDocs !!}",
            operationsSorter: {!! isset($operationsSorter) ? '"' . $operationsSorter . '"' : 'null' !!},
            configUrl: {!! isset($configUrl) ? '"' . $configUrl . '"' : 'null' !!},
            validatorUrl: {!! isset($validatorUrl) ? '"' . $validatorUrl . '"' : 'null' !!},
            oauth2RedirectUrl: "{{ route('l5-swagger.'.$documentation.'.oauth2_callback', [], $useAbsolutePath) }}",

            requestInterceptor: function(request) {
                request.headers['X-CSRF-TOKEN'] = '{{ csrf_token() }}';
                return request;
            },

            presets: [
                SwaggerUIBundle.presets.apis,
                SwaggerUIStandalonePreset
            ],

            plugins: [
                AugmentingLayoutPlugin,
                SwaggerUIBundle.plugins.DownloadUrl
            ],

            layout: "AugmentingLayout",
            docExpansion : "{!! config('l5-swagger.defaults.ui.display.doc_expansion', 'none') !!}",
            deepLinking: true,
            filter: {!! config('l5-swagger.defaults.ui.display.filter') ? 'true' : 'false' !!},
            persistAuthorization: "{!! config('l5-swagger.defaults.ui.authorization.persist_authorization') ? 'true' : 'false' !!}",

        })

        window.ui = ui
    }
</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.