Автор оригинала: FreeCodeCamp Community Member.
Нео Игодаро
Базовое понимание Laravel и Vue.js необходимо для следовать этого руководства.
Такие компании, как Прививка Сделали приложения, которые дизайнеры используют, чтобы получить отзыв от других людей. Дизайнер может просто загрузить приложение, загрузить их конструкции и отправлять ссылку на людей, которые оставили отзыв. Тогда те люди могут оставить свои обратные связи на разных частях дизайна. Это хорошо для дизайнера, потому что они могут видеть эту обратную связь и действовать на него сразу.
В этой статье мы собираемся создать аналогичное приложение о обратной связи. Это позволит вам загружать изображения, отправлять ссылку на кого-то еще и получить свой отзыв о своем дизайне в реальном времени.
Вот запись экрана о том, что наша заявка сможет сделать:
Требованиям нам нужно будет построить нашу заявку
Прежде чем мы начнем, нам нужно было сначала несколько вещей. Требования следующие:
- Знание PHP & The Larave фреймворк.
- Знание JavaScript (ES6).
- Знание Vue.js.
- PHP 7.0+ установлен локально на вашем компьютере.
- Laravel CLI установлен локально.
- Композитор установлен локально.
- NPM и node.js установлен локально.
- Применение толкателя. Создать один на pusher.com Отказ
После того, как вы проверили, что у вас есть вышеуказанные требования, мы можем начать создавать наше приложение.
Настройка нашего приложения обратной связи прототипа
Давайте начнем с настройки нашего приложения. Создайте новое приложение Laravel, используя команду ниже:
$ laravel new your_application_name
Когда установка завершена, CD к каталогу приложения. Открыть .env Файл, чтобы мы могли сделать пару изменений в файл.
Настройка нашей базы данных и миграции
Первое, что нужно сделать, это создать нашу базу данных и создавать свои миграции. Давайте начнем с настройки базы данных. Замените элементы конфигурации ниже:
DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=homesteadDB_USERNAME=homesteadDB_PASSWORD=secret
с:
DB_CONNECTION=sqlite
Теперь это сделает приложение использовать SQLite в качестве выбора базы данных. В вашем терминале запустите команду ниже, чтобы создать новую базу данных SQLite:
$ touch database/database.sqlite
Теперь мы создадим несколько миграций, которые создадут необходимые таблицы в базу данных. В вашем терминале запустите следующую команду, чтобы создать миграции, которые нам понадобится:
$ php artisan make:model Photo --migration --controller$ php artisan make:model PhotoComment --migration
Вышеуказанная команда создаст модель, а затем - Миграция и --controller Флагируют его создать миграцию и контроллер вместе с образцом.
На данный момент мы заинтересованы в модели и миграции. Откройте две файлы миграции, созданные в ./database/migrations каталог. Сначала отредактируйте CreatePhotoStable учебный класс. Заменить содержание вверх Способ со следующим:
public function up(){ Schema::create('photos', function (Blueprint $table) { $table->increments('id'); $table->string('url')->unique(); $table->string('image')->unique(); $table->timestamps(); });}Это создаст Фотографии Таблица Когда миграции запускаются с помощью команды artisan. Он также создаст новые столбцы внутри таблицы, как указано выше.
Откройте второй класс миграции, CreatePhotocommentStable и замените вверх Способ с содержимым ниже:
public function up(){ Schema::create('photo_comments', function (Blueprint $table) { $table->increments('id'); $table->unsignedInteger('photo_id'); $table->text('comment'); $table->integer('top')->default(0); $table->integer('left')->default(0); $table->timestamps(); $table->foreign('photo_id')->references('id')->on('photos'); });}Это создаст таблицу photo_Comments Когда миграция работает, и также создаст внешний ключ для Фотографии Таблица.
Теперь перейдите к вашему терминалу и запустите команду ниже, чтобы запустить миграцию:
$ php artisan migrate
Теперь это должно создать таблицы базы данных.
Настройка моделей
Теперь, когда мы запускаем наши миграции, нам нужно внести некоторые изменения в наш файл модели, чтобы он мог работать лучше со столом.
Открыть Фото Модель и замените содержимое следующим образом:
namespace App;
use Illuminate\Database\Eloquent\Model;
class Photo extends Model{ protected $with = ['comments'];protected $fillable = ['url', 'image'];
public function comments() { return $this->hasMany(PhotoComment::class); }}В приведенном выше мы добавили Наполнение свойство. Это останавливает нас от изучения массовых исключений при попытке обновить эти столбцы, используя Фото:: Создать Отказ Мы также устанавливаем с Собственность, которые просто не требуют грузов Комментарии отношение.
Мы определили красноречие отношения, Комментарии , что только говорит Фото имеет много Фотографии Отказ
Открыть Фотоокрас Модель и замените содержимое следующим образом:
namespace App;
use Illuminate\Database\Eloquent\Model;
class PhotoComment extends Model{ protected $fillable = ['photo_id', 'comment', 'top', 'left'];protected $appends = ['position'];
public function getPositionAttribute() { return [ 'top' => $this->attributes['top'], 'left' => $this->attributes['left'] ]; }}Так же, как Фото Модель, мы определили Наполнение свойство. Мы также используем Красноречивый доступ к Чтобы настроить новую недвижимость под названием позиция Отказ Затем это прилагается, потому что мы указали, что в добавляет свойство.
Настройка интерфейса для нашего приложения
Следующее, что мы хотим сделать, это создать фантандию нашего приложения. Начнем с установки нескольких пакетов NPM, которые нам понадобится в приложении. В вашем приложении Terminal запустите команду ниже, чтобы установить необходимые пакеты:
$ npm install --save laravel-echo pusher-js vue2-dropzone@^2.0.0$ npm install
Это будет установить Larave Echo , Толкатель JS SDK и Vue-Dapzone Отказ Нам понадобятся эти пакеты, чтобы обрабатывать события в реальном времени позже.
Когда пакеты были успешно установлены, теперь мы можем начать добавлять HTML и JavaScript.
Открыть ./routes/web.php Файл и давайте добавим несколько маршрутов. Замените содержимое файла с содержимым ниже:
Route::post('/feedback/{image_url}/comment', 'PhotoController@comment');Route::get('/feedback/{image_url}', 'PhotoController@show');Route::post('/upload', 'PhotoController@upload');Route::view('/', 'welcome');В указанном выше коде мы определили несколько маршрутов. Первый будет обращаться Пост Обратная связь Ed. Второй маршрут будет отображать изображение, которое должно получать обратную связь. Третий маршрут будет обрабатывать загрузки, а последний маршрут будет отображать домашнюю страницу.
Теперь откройте ./Resources/views/welcome.blade.php Файл, а в туда замените содержимое со следующим HTML-кодом:
Upload to get Feedback Это простой HTML-документ. Если вы посмотрите внимательно, вы увидите ссылку на Uploadarea Тег, который не существует в HTML, но является Vue компонентом.
Открыть ./Resources/assets/sass/app.cscss Файл и вставьте следующий код ниже операторов импорта:
html, body { background-color: #fff; color: #636b6f; font-family: 'Roboto', sans-serif; font-weight: 100; height: 100vh; margin: 0;}.full-height { height: 100vh;}.flex-center { align-items: center; display: flex; justify-content: center;}.position-ref { position: relative;}.content { text-align: center;}.m-b-md { margin-bottom: 30px;}.dropzone.dz-clickable { width: 100vw; height: 100vh; .dz-message { span { font-size: 19px; font-weight: 600; } }}#canvas { width: 90%; margin: 0 auto; img { width: 100%; }}.modal { text-align: center; padding: 0!important; z-index: 9999;}.modal-backdrop.in { opacity: 0.8; filter: alpha(opacity=80);}.modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px;}.modal-dialog { display: inline-block; text-align: left; vertical-align: middle;}.image-hotspot { position: relative; > img { display: block; height: auto; transition: all .5s; }}.hotspot-point { z-index: 2; position: absolute; display: block; span { position: relative; display: flex; justify-content: center; align-items: center; width: 1.8em; height: 1.8em; background: #cf00f1; border-radius: 50%; animation: pulse 3s ease infinite; transition: background .3s; box-shadow: 0 2px 10px rgba(#000, .2); &:after { content: attr(data-price); position: absolute; bottom: 130%; left: 50%; color: white; text-shadow: 0 1px black; font-weight: 600; font-size: 1.2em; opacity: 0; transform: translate(-50%, 10%) scale(.5); transition: all .25s; } } svg { opacity: 0; color: #cf00f1; font-size: 1.4em; transition: opacity .2s; } &:before, &:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; } &:before { z-index: -1; border: .15em solid rgba(#fff, .9); opacity: 0; transform: scale(2); transition: transform .25s, opacity .2s; } &:after { z-index: -2; background:#fff; animation: wave 3s linear infinite; } &:hover{ span { animation: none; background: #fff; &:after { opacity: 1; transform: translate(-50%, 0) scale(1); } } svg { opacity: 1; } &:before { opacity: 1; transform: scale(1.5); animation: borderColor 2s linear infinite; } &:after { animation: none; opacity: 0; } }}@-webkit-keyframes pulse{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); }}@keyframes pulse{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); }}.popover { min-width: 250px;}Сохраните файл и выйдите. Теперь давайте перейдем к созданию наших компонентов Vue.
Использование Vue для создания функциональных возможностей нашего приложения для обратной связи прототипа
Открыть ./Resources/assets/js/app.js Файл, а в туда создайте Vue компонент. В этом файле найдите строку ниже:
Vue.component('example', require('./components/Example.vue'));и заменить его с помощью:
Vue.component('uploadarea', require('./components/UploadArea.vue'));Vue.component('feedback',require('./components/FeedbackCanvas.vue'));Теперь давайте создадим наш первый состав Vue. В ./Resources/assets/js/components каталог, создать файл под названием Uploadarea.vue Отказ В новом файле вставить следующее:
В Шаблон Раздел, мы просто используем пакет Vue Dapzone, чтобы определить область, через которую можно загрузить файлы. Вы можете просмотреть документацию здесь Отказ
В Сценарий Раздел, мы получаем токен Laravel CSRF от заголовка страницы и импортируйте Dropzone компонент в наш текущий вариант Vue.
В Методы Свойство, мы определяем ShowImagePage Способ, который просто перенаправляет пользователь на страницу изображения после успешного загрузки изображения. В монтируется Метод, мы ограничиваем файл Dropzone, чтобы позволить одну загрузить файл за раз.
Давайте теперь создадим наш следующий Vue компонент. В ./Resources/assets/js/components каталог, создайте новый файл под названием Feedbackcanvas.vue и вставить следующее:
Мы определили Шаблон Для нашего Vue компонента. Это область, в которой изображение будет отображаться и где будет дан обратная связь.
Теперь мы распустим некоторые части его немного.
А Тег имеет кучу атрибутов, установленных на него.
V-для Петли через каждый комментарий/обратная связь Изображение имеет.
V-bind: стиль применяет Стиль атрибут для А Тег, используя левый и верх Свойства комментариев/обратной связи.
У нас также есть : Data-Content , Data-Toggle и Размещение данных Какой загрузчик нужно для его Покалы Отказ
IMG тег имеет @ yclick Событие, которое стреляет в функцию Дополнительная точка Когда область изображения нажата.
И, наконец, есть vue компонент Добавить комментарий-модаль который принимает недвижимость изображение Отказ Этот компонент будет отображать форму, чтобы любой мог оставить комментарий.
В этом же файле после закрытия Шаблон Тег, вставка в следующий код:
В монтируется Способ, мы используем Laravel Echo для прослушивания канала толкателя. Имя канала зависит от идентификатора изображения, который в настоящее время рассматривается. Каждое изображение будет передавать на другой канал на основе идентификатора изображения.
Когда добавлено Событие срабатывает на Обратная связь- $ ID Канал, он просматривает доступный image.comments И, если вещательный комментарий не существует, он добавляет его к массиву комментариев.
В создать Метод, мы активируем загрузку загрузки, определите функцию, которая рассчитывает координаты точки щелчков, и определяем функцию, которая удаляет комментарии, которые не были сохранены из image.comments множество.
Под Методы мы определяем Дополнительная точка Метод, который рассчитывает координаты клика, а затем запускает новый модаль Bootstrap. Это будет создано в Добавить комментарий-модаль Vue компонент.
Для работы Larave Echo на работу нам нужно открыть ./Resources/assets/js/bootstrap.js Файл и добавьте код ниже в нижней части файла:
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');window.Echo = new Echo({ broadcaster: 'pusher', key: 'PUSHER_KEY', encrypted: true, cluster: 'PUSHER_CLUSTER'});Вы должны заменить Pusher_key и Pusher_cluster С ключом и кластером для вашего приложения для толкателя.
Теперь давайте создадим наш следующий состав Vue, AddcommentMmentionModal.vue Отказ Это уже упоминается в нашем Feedbackcanvas.vue Vue компонент.
В Шаблон Раздел, мы определили типичный модаль Bootstrap. В модальной форме мы приложили звонок Отправить Feedback () который срабатывает, когда форма представлена.
В Сценарий Раздел, мы определили Отправить Feedback () Метод в Методы Свойство Vuue компонента. Эта функция просто отправляет комментарий к Backend для хранения. Если есть благоприятный ответ от API, модаль Bootstrap скрыт, и комментарий добавляется к image.comments множество. Поповерт Bootstrap затем перезагружается, поэтому он поднимает изменения.
С этим окончательным изменением мы определили все наши компоненты Vue. Откройте свой терминал и запустите команду ниже, чтобы создать свои активы JS и CSS:
$ npm run dev
Большой! Теперь давайте построим бэкэнда.
Создание конечных точек для нашего приложения обратной связи прототипа
В вашем терминале введите команду ниже:
php artisan make:event FeedbackAdded
Это создаст класс событий под названием VECTBACEDDADDOREDORD Отказ Мы будем использовать этот файл для запуска событий в толкатель, когда добавляем некоторые отзывы. Это сделает обратную связь в реальном времени, чтобы кто-либо смотрел на изображение.
Открыть Фотоконтроллер Класс и замените содержимое с кодом ниже:
use App\Events\FeedbackAdded;use App\{Photo, PhotoComment};class PhotoController extends Controller{ public function show($url) { $photo = Photo::whereUrl($url)->firstOrFail(); return view('image', compact('photo')); } public function comment(string $url) { $photo = Photo::whereUrl($url)->firstOrFail();$data = request()->validate([ "comment" => "required|between:2,2000", "left" => "required|numeric|between:0,100", "top" => "required|numeric|between:0,100", ]);
$comment = $photo->comments()->save(new PhotoComment($data));
event(new FeedbackAdded($photo->id, $comment->toArray()));
return response()->json($comment); }
public function upload() { request()->validate(['file' => 'required|image']);$gibberish = md5(str_random().time());
$imgName = "{$gibberish}.".request('file')->getClientOriginalExtension(); request('file')->move(public_path('storage'), $imgName);$photo = Photo::create(['image' => $imgName, 'url' => $gibberish]);
return response()->json($photo->toArray()); }}
В приведенном выше у нас есть Показать Способ, который показывает изображение, чтобы люди могли оставить отзыв об этом. Далее есть Комментарий Метод, который сохраняет новый комментарий на изображении. Последний метод является Загрузить Способ, который просто загружает изображение на сервер и сохраняет его в базу данных.
Давайте создадим представление для Показать метод. Создайте новый файл в ./Resources/views каталог называется Image.blade.php Отказ В этом файле вставьте код ниже:
; Laravel В вышеизложенном, единственное, что выделяется, это Обратная связь ярлык. Он в основном со ссылкой на компонент Vue обратной связи, который мы построили ранее в статье. Каждая вещь - просто базовый лезвие и HTML.
Теперь, когда мы создали представление, нам нужно добавить каталог для загрузки, определенных в Загрузить метод. В вашем терминале запустите команду ниже:
$ php artisan storage:link
Эта команда создаст симличиковую ссылку из ./Storage каталог для ./public/Storage каталог. Если вы посмотрите в ./public каталог вы должны увидеть SymLink.
Теперь, когда мы создали бэкэнда для поддержки нашего веб-приложения, нам нужно добавить толкатель на бэкэнду, чтобы созданные комментарии были переданы и могут быть подхвачены другими людьми, просматривающими изображение.
Добавление функциональности в реальном времени к приложению обратной связи прототипа с помощью толкателя
Откройте свой терминал и введите команду ниже, чтобы установить Толкатель PHP SDK :
$ composer require pusher/pusher-php-server "~3.0"
Открыть .env Файл и прокрутите до нижней части и настройте ключи от толкателя, как показано ниже:
PUSHER_APP_ID="PUSHER_ID"PUSHER_APP_KEY="PUSHER_KEY"PUSHER_APP_SECRET="PUSHER_SECRET"
Также в том же файле, ищите Broadcast_Driver и изменить его из Журнал к толкатель Отказ
Далее откройте ./Config/broadcasting.php и прокрутите до толкатель ключ. Заменить Варианты Ключ этой конфигурации с кодом ниже:
// ...
'options' => [ 'cluster' => 'PUSHER_CLUSTER', 'encrypted' => true ],
// ...
Теперь откройте VECTBACEDDADDOREDORD Класс и замените содержимое с кодом ниже:
use Illuminate\Broadcasting\Channel;use Illuminate\Queue\SerializesModels;use Illuminate\Foundation\Events\Dispatchable;use Illuminate\Broadcasting\InteractsWithSockets;use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class FeedbackAdded implements ShouldBroadcast{ use Dispatchable, InteractsWithSockets, SerializesModels;public $comment;
public $photo_id;
public function __construct(int $photo_id, array $comment) { $this->comment = $comment; $this->photo_id = $photo_id; } public function broadcastOn() { return new Channel("feedback-{$this->photo_id}"); } public function broadcastAs() { return 'added'; }}В классе выше мы определяем Комментарий Объект и photo_id который будет использоваться для сочинения названия канала в Broadcaston метод. Мы также определяем Broadcastas Метод, который позволит нам настроить имя события, отправляемого в толкатель.
Вот и все. Теперь давайте запустим наше приложение. В вашем терминале запустите код ниже:
$ php artisan serve
Это должно начать новый PHP-сервер. Затем вы можете использовать его, чтобы проверить ваше приложение. Перейдите к данному URL, и вы должны увидеть ваше приложение.
Вывод
В этой статье мы успешно создали функцию обратной связи приложения Prototype, которая позволит дизайнерам поделиться своими дизайнами с другими и получать отзывы о них.
Этот пост был впервые опубликован в Толкатель Отказ