Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện

web và route api thường như sau:

Route Web Route API
URL Đường dẫn thân thiện với Người dùng cuối. Ví dụ:

  • /lien-he
  • /danh-sach-san-pham
  • /gioi-thieu
Đường dẫn thường phứt tạp, đặt theo quy cách đánh số phiên bản dành cho Lập trình viên sử dụng. Thường có tiền tố / api ở đầu. Ví dụ:

Xác thực Sử dụng FORM Đăng nhập thông thường Sử dụng Token để chứng thực. Thường là JWT Token

Để phân biệt rõ ràng giữa các route cho Web và API, trong Laravel đã phân định sẵn 2 file cấu hình dành riêng cho các loại route này:

  • routes/web.php: là file cấu hình quy định các route dành cho Web
  • routes/api.php: là file cấu hình quy định các route dành cho API. Khi sử dụng các route này thì mặc định đường dẫn URL sẽ có tiền tố /api/url-route-cua-ban

Ví dụ Tạo chức năng thống kê Top 3 sản phẩm mới nhất

Step 1: tạo controller quản lý các API

Thực thi câu lệnh

php artisan make:controller Api/ApiController

Step 2: tạo route API

  • Hiệu chỉnh file routes/api.php
  • Bổ sung code đăng ký route API
name('api.thongke.top3_sanpham_moinhat');

Step 3: viết action lấy dữ liệu thống kê và trả về Response theo định dạng JSON

  • Hiệu chỉnh file app/Http/Controllers/Api/ApiController
  • Bổ sung action thongke_top3_sanpham_moinhat()
join('cusc_loai', 'cusc_loai.l_ma', '=', 'cusc_sanpham.l_ma')
        ->orderBy('l_capNhat')->take(3)->get();

    return response()->json(array(
        'code'  => 200,
        'result' => $ds_top3_newest_loaisanpham,
    ));
}

Step 4: tạo route hiển thị trang Thống kê bên Frontend

  • Hiệu chỉnh file routes/web.php
Route::get('/thongke', 'Frontend\FrontendController@thongke')->name('frontend.pages.thongke');

Step 5: tạo action thongke() hiển thị view trong Frontend

  • Hiệu chỉnh file Frontend/FrontendController.php
public function thongke() {
    // Hiển thị view Thống kê
    return view('frontend.pages.thongke');
}

Step 6: tạo view Thống kê số liệu

  • Tạo file resources/views/frontend/pages/thongke.blade.php
{{-- View này sẽ kế thừa giao diện từ `frontend.layouts.master` --}}
@extends('frontend.layouts.master')

{{-- Thay thế nội dung vào Placeholder `title` của view `frontend.layouts.master` --}}
@section('title')
Thống kê số liệu Shop Hoa tươi - Sunshine
@endsection

{{-- Thay thế nội dung vào Placeholder `custom-css` của view `frontend.layouts.master` --}}
@section('custom-css')

@endsection

{{-- Thay thế nội dung vào Placeholder `main-content` của view `frontend.layouts.master` --}}
@section('main-content')


Thống kê Số liệu Shop Hoa Tươi

Thống kê về Sản phẩm

Top 3 sản phẩm mới nhất
STT Hình đại diện Tên sản phẩm Giá
<% $index + 1 %> <% sp.sp_ten %> <% sp.sp_giaBan | number:0 %>
@endsection {{-- Thay thế nội dung vào Placeholder `custom-scripts` của view `frontend.layouts.master` --}} @section('custom-scripts') @endsection

Bài tập

Viết API thống kê số liệu và hiển thị giao diện bằng AngularJS

  1. Thống kê danh sách các sản phẩm nào đã bán gần hết số lượng (số lượng < 10 xem như gần hết), để Chủ SHOP nhập thêm hàng về?
  2. Hình thức thanh toán phổ biến nhất là gì?
  3. Tìm top 3 Khách hàng mua nhiều nhất trong năm nay để tri ân khách hàng?
  4. Tìm nhà cung cấp không bán được sản phẩm nào trong Hệ thống?

Thực hiện trang Tìm kiếm Sản phẩm theo nhiều tiêu chí (Tên, Giá bán, …)

Gợi ý các bước thực hiện:

Step 1: Tạo API

  1. Tạo API GET tìm kiếm sản phẩm theo nhiều tiêu chí (mỗi tiêu chí là một tham số truyền vào). Ví dụ: ?search_by_name=””&search_by_price=””
  2. Thực hiện action() để tạo câu truy vấn SQL với các tiêu chí có được
  3. Thực thi SQL và trả về dữ liệu JSON

Step 2: Tạo giao diện và sử dụng AngularJS để gởi Request GET đến API lấy dữ liệu và hiển thị giao diện tương ứng.

API nhìn chung đơn thuần là những hàm giải quyết và xử lý, nhận những Request gởi đến từ Client và Response trả về từ Server theo định dạng JSON hoặc XML hoặc định dạng nào đó. Tuy nhiên độc lạ giữa routevà routethường như sau : Để phân biệt rõ ràng giữa cáccho Web và API, trong Laravel đã phân định sẵn 2 file thông số kỹ thuật dành riêng cho những loạinày : Thực thi câu lệnhGợi ý những bước thực thi : Step 1 : Tạo APIStep 2 : Tạo giao diện và sử dụng AngularJS để gởi Request GET đến API lấy tài liệu và hiển thị giao diện tương ứng .

Source: https://mindovermetal.org
Category: Ứng dụng hay

4.5/5 - (2 votes)
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments