La ነጠላ ገጽ መተግበሪያ በዲቢ ላይ የመሠረታዊ ስራዎችን ዑደት እንድናጠናቅቅ ይፈቅድልናል፡ መፍጠር፣ ማንበብ፣ ማዘመን እና መሰረዝ Vue.js , Vue ራውተሮች እና ላራቬል መዋቅር .
በአሁኑ ጊዜ በጣም ታዋቂው የጄኤስ ማዕቀፎች Angular JS እና Vue JS ናቸው. Angular JS እና Vue JS በጣም ለተጠቃሚ ምቹ እና በጣም ታዋቂ የJS ማዕቀፎች ናቸው። ገጹን ሳያድስ እና ኃይለኛ የ jquery ማረጋገጫ የጠቅላላውን ፕሮጀክት ወይም መተግበሪያ አስተዳደር ያቀርባል።
Vue ከላራቬል ጋር አስቀድሞ ታሽጎ ነው የሚመጣው (ከዚህ ጋር የላራቬል ድብልቅ ላይ የተመሰረተ እጅግ በጣም ጥሩ የደራሲ መሳሪያ የድረ-ገጽ ጥቅል ) እና ገንቢዎች ስለ ትራንስፓይለር፣ ኮድ ፓኬጆች፣ የምንጭ ካርታዎች ወይም ሌሎች የዘመናዊ የፊት ግንባር ልማት “ቆሻሻ” ገጽታዎች ሳይጨነቁ ውስብስብ ነጠላ ገጽ መተግበሪያዎችን መገንባት እንዲጀምሩ ያስችላቸዋል።
ፒፕ 7.4
ላራቬል 8.x
MySQL
መጀመሪያ ተርሚናልን ይክፈቱ እና አዲስ የላራቭል ፕሮጀክት ለመፍጠር የሚከተለውን ትዕዛዝ ያሂዱ፡-
composer create-project --prefer-dist laravel/laravel crud-spaወይም ላራቬል ጫኝን እንደ አቀናባሪ አለምአቀፍ ጥገኝነት ከጫኑ፡
laravel new crud-spaከተጫነ በኋላ ወደ ፕሮጄክት ስርወ ማውጫ ይሂዱ፣ የ.env ፋይሉን ይክፈቱ እና የመረጃ ቋቱን ዝርዝር እንደሚከተለው ያዘጋጁ።
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>የፊት-መጨረሻ ጥገኛዎችን ለመጫን የሚከተለውን ትዕዛዝ ያሂዱ:
npm installከዚያ በኋላ, ይጫኑ እይታ , vue-ራውተር e vue-axios . Vue-axios Laravel backend API ለመደወል ጥቅም ላይ ይውላል። በተርሚናል ላይ የሚከተለውን ትዕዛዝ ያሂዱ
npm install vue vue-router vue-axios --saveየምድብ አብነት፣ ፍልሰት እና ተቆጣጣሪ ይፍጠሩ። ለዚያ የሚከተለውን ትዕዛዝ ያሂዱ:
php artisan make:model Category -mcr- mcr ይህ ርዕስ ነጠላ የትዕዛዝ ውህደትን በመጠቀም ሞዴል, ማይግሬሽን እና ተቆጣጣሪ ይፈጥራል.
አሁን፣ የምድብ ፍልሰት ፋይልን ከ የውሂብ ጎታዎች / ፍልሰት እና ኮዱን ወደ ተግባር ይለውጡት ወደ ላይ() :
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}የሚከተለውን ትዕዛዝ በመጠቀም የውሂብ ጎታውን ያዛውሩ።
php artisan migrateአሁን, የ Category.php አብነት ከ ይክፈቱapp/Models እና በፋይሉ ውስጥ ያለውን ኮድ ያርትዑ model ምድብ.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'];
}
?>ከዚያ በኋላ ይክፈቱ ምድብ መቆጣጠሪያ.php እና ኮዱን በመረጃ ጠቋሚ ውስጥ ይጨምሩ ፣ ያከማቹ ፣ ያዘምኑ እና ዘዴዎችን እንደሚከተለው ይሰርዙ።
<?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!!'
]);
}
}
ኦራን defiጨርሳቸው routes በፋይሎች ውስጥ web.php e api.php . ወደ አቃፊ ይሂዱ routes እና የዌብ.php እና api.php ፋይል ይክፈቱ እና የሚከተለውን ያዘምኑ 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']);በዚህ ደረጃ, ወደ ማውጫው ይሂዱ መርጃ / እይታዎች, ፋይሉን ይፍጠሩ app.blade.php እና የሚከተለውን ኮድ ያክሉ 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>በዚህ ደረጃ, ወደ አቃፊው ይሂዱ resource/js, ማህደሩን ይፍጠሩ components እና ፋይሎቹን እንደሚከተለው ይፍጠሩ
View appWelcome.vueCategory/List.vueCategory/Add.vueCategory/Edit.vueመተግበሪያ. vue የVue መተግበሪያችን ዋና ፋይል ነው። Defiእንጨርሰዋለን ራውተር-እይታ በዚያ ፋይል ውስጥ. ሁሉም መንገዶች በፋይሉ ውስጥ ይታያሉ መተግበሪያ. vue .
ፋይሉን ክፈት Welcome.vue እና የሚከተለውን ኮድ በዚያ ፋይል ውስጥ ያዘምኑ።
<template>
<div class="container mt-5">
<div class="col-12 text-center">
<h1>Laravel Vuejs CRUD</h1>
</div>
</div>
</template>
የApp.vue ፋይልን ይክፈቱ እና ኮዱን እንደሚከተለው ያዘምኑ።
<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>ከዚያ ይክፈቱ resource / js / components / category / List.vue እና የሚከተለውን ኮድ በፋይሉ ውስጥ ያክሉ።
<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>ከዚያ በኋላ ይክፈቱ resource /js/components/category/Add.vue እና የሚከተለውን ኮድ በፋይሉ ውስጥ ያዘምኑ፡
<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>ከዚያ በኋላ ይክፈቱ resource /js/components/category/Edit.vue እና የሚከተለውን ኮድ በፋይሉ ውስጥ ያዘምኑ፡
<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>አሁን፣ ማድረግ አለብህ defiመጨረስ Vue routes, እና ይህንን ለማድረግ ወደ አቃፊው ይሂዱ resource / js , ፋይሉን ይፍጠሩ route.js እና የሚከተለውን ኮድ በፋይሉ ውስጥ ያዘምኑ፡
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
}
]እዚህ ክፍሎችን ተጠቅመናል ቀስ ብሎ መጫን. JS ይመልከቱ የንጥረ ነገሮችን ጭነት በአንድ መንገድ ያስተዳድራል። lazy ከመንገዶች ጋር, ስለዚህ በ DOM ላይ ክፍሎችን መጫን የሚችሉት በመንገዶች ውስጥ በሚፈለጉበት ጊዜ ብቻ ነው.
አሁን ሁሉንም ዱካዎች ፣ vue-axios እና ሌሎች ጥገኛዎችን ማከል ያስፈልግዎታል።
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();
ተርሚናልን ይክፈቱ እና ይህን ትዕዛዝ ያሂዱ፡-
npm run watchphp artisan serveአፕሪ localhost: 8000 እ.ኤ.አ. በአሳሹ ውስጥ.
BlogInnovazione.it
Coveware by Veeam የሳይበር ዘረፋ የአደጋ ምላሽ አገልግሎቶችን መስጠቱን ይቀጥላል። Coveware የፎረንሲክስ እና የማገገሚያ ችሎታዎችን ያቀርባል…
የመተንበይ ጥገና የዘይት እና ጋዝ ዘርፉን አብዮት እያደረገ ነው፣ ለዕፅዋት አስተዳደር ፈጠራ እና ንቁ አቀራረብ።…
የዩኬ ሲኤምኤ ስለ ቢግ ቴክ ባህሪ በአርቴፊሻል ኢንተለጀንስ ገበያ ላይ ማስጠንቀቂያ ሰጥቷል። እዚያ…
የሕንፃዎችን ኢነርጂ ውጤታማነት ለማሳደግ በአውሮፓ ህብረት የተቀረፀው የ"ኬዝ አረንጓዴ" ድንጋጌ የህግ አውጭ ሂደቱን በ…