La Ununura Paĝa Apliko permesos al ni plenumi ciklon de bazaj operacioj sur DB: krei, legi, ĝisdatigi kaj forigi per Vue.js , Vue Routers kaj Laravel Kadro .
Nuntempe, la plej popularaj JS-kadroj estas Angular JS kaj Vue JS. Angular JS kaj Vue JS estas tre afablaj kaj plej popularaj JS-kadroj. Ĝi provizas administradon de la tuta projekto aŭ aplikaĵo sen refreŝigado de la paĝo kaj potenca jQuery-validigo.
Vue venas antaŭpakita kun Laravel (kune kun Laravel Miksaĵo , bonega aŭtora ilo bazita sur retpako ) kaj permesas al programistoj komenci konstrui kompleksajn unupaĝajn aplikojn sen zorgi pri transpililoj, kodpakaĵoj, fontmapoj aŭ aliaj "malpuraj" aspektoj de moderna fasanta evoluado.
Php 7.4
Laravel 8.x
MySQL
Unue, malfermu Terminalon kaj rulu la sekvan komandon por krei novan laravel-projekton:
composer create-project --prefer-dist laravel/laravel crud-spa
aŭ, se vi instalis Laravel Installer kiel komponisto tutmonda dependeco:
laravel new crud-spa
Post instalado Iru al via projekta radika dosierujo, malfermu la .env-dosieron kaj agordu la datumbazajn detalojn jene:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Rulu la sekvan komandon por instali la frontfinajn dependecojn:
npm install
Post tio, instalu vue , vue-router e vue-axios . Vue-axios estos uzata por voki la Laravel-backend API. Rulu la sekvan komandon en la terminalo:
npm install vue vue-router vue-axios --save
Kreu kategoriŝablonon, migradon kaj regilon. Rulu la sekvan komandon por tio:
php artisan make:model Category -mcr
-mcr ĉi tiu temo kreos Modelon, Migradon kaj Regilon uzante ununuran komandan sintezon.
Nun, malfermu la kategorian migradan dosieron de datumbazoj / migrado kaj anstataŭigu la kodon en la funkcion supren () :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Migru la datumbazon per la sekva komando:
php artisan migrate
Nun, malfermu la ŝablonon Category.php deapp/Models
kaj redakti la kodon en la dosiero model
Kategorio.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'];
}
?>
Post tio, malfermu KategorioController.php kaj aldonu la kodon en la indekso, konservu, ĝisdatigu kaj forigu metodojn jene:
<?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 defifini ilin routes
en dosieroj retejo.php e api.php . Iru al dosierujo routes
kaj malfermu la web.php kaj api.php-dosieron kaj ĝisdatigu la jenajn 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']);
En ĉi tiu paŝo, iru al la dosierujo rimedo/vidoj, kreu la dosieron app.blade.php kaj aldonu la sekvan kodon 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>
En ĉi tiu paŝo, iru al la dosierujo resource/js
, kreu la dosierujon components
kaj kreu la dosierojn jene:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
app. vue ĝi estas la ĉefa dosiero de nia Vue-aplikaĵo. Defini finos enkursigilo-vido en tiu dosiero. Ĉiuj vojoj aperos en la dosiero app. vue .
Malfermu la dosieron Welcome.vue
kaj ĝisdatigu la sekvan kodon en tiu dosiero:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Malfermu la dosieron App.vue kaj ĝisdatigu la kodon jene:
<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>
Poste, malfermu resource / js / components / category / List.vue
kaj aldonu la sekvan kodon en la dosieron:
<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>
Post tio, malfermu resource /js/components/category/Add.vue
kaj ĝisdatigu la sekvan kodon en la dosiero:
<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>
Post tio, malfermu resource /js/components/category/Edit.vue
kaj ĝisdatigu la sekvan kodon en la dosiero:
<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>
Nun, vi devas defifini la Vue routes
, kaj por fari tion iru al la dosierujo resource / js
, kreu la dosieron route.js
kaj ĝisdatigu la sekvan kodon en la dosiero:
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
}
]
Ĉi tie ni uzis komponantojn malrapida ŝarĝo. vue JS administras la ŝarĝon de komponantoj en maniero lazy
kun vojoj, do sur la DOM vi povas ŝarĝi komponantojn nur kiam ili estas bezonataj tra vojoj.
Nun vi devas aldoni ĉiujn vojojn, vue-axios kaj aliajn dependecojn.
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();
Malfermu terminalon kaj rulu ĉi tiun komandon:
npm run watch
php artisan serve
Aprilo loka loko: 8000 en la retumilo.
BlogInnovazione.it
La maramea sektoro estas vera tutmonda ekonomia potenco, kiu navigis al merkato de 150 miliardoj...
Pasintlunde, la Financial Times anoncis interkonsenton kun OpenAI. FT licencas sian mondklasan ĵurnalismon...
Milionoj da homoj pagas por streaming-servoj, pagante monatajn abonkotizojn. Estas komuna opinio, ke vi...
Coveware de Veeam daŭre liveros servojn de respondaj incidentoj pri ciberĉantaĝo. Coveware ofertos krimmedicinajn kaj solvajn kapablojn...