La Single Page Application ichatibvumira kupedzisa kutenderera kwekutanga mashandiro paDB: gadzira, verenga, gadziridza uye bvisa nayo Wedu.js , Vue Routers uye Laravel Framework .
Mazuva ano, anonyanya kufarirwa JS masisitimu ndeye Angular JS uye Vue JS. Angular JS uye Vue JS zvakanyanya mushandisi-ane hushamwari uye anonyanya kufarirwa JS masimusi. Inopa manejimendi eiyo yese purojekiti kana application pasina kuzorodza peji uye ine simba jquery kusimbiswa.
Vue inouya isati yarongedzerwa neLaravel (pamwe chete ne Laravel Mix , chishandiso chakanakisa chekunyora chakavakirwa pa webpack ) uye inobvumira vanogadzira kuti vatange kuvaka zvikumbiro zvepeji yakaoma pasina kunetseka nezve transpilers, kodhi mapakeji, tsime mepu kana zvimwe "zvakasviba" zvemazuva ano zvemberi kusimudzira.
Php 7.4 XNUMX
Laravel 8.x
MySQL
Kutanga, vhura Terminal uye mhanya unotevera kuraira kuti ugadzire purojekiti nyowani yelaravel:
composer create-project --prefer-dist laravel/laravel crud-spa
kana, kana iwe wakaisa Laravel Installer semunyori wepasi rose kuvimba:
laravel new crud-spa
Mushure mekuisa Enda kune yako purojekiti dhairekitori, vhura iyo .env faira uye isa iyo dhatabhesi zvinyorwa sezvinotevera:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
Mhanya unotevera kuraira kuti uise kumberi-kumagumo kutsamira:
npm install
Pashure paizvozvo, install kuona , vue-router e vue-axios . Vue-axios ichashandiswa kufonera Laravel backend API. Mhanya unotevera kuraira pane terminal:
npm install vue vue-router vue-axios --save
Gadzira chikamu template, kutama, uye controller. Mhanya unotevera kuraira kuti:
php artisan make:model Category -mcr
-mcr musoro uyu uchagadzira Model, Migration uye Controller uchishandisa imwechete command synthesis.
Zvino, vhura chikamu chekufambisa faira kubva databases / kutama uye shandura kodhi mukushanda kumusoro () :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Tamisa dhatabhesi uchishandisa murairo unotevera:
php artisan migrate
Zvino, vhura iyo Category.php template kubvaapp/Models
uye gadzirisa kodhi mufaira 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'];
}
?>
Mushure mazvo, vhura CategoryController.php uye wedzera iyo kodhi mune index, chitoro, gadziridza uye kudzima nzira sezvinotevera:
<?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!!'
]);
}
}
ikozvino defivapedze routes
mumafaira web.php e api.php . Enda kune folda routes
uye vhura web.php uye api.php faira uye uvandudze zvinotevera 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']);
Mune ino nhanho, enda kune dhairekitori zviwanikwa/maonero, gadzira faira app.blade.php uye wedzera kodhi inotevera ku 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>
Munhanho iyi, enda kune folda resource/js
, gadzira folda components
uye gadzira mafaira nenzira inotevera:
View app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/Edit.vue
app.vue ndiyo faira huru yeVue app yedu. Defitichapedza router-kuona mune iyo faira. Nzira dzese dzichaonekwa mufaira app.vue .
Vhura faira Welcome.vue
uye gadziridza kodhi inotevera mufaira iro:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Vhura iyo App.vue faira uye gadzirisa kodhi sezvizvi:
<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>
Zvadaro, vhura resource / js / components / category / List.vue
uye wedzera kodhi inotevera mufaira:
<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>
Mushure mazvo, vhura resource /js/components/category/Add.vue
uye gadzirisa kodhi inotevera mufaira:
<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>
Mushure mazvo, vhura resource /js/components/category/Edit.vue
uye gadzirisa kodhi inotevera mufaira:
<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>
Zvino, unofanira defikupedza the Vue routes
, uye kuita izvi enda kune folda resource / js
, gadzira faira route.js
uye gadzirisa kodhi inotevera mufaira:
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
}
]
Pano tashandisa zvikamu kunonoka kurodha. Ona JS inotarisira kurodha kwezvikamu nenzira lazy
nemakwara, saka paDOM unogona kurodha zvikamu chete kana zvichidikanwa kuburikidza nemakwara.
Iye zvino iwe unofanirwa kuwedzera nzira dzese, vue-axios uye zvimwe zvinotsamira.
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();
Vhura terminal uye mhanya uyu kuraira:
npm run watch
php artisan serve
Kubvumbi yemunohost: 8000 mubrowser.
BlogInnovazione.it
Kufanofungidzira kugadzirisa kuri kushandura chikamu cheoiri & gasi, nemaitiro matsva uye akasimba ekutarisira zvidyarwa.…
Iyo UK CMA yakapa yambiro nezvemaitiro eBig Tech mumusika wehungwaru hwekugadzira. Ikoko…
Chirevo che "Case Green", chakagadzirwa neEuropean Union kuti chiwedzere kushanda nesimba kwezvivakwa, chapedza hurongwa hwayo hwemutemo ne…
Casaleggio Associati mushumo wepagore weEcommerce muItaly wakapihwa. Chirevo chine musoro unoti "AI-Commerce: miganhu yeEcommerce neArtificial Intelligence".…