La تطبيق صفحة واحدة سيسمح لنا بإكمال دورة العمليات الأساسية على قاعدة البيانات: الإنشاء والقراءة والتحديث والحذف باستخدام Vue.js وأجهزة التوجيه Vue و إطار Laravel .
في الوقت الحاضر ، أكثر أطر عمل JS شيوعًا هي Angular JS و Vue JS. Angular JS و Vue JS هي أطر عمل JS سهلة الاستخدام للغاية وأكثرها شيوعًا. يوفر إدارة المشروع أو التطبيق بأكمله دون تحديث الصفحة والتحقق من صحة jquery قوي.
تأتي Vue معبأة مسبقًا مع Laravel (جنبًا إلى جنب مع لارافيل ميكس ، أداة تأليف ممتازة تعتمد على webpack ) ويسمح للمطورين بالبدء في إنشاء تطبيقات معقدة من صفحة واحدة دون القلق بشأن المحولات أو حزم التعليمات البرمجية أو خرائط المصدر أو الجوانب "القذرة" الأخرى لتطوير الواجهة الحديثة.
فب 7.4
لارافيل 8.x
MySQL
أولاً ، افتح Terminal وقم بتشغيل الأمر التالي لإنشاء مشروع Laravel جديد:
composer create-project --prefer-dist laravel/laravel crud-spa
أو ، إذا قمت بتثبيت Laravel Installer باعتباره تبعية عامة للملحن:
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 , جهاز التوجيه vue e vue-axios . سيتم استخدام Vue-axios لاستدعاء واجهة برمجة تطبيقات Laravel الخلفية. قم بتشغيل الأمر التالي على الجهاز:
npm install vue vue-router vue-axios --save
قم بإنشاء قالب فئة ، وترحيل ، ووحدة تحكم. قم بتشغيل الأمر التالي لذلك:
php artisan make:model Category -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
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'];
}
?>
بعد ذلك ، افتح فئةController.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
وافتح ملف web.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 app
Welcome.vue
Category/List.vue
Category/Add.vue
Category/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
}
]
هنا استخدمنا المكونات تحميل بطيء. vue js يدير تحميل المكونات بطريقة ما lazy
مع المسارات ، لذلك في DOM ، لا يمكنك تحميل المكونات إلا عند الحاجة إليها من خلال المسارات.
أنت الآن بحاجة إلى إضافة جميع المسارات والمحور الرأسية والاعتماديات الأخرى.
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();
افتح Terminal وقم بتشغيل هذا الأمر:
npm run watch
php artisan serve
أبري الاستضافة المحلية: 8000 في المتصفح.
BlogInnovazione.it
يعد القطاع البحري قوة اقتصادية عالمية حقيقية، وقد اتجه نحو سوق يبلغ حجمه 150 مليارًا...
أعلنت صحيفة فاينانشيال تايمز يوم الاثنين الماضي عن صفقة مع OpenAI. "فاينانشيال تايمز" ترخص صحافتها ذات المستوى العالمي...
يدفع الملايين من الأشخاص مقابل خدمات البث، ويدفعون رسوم الاشتراك الشهرية. من الشائع أنك…
سوف تستمر شركة Coveware by Veeam في تقديم خدمات الاستجابة لحوادث الابتزاز السيبراني. ستوفر Coveware إمكانات الطب الشرعي والمعالجة...