La Single Page Applikatioun wäert erlaben eis engem Zyklus vun Basis Operatiounen op DB komplett: schafen, liesen, update an läschen mat Vue.js , Vue Routers an Laravel Kader .
Hautdesdaags sinn déi populärste JS Kaderen Angular JS a Vue JS. Angular JS a Vue JS si ganz userfrëndlech a populärste JS Kaderen. Et bitt Gestioun vum ganze Projet oder Applikatioun ouni d'Säit z'erfrëschen a mächteg jquery Validatioun.
Vue kënnt virverpaakt mat Laravel (zesumme mat Laravel Mix , en exzellenten Auteursinstrument baséiert op Webpack ) an erlaabt d'Entwéckler fir komplex eenzeg Säit Uwendungen ze bauen ouni sech iwwer Transpiler, Code Packagen, Quellkaarten oder aner "dreckeg" Aspekter vun der moderner Frontend Entwécklung ze këmmeren.
Php 7.4
Laravel 8.x
MySQL
Als éischt, öffnen Terminal a lafen de folgende Kommando fir en neie Laravel-Projet ze kreéieren:
composer create-project --prefer-dist laravel/laravel crud-spa
oder, wann Dir Laravel Installer als Komponist global Ofhängegkeet installéiert hutt:
laravel new crud-spa
No der Installatioun Gitt op Äre Projet Root Verzeichnis, öffnen d'.env Datei a setzt d'Datebankdetailer wéi follegt:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Fëllt de folgende Kommando aus fir d'Front-End Ofhängegkeeten z'installéieren:
npm install
Duerno installéieren Vue , vue-router e vue-axios . Vue-Axios gi benotzt fir de Laravel Backend API ze nennen. Fëllt de folgende Kommando um Terminal:
npm install vue vue-router vue-axios --save
Erstellt eng Kategorie Schabloun, Migratioun a Controller. Run de folgende Kommando fir dat:
php artisan make:model Category -mcr
-mcr dëst Thema wäert Model, Migratioun a Controller erstellen andeems een eenzeg Kommando Synthese benotzt.
Elo, oppen der Kategorie Migratioun Fichier vun Datenbanken / Migratioun an ersetzt de Code an d'Funktioun op() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Migréiert d'Datebank mat dem folgenden Kommando:
php artisan migrate
Elo, oppen der Category.php Schabloun vunapp/Models
an änneren de Code an der Datei model
Kategorie.php:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Category extends Model {
use HasFactory;
protected $fillable = ['title','description'];
}
?>
Duerno, oppen CategoryController.php a füügt de Code an den Index, späicheren, aktualiséieren a läschen Methoden wéi follegt:
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
class CategoryController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$categories = Category::all(['id','title','description']);
return response()->json($categories);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$category = Category::create($request->post());
return response()->json([
'message'=>'Category Created Successfully!!',
'category'=>$category
]);
}
/**
* Display the specified resource.
*
* @param \App\Models\Category $category
* @return \Illuminate\Http\Response
*/
public function show(Category $category)
{
return response()->json($category);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Category $category
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Category $category)
{
$category->fill($request->post())->save();
return response()->json([
'message'=>'Category Updated Successfully!!',
'category'=>$category
]);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Category $category
* @return \Illuminate\Http\Response
*/
public function destroy(Category $category)
{
$category->delete();
return response()->json([
'message'=>'Category Deleted Successfully!!'
]);
}
}
ORA defifäerdeg hinnen routes
an Dateien web.php e api.php . Gitt an den Dossier routes
an öffnen d'web.php an api.php Datei an aktualiséieren déi folgend routes
:
routes/web.php
<?php
Route::get('{any}', function () {
return view('app');
})->where('any', '.*');
routes/api.php
<?php
Route::resource('category',App\Http\Controllers\CategoryController::class)->only(['index','store','show','update','destroy']);
An dësem Schrëtt, gitt op de Verzeechnes Ressource / Meenung, erstellt d'Datei app.blade.php a füügt de folgende Code un app.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">
<meta name="csrf-token" value="{{ csrf_token() }}"/>
<title>Laravel Vue CRUD App</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
An dësem Schrëtt, gitt op den Dossier resource/js
, erstellt den Dossier components
a erstellt d'Dateien wéi follegt:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
app vue et ass d'Haaptdatei vun eiser Vue App. Defimir wäerten fäerdeg router-view an deem Dossier. All Weeër erschéngen an der Datei app vue .
De Fichier opmaachen Welcome.vue
an update de folgende Code an där Datei:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Öffnen der App.vue Datei an update de Code wéi follegt:
<template>
<main>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<router-link to="/" class="navbar-brand" href="#">Laravel Vue Crud App</router-link>
<div class="collapse navbar-collapse">
<div class="navbar-nav">
<router-link exact-active-class="active" to="/" class="nav-item nav-link">Home</router-link>
<router-link exact-active-class="active" to="/category" class="nav-item nav-link">Category</router-link>
</div>
</div>
</div>
</nav>
<div class="container mt-5">
<router-view></router-view>
</div>
</main>
</template>
<script>
export default {}
</script>
Dann opmaachen resource / js / components / category / List.vue
a füügt de folgende Code an der Datei:
<template>
<div class="row">
<div class="col-12 mb-2 text-end">
<router-link :to='{name:"categoryAdd"}' class="btn btn-primary">Create</router-link>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Category</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody v-if="categories.length > 0">
<tr v-for="(category,key) in categories" :key="key">
<td>{{ category.id }}</td>
<td>{{ category.title }}</td>
<td>{{ category.description }}</td>
<td>
<router-link :to='{name:"categoryEdit",params:{id:category.id}}' class="btn btn-success">Edit</router-link>
<button type="button" @click="deleteCategory(category.id)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="4" align="center">No Categories Found.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"categories",
data(){
return {
categories:[]
}
},
mounted(){
this.getCategories()
},
methods:{
async getCategories(){
await this.axios.get('/api/category').then(response=>{
this.categories = response.data
}).catch(error=>{
console.log(error)
this.categories = []
})
},
deleteCategory(id){
if(confirm("Are you sure to delete this category ?")){
this.axios.delete(`/api/category/${id}`).then(response=>{
this.getCategories()
}).catch(error=>{
console.log(error)
})
}
}
}
}
</script>
Duerno, oppen resource /js/components/category/Add.vue
an update de folgende Code an der Datei:
<template>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Add Category</h4>
</div>
<div class="card-body">
<form @submit.prevent="create">
<div class="row">
<div class="col-12 mb-2">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" v-model="category.title">
</div>
</div>
<div class="col-12 mb-2">
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" v-model="category.description">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"add-category",
data(){
return {
category:{
title:"",
description:""
}
}
},
methods:{
async create(){
await this.axios.post('/api/category',this.category).then(response=>{
this.$router.push({name:"categoryList"})
}).catch(error=>{
console.log(error)
})
}
}
}
</script>
Duerno, oppen resource /js/components/category/Edit.vue
an update de folgende Code an der Datei:
<template>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Update Category</h4>
</div>
<div class="card-body">
<form @submit.prevent="update">
<div class="row">
<div class="col-12 mb-2">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" v-model="category.title">
</div>
</div>
<div class="col-12 mb-2">
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" v-model="category.description">
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"update-category",
data(){
return {
category:{
title:"",
description:"",
_method:"patch"
}
}
},
mounted(){
this.showCategory()
},
methods:{
async showCategory(){
await this.axios.get(`/api/category/${this.$route.params.id}`).then(response=>{
const { title, description } = response.data
this.category.title = title
this.category.description = description
}).catch(error=>{
console.log(error)
})
},
async update(){
await this.axios.post(`/api/category/${this.$route.params.id}`,this.category).then(response=>{
this.$router.push({name:"categoryList"})
}).catch(error=>{
console.log(error)
})
}
}
}
</script>
Elo, Dir musst defifäerdeg de Vue routes
, a fir dëst ze maachen, gitt an den Dossier resource / js
, erstellt d'Datei route.js
an update de folgende Code an der Datei:
const Welcome = () => import('./components/Welcome.vue' /* webpackChunkName: "resource/js/components/welcome" */)
const CategoryList = () => import('./components/category/List.vue' /* webpackChunkName: "resource/js/components/category/list" */)
const CategoryCreate = () => import('./components/category/Add.vue' /* webpackChunkName: "resource/js/components/category/add" */)
const CategoryEdit = () => import('./components/category/Edit.vue' /* webpackChunkName: "resource/js/components/category/edit" */)
export const routes = [
{
name: 'home',
path: '/',
component: Welcome
},
{
name: 'categoryList',
path: '/category',
component: CategoryList
},
{
name: 'categoryEdit',
path: '/category/:id/edit',
component: CategoryEdit
},
{
name: 'categoryAdd',
path: '/category/add',
component: CategoryCreate
}
]
Hei hu mir Komponente benotzt lues Luede. vu JS geréiert d'Luede vun Komponenten op eng Manéier lazy
mat Weeër, also op der DOM kënnt Dir Komponente just lueden wann se duerch Weeër gebraucht ginn.
Elo musst Dir all Weeër, Vue-Axios an aner Ofhängegkeeten addéieren.
resource / js / app.js
require('./bootstrap');
import vue from 'vue'
window.Vue = vue;
import App from './components/App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
});
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
Open Terminal a lafen dëse Kommando:
npm run watch
php artisan serve
Abrëll localhost: 8000 am Browser.
BlogInnovazione.it
De Marinesecteur ass eng richteg global wirtschaftlech Muecht, déi op e 150 Milliarde Maart navigéiert ass ...
De leschte Méindeg huet d'Financial Times en Deal mat OpenAI ugekënnegt. FT lizenzéiert säi Weltklass Journalismus ...
Millioune vu Leit bezuelen fir Streaming Servicer, a bezuelen monatlecht Abonnementskäschte. Et ass allgemeng Meenung datt Dir ...
Coveware vu Veeam wäert weider Cyber Erpressung Tëschefall Äntwert Servicer ubidden. Coveware wäert Forensik a Sanéierungsfäegkeeten ubidden ...