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-CMA tar-Renju Unit ħarġet twissija dwar l-imġieba ta 'Big Tech fis-suq tal-intelliġenza artifiċjali. Hemm…
Id-Digriet "Case Green", ifformulat mill-Unjoni Ewropea biex itejjeb l-effiċjenza enerġetika tal-bini, ikkonkluda l-proċess leġiżlattiv tiegħu bi...
Ir-rapport annwali ta' Casaleggio Associati dwar il-Kummerċ elettroniku fl-Italja ppreżentat. Rapport intitolat “AI-Commerce: il-fruntieri tal-Kummerċ Elettroniku bl-Intelliġenza Artifiċjali”.…
Riżultat ta 'innovazzjoni teknoloġika kostanti u impenn għall-ambjent u l-benessri tan-nies. Bandalux jippreżenta Airpure®, tinda...