Laravel vuex boostrap crud
Setup laravel
composer create-project laravel/laravel laravel-vue-crud
Setup vuejs
vue create laravel-vue-crud
Xem hướng dẫn setup project vuejs ở đây
Database Connection
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=vuejs DB_USERNAME=root DB_PASSWORD=
Set Up Model and Run Migration
php artisan make:model Product -m
Add following code in database/migrations/create_products_table.php
Define Product table values in app/Models/Product.php:
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Product extends Model { use HasFactory; protected $fillable = [ 'name', 'detail' ]; }
Run migration
php artisan migrate
Create Product Controller
php artisan make:controller ProductController
Open and update the below code in app\Http\Controllers\ProductController.php:
Remove \Fruitcake\Cors\HandleCors::class in laravel-vue-crud\app\Http\Kernel.php
protected $middleware = [ // \App\Http\Middleware\TrustHosts::class, //\Fruitcake\Cors\HandleCors::class, \App\Http\Middleware\TrustProxies::class, \App\Http\Middleware\PreventRequestsDuringMaintenance::class, \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, \App\Http\Middleware\TrimStrings::class, \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, ];
Edit routes\api.php
Cấu hình vuejs
Setup thư viện axios
npm install --save axios
Thêm boostrap 5 vào public/index.html
Sửa file App.vue
<template> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <router-link to="/" class="nav-item nav-link">Products List</router-link> <router-link to="/create" class="nav-item nav-link">Create Product</router-link> </div> </div> </nav> <router-view> </router-view> </div> </template> <script> export default {} </script>
Tạo 3 file sau trong folder components
AllProduct.vue CreateProduct.vue EditProduct.vue
Edit components\AllProduct.vue
Edit components\CreateProduct.vue
Edit component components\EditProduct.vue
Edit route\index.js
import { createRouter, createWebHistory } from 'vue-router' import Home from '../components/AllProduct.vue' import Create from '../components/CreateProduct.vue' import Edit from '../components/EditProduct.vue' const routes = [{ path: '/', name: 'Home', component: Home }, { name: 'create', path: '/create', component: Create }, { name: 'edit', path: '/edit/:id', component: Edit }, ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
Edit store/index.js
Quay lại terminal folder vuejs project và chạy:
npm run serve