La Aikace-aikacen Shafi guda ɗaya zai ba mu damar kammala sake zagayowar ayyuka na asali akan DB: ƙirƙira, karantawa, sabuntawa da sharewa tare da Duba.js , Vue Routers da Tsarin Laravel .
A zamanin yau, shahararrun tsarin JS sune Angular JS da Vue JS. Angular JS da Vue JS suna da abokantaka mai amfani sosai kuma shahararrun tsarin JS. Yana ba da sarrafa duk aikin ko aikace-aikacen ba tare da sabunta shafin ba da ingantaccen ingantaccen jquery.
Vue ya zo an shirya shi tare da Laravel (tare da Laravel Mix , ingantaccen kayan aikin mawallafi bisa ga jakar yanar gizo ) kuma yana ba masu haɓakawa damar fara gina ƙaƙƙarfan aikace-aikacen shafi guda ɗaya ba tare da damuwa game da masu jujjuyawa ba, fakitin lamba, taswirar tushe ko wasu abubuwan “datti” na ci gaban gaba na zamani.
Farashin 7.4
Larabci 8.x
MySQL
Da farko, buɗe Terminal kuma gudanar da umarni mai zuwa don ƙirƙirar sabon aikin laravel:
composer create-project --prefer-dist laravel/laravel crud-spako, idan kun shigar da Laravel Installer azaman abin dogaro na duniya:
laravel new crud-spaBayan shigarwa Je zuwa tushen directory ɗin aikin ku, buɗe fayil ɗin .env kuma saita bayanan bayanan kamar haka:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>Gudun umarni mai zuwa don shigar da abubuwan dogaro na gaba:
npm installBayan haka, shigar Duba , na'ura mai ba da hanya tsakanin hanyoyin sadarwa e wani - axios . Za a yi amfani da Vue-axios don kiran Laravel backend API. Gudanar da umarni mai zuwa akan tashar tashar:
npm install vue vue-router vue-axios --saveƘirƙiri samfurin nau'i, ƙaura, da mai sarrafawa. Gudun umarni mai zuwa don haka:
php artisan make:model Category -mcr- mcr wannan batu zai haifar da Model, Hijira da Mai sarrafawa ta amfani da haɗin umarni guda ɗaya.
Yanzu, buɗe nau'in fayil ɗin ƙaura daga bayanan bayanai / ƙaura kuma maye gurbin lambar a cikin aikin sama() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}Ƙaura ma'ajin bayanai ta amfani da umarni mai zuwa:
php artisan migrateYanzu, buɗe samfurin Category.php dagaapp/Models kuma gyara lambar a cikin fayil ɗin 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'];
}
?>Bayan haka, bude CategoryController.php kuma ƙara lambar a cikin fihirisar, adanawa, sabuntawa da share hanyoyin kamar haka:
<?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 defigama su routes cikin fayiloli yanar gizo.php e api.php . Je zuwa babban fayil routes sannan ka bude web.php da api.php file sannan ka sabunta wadannan 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']);A cikin wannan mataki, je zuwa directory albarkatu / ra'ayoyi, ƙirƙirar fayil ɗin app.blade.php kuma ƙara wannan lambar zuwa 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>A cikin wannan mataki, je zuwa babban fayil resource/js, ƙirƙirar babban fayil ɗin components kuma ƙirƙirar fayilolin kamar haka:
View appWelcome.vueCategory/List.vueCategory/Add.vueCategory/Edit.vueapp. wu shine babban fayil ɗin mu na Vue app. Defizamu gama na'ura mai ba da hanya tsakanin hanyoyin sadarwa-view a cikin wancan fayil. Duk hanyoyin zasu bayyana a cikin fayil ɗin app. wu .
Bude fayil ɗin Welcome.vue kuma sabunta lambar mai zuwa a waccan fayil:
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
Bude fayil ɗin App.vue kuma sabunta lambar kamar haka:
<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>Sa'an nan, bude resource / js / components / category / List.vue kuma ƙara lambar mai zuwa a cikin fayil ɗin:
<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>Bayan haka, bude resource /js/components/category/Add.vue kuma sabunta lambar da ke cikin fayil ɗin:
<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>Bayan haka, bude resource /js/components/category/Edit.vue kuma sabunta lambar da ke cikin fayil ɗin:
<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>Yanzu, dole ne ku defigama da Vue routes, kuma don yin wannan, je zuwa babban fayil resource / js , ƙirƙirar fayil ɗin route.js kuma sabunta lambar da ke cikin fayil ɗin:
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
}
]A nan mun yi amfani da sassan jinkirin lodawa. Ku JS yana sarrafa lodin abubuwan da aka gyara ta hanya lazy tare da hanyoyi, don haka akan DOM zaka iya loda abubuwan da aka gyara kawai lokacin da ake buƙatar su ta hanyoyi.
Yanzu kuna buƙatar ƙara duk hanyoyi, vue-axios da sauran abubuwan dogaro.
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();
Buɗe tasha kuma gudanar da wannan umarni:
npm run watchphp artisan serveAfrilu cikin gida: 8000 a cikin browser.
BlogInnovazione.it
Coveware ta Veeam zai ci gaba da ba da sabis na amsa abin da ya faru ta hanyar intanet. Coveware zai ba da damar bincikar bincike da damar gyarawa…
Kulawa da tsinkaya yana kawo sauyi a fannin mai & iskar gas, tare da sabbin hanyoyin kula da tsirrai.…
Hukumar CMA ta Burtaniya ta ba da gargadi game da halayen Big Tech a cikin kasuwar bayanan sirri. Akwai…
Dokar "Green Houses" da Tarayyar Turai ta tsara don inganta ingantaccen makamashi na gine-gine, ta kammala aikinta na majalisar tare da…