thực hiện các chức năng CRUD trong laravel với Vuejs



  • Xin chào mọi người.Vuejs chắc không còn xa lạ gì với dân lập trình nữa nhỉ? vậy nên trong bài này mình sẽ không đi sâu vào tìm hiểu Vuejs là gì nhé.nếu bạn nào muốn tìm hiểu kỹ và chi tiết hơn về Vuejs thì các bạn có thể vào trang Vuejs.org để tìm hiểu.Thực tế Vuejs là một framework dùng để xây dựng giao diện phía ngươi dùng,đang được sử dụng rất nhiều trong thời gian vài năm trở lại đây. Với những ưu điểm như: tài liệu đơn giản, dễ học,tăng tốc độ quá trình học, và đặc biệt Vuejs còn được tích hợp sẵn vào laravel.Có thể nói Vuejs và Laravel là cặp đôi hoàn hảo :)))
    Bài này mình sẽ hướng dẫn các bạn sử dụng các chức năng CRUD trong laravel kết hợp với Vuejs.Đây là những chức năng có thể nói là cơ bản nhất khi sử dụng Laravel với Vuejs.Mình cùng bắt đầu nhé.

    CRUD với Vuejs

    Tạo project laravel mới,cài đặt Vue

    các bạn mở cửa sổ CMD và chạy lệnh sau để khởi tạo project

    composer create-project --prefer-dist laravel/laravel CRUD_VUEJS "5.5.*"

    php artisan make:auth
    

    sau khi khởi tạo xong laravel project thì các bạn chạy lệnh

    npm install

    để cài đặt Vue nhé.
    tiếp đó sẽ chạy lệnh :

    npm install vue-resource --save

    sau khi cài đặt xong vue thì các bạn hãy tạo hoặc thêm những file như sau đây:

    resource/asset/js/app.js

    Vue.component('example', require('./components/ExampleComponent.vue'));
    
    
    Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name = "csrf-token"]').attr('content');
    
    
    import customer from './components/customers.vue'
    const app = new Vue({
        el: '#app',
        components : {
        	customer
        }
    });
    

    resource/asset/components/customers.js

    <template>
        <div>
            <form v-on:submit.prevent="createCustomer" method="post">
                <div v-bind:class="{ 'form-groupm': true, 'has-error' : errors.name }">
                <label>Name</label>
                <input type="text" v-model="customer.name" class="form-control">
                <span class="help-block" v-for= "error in errors.name" v-text="error">{{ error }}</span>
                </div>
                <div v-bind:class="{ 'form-groupm': true, 'has-error' : errors.email }">
                    <label>Email</label>
                    <input type="text" v-model="customer.email" class="form-control">
                    <span class="help-block" v-for= "error in errors.email" v-text="error">{{ error }}</span>
                </div>
                <div v-bind:class="{ 'form-groupm': true, 'has-error' : errors.sex_id }">
                    <label>Sex </label>
                    <select class="form-control" v-model="customer.sex_id">
                        <option v-for="sex in sexes" v-bind:value="sex.id" v-text="sex.sex"></option>
                    </select>
                    <span class="help-block" v-for= "error in errors.sex_id" v-text="error">{{ error }}</span>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary" value="Create New Customer">
                </div>
            </form>
            <table class=" table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Sex</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <customer v-for = "customer in customers" v-bind:customer= "customer" @delete-customer="deleteCustomer"
                    @update-customer="fetchCustomer">
                        
                    </customer>
                </tbody>
                
            </table>
        </div>
    </template>
    
    <script>
        import customer from './customer.vue';
        export default {
            data() {
                return {
                    customers : [],
                    sexes : [],
                    errors : [],
                    customer : {
                        name : '',
                        email : ''
                    }
                }
            },
            components : {
                customer
            },
    
            created() {
                this.fetchCustomer();
                this.fetchSex();
            },
    
            methods : {
                fetchCustomer() {
                    this.$http.get("customer").then(response => { this.customers = response.data.customers });
                 
                },
                fetchSex() {
                    this.$http.get("sex").then(response => { this.sexes = response.data.sexes });
                   
                },
                createCustomer(){
                    this.$http.post('customer/', this.customer).then(response => {
                        this.customers.push(response.data.customer);
                        this.customer = {name: '', email : '', sex_id : '' }
                        if(this.errors) {
                            this.errors=[];
                        }
                        console.log(response.data);
                    }, response=> {
                        this.errors= response.data.errors;
                    });
                },
                deleteCustomer(customer){
                    this.$http.delete("/customer/" + customer.id).then(response => {
                        //ham indexOf la dung de lay vi tri(chi so) cua tung gia tri trong mang
                        let index = this.customers.indexOf(customer);
                        if(confirm('do you really want to delete this customer?')) {
                            this.customers.splice(index,1);
                            console.log(response.data);
                        }
                        
                    })
                }
            }
        }
    </script>
    
    

    resource/asset/components/customer.js

    <template>
        <tr>
            <td>
                <input type="text" v-model="editForm.name" class="form-control" v-if="edit">
                <span v-else>{{ customer.name }}</span>
            </td>
    
            <td>
                <input type="text" v-model="editForm.email" class="form-control" v-if="edit">
                <span v-else>{{ customer.email }}</span>
            </td>
    
            <td>
                <select v-model="editForm.sex_id" v-if="edit" class="form-control">
                    <option v-for="sex in sexes" :value="sex.id" v-text="sex.sex"></option>
                </select>
                <span v-else>{{ customer.sex }}</span>
            </td>
    
            <td>
                <button @click="editCustomer" type="button" class="btn btn-info btn-xs" 
                v-if="!edit">
                Edit</button>
    
                <button @click="cancelCustomer" type="button" class="btn btn-default btn-xs" 
                v-if="edit">
                Cancel</button>
    
                <button type="button" class="btn btn-info" @click="updateCustomer(customer, editForm)" v-if="edit">Update</button>
    
                <button type="button" @click="$emit('delete-customer', customer)" class="btn btn-danger btn-xs" v-if="!edit">Delete</button>
            </td>
        </tr>
    </template>
    
    <script>
        export default {
            props : ['customer'],
            data(){
                return {
                    edit : false,
                    sexes : [],
                    editForm : {
                        name : '',
                        sex_id : '',
                        email : ''
                    }
                }
            },
    
            methods : {
                editCustomer(){
                    this.edit= true;
                    this.editForm.name = this.customer.name;
                    this.editForm.sex_id = this.customer.sex_id;
                    this.editForm.email = this.customer.email;
                    this.$http.get("sex").then(response => { this.sexes = response.data.sexes });
                },
    
                cancelCustomer(){
                    this.edit = false;
                    this.editForm.name='';
                    this.editForm.sex_id='';
                    this.editForm.email='';
                },
    
                updateCustomer(oldCustomer, newCustomer){
                    this.$http.patch("/customer/" + oldCustomer.id, newCustomer).then(response => {
                        this.$emit('update-customer');
                        this.cancelCustomer();
                        console.log(response.data);
                    })
                }
            }
        }
    </script>
    

    resource/views/customer.blade.php

    @extends('layouts.app')
    
    @section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Dashboard</div>
    
                    <div class="panel-body">
                       <customer></customer>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    
    

    app\Http\controllers\ customerController.php.

    <?php
    
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    use App\Customer;
    use App\Sex;
    
    class CustomerController extends Controller
    {
        /**
         * Display a listing of the resource.
         *
         * @return \Illuminate\Http\Response
         */
        public function index()
        {
            $customers = Customer::join('sexes','sexes.id', '=', 'customer.sex_id')
                        ->selectRaw('customer.id,
                            customer.name,
                            customer.email,
                            sexes.id as sex_id,
                            sexes.sex')->get();
            return response()->json(["customers" => $customers]);
        }
    
        /**
         * Show the form for creating a new resource.
         *
         * @return \Illuminate\Http\Response
         */
        public function create()
        {
            //
        }
    
        /**
         * Store a newly created resource in storage.
         *
         * @param  \Illuminate\Http\Request  $request
         * @return \Illuminate\Http\Response
         */
        public function store(Request $request)
        {
            $this->validate($request, [
                    'name' => 'required',
                    'email' => 'required|email'
            ]);
            $customer = Customer::create($request->all());
            return response()->json(['customer' => $customer, 'message' => 'customer is created successfully']);
        }
    
        /**
         * Display the specified resource.
         *
         * @param  int  $id
         * @return \Illuminate\Http\Response
         */
        public function show($id)
        {
            //
        }
    
        /**
         * Show the form for editing the specified resource.
         *
         * @param  int  $id
         * @return \Illuminate\Http\Response
         */
        public function edit($id)
        {
            //
        }
    
        /**
         * Update the specified resource in storage.
         *
         * @param  \Illuminate\Http\Request  $request
         * @param  int  $id
         * @return \Illuminate\Http\Response
         */
        public function update(Request $request, $id)
        {
            $customer = Customer::find($id);
            $customer->update($request->all());
            return response()->json(['message' => 'updated successfully']);
        }
    
        /**
         * Remove the specified resource from storage.
         *
         * @param  int  $id
         * @return \Illuminate\Http\Response
         */
        public function destroy($id)
        {
            Customer::destroy($id);
            return response()->json(['message' => 'deleted successfully']);
        }
    
        public function sex() {
            return response()->json(['sexes' => Sex::all()]);
        }
    }
    

    Model Customer.php.

    <?php
    
    namespace App;
    
    use Illuminate\Database\Eloquent\Model;
    
    class Customer extends Model
    {
        protected $table = 'customer';
        protected $fillable = ['name', 'email', 'sex_id'];
        public $timestamps = false;
    }
    
    

    Model Sex.php

    <?php
    
    namespace App;
    
    use Illuminate\Database\Eloquent\Model;
    
    class Sex extends Model
    {
        
    }
    
    

    routes/web.php

    Route::get('/', function () {
        return view('customer');
    });
    
    Route::resource('customer', 'CustomerController');
    Route::get('sex', '[email protected]');
    
    Auth::routes();
    
    Route::get('/home', '[email protected]')->name('home');
    

    và một csdl thêm 2 table sau:

    bảng customer

    bảng sexes

    .
    Sau khi tạo xong những file trên. ban chạy thử chương trình.
    kết quả bạn nhận được sẽ như thế này:

    chương trình này đã có đầy đủ những chức năng của CRUD và đã sử dụng Vuejs để xây dựng giao diện.các bạn hãy làm theo và luyện tập thêm để hiểu rõ hơn nữa tại sao nó lại như thế nhé.
    Nguồn: Viblo


Hãy đăng nhập để trả lời
 

Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.