Блог

На моей нынешней должности мы используем Laravel и VueJS, и я смущен/обеспокоен шаблоном дизайна, который мы используем для интеграции этих двух. Я надеюсь получить несколько советов от сообщества, чтобы понять, нормально ли это. Не могу найти много информации об этом шаблоне дизайна, что заставляет меня подозревать, что это может быть анти-шаблон.

Мы используем блейд-шаблоны для визуализации компонентов Vue, мы предоставляем этим компонентам реквизиты ключа (идентификаторы или слаги), чтобы компонент мог отправить запрос api на тот же сервер для получения необходимых данных. Я нахожу это очень запутанным, потому что мы не получаем никаких преимуществ от рендеринга на стороне сервера или на стороне клиента, верно?

blade.php выглядит так

 <issue-page 
   issue_id="{{$issue->id}}"
   is-admin="{{auth()->user()->isA('q_c_admin')}}" 
   is-auditor="{{auth()->user()->isA('q_c_auditor')}}" 
   
   
/>
 

Итак, внутри компонента страницы проблем мы будем использовать issue_id prop для извлечения проблемы из api при монтировании компонента. как показано ниже.

             this.globalRouteMixin("api.quality.issues.show", {
                issue: this.issue_id
            }).then(route => {
                axios
                    .get(route)
                    .then(response => {
                        if (response.status == "200") {
                            
                            this.issue = response.data.data;
                            
                        }
                        this.loading = false;
                    })
                    .catch(error => {
                        console.log(error);
                        this.loading = false;
                    });
            });
        },
 

Мне это кажется совершенно излишним…. почему бы серверной части просто не передать всю информацию, верно?

Что это за функция globalRouteMixin , вы спрашиваете?. Итак, мы храним все маршруты api в локальном хранилище на интерфейсе и получаем к ним доступ с помощью микшера Vue, который принимает именованный маршрут в качестве параметра и возвращает URL-адрес для axios. Таким образом , пример this.globalRouteMixin("api.quality.issues.show", {issue: this.issue_id}) вернет маршрут /api/quality/issues/3/show , например, миксин отвечает за доступ к ним в локальном хранилище, и если маршрутов там нет (например, если кто-то очистит свой кэш), он попадет в конечную точку, которая извлекает все маршруты, а затем сохраняет их. Поэтому перед каждой выборкой нам нужно использовать globalRouteMixin его, чтобы получить правильный маршрут. Это делает разработку очень неприятной, потому что каждый раз, когда вы имеете дело с маршрутами, вам приходится постоянно очищать маршруты в locastorage, чтобы получить последнюю версию.

Нормально ли все это?