Vue Laravel CRUD: как создать приложение Vue Laravel

Vue Laravel CRUD — важная операция для изучения laravel и vue с нуля. CRUD (создание, чтение, обновление и удаление) — это основные операции с данными и одна из первых вещей, которую вы изучаете как разработчик Laravel.

Мы узнаем, как создать небольшое веб-приложение, которое создает, читает, обновляет и удаляет данные из базы данных MySQL. Мы узнаем, как создавать таблицы, контроллеры, представления, модели, маршруты API и работать с библиотекой axios для отправки сетевого запроса.

Laravel — самый быстрый PHP растущая платформа с масштабируемостью и гибкостью.

VueJS — самая быстрорастущая библиотека переднего плана в сообществе Javascript. Laravel предоставляет поддержку VueJS «из коробки».

Зачем использовать Laravel и Vue

Laravel — это надежный фреймворк PHP для работы. Создать шаблон crud с помощью Vue и Laravel очень просто. Vue.js — это отличная инфраструктура внешнего интерфейса javascript, которая обеспечивает маршрутизацию, поддержку http, поддержку промежуточного программного обеспечения, а также библиотеку управления данными на стороне клиента Vuex.

Сообщество Laravel создало массу ценных образовательных ресурсов, в том числе и этот! В этом руководстве вы создадите викторину как два отдельных проекта: Laravel API и интерфейс Vue (с использованием vue-cli). Этот подход предлагает некоторые существенные преимущества:

  1. Он позволяет разделить серверные и внешние проекты и развертывать их независимо, используя различные стратегии и расписания для тестирования и развертывания.
  2. Мы можем развернуть интерфейс как статическое приложение в CDN и добиться практически неограниченного масштабирования за небольшую часть стоимости его размещения вместе с бэкэнд.
  3. Этот подход также позволяет разработчикам работать только с API или только с интерфейсом без необходимости доступа к полному исходному коду другой части системы (это все еще возможно, если проекты тесно интегрированы, но его сложно настроить), что делает его исключительной архитектурой для больших команд и проектов.

Пример Vue Laravel CRUD

Стандартный подход к объединению Vue и Laravel — это создание компонентов Vue, а затем их размещение в ваших файлах Blade. Но для работы CRUD в этой архитектуре потребуется обновление страницы, прежде чем они будут отражены в пользовательском интерфейсе.

Для этой демонстрации vue laravel crud мы не будем создавать отдельные проекты для внешнего интерфейса, потому что Laravel предоставляет лучшее поддержка Vue.js . Итак, мы создадим компоненты Vue внутри папки с ресурсами Laravel.

Мы создадим одностраничное приложение (SPA) , используя Laravel и Vue.js. В этом SPA вы можете создать сообщение, отредактировать сообщение, прочитать сообщение и удалить сообщение. Мы создадим бэкэнд Laravel API .

Теперь, во-первых, нам нужно установить Laravel приложение . Итак, давайте установим новый Laravel с помощью следующей команды.

Шаг 1. Установите шаблон Laravel

 laravel new vuelaravelcrud 

Теперь перейдите в папку проекта и установите зависимости внешнего интерфейса, используя следующую команду.

 npm install 

Также откройте проект в вашем редакторе. Я использую код Visual Studio.

 code. 

Настройте конфигурацию базы данных внутри файла .env .

 DB_CONNECTION = mysqlDB_HOST = 127.0.0.1DB_PORT = 3306DB_DATABASE = vuecrudDB_USERNAME = rootDB_PASSWORD = root 

Сохраните файл, и теперь ваш бэкэнд может подключиться база данных MySQL .

Теперь запустите компиляцию ресурсов с помощью следующей команды.

 npm run dev 

Мы также можем запустить следующую команду для компиляции ресурсов по мере написания нового кода или изменения существующего кода.

 npm run watch 

Шаг 2. Установите зависимость Vue и отредактируйте конфигурации.

Введите следующую команду, чтобы установить Зависимости vue-router и vue-axios .

vue-router используется для маршрутизации нашего приложения Vue.js для использования различных компонентов и vue-axios для отправки сетевого запроса на сервер.

 npm install vue-router vue-axios --save 

Теперь мы необходимо изменить файл app.js внутри папки resources >> js .

Измените с помощью следующего кода внутри Файл app.js .

//App.jsrequire ('./bootstrap'); window.Vue = require ('vue'); импортировать VueRouter из  'vue-router'; Vue.use (VueRouter); импортировать VueAxios из 'vue-axios'; импортировать axios из 'axios'; Vue.use (VueAxios, axios); Vue.component ('example-component', require (  './components/ExampleComponent.vue'));const router = new VueRouter ({mode:' history '}); const app = new Vue (Vue.util.extend ({router})). $ mount (' #  app '); 

Здесь мы настроили библиотеки vue-router и vue-axios .

Нет w, внутри папки resources >> views создайте один файл с именем post.blade.php .

Добавить следующий код внутри файла post.blade.php .

       Laravel       

Теперь измените маршрут в файле routes >> web.php . Мы создаем одностраничное приложение , используя Laravel и Vue.

Итак, нам нужно определить следующий маршрут, по которому мы можем протолкнуть любой маршрут, и тогда он даст правильный маршрут без каких-либо ошибок. В противном случае будет выдана ошибка 404 , потому что в Laravel вы не определили какой-либо маршрут, это Vue, в котором вы определили различные маршруты компонентов.

Благодаря следующему коду теперь вы можете использовать прокси-сервер Laravel в качестве маршрута Vue, и вы можете отображать компоненты Vue в зависимости от текущего URL-адреса.

  PhpRoute :: get  ('/{any}', function () {return view ('post');}) -> where ('any', '. *'); 

Сохраните файл и перейдите в браузер и посмотрите результат. Как видите, мы успешно интегрировали компонент Vue в наше приложение Laravel .

Шаг 3 : Создание компонентов Vue

Внутри папки resources >> js создайте папку с именем components и внутри в этой папке создайте четыре следующих компонента vue.

  1. HomeComponent.vue
  2. CreateComponent .vue
  3. EditComponent.vue
  4. IndexComponent.vue
//HomeComponent.vue  
Домашний компонент
Я - домашний компонент.
экспорт по умолчанию {установлен () {console.log ('Компонент установлен.')}}
//CreateComponent. vue  
Создать компонент
Я - компонент создания компонента.
экспорт по умолчанию {установлен () {console.log ('Компонент установлен.')}}
//EditComponent.vue  
Редактировать компонент
Я являюсь редактирующим компонентом.
экспорт по умолчанию {монтируется () {console.log ('Пример компонента смонтирован.')}}
//IndexComponent.vue  
Компонент индекса
Я являюсь компонентом индекса.
экспорт по умолчанию {установлен () {console.log ('Компонент индекса установлен.')}}

Шаг 4. Настройте vue-router

Внутри файла app.js напишите следующий код.

//app.jsrequire ('./bootstrap'); window.Vue = require ('vue'); импортировать VueRouter из 'vue-router'; Vue.use (VueRouter  ); импортировать VueAxios из 'vue-axios'; импортировать axios из 'axios'; импортировать приложение из './App.vue';Vue.use(VueAxios, axios); импортировать HomeComponent из' ./components/HomeComponent.vue '  ; импортировать CreateComponent из './components/CreateComponent.vue'; импортировать IndexComponent из './components/IndexComponent.vue'; импортировать EditComponent из './components/EditComponent.vue';const routes = [{name:' home '  , путь: '/', компонент: HomeComponent}, {имя: 'create', путь: '/create', компонент: CreateComponent}, {имя: 'posts', путь: '/posts', компонент: IndexComponent},  {имя: 'эди  t ', путь:'/edit/: id ', component: EditComponent}]; const router = new VueRouter ({mode:' history ', routes: routes}); const app = new Vue (Vue.util.extend (  {router}, App)). $ mount ('# app'); 

Здесь мы импортировали четыре компонента, а также определили маршруты для нашего приложения. Затем мы создали объект маршрутизатора и передали его нашему приложению Vue..

Теперь создайте еще один компонент vue внутри папки resources >> js с именем App.vue и добавьте следующий код в нем.

//App.vue  
.fade-enter-active, .fade-leave-active {переход: непрозрачность .5s} .fade-enter, .fade-leave-active {opacity: 0} export default {}

Здесь мы определили наше представление маршрутизатора. Это директива, которая будет отображать компонент в соответствии с текущим URL-адресом. Итак, если наш URL-адрес /create, тогда он представит CreateComponent на веб-странице.

Сохраните файл, и если ваши часы npm run не работают, вам может потребоваться снова скомпилировать, а затем перейти в браузер и перейти по этим URL-адресам для тестирования и посмотреть, работает ли проект или нет.

  1. http://vuelaravelcrud.test/create
  2. http://vuelaravelcrud.test/posts

Если вы получаете конкретный компонент, то с вами все в порядке, а если нет, проверьте наличие ошибки в терминале, а также на панели консоли в браузере.

Шаг 5: Создайте панель навигации

Напишите следующий код внутри файла App.vue . Я добавил панель навигации.

//App.vue  

.fade-enter-active, .fade-leave-active {переход: непрозрачность .5s} .fade-enter, .fade -leave-active {opacity: 0} export default {}

Сохраните файл и просмотрите результат в браузере.

Шаг 6. Создайте форму

Напишите следующий код внутри файла CreateComponent.vue . Мы добавим форму Bootstrap для создания сообщения.

//CreatePost.vue  

Create A Post


экспорт по умолчанию {data () {return {post: {}}}, методы: {addPost () {console.log (this.post); }}}

Итак, мы взяли два поля. Заголовок сообщения и текст сообщения. Мы создали один метод под названием addPost ().

Итак, когда пользователь отправляет форму, мы получаем ввод внутри метода addPost () . С этого момента мы отправим POST-запрос на сервер Laravel и сохраним данные в базе данных.

Я пропускаю проверку каждого поля, потому что эта статья становится длинной и длинной. Так что мы сделаем это в другом посте.

Сохраните файл и перейдите по этому URL-адресу: http://vuelaravelcrud.test/create или /создать. Вы можете увидеть форму ниже.

Шаг 7. Создайте серверную часть Laravel

Основной целью Laravel Framework в этом примере является создание серверной части API . . Итак, сначала мы создадим схему для таблицы сообщений. Также нам понадобится модель Post. Итак, давайте создадим и то, и другое, используя следующую команду.

 php artisan make: model Post -m 

Теперь напишите следующую схему внутри [timestamp] Файл create_posts_table.php .

 public function up () {Schema :: create ('posts', function (Blueprint $ table) {$ table-> increments ('id')  ; $ table-> string ('title'); $ table-> text ('body'); $ table-> timestamps ();});} 

Перенесите базу данных, используя следующие команда.

 php artisan migrate 

Затем внутри модели Post.php напишите следующий код, чтобы предотвратить массовое назначение исключение.

  php//Post.phpnamespace App; используйте Illuminate  Database  Eloquent  Model; класс Post расширяет модель {protected $ fillable = ['title', 'body'];}  

Также создайте контроллер, используя следующую команду.

 php artisan make: controller PostController 

Мы используем Laravel Resource Collection для разработки API. Итак, давайте создадим Laravel Resource Collection , используя следующую команду.

 php artisan make: resource PostCollection 

При создании API , вам может понадобиться уровень преобразования, который находится между вашими моделями Eloquent и ответами JSON, которые возвращаются пользователям вашего приложения. Классы ресурсов Laravel позволяют выразительно и быстро преобразовывать ваши модели и коллекции моделей в JSON.

Ресурс PostCollection создается внутри приложения >> Http >> Resources >> PostCollection.php файл.

  Php//PostCollection.phpnamespace App  Http  Resources; используйте класс Illuminate  Http  Resources  Json  ResourceCollection;  PostCollection extends ResourceCollection {/** * Преобразует коллекцию ресурсов в массив.  * * @param  Illuminate  Http  Request $ request * @return array */публичная функция toArray ($ request) {return parent :: toArray ($ request);  }} 

Шаг 8: Определите операции CRUD

Сначала мы определяем функцию, которая хранит данные в базе данных MySQL. .

  php//PostController.phpnamespace App  Http  Controllers; использовать Illuminate  Http  Request; использовать App  Http  Resources  PostCollection; использовать App  Post; класс PostController расширяет контроллер {  публичное хранилище функций (Request $ request) {$ post = new Post (['title' => $ request-> get ('title'), 'body' => $ request-> get ('body')]);  $ post-> сохранить ();  return response () -> json ('успех');  }} 

Теперь напишите также функции редактирования, обновления, индексации и удаления.

  php//PostController.phpnamespace App  Http  Controllers;  используйте Illuminate  Http  Request; используйте App  Http  Resources  PostCollection; используйте App  Post; класс PostController расширяет Controller {хранилище общедоступных функций (Request $ request) {$ post = new Post (['title' => $ request-  > get ('title'), 'body' => $ request-> get ('body')]);  $ post-> сохранить ();  return response () -> json ('успешно добавлено');  } публичная функция index () {вернуть новую коллекцию PostCollection (Post :: all ());  } общедоступная функция edit ($ id) {$ post = Post :: find ($ id);  вернуть ответ () -> json ($ post);  } обновление публичной функции ($ id, Request $ request) {$ post = Post :: find ($ id);  $ post-> update ($ request-> all ());  return response () -> json ('успешно обновлено');  } общедоступная функция delete ($ id) {$ post = Post :: find ($ id);  $ post-> удалить ();  return response () -> json ('успешно удалено');  }} 

Шаг 9: Определите маршруты API

Теперь нам нужно определить маршруты API внутри routes >> файл api.php .

  php//api. phpuse Illuminate  Http  Request; Route :: middleware ('auth: api') -> get ('/user', function (Request $ request) {return $ request-> user ();}); Route :: post  ('/post/create', 'PostController @ store'); Route :: get ('/post/edit/{id}', 'PostController @ edit'); Route :: post ('/post/update/{  id} ',' PostController @ update '); Route :: delete ('/post/delete/{id} ',' PostController @ delete '); Route :: get ('/posts ',' PostController @ index ')  ; 

Шаг 10: Используйте Axios для отправки сетевого запроса

AJAX является ключом к этой архитектуре, поэтому мы будем использовать Axios в качестве HTTP-клиента.

Теперь мы создали бэкэнд. Следующим шагом является отправка запроса POST на сервер разработки Laravel.

Напишите следующий код внутри CreateComponent.vue функция файла addPost () .

//CreateComponent.vueaddPost () {let uri = 'http://vuelaravelcrud.test/api/post/create  ';  this.axios.post (uri, this.post) .then ((response) => {this. $ router.push ({name: 'posts'});});} 

Таким образом, он отправит запрос к точке api сервера с данными, и сервер сохранит данные.

Теперь отобразите сообщения. Итак, давайте отредактируем файл IndexComponent.vue .

//IndexComponent.vue  

Posts

Создать сообщение

ID Название предмета Цена предмета Действия
{{post.id}} {{post.title}} {{post.body}} Edit
export default { data () {return {posts: []}}, created () {let uri = 'http://vuelaravelcrud.test/api/posts'; this.axios.get (uri) .then (response => {this.posts = response.data.data;}); }}

Здесь, когда компонент создан, мы отправляем сетевой запрос на выборку данных.

Теперь нам нужно написать данные, потому что axios по умолчанию, обертывают наши сообщения данных серверной части данными, и мы используем коллекцию ресурсов .

Таким образом, он также будет заключать данные в ключ данных. Итак, чтобы получить фактические данные, нам нужно написать что-то вроде response.data.data.

Если мы не использовали axios, мы могли бы написать response.data, но у axios также есть шаблон данных серверной части, например response.data, и поэтому нам нужно написать

Шаг 11. : Отправить запрос на редактирование и обновление

Теперь, когда наш компонент редактирования загружается, нам нужно получить данные с сервера для отображения существующих данных.

Затем, после изменения данных в текстовом поле и текстовом поле , мы нажимаем кнопку обновления и вызываем updatePost () функция для отправки почтового запроса на сервер для обновления данных.

//EditComponent.vue  

Edit Post


экспорт по умолчанию {data () {return {post: {}}}, created () {let uri = `http://vuelaravelcrud.test/api/ post/edit/$ {this. $ route.params.id} `; this.axios.get (uri) .then ((ответ) => {this.post = response.data;}); }, методы: {updatePost () {let uri = `http://vuelaravelcrud.test/api/post/update/$ {this. $ route.params.id}`; this.axios.post (uri, this.post) .then ((ответ) => {this. $ router.push ({name: 'posts'});}); }}}

Теперь вы можете попробовать отредактировать данные и обновить форму, и вы видите, что теперь мы можем обновить данные.

Шаг 12: Удалите данные

Теперь осталось только удалить или удалить данные из базы данных.

Итак, давайте напишем окончательный код внутри файла IndexComponent.vue .

//IndexComponent. vue  

Сообщения

Создать сообщение

ID Название предмета Цена предмета Действия
{{post.id}} {{post.title }} {{post.body}} Изменить
экспорт по умолчанию {data () {return {posts: []}}, created () {let uri = 'http://vuelaravelcrud.test/api/posts'; this.axios.get (uri) .then (response => {this.posts = response.data.data;}); }, методы: {deletePost (id) {let uri = `http://vuelaravelcrud.test/api/post/delete/$ {id}`; this.axios.delete (uri) .then (response => {this.posts.splice (this.posts.indexOf (id), 1);}); }}}

Итак, здесь мы взяли событие click в vue , чтобы получить идентификатор текущего сообщения и отправить этот идентификатор в удалите данные из базы данных, а также удалите данные из массива на стороне клиента, используя также функцию splice .

Наконец, Учебное пособие по Vue Laravel CRUD для начинающих окончено. Спасибо, что взяли.

Вы можете использовать следующий код Github для справки.

Код Github

См. также

Учебник по Laravel Angular

Пример Laravel React

Функциональность чата Laravel и Vue

Файл Laravel Vue Загрузите

приложение типа Laravel Vue для Twitter

Оцените статью
nanomode.ru
Добавить комментарий