Làm cách nào để sử dụng hàm Laravel trong JavaScript?

Trong những năm gần đây, việc cải thiện các trang web và nền tảng Laravel của chúng tôi bằng cách tương tác với người dùng thông qua JavaScript là một thách thức. Đặc biệt khi tính đến khả năng bảo trì và khả năng mở rộng. Trước đây, chúng tôi đã sử dụng jQuery và Bootstrap vì đây là cách thực tế để thực hiện. Sau này, các khung công tác giao diện người dùng (Vue, React) đã thay đổi cách chúng tôi xử lý các nội dung giao diện người dùng. Với sự xuất hiện của Laravel Jetstream (sử dụng Livewire hoặc Inertia. js), mọi thứ đã thay đổi một lần nữa

Trong bài đăng này, tôi sẽ giải thích chi tiết cách tiếp cận hiện tại của chúng tôi

Các thành phần tệp đơn của Blade hoặc Vue?

Tạo một nền tảng Laravel mới với xác thực rất dễ dàng. chỉ cần làm theo các tài liệu và bạn sẽ thiết lập và chạy trong vòng chưa đầy 15 phút. Tuy nhiên, khi bạn bắt đầu tạo các tuyến đường, bộ điều khiển và chế độ xem đầu tiên, câu hỏi sẽ bật lên về cách xử lý nội dung giao diện người dùng. Với Laravel, Laravel mix, gói giúp việc biên dịch nội dung trở nên dễ dàng. Nếu bạn đã xem webpack. pha trộn. js mọi thứ trở nên rõ ràng. bạn viết mã JavaScript của mình trong tệp resource/js/app. js được biên dịch và sao chép vào thư mục chung. Đây là tệp này trong /public/js bạn đưa vào tệp bố cục chính của mình. Nhưng làm thế nào để bạn viết mã ứng dụng này. js và làm cho nó vừa có thể bảo trì vừa có thể mở rộng?

Cách tiếp cận của chúng tôi là tổ chức mã JS trên mỗi trang. Bằng cách sử dụng tính năng nhập động tương đối mới, chúng tôi chỉ tải mã cần thiết cho một trang cụ thể. Giả sử chúng tôi chỉ viết một số mã cho trang chủ, chẳng hạn như nút cuộn lên trên cùng. Đặt mã này vào một mô-đun xuất mã dưới dạng chức năng mặc định.  

Đây là cách chúng tôi sẽ tải mã này trong ứng dụng. js

Ví dụ trên rải một ít JavaScript trên một trang được tạo thông qua một mẫu phiến. Tuy nhiên, khi các tương tác của người dùng trở nên phức tạp hơn trên một trang, chúng tôi sử dụng Vue để tạo một hoặc nhiều thành phần tệp đơn lẻ (SFC). Chúng tôi sử dụng các SFC này làm thành phần html tùy chỉnh trong mẫu phiến hoặc chúng tôi tạo một SFC duy nhất chiếm toàn bộ trang và biến trang đó thành SPA một cách hiệu quả trong trang Laravel. Dưới đây là một ví dụ về cả hai cách tiếp cận

Vue SFC trong mẫu lưỡi cắt

Giả sử chúng ta có một trang đánh giá nơi các đánh giá được hiển thị trong một thanh trượt được tạo bằng Vue. Chúng tôi sẽ thực hiện điều này (trong ứng dụng. js) như vậy

In the blade template we would need to add inside some div with id block_reviews to make it work. The component will only be loaded on the reviews page. We use the excellent package to create the slider, but it’s outside the scope of this post to explain the complete ReviewSlider component.

Vue SPA trên một trang

Suppose we have another page (e.g., contact) with a lot of user interactions. We decided to make it a SPA inside that specific Laravel page. The blade template is very straightforward, it simply contains a single

Hoặc, với tính năng nhập động của thành phần, có vẻ như thế này

Thành phần ContactContainer được gắn vào div#my-app. Điều này có nghĩa là bản thân div được thay thế bằng mẫu của thành phần. Thành phần này hiện xử lý mọi thứ trên trang, ví dụ

• hiển thị biểu mẫu liên hệ và gửi (có xác thực và phản hồi phản hồi)
• hiển thị bản đồ Google với các tùy chọn điều hướng
• hiển thị tiện ích bộ phận trợ giúp để trò chuyện với công ty

Tóm tắt và kết luận

Làm việc với JavaScript trong một dự án Laravel có thể là một thách thức. Dự án cần duy trì khả năng duy trì và mở rộng. Trong bài đăng này, tôi đã chỉ ra một số phương pháp để giữ cho cơ sở mã của bạn sạch sẽ. Hơn nữa, mã được tải động trên mỗi trang giúp cải thiện hiệu suất trang web của bạn. Thông thường có 3 cách để sử dụng JS trong Laravel

1. nhập mô-đun ES6 bằng JS do bạn tự viết
2. nhập Vue SFC và sử dụng nó trong mẫu phiến
3. nhập Vue SFC và chuyển đổi trang thành SPA

Trong tương lai gần, chúng tôi sẽ mở rộng bài đăng này với những trải nghiệm của chúng tôi với gói Laravel Jetstream để tạo nền tảng cho giao diện người dùng

Chúng tôi gọi phương thức điều khiển laravel trong jquery bằng cách sử dụng ajax. Ajax được sử dụng để gửi dữ liệu đến bộ điều khiển và nhận phản hồi. Tạo một tuyến đường cho phương thức và gọi tuyến đường này trong url của ajax

tuyến đường

Tuyến/web. php

<?php
Route::get('users',[UserController::class,'index'])->name('user.list');
Route::get('user-detail',[UserController::class,'detail'])->name('user.detail');

Bộ điều khiển người dùng

Trong UserController, chúng tôi sẽ tạo các phương thức để liệt kê tất cả người dùng và lấy dữ liệu của một người dùng bằng ajax

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;

class UserController extends Controller{
  public function index(){
    $users = User::get();
    return view('user.index', compact('users'));
  }

  public function detail(Request $request){
    $id = $request->id;
    $user = User::find($id);
    return response()->json(['status_code' => '200', 'data' => $user]);
  }
}

Xem tài liệu

Trong tệp xem phiến (người dùng/chỉ mục. lưỡi. php), chúng tôi sẽ gửi yêu cầu ajax để nhận dữ liệu người dùng

<div>
  @foreach($users as $user)
    <div> {{ $user->name }} </div>
    <div class="user_detail" data-id="{{ $user->id }}"> Show detail </div>
  @endforeach
</div>
<script>
  $(".user_detail").on('click', function(){
	var id = $(this).attr("data-id");
	$.ajax({ 
         url: "{{ route('user.detail') }}",
         data: {"id":id},
         type: 'get',
         success: function(result){
            console.log(result)
         }
        });
  });
	
</script>

Anmol Sharma

Tôi là một kỹ sư phần mềm và có kinh nghiệm về các công nghệ phát triển web như php, Laravel, Codeigniter, javascript, jquery, bootstrap và tôi muốn chia sẻ kiến ​​thức sâu rộng của mình qua các blog này

Làm cách nào để sử dụng Laravel trong JavaScript?

Làm cách nào để gọi hàm trợ giúp của Laravel trong JavaScript?

Làm cách nào để gọi hàm điều khiển Laravel từ JavaScript?