• Почему Laravel Api возвращает html?

    graymore2
    @graymore2 Автор вопроса
    lil_koi, Не помогает

    Post успешно отработал и вернул Ready
    Route::post('/bar', function (Request $request) {
        return response()->json('Ready');
    });


    А вот GET возвращает весь HTML без Ready
    Route::get('/foo', function (Request $request) {
        return response()->json('Ready');
    });
    Написано
  • Почему Laravel Api возвращает html?

    graymore2
    @graymore2 Автор вопроса
    Dmitry Bay, Не помогает

    Post успешно отработал и вернул Ready
    Route::post('/bar', function (Request $request) {
        return response()->json('Ready');
    });


    А вот GET возвращает весь HTML без Ready
    Route::get('/foo', function (Request $request) {
        return response()->json('Ready');
    });
  • Почему Laravel Api возвращает html?

    graymore2
    @graymore2 Автор вопроса
    1) Разве подобный запрос не должен работать без авторизации?
    2)
    return resonse()->json([
                "response" => Post::all()
            ]);

    Не помогает
    3) Вообще убрал его
    Написано
  • Vue 3 как правильно подключить компонент?

    graymore2
    @graymore2 Автор вопроса
    Всё равно не работает, я уже так пробовал. Скорее всего просто это несовместимо с Vue 3.
    А то, что вы написали - я просто зарегистрировал этот компонент глобально. И если бы он был совместим с Vue 3, он бы работал.

    app.js
    import { createApp } from 'vue'
    const app = createApp({});
    app.component('home', require('./Pages/Home').default)
    app.mount('#app')


    home.vue
    <template>
    	<h1>Hello World!</h1>
    	<dropdown :visible="visible" @clickout="visible = false">
    		<span class="link" @click="visible = true">Click me</span>
    		<div class="dialog" slot="dropdown">Click out to hide me.</div>
    	</dropdown>
    </template>
    
    <script>
    	import dropdown from 'vue-my-dropdown'
    	export default {
    			name: "Home",
    			components: {
    				dropdown
    			},
    			data() {
    				return {
    					visible: true
    				}
    			}
    	}
    </script>
    
    <style scoped>
    
    </style>
    Написано
  • Vue 3 как правильно подключить компонент?

    graymore2
    @graymore2 Автор вопроса
    LJ322,

    <template>
      <span>
        <span><slot></slot></span>
        <transition :name="animation">
          <div :style="ddStyle" class="my-dropdown-dd" v-show="visible">
              <slot name="dropdown"></slot>
          </div>
        </transition>
      </span>
    </template>
    
    <script>
    
    /**
     * Get the dimensions of `$ele` ele.
     * @param {HTMLElement} $ele
     * @return {object} Object with `width` and `height` properties.
     */
    function getSize($ele) {
        let $clone = $ele.cloneNode(true)
        let size = {}
    
        $clone.style.display = 'block'
        $clone.style.visibility = 'hidden'
        $clone.style.position = 'absolute'
        $ele.parentNode.insertBefore($clone, $ele)
        size.width = $clone.offsetWidth
        size.height = $clone.offsetHeight
        $clone.remove()
    
        return size
    }
    
    /**
     * Set dropdown position.
     * @param {HTMLElement} $link - Html element will show the dropdown when it is pressed.
     * @param {HTMLElement} $dd - Dropdown html element.
     * @param {array} position - Dropdown position.
     */
    function setPosition($link, $dd, position, margin) {
        let refSize = getSize($link)
        let cornerPos = {}
        let outStyle = {}
        let origin = {}
        let [ p1, p2, p3, p4 ] = position
        let rect = $link.getBoundingClientRect()
        let refPos = { top: 0, left: 0 }
        let dpSize = getSize($dd)
        let parentPosition = document.defaultView.getComputedStyle($link.offsetParent).position
    
        switch (parentPosition.toLowerCase()) {
            case 'fixed':
                refPos.left = rect.left - $link.offsetParent.offsetLeft
                refPos.top = rect.top - $link.offsetParent.offsetTop
                break
    
            case 'absolute':
                let parentRect = $link.offsetParent.getBoundingClientRect()
                refPos.left = rect.left - parentRect.left
                refPos.top = rect.top - parentRect.top
                break
    
            default:
                refPos.left = rect.left - $link.offsetParent.offsetLeft + window.pageXOffset
                refPos.top = rect.top - $link.offsetParent.offsetTop + window.pageYOffset
        }
    
        cornerPos.left = refPos.left
        switch (p1) {
            case 'center':
                cornerPos.left += refSize.width / 2
                break
    
            case 'right':
                cornerPos.left += refSize.width
                break
        }
    
        cornerPos.top = refPos.top
        switch (p2) {
            case 'center':
                cornerPos.top += refSize.height / 2
                break
            case 'bottom':
                cornerPos.top += refSize.height
                break
        }
    
        switch (p3) {
            case 'left':
                outStyle.left = Math.round(cornerPos.left)
                origin.left = 'left'
                break
    
            case 'center':
                outStyle.left = Math.round(cornerPos.left - dpSize.width / 2)
                origin.left = 'center'
                break
    
            default:
                outStyle.left = Math.round(cornerPos.left - dpSize.width)
                origin.left = 'right'
        }
    
        switch (p4) {
            case 'top':
                outStyle.top = Math.round(cornerPos.top)
                origin.top = 'top'
                break
    
            case 'center':
                outStyle.top = Math.round(cornerPos.top - dpSize.height / 2)
                origin.top = 'center'
                break
    
            default:
                outStyle.top = Math.round(cornerPos.top - dpSize.height)
                origin.top = 'bottom'
        }
    
        outStyle.left = (outStyle.left + margin[0]) + 'px'
        outStyle.top = (outStyle.top + margin[1]) + 'px'
        outStyle.transformOrigin = origin.left + ' ' + origin.top
        outStyle.position = 'absolute'
        return outStyle
    }
    
    const getWindow = () => window.document
    
    export default {
        name: 'VueMyDropdown',
    
        data() {
            return {
                ddStyle: {}
            }
        },
    
        props: {
            // Dropdown visibility.
            visible: {
                required: true,
                type: Boolean
            },
    
            // Dropdown position.
            position: {
                required: false,
                type: Array,
                default: () => ['right', 'top', 'left', 'top']
            },
    
            // Dropdown animation.
            animation: {
                required: false,
                type: String,
                default: 'ani-slide'
            }
        },
    
        methods: {
            open() {
                this.setPosition()
                getWindow().addEventListener('resize', this.resizeEvent)
                setTimeout(() => getWindow().addEventListener('click', this.clickOutEvent), 10)
            },
    
            close() {
                getWindow().removeEventListener('resize', this.resizeEvent)
                getWindow().removeEventListener('click', this.clickOutEvent)
            },
    
            resizeEvent() {
                this.setPosition()
            },
    
            clickOutEvent(evt) {
                var $dd = this.$el.children[1]
                if (evt.target !== $dd && !$dd.contains(evt.target)) {
                    this.$emit('clickout', evt)
                }
            },
    
            setPosition() {
                var $link = this.$el.children[0]
                var $dd = this.$el.children[1]
                this.ddStyle = setPosition($link, $dd, this.position, [0, 0])
                this.$emit('positioned', this.ddStyle)
            }
        },
    
        watch: {
            visible(isVisible) {
                if (isVisible) {
                    this.open()
                } else {
                    this.close()
                }
            }
        },
    
        mounted() {
            if (this.visible) {
                this.open()
            }
        },
    
        destroyed() {
            getWindow().removeEventListener('resize', this.resizeEvent)
            getWindow().removeEventListener('click', this.clickOutEvent)
        }
    }
    </script>
    
    <style>
    
    .my-dropdown-dd {
        position: absolute !important;
        box-sizing: border-box !important;
    }
    
    .ani-none-leave-active, .ani-none-leave, .ani-none-enter-active, .ani-none-enter{
        transition: none;
    }
    
    .ani-slide-leave-active {
        transition: transform .3s ease, opacity .3s ease;
        transform: scale(0, 0);
        opacity: 0;
    }
    
    .ani-slide-leave {
        transform: scale(1, 1);
        opacity: 1;
    }
    
    .ani-slide-enter-active {
        transition: transform .3s ease, opacity .3s ease;
        transform: scale(1, 1);
        opacity: 1;
    }
    
    .ani-slide-enter {
        transform: scale(0, 0);
        opacity: 0;
    }
    
    
    .ani-slide-x-leave-active {
        transition: transform .3s ease, opacity .3s ease;
        transform: scaleX(0);
        opacity: 0;
    }
    
    
    .ani-slide-x-leave {
        transform: scaleX(1);
        opacity: 1;
    }
    
    
    .ani-slide-x-enter-active {
        transition: transform .3s ease, opacity .3s ease;
        transform: scaleX(1);
        opacity: 1;
    }
    
    
    .ani-slide-x-enter {
        transform: scaleX(0);
        opacity: 0;
    }
    
    
    .ani-slide-y-leave-active {
        transition: transform .3s ease, opacity .3s ease;
        transform: scaleY(0);
        opacity: 0;
    }
    
    
    .ani-slide-y-leave {
        transform: scaleY(1);
        opacity: 1;
    }
    
    
    .ani-slide-y-enter-active {
        transition: transform .3s ease, opacity .3s ease;
        transform: scaleY(1);
        opacity: 1;
    }
    
    
    .ani-slide-y-enter {
        transform: scaleY(0);
        opacity: 0;
    }
    
    
    .ani-fade-leave-active {
        transition: transform .3s ease, opacity .3s ease;
        opacity: 0;
    }
    
    
    .ani-fade-leave {
        opacity: 1;
    }
    
    
    .ani-fade-enter-active {
        transition: transform .3s ease, opacity .3s ease;
        opacity: 1
    }
    
    
    .ani-fade-enter {
        opacity: 0
    }
    </style>
    Написано
  • Создание SPA с помощью load() Jquery и Laravel?

    graymore2
    @graymore2 Автор вопроса
    Dmitry, Dmitry, И кстати, $.load() отлично с этим справляется, тогда почему его реализация не является SPA ?
    Написано
  • Создание SPA с помощью load() Jquery и Laravel?

    graymore2
    @graymore2 Автор вопроса
    Разве главный концепт SPA это не загрузка отдельных частей сайта без надобности грузить всё остальное ?
    Написано
  • Создание SPA с помощью load() Jquery и Laravel?

    graymore2
    @graymore2 Автор вопроса
    Константин Б., Не хватает мне теории, методы кардинально разные, а зачем? что? как? не понятно...
    Написано
  • Создание SPA с помощью load() Jquery и Laravel?

    graymore2
    @graymore2 Автор вопроса
    Константин Б., В чем отличия понял, но не до конца понимаю так называемый "профит". Если писать обычный новостной сайт, но хочется чтобы страница не перезагружалась, не лучше ли использовать $.load() ? Не прогнётся ли он под высокой нагрузкой на сервер?
    Написано
  • Как в VSCode исправить табуляцию первой строки?

    graymore2
    @graymore2 Автор вопроса
    Kentavr16, Понял, но неужели, после каждого копипаста нужно делать эти действия?
    Написано
  • Как в VSCode исправить табуляцию первой строки?

    graymore2
    @graymore2 Автор вопроса
    Kentavr16, установлен и включен, всё равно такой эффект
    Написано
  • На сколько надежен собственный websoket в laravel?

    graymore2
    @graymore2 Автор вопроса
    А такие есть?

    Pusher например
    Написано
  • Существует ли уязвимость многократных запросов в Laravel?

    graymore2
    @graymore2 Автор вопроса
    Ну как-же, если приложение выходит на продакшен без защиты от подобных атак, то положить его будет очень легко. Или так работает большая часть интернета ?)
    Написано