Laravel kết hợp với Vue.js tạo ra ứng dụng web tuyệt vời

Các ứng dụng web ngày càng phong phú, đa dạng và luôn đưa trải nghiệm người dùng lên tiêu chí hàng đầu, nhờ vậy các Javascript framework được ưu chuộng trong việc kết hợp xây dựng giao diện kể đến như React, Angular, Ember, Knockout... Gần đây, Vue.js nổi lên như một hiện tượng mới, được Laravel phiên bản từ 5.3 gợi ý là một Javascript framework mặc định, ngay cả Gitlab một hệ thống quản lý mã nguồn git cũng chọn Vue.js cho các ứng dụng web. Trong bài viết này chúng ta sẽ tạo một ứng dụng đơn giản đưa dữ liệu vào CSDL và hiển thị dữ liệu đó trên ứng dụng web. Thông thường, chúng ta gọi đến các controller và trả về view cùng với dữ liệu hoặc sử dụng ajax, bài viết sẽ hướng dẫn thực hiện theo cách mà Vue.js cung cấp.

Cài đặt Vue.js

Laravel sử dụng npm để cài đặt các thư viện javascript, css như Vue.js, bootstrap...

npm install

Sau khi cài đặt các gói cần thiết bạn sẽ thấy một thư mục node-modules trong thư mục gốc của ứng dụng và file app.js trong thư mục resources/assets/js sẽ sử dụng để viết mã Vue.js.

Ứng dụng web sử dụng Vue.js

Ứng dụng quản lý tên sinh viên sẽ được sử dụng để demo cho bạn đọc thấy cách thức sử dụng Vue.js trong dự án Laravel. Ứng dụng có một trường để nhập tên các sinh viên, một nút Nhập liệu, phần dưới của ứng dụng là danh sách các sinh viên đã có sẵn trong CSDL, có thể cập nhật danh sách này bằng cách thêm hoặc xóa sinh viên, toàn bộ ứng dụng sẽ sử dụng Vue.js. Form nhập liệu như sau:

<div class="form-group row">
    <div class="col-md-8">
        <input type="text" class="form-control" id="name" name="name" v-model="newItem.name" placeholder="Nhập tên sinh viên" required="">
    </div>
    <div class="col-md-4">
        <button class="btn btn-primary" @click.prevent="createItem()" id="name" name="name"><span class="glyphicon glyphicon-plus"></span> Nhập liệu</button> 
    </div>
</div>

Trong đoạn code form nhập liệu trên chúng ta thấy nút Nhập liệu sử dụng @click.prevent="createItem() và sẽ gọi đến phương thức createItem() được khai báo trong /resources/assets/js/app.js. Đọc và hiển thị dữ liệu sinh viên

<div class="table table-borderless" id="table">
   <table class="table table-borderless" id="table">
        <thead>
            <tr>
                <th>Mã</th>
                <th>Tên sinh viên</th>
                <th>Hành động</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in items">
                <td>@{{ item.id }}</td>
                <td>@{{ item.name }}</td>
                <td>Xóa</td>
            </tr>
        </tbody>
    </table>
</div>

Đoạn mã trên sử dụng v-for để tạo ra danh sách sinh viên hiển thị trong một bảng, items chứa tất cả dữ liệu và chúng ta sẽ lấy từng item để xử lý. items sẽ được khai báo và xử lý trong /resources/assets/js/app.js. Phần mã Vue.js Đầu tiên khai báo các thành phần HTML sẽ ảnh hưởng bởi code này.

const app = new Vue({
    el: '#vue-wrapper',

Chúng ta thiết lập dữ liệu cho Vue

  data: {
    items: [],
    hasError: true,
    hasDeleted: true,
    newItem : {'name':''}
  },

items sẽ chứa tất cả các bản ghi sinh viên mà cấu trúc mỗi bản ghi sẽ có trong newItem. Ở đây chúng ta chỉ lưu trữ tên sinh viên, bạn có thể thêm vào các thông tin như ngày sinh, mã lớp...

newItem : {'name':'birthday':'class'}

hasError, hasDeleted sẽ sử dụng để hiển thị lỗi khi người dùng nhập dữ liệu trống hoặc khi xóa một bản ghi sinh viên thành công. Tiếp theo chúng ta sẽ viết các phương thức xử lý việc thêm và xóa các bản ghi.

   methods : {
        getVueItems: function(){
            axios.get('/vueitems').then(response => {
            this.items = response.data;
            });
        },
        createItem: function(){
        },
        deleteItem: function(){
        };
      },

getVueItems sẽ gọi một method để lấy dữ liệu axios.get('/vueitems') nó sẽ gọi đến đường dẫn /vueitems được định nghĩa trong routes/web.php.

Route::get ( '/vueitems', 'MainController@readItems' );

phương thức readItems trong MainController thực hiện lấy toàn bộ dữ liệu sinh viên từ CSDL ra:

    public function readItems() {
        $data = Student::all ();
        return $data;
    }

Chúng ta thấy this.item = response.data, như vậy dữ liệu trả về từ đường dẫn /vueitems sẽ được phân tích và đưa vào items và hiện tại items đã chứa toàn bộ dữ liệu sinh viên. Như vậy phần hiển thị danh sách sinh viên đã xong. Tiếp đến chúng ta đi vào phần tạo mới một bản ghi. Nếu tên sinh viên chưa nhập và nhấn nút Nhập liệu chúng ta sẽ hiển thị một thông báo lỗi

<p class="text-center alert alert-danger" v-bind:class="{ hidden: hasError }">Nhập tên sinh viên!</p>

Nếu xóa một bản ghi sinh viên thành công, chúng ta sẽ hiển thị một thông báo hoàn thành

<p class="text-center alert alert-success" v-bind:class="{ hidden: hasDeleted }">Xóa bản ghi thành công!</p>

Phần mã vue xử lý thêm và xóa bản ghi như sau:

createItem: function(){
    var input = this.newItem;
    if(input['name'] == ''){
        this.hasError = false;
        this.hasDeleted = true;
    }else{
        this.hasError = true;
        axios.post('/vueitems',input).then(response => {
            this.newItem = {'name':''};
            this.getVueItems();
        });
        this.hasDeleted = true;
    }
},
deleteItem: function(item){
    axios.post('/vueitems/'+item.id).then((response) => {
        this.getVueItems();
        this.hasError = true,
        this.hasDeleted = false
    });
},

Khi các message rỗng, chúng ta thêm class hidden vào trong thẻ p ở phần thông báo để ẩn đi. Xử lý route trong routes/web.php như sau:

Route::post ( '/vueitems/{id?}', 'MainController@processItem' );

Phương thức processItem trong MainController sẽ như sau:

public function processItem($id = null) {
    if($id == null){
        // Insert new student to DB
        $data = new Student();
        $data->name = Input::get('name');
        $data->save ();
        return $data;
    }else{
        // Delete this student from DBo
        $data = Student::find($id)->delete();
    }
}

Ok, vậy là ứng dụng của chúng ta đã xong, việc kết hợp giữa Laravel và Vue.js thật đơn giản phải không? Các bạn hãy xem ứng dụng demo tại đây và chúng ta sẽ đến phần lý do tại sao Laravel đề xuất Vue.js là javascript framework mặc định.

Tại sao Laravel chọn Vue.js?

Xem xong phần demo ứng dụng web sử dụng Vue.js bạn có thể thấy ứng dụng chạy rất nhẹ nhàng, mượt đem lại một trải nghiệm tốt cho người dùng. Chúng ta có thể tổng kết lại các lý do nên sử dụng Vue.js như sau:

• Vue.js là một framework rất đơn giản để tiếp cận, không có mớ khái niệm không thống nhất như Angular.
• Code javascript trong Vue.js đơn giản và ngắn gọn.
• Vue.js tạo ra những ứng dụng chạy rất mượt, tăng cường trải nghiệm cho người sử dụng.

Trong thời gian tới, Vue.js sẽ là một trong những Javascript framework tốt nhất không những chỉ cho Laravel mà bất kỳ PHP framework nào cũng có thể kết hợp. Chúng tôi cũng sẽ quay lại với loạt bài Học Vue.js trong 3 ngày.

---

CÁC BÀI VIẾT KHÁC