Как создать CRUD-приложение с помощью Laravel и Vuejs

[GuDron]

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

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

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

VueJS — это самая быстрорастущая библиотека переднего плана в сообществе Javascript. В результате laravel предоставляет поддержку VueJS из коробки.

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

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

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

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

Представление Laravel CRUD​

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

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

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

Теперь, во-первых, нам нужно установить приложение Laravel .

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

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

laravel new vuelaravelcrud

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

npm install

Также откройте проект в вашем редакторе. Например используя Для просмотра ссылки Войди или Зарегистрируйся.

code .

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

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuecrud
DB_USERNAME=root
DB_PASSWORD=root

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

npm run dev

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

npm run watch

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

Введите следующую команду, чтобы установить зависимости Для просмотра ссылки Войди или Зарегистрируйся и Для просмотра ссылки Войди или Зарегистрируйся .

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

npm install vue-router vue-axios --save

Нам нужно изменить файл app.js внутри папки resources >> js .

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

// App.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from '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 .

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

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

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet" />
        <meta name="csrf-token" value="{{ csrf_token() }}" />
    </head>
    <body>
        <div id="app">
          <example-component></example-component>
        </div>
        <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
    </body>
</html>

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

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

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

<?php

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

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

 

[GuDron]

Шаг 3: Создайте компоненты Vue​

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

1. HomeComponent.vue
2. CreateComponent.vue
3. EditComponent.vue
4. IndexComponent.vue

// HomeComponent.vue

<template>
  <div class="row justify-content-center">
      <div class="col-md-8">
          <div class="card card-default">
              <div class="card-header">Home Component</div>

              <div class="card-body">
                  I'm the Home Component component.
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
// CreateComponent.vue

<template>
  <div class="row justify-content-center">
      <div class="col-md-8">
          <div class="card card-default">
              <div class="card-header">Create Component</div>

              <div class="card-body">
                  I'm the Create Component component.
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
// EditComponent.vue

<template>
  <div class="row justify-content-center">
      <div class="col-md-8">
          <div class="card card-default">
              <div class="card-header">Edit Component</div>

              <div class="card-body">
                  I'm an Edit component.
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Example Component mounted.')
        }
    }
</script>
// IndexComponent.vue

<template>
  <div class="row justify-content-center">
      <div class="col-md-8">
          <div class="card card-default">
              <div class="card-header">Index Component</div>

              <div class="card-body">
                  I'm an Index component.
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Index Component mounted.')
        }
    }
</script>

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

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

// app.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

import App from './App.vue';
Vue.use(VueAxios, axios);

import HomeComponent from './components/HomeComponent.vue';
import CreateComponent from './components/CreateComponent.vue';
import IndexComponent from './components/IndexComponent.vue';
import EditComponent from './components/EditComponent.vue';

const routes = [
  {
      name: 'home',
      path: '/',
      component: HomeComponent
  },
  {
      name: 'create',
      path: '/create',
      component: CreateComponent
  },
  {
      name: 'posts',
      path: '/posts',
      component: IndexComponent
  },
  {
      name: 'edit',
      path: '/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

<template>
    <div class="container">
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>

<script>

    export default{
    }
</script>

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

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

1. Для просмотра ссылки Войди или Зарегистрируйся
2. Для просмотра ссылки Войди или Зарегистрируйся
3. Для просмотра ссылки Войди или Зарегистрируйся

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

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

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

// App.vue

<template>
  <div class="container">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link to="/" class="nav-link">Home</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/create" class="nav-link">Create Post</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/posts" class="nav-link">Posts</router-link>
        </li>
      </ul>
    </nav><br />
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>

<script>

    export default{
    }
</script>

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

 

[GuDron]

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

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

// CreatePost.vue

<template>
  <div>
    <h1>Create A Post</h1>
    <form @submit.prevent="addPost">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Title:</label>
            <input type="text" class="form-control" v-model="post.title">
          </div>
        </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>Post Body:</label>
              <textarea class="form-control" v-model="post.body" rows="5"></textarea>
            </div>
          </div>
        </div><br />
        <div class="form-group">
          <button class="btn btn-primary">Create</button>
        </div>
    </form>
  </div>
</template>

<script>
    export default {
        data(){
        return {
          post:{}
        }
    },
    methods: {
      addPost(){
        console.log(this.post);
      }
    }
  }
</script>

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

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

Сохраните файл и перейдите по этому URL-адресу: Для просмотра ссылки Войди или Зарегистрируйся или /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.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title', 'body'];
}

Кроме того, создайте контроллер с помощью следующей команды.

php artisan make:controller PostController

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

php artisan make:resource PostCollection

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

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

<?php

// PostCollection.php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\ResourceCollection;

class PostCollection extends ResourceCollection
{
    /**
     * Transform the resource collection into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return parent::toArray($request);
    }
}

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

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

<?php

// PostController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;

class PostController extends Controller
{
    public function store(Request $request)
    {
      $post = new Post([
        'title' => $request->get('title'),
        'body' => $request->get('body')
      ]);

      $post->save();

      return response()->json('success');
    }
}

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

<?php

// PostController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;

class PostController extends Controller
{
    public function store(Request $request)
    {
      $post = new Post([
        'title' => $request->get('title'),
        'body' => $request->get('body')
      ]);

      $post->save();

      return response()->json('successfully added');
    }

    public function index()
    {
      return new PostCollection(Post::all());
    }

    public function edit($id)
    {
      $post = Post::find($id);
      return response()->json($post);
    }

    public function update($id, Request $request)
    {
      $post = Post::find($id);

      $post->update($request->all());

      return response()->json('successfully updated');
    }

    public function delete($id)
    {
      $post = Post::find($id);

      $post->delete();

      return response()->json('successfully deleted');
    }
}

 

[GuDron]

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

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

<?php

// api.php

use 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 для отправки сетевого запроса​

Для просмотра ссылки Войди или Зарегистрируйся является ключом к этой архитектуре, поэтому мы будем использовать Для просмотра ссылки Войди или Зарегистрируйся в качестве HTTP-клиента.
Итак, мы создали бэкэнд. Следующим шагом будет отправка POST -запроса на сервер разработки Laravel.
Напишите следующий код внутри функции addPost() файла CreateComponent.vue .

// CreateComponent.vue

addPost(){
    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

<template>
  <div>
      <h1>Posts</h1>
        <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2">
            <router-link :to="{ name: 'create' }" class="btn btn-primary">Create Post</router-link>
          </div>
        </div><br />

        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="post in posts" :key="post.id">
                    <td>{{ post.id }}</td>
                    <td>{{ post.title }}</td>
                    <td>{{ post.body }}</td>
                    <td><router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit</router-link></td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
            </tbody>
        </table>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          posts: []
        }
      },
      created() {
      let uri = 'http://vuelaravelcrud.test/api/posts';
      this.axios.get(uri).then(response => {
        this.posts = response.data.data;
      });
    }
  }
</script>

Здесь, когда компонент создан, мы отправляем сетевой запрос на получение данных.
Здесь нам нужно записать данные, потому что Для просмотра ссылки Войди или Зарегистрируйся по умолчанию, обернуть наши серверные посты данных данными и использовать коллекцию ресурсов.
Таким образом, он также будет переносить данные в ключ данных. Итак, чтобы получить фактические данные, нам нужно написать как response.data.data.
Если бы мы не использовали axios, то мы могли бы написать response.data, но у axios также есть внутренний шаблон данных, такой как response.data, и поэтому нам нужно написать response.data.data.

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

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

// EditComponent.vue

<template>
  <div>
    <h1>Edit Post</h1>
    <form @submit.prevent="updatePost">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Title:</label>
            <input type="text" class="form-control" v-model="post.title">
          </div>
        </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>Post Body:</label>
              <textarea class="form-control" v-model="post.body" rows="5"></textarea>
            </div>
          </div>
        </div><br />
        <div class="form-group">
          <button class="btn btn-primary">Update</button>
        </div>
    </form>
  </div>
</template>

<script>
    export default {

      data() {
        return {
          post: {}
        }
      },
      created() {
        let uri = `http://vuelaravelcrud.test/api/post/edit/${this.$route.params.id}`;
        this.axios.get(uri).then((response) => {
            this.post = response.data;
        });
      },
      methods: {
        updatePost() {
          let uri = `http://vuelaravelcrud.test/api/post/update/${this.$route.params.id}`;
          this.axios.post(uri, this.post).then((response) => {
            this.$router.push({name: 'posts'});
          });
        }
      }
    }
</script>

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

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

Остается только удалить или удалить данные из базы данных.
Итак, давайте напишем окончательный код в файле IndexComponent.vue .

// IndexComponent.vue

<template>
  <div>
      <h1>Posts</h1>
        <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2">
            <router-link :to="{ name: 'create' }" class="btn btn-primary">Create Post</router-link>
          </div>
        </div><br />

        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="post in posts" :key="post.id">
                    <td>{{ post.id }}</td>
                    <td>{{ post.title }}</td>
                    <td>{{ post.body }}</td>
                    <td><router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit</router-link></td>
                    <td><button class="btn btn-danger" @click.prevent="deletePost(post.id)">Delete</button></td>
                </tr>
            </tbody>
        </table>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          posts: []
        }
      },
      created() {
      let uri = 'http://vuelaravelcrud.test/api/posts';
      this.axios.get(uri).then(response => {
        this.posts = response.data.data;
      });
    },
    methods: {
      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);
        });
      }
    }
  }
</script>

Итак, здесь мы взяли событие click в vue , чтобы получить идентификатор текущего сообщения и отправить этот идентификатор для удаления данных из базы данных и удаления данных из массива на стороне клиента с помощью функции объединения .
Наконец, учебник по Vue Laravel CRUD для начинающих подошёл к концу . Спасибо, что взяли.
Вы можете использовать следующий код Github для справки: Для просмотра ссылки Войди или Зарегистрируйся