La Applikazzjoni għal Paġna Singola se jippermettilna tlesti ċiklu ta 'operazzjonijiet bażiċi fuq DB: toħloq, aqra, taġġorna u ħassar ma Vue.js , Vue Routers u Qafas Laravel .
Illum il-ġurnata, l-oqfsa JS l-aktar popolari huma Angular JS u Vue JS. Angular JS u Vue JS huma oqfsa JS faċli ħafna u l-aktar popolari. Jipprovdi ġestjoni tal-proġett jew l-applikazzjoni kollha mingħajr ma jġedded il-paġna u validazzjoni qawwija jquery.
Vue tiġi ppakkjata minn qabel ma' Laravel (flimkien ma' Ħallat Laravel , għodda ta' awtorjar eċċellenti bbażata fuq webpack ) u tippermetti lill-iżviluppaturi biex jibdew jibnu applikazzjonijiet kumplessi ta’ paġna waħda mingħajr ma joqogħdu jinkwetaw dwar transpilers, pakketti ta’ kodiċi, mapep tas-sors jew aspetti oħra “maħmuġin” tal-iżvilupp ta’ frontend modern.
7.4 Php
Laravel 8.x
MySQL
L-ewwel, iftaħ Terminal u mexxi l-kmand li ġej biex toħloq proġett ġdid ta 'laravel:
composer create-project --prefer-dist laravel/laravel crud-spa
jew, jekk installajt Laravel Installer bħala dipendenza globali tal-kompożitur:
laravel new crud-spa
Wara l-installazzjoni Mur fid-direttorju tal-għeruq tal-proġett tiegħek, iftaħ il-fajl .env u ssettja d-dettalji tad-database kif ġej:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Mexxi l-kmand li ġej biex tinstalla d-dipendenzi front-end:
npm install
Wara dan, installa fehma , vue-router e vue-axios . Vue-axios se jintuża biex isejjaħ l-API backend Laravel. Mexxi l-kmand li ġej fuq it-terminal:
npm install vue vue-router vue-axios --save
Oħloq mudell ta’ kategorija, migrazzjoni u kontrollur. Mexxi l-kmand li ġej għal dan:
php artisan make:model Category -mcr
-mcr dan is-suġġett se joħloq Mudell, Migrazzjoni u Kontrollur bl-użu ta 'sinteżi ta' kmand wieħed.
Issa, iftaħ il-fajl tal-migrazzjoni tal-kategorija minn databases / migrazzjoni u ibdel il-kodiċi fil-funzjoni up() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Emigra d-database billi tuża l-kmand li ġej:
php artisan migrate
Issa, iftaħ il-mudell Category.php minnapp/Models
u editja l-kodiċi fil-fajl model
Category.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'];
}
?>
Wara dan, tiftaħ CategoryController.php u żid il-kodiċi fl-indiċi, aħżen, aġġorna u ħassar il-metodi kif ġej:
<?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!!'
]);
}
}
Issa defilestihom routes
fil-fajls web.php e api.php . Mur fil-folder routes
u tiftaħ il-fajl web.php u api.php u aġġorna dan li ġej 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']);
F'dan il-pass, mur fid-direttorju riżorsa/veduti, oħloq il-fajl app.blade.php u żid il-kodiċi li ġej għal 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>
F'dan il-pass, mur fil-folder resource/js
, oħloq il-folder components
u oħloq il-fajls kif ġej:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
app. vue huwa l-fajl ewlieni tal-app Vue tagħna. Defise nispiċċaw router-veduta f'dak il-fajl. Il-mogħdijiet kollha se jidhru fil-fajl app. vue .
Iftaħ il-fajl Welcome.vue
u aġġorna l-kodiċi li ġej f'dak il-fajl:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Iftaħ il-fajl App.vue u aġġorna l-kodiċi kif ġej:
<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>
Imbagħad, tiftaħ resource / js / components / category / List.vue
u żid il-kodiċi li ġej fil-fajl:
<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>
Wara dan, tiftaħ resource /js/components/category/Add.vue
u aġġorna l-kodiċi li ġej fil-fajl:
<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>
Wara dan, tiftaħ resource /js/components/category/Edit.vue
u aġġorna l-kodiċi li ġej fil-fajl:
<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>
Issa, trid defispiċċa l- Vue routes
, u biex tagħmel dan mur fil-folder resource / js
, oħloq il-fajl route.js
u aġġorna l-kodiċi li ġej fil-fajl:
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
}
]
Hawnhekk użajna komponenti tagħbija bil-mod. vue JS jimmaniġġja t-tagħbija tal-komponenti b'mod lazy
b'mogħdijiet, għalhekk fuq id-DOM tista 'tagħbija komponenti biss meta jkunu meħtieġa permezz ta' mogħdijiet.
Issa trid iżżid il-mogħdijiet kollha, vue-axios u dipendenzi oħra.
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();
Iftaħ it-terminal u mexxi dan il-kmand:
npm run watch
php artisan serve
April lokalhost: 8000 fil-browser.
BlogInnovazione.it
Is-settur navali huwa qawwa ekonomika globali vera, li navigat lejn suq ta’ 150 biljun...
It-Tnejn li għadda, il-Financial Times ħabbret ftehim mal-OpenAI. FT tagħti liċenzja għall-ġurnaliżmu ta’ klassi dinjija tagħha...
Miljuni ta 'nies iħallsu għal servizzi ta' streaming, iħallsu miżati ta 'abbonament ta' kull xahar. Hija opinjoni komuni li inti...
Coveware minn Veeam se jkompli jipprovdi servizzi ta' rispons għal inċidenti ta' estorsjoni ċibernetika. Coveware se joffri forensiċi u kapaċitajiet ta' rimedju...