Рубрики
Laravel+Vue3 project Vue компонент Vue основы

Регистрация Компонента

Два вида регистрации

1. Глобальная

  • явная
  • не явная

2. Локальная

Рубрики
Laravel Laravel основы Laravel+Vue3 routes Роут

Примеры Route

Синтаксис Route

$uri

хост\api\путь

$callback

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

routes\api.php

get роут получает информацию от сервера
Route::get($uri, $callback);
post роут отправляет информацию на сервер для хранения
Route::post($uri, $callback);
Рубрики
JQuery Laravel+Vue3 project Vue компоненты Vue.js

Vue Окно в движении

JQuery

включить библиотеку из интернета
главный шаблон Laravel

resources\views\index.blade.php

<!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://codegid.ru/default/js/jquery/jquery-1.7.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/jquery.event.drag-2.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/jquery.event.drag.live-2.2.js"></script>
<script src="https://codegid.ru/default/js/jquery/ui/1.12.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <body>
        <div id="app">
            <my-app/>
        </div>
        <script src="./js/app.js"></script>
    </body>
</html>
Рубрики
Laravel Laravel+Vue3 project Vue компоненты Vue.js

Vue Создать запись в БД

Вывод UI модального окна для создания записи

Рубрики
Laravel+Vue3 project Vue компоненты Vue.js

Vue Список записей из БД

routes\api.php
роутинг модуля в Laravel обращается
к контроллеру ElementsController
для получения записей из БД через метод index

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ElementsController;

вывести все записи таблицы через контроллер 
Route::get('/all',[ElementsController::class, 'index']);
Рубрики
Laravel+Vue3 project

Laravel Контроллер для БД

Контроллер laravel

php artisan make:controller ElementsController
Рубрики
Laravel+Vue3 project Vue.js

Laravel Модель для БД

создание модели Elements, которая будет работать с БД таблицей Elements

php artisan make:model Elements -m
Рубрики
Laravel Laravel+Vue3 project

Настройка БД

phpMyAdmin
вход на хостинге (пример Джино)

Таблица Elements в БД на хостинге
источник хранения информации записей задач

Имя ТипПо Умолчанию
idint(11)нет
nametinytextempty
description textempty
bodytext//code
created_atdateнет
updated_atdateнет
структура таблицы elements в БД на хостинге
для поля id дополнительно отметить A_I = true на авто уникальность
Рубрики
Laravel Laravel+Vue3 project npm Visual Studio Code Vue.js

Создание проекта Vue3+Laravel

локальное создание проекта laravel в терминале OpenServer

установка композер
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
глобально композер
php composer.phar global require laravel/installer
создание проекта
php composer.phar create-project --prefer-dist laravel/laravel vue_laravel
Рубрики
App Laravel+Vue3 project React React-project Роут

Разворачивание Роутинга в приложении на React

  • PhpStorm
    среда разработки
  • Node JS
    установка

имя проекта не должно содержать заглавные буквы
установка в терминале среды разработки Visual Studio Code

npx create-react-app name_project
библиотека react-router-dom
npm install react-router-dom
запуск приложения от react
npm start

Структура проекта React

  • public
    место где собирается проект
  • src
    место где пишется код
  • build
    выгружать готовую сборку на сервер