Crud App ب laravel & vuejs الجزء الثاني


فهاد الجزء الثاني من Crud App ب laravel & vuejs غادي نكملو الملفات لي بقاونا ولي غادي تكون فيهم الصفحة الرئيسية لي غادي تكون فيها الفورم ديالنا وliste ديال les livres ولي déja وشفناها فالملف Book.vue كما غادي نشوفو الملفات لي غادي يكونوا فيهم les routes ديالنا ولي غادي يمكنونا باش نفدوا جميع les operations لي شفنا.

نظرة سريعة بالفيديو

1- الملف app.js

غادي نمشي للمجلد resources/assets/js فيه كاين ملف سميتو app.js غادي ندير عليه تغييرات كن instancier l'objet من la classe Vue وكنعطيها ل id app ومنبعد غادي نعطيها ل component لي غادي ترتبط به ولي هو الملف Book.vue   الكود ديال الملف هو :

                                
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('book', require('./components/Book.vue'));

const app = new Vue({
    el: '#app'
});

                            

2- الملف welcome.blade.php

فالمجلد views كاين الملف welcome.blade.php هادا هو الصفحة الرئيسية ديالنا فهنا عندنا روابط js و css  منبعد عندنا div عطينها ل id app ولي هو لي ديكلارينا فالملف السابق من بعد فوسط div كنزيد الملف Book.vue فقط باستعمال tag book وهادي من ميزات vuejs الكود ديال الملف هو:

                                <!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="csrf-token" content="{{csrf_token()}}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Books Store</title>
        <!-- Fonts -->
        <link href="{{URL::to('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div id="app">
                    <book></book>
                </div>
            </div>
        </div>
    <script src="{{URL::to('js/app.js')}}"></script>
    </body>
</html>

                            

3- الملف api.php

كنمشي للمجلد routes فيه كاين الملف api.php ولي فيه كنحدد الروابط لي كنا خدمنا بهم فالملف Book.vue ف la partie ديال axios فهنا عندنا الروابط لي كتمكن من استرجاع les livres وتعديلهم ومسحهم ولي هي des opérations ديال laravel عادية الكود ديال الملف هو:

                                <?php

use Illuminate\Http\Request;
use App\Book;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::group(['middleware'=>'api'],function(){
    //get all books 
    Route::get('/books',function(){
        return Book::latest()->orderBy('created_at','DESC')->get();
    });
    //get single book
    Route::get('/books/{id}',function($id){
        return Book::findOrFail($id);
    });
    //add books
    Route::post('/books/store',function(Request $request){
        return Book::create(['title'=>$request->title,'description'=>$request->description,'author'=>$request->author]);
    });
    //update book
    Route::patch('/books/{id}',function(Request $request,$id){
        Book::findOrFail($id)->update(['title'=>$request->title,'description'=>$request->description,'author'=>$request->author]);
    });
    //delete book
    Route::delete('/books/{id}',function($id){
        Book::findOrFail($id)->delete();
    });

});

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

                            

4- الملف web.php

دائما فالمجلد routes كاين الملف web.php فيه route لي كيدي للصفحة الرئيسية ولي هو:

                                    <?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد