Trong hướng dẫn này, bạn sẽ học cách xây dựng ứng dụng một trang. Tôi sẽ hướng dẫn bạn quy trình từng bước, sử dụng các công nghệ tiên tiến như Laravel 9, Jetstream, Vuejs, Inertiajs, MySQL, Tailwind CSS và Docker
Bắt đầu nào
Những gì bạn cần để làm theo hướng dẫn này
Để làm theo, bạn sẽ cần
- một máy tính
- biết cách cài đặt phần mềm
- hiểu biết cơ bản về HTML, CSS, JavaScript và PHP
- kiến thức về ít nhất một khung JavaScript và hiểu biết về mẫu thiết kế MVC
Hướng dẫn này được sắp xếp thành 10 chương và dựa trên một chuỗi mã hóa trực tiếp mà tôi ghi lại. Chuỗi mã hóa trực tiếp hoàn toàn không được viết sẵn, vì vậy sẽ có lỗi và sự cố mà bạn sẽ không tìm thấy trong hướng dẫn này
Bạn có thể tìm thấy danh sách phát đầy đủ ở cuối bài viết này
Mọi thứ ở đây chỉ nên hoạt động, nhưng nếu cảm thấy không thoải mái, hãy yêu cầu trợ giúp bằng cách tham gia cộng đồng của tôi trên Slack. Ở đó bạn có thể chia sẻ đoạn mã và trò chuyện trực tiếp với tôi
Mục lục
Chúng ta đang sử dụng công nghệ gì?
Trước tiên, hãy xem qua các công cụ khác nhau mà chúng tôi sẽ sử dụng trong dự án này
docker
Docker là một tập hợp nền tảng dưới dạng sản phẩm dịch vụ sử dụng ảo hóa cấp hệ điều hành để phân phối phần mềm trong các gói được gọi là bộ chứa
Để đơn giản hóa khái niệm này, Docker cho phép bạn đóng gói các ứng dụng và phần phụ thuộc trong một vùng chứa
Một ứng dụng được đóng gói cho phép bạn có một môi trường phát triển linh hoạt để bạn có thể chạy các ứng dụng khác nhau mà không phải lo lắng về các phụ thuộc, yêu cầu của chúng và xung đột giữa các phiên bản khác nhau. Ví dụ, bạn có thể dễ dàng chạy các ứng dụng yêu cầu hai phiên bản PHP và MySQL khác nhau
Mỗi thành viên trong nhóm có thể nhanh chóng tái tạo cùng một môi trường ứng dụng của bạn bằng cách chạy cùng một cấu hình của vùng chứa
Nếu bạn muốn tìm hiểu thêm về Docker, Tài liệu của nó là một nơi tuyệt vời để bắt đầu
Đây cũng là Sổ tay về các thông tin cần thiết về Docker, vì vậy bạn có thể thực hành các kỹ năng của mình
mysql
MySQL là một hệ thống quản lý cơ sở dữ liệu quan hệ mã nguồn mở. Bạn có thể sử dụng nó để tổ chức dữ liệu thành một hoặc nhiều bảng với dữ liệu có thể liên quan đến nhau
Chúng tôi cần lưu trữ dữ liệu ở đâu đó và đây là nơi MySQL phát huy tác dụng
Đây là Tài liệu nếu bạn muốn đọc thêm. Đây là một khóa học hoàn toàn miễn phí về MySQL nếu bạn muốn tìm hiểu sâu hơn
ấu trùng
Laravel là một framework web PHP mã nguồn mở, miễn phí giúp bạn phát triển các ứng dụng web theo mô hình kiến trúc model–view–controller
Laravel là một framework PHP tuyệt vời mà bạn có thể sử dụng để tạo các ứng dụng web theo yêu cầu
Đây là Tài liệu về Laravel để biết thêm thông tin và đây là khóa học dựa trên dự án đầy đủ để giúp bạn tìm hiểu về Laravel
Cánh buồm Laravel
Laravel Sail là một giao diện dòng lệnh nhẹ để tương tác với môi trường phát triển Docker mặc định của Laravel
Sail cung cấp một điểm khởi đầu tuyệt vời để xây dựng ứng dụng Laravel bằng PHP, MySQL và Redis mà không yêu cầu kinh nghiệm Docker trước đó
Thông thường, việc tạo môi trường phát triển để xây dựng các ứng dụng như vậy có nghĩa là bạn phải cài đặt phần mềm, ngôn ngữ và khung trên máy cục bộ của mình – và điều đó rất tốn thời gian. Nhờ có Docker và Laravel Sail, chúng tôi sẽ hoạt động ngay lập tức
Laravel Sail được hỗ trợ trên macOS, Linux và Windows thông qua WSL2
Đây là Tài liệu nếu bạn muốn đọc nó
Laravel Jetstream
Khi xây dựng ứng dụng web, bạn có thể muốn cho phép người dùng đăng ký và đăng nhập để sử dụng ứng dụng của mình. Đó là lý do tại sao chúng tôi sẽ sử dụng Jetstream
Laravel Jetstream là bộ khởi động ứng dụng được thiết kế đẹp mắt dành cho Laravel và cung cấp điểm khởi đầu hoàn hảo cho ứng dụng Laravel tiếp theo của bạn
Nó sử dụng Laravel Fortify để triển khai tất cả logic xác thực mặt sau
Dưới đây là các tài liệu
Vuejs
Vue. js là một khung JavaScript giao diện người dùng ViewModel mô hình nguồn mở để xây dựng giao diện người dùng và các ứng dụng một trang
Vue là một framework tuyệt vời mà bạn có thể sử dụng độc lập để xây dựng các ứng dụng một trang, nhưng bạn cũng có thể sử dụng nó với Laravel để xây dựng một thứ gì đó tuyệt vời
Đây là Tài liệu Vue nếu bạn muốn đọc lên. Và đây là một khóa học Vue tuyệt vời để giúp bạn bắt đầu
quán tính JS
Quán tính là chất kết dính giữa Laravel và Vuejs mà chúng ta sẽ sử dụng để xây dựng các ứng dụng một trang hiện đại bằng cách sử dụng định tuyến phía máy chủ cổ điển
Bạn có thể tìm hiểu thêm về nó trong Tài liệu tại đây
Gió cùng chiều
Tailwind CSS là một khung CSS tiện ích đầu tiên được đóng gói với các lớp như flex, pt-4, text-center và rotate-90 mà bạn có thể sử dụng để tạo bất kỳ thiết kế nào, trực tiếp trong phần đánh dấu của mình
Chúng tôi sẽ sử dụng nó trong dự án này để xây dựng thiết kế của chúng tôi. Đây là hướng dẫn nhanh để giúp bạn thiết lập và sử dụng nếu bạn chưa quen với Tailwind
Cách thiết lập máy của bạn
Để làm theo mã hóa trực tiếp của tôi [và hướng dẫn này], bạn sẽ cần cài đặt máy tính để bàn Docker trên máy của mình. Nếu bạn đang sử dụng Windows, bạn cũng cần bật WSL trong cài đặt hệ thống của mình
Truy cập trang bắt đầu Docker để cài đặt Docker Desktop
Nếu bạn đang dùng Windows, hãy bật WSL2 bằng cách thực hiện theo các bước tại đây
Nếu bạn gặp bất kỳ sự cố nào, vui lòng liên hệ hoặc tham gia cộng đồng của tôi trên Slack để được trợ giúp
Cài đặt Laravel với Sail
Nếu bạn đã cài đặt thành công Docker Desktop trên máy của mình, chúng ta có thể mở terminal và cài đặt Laravel 9
Mở một cửa sổ đầu cuối và duyệt đến một thư mục mà bạn muốn giữ dự án của mình. Sau đó chạy lệnh bên dưới để tải xuống các tệp Laravel mới nhất. Lệnh sẽ đặt tất cả các tệp vào trong một thư mục có tên my-example-app, bạn có thể chỉnh sửa theo ý muốn
# Download laravel
curl -s "//laravel.build/my-example-app" | bash
# Enter the laravel folder
cd my-example-app
Triển khai Laravel trên Docker bằng lệnh sail npm install
sail npm run dev
7
sail npm install
sail npm run dev
Với Docker Desktop được thiết lập và chạy, bước tiếp theo là khởi động Laravel sail để xây dựng tất cả các vùng chứa cần thiết để chạy ứng dụng của chúng ta cục bộ
Chạy lệnh sau từ thư mục chứa tất cả các tệp Laravel đã được tải xuống
vendor/bin/sail up
Nó sẽ mất một phút. Sau đó truy cập http. // localhost và bạn sẽ thấy ứng dụng Laravel của mình
Nếu bạn chạy
sail npm install
sail npm run dev
ERROR: Service 'laravel.test' failed to build:
Cách xây dựng ứng dụng với Laravel 9, Laravel Sail, Jetstream, Inertia và Vue 3
Trong phần này, chúng ta sẽ xác định lộ trình cơ bản, cài đặt Laravel 9 với Laravel Sail, Run sail và xây dựng các thùng chứa
Tôi cũng sẽ đưa bạn tham quan Laravel Sail và lệnh buồm
Sau đó, chúng tôi sẽ cài đặt các tệp Jetstream và giàn giáo Vue và Inertia, đồng thời xem xét các tệp và các tính năng có sẵn
Tiếp theo, chúng tôi sẽ điền cơ sở dữ liệu của mình và thêm giao diện người dùng do Jetstream cung cấp để đăng ký tài khoản và đăng nhập vào ứng dụng Laravel mới
Cuối cùng, chúng ta sẽ xem xét bảng điều khiển Jetstream và các Thành phần Quán tính/Vue, sau đó bắt đầu chơi xung quanh
Đồng thời, chúng tôi sẽ tắt đăng ký, bật tính năng ảnh hồ sơ người dùng Jetstream, sau đó thêm trang Quán tính đầu tiên của chúng tôi nơi chúng tôi sẽ hiển thị một số dữ liệu được lấy từ cơ sở dữ liệu
Đây là video mã hóa trực tiếp nếu bạn muốn làm theo cách đó
Và nếu bạn thích làm theo hướng dẫn bằng văn bản này, đây là tất cả các bước
Xin nhắc lại - bạn nên cài đặt Laravel với Sail và cài đặt Docker trên máy của bạn. Bạn có thể làm theo các bước trên để làm như vậy nếu bạn chưa có
Tổng quan về Laravel Sail – Lệnh Sail
Với cài đặt Laravel Sail, các lệnh Laravel thông thường của bạn đã thay đổi một chút
Chẳng hạn, thay vì chạy lệnh Laravel artisan bằng PHP như
sail npm install
sail npm run dev
sail artisan migrate
Lệnh
sail artisan migrate
Thông thường khi làm việc với Laravel chúng ta cũng phải chạy lệnh
sail artisan migrate
sail artisan migrate
Một lần nữa, chúng ta cần thêm tiền tố vào các lệnh của mình bằng
sail artisan migrate
Dưới đây, bạn sẽ tìm thấy danh sách một số lệnh mà bạn có thể sẽ phải chạy
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Bạn có thể đọc thêm trong
Cài đặt Jetstream và Scaffold Vue và Inertia
Bây giờ, hãy cài đặt gói xác thực Laravel Jetstream và sử dụng giàn giáo Inertia với Vue3
cd my-example-app
sail composer require laravel/jetstream
Hãy nhớ thêm tiền tố vào lệnh của nhà soạn nhạc bằng
sail artisan migrate
Lệnh trên đã thêm một lệnh mới vào Laravel. Bây giờ chúng ta cần chạy nó để cài đặt tất cả các thành phần của Jetstream
sail artisan jetstream:install inertia
Tiếp theo, chúng ta cần biên dịch tất cả các nội dung tĩnh với npm
sail npm install
sail npm run dev
Trước khi chúng ta thực sự có thể nhìn thấy ứng dụng của mình, chúng ta sẽ cần chạy quá trình di chuyển cơ sở dữ liệu để có bảng phiên, theo yêu cầu của Jetstream.
sail artisan migrate
Xong. Jetstream hiện đã được cài đặt trong ứng dụng của chúng tôi. Nếu bạn truy cập
sail artisan migrate
Điền cơ sở dữ liệu và tạo tài khoản người dùng
Trước khi tạo người dùng mới, hãy xem nhanh cấu hình cơ sở dữ liệu mà Laravel Sail đã tạo cho chúng ta trong tệp
sail artisan migrate
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
Như bạn có thể thấy, Laravel Sail cấu hình mọi thứ chúng ta cần để truy cập bộ chứa cơ sở dữ liệu đang chạy trên Docker.
sail artisan migrate
sail artisan migrate
Vì chúng tôi đã di chuyển tất cả các bảng cơ sở dữ liệu, giờ đây chúng tôi có thể sử dụng nhà máy người dùng tích hợp Laravel để tạo người dùng mới, sau đó sử dụng thông tin chi tiết của nó để đăng nhập vào bảng điều khiển người dùng của chúng tôi
Hãy mở thủ công tinker để tương tác với ứng dụng của chúng tôi
sail artisan tinker
Lệnh trên sẽ mở giao diện dòng lệnh mà chúng ta có thể sử dụng để tương tác với ứng dụng của mình. Hãy tạo một người dùng mới
vendor/bin/sail up
Lệnh trên sẽ tạo một người dùng mới và lưu dữ liệu của nó vào cơ sở dữ liệu của chúng tôi. Sau đó, nó sẽ hiển thị dữ liệu người dùng lên màn hình. Đảm bảo sao chép email người dùng để chúng tôi có thể sử dụng nó sau này để đăng nhập. Sau đó thoát bằng cách gõ
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
Mật khẩu mặc định cho mọi người dùng được tạo bằng nhà máy là
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
Hãy truy cập trang đăng nhập và truy cập bảng điều khiển ứng dụng của chúng tôi
Bảng điều khiển Jetstream
Sau khi đăng nhập, bạn được chuyển hướng đến bảng điều khiển Jetstream, giao diện này trông tuyệt vời theo mặc định. Chúng ta có thể tùy chỉnh nó theo ý muốn, nhưng nó chỉ là điểm khởi đầu
Tổng quan về thành phần Jetstream/Vue và quán tính
Điều đầu tiên bạn có thể nhận thấy sau khi cài đặt Jetstram là có một số thành phần Vue được đăng ký trong ứng dụng của chúng tôi. Không chỉ vậy, Inertia còn mang đến các thành phần Vue
Để sử dụng Quán tính, chúng ta cần làm quen với nó khi xác định đường đi
Khi chúng tôi cài đặt Jetstream, nó đã tạo bên trong thư mục
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
Giàn giáo quán tính Jetstream được tạo ra
3 Ở đây chúng tôi có 27 thành phần được Jetstream sử dụng, nhưng chúng tôi cũng có thể sử dụng chúng trong ứng dụng của mình nếu muốnDB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=my-example-app DB_USERNAME=sail DB_PASSWORD=password
4 Trong thư mục này có thành phần bố cục được quán tính sử dụng để hiển thị trang bảng điều khiểnDB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=my-example-app DB_USERNAME=sail DB_PASSWORD=password
5 Đây là nơi chúng tôi sẽ đặt tất cả các thành phần Trang [lượt xem] của chúng tôi. Bạn sẽ tìm thấy trang Bảng điều khiển cũng như các thành phần trang Chào mừng của Laravel tại đâyDB_CONNECTION=mysql DB_HOST=mysql DB_PORT=3306 DB_DATABASE=my-example-app DB_USERNAME=sail DB_PASSWORD=password
Sức mạnh của Quán tính chủ yếu đến từ cách nó kết nối Vue và Laravel, cho phép chúng tôi truyền dữ liệu [Mô hình cơ sở dữ liệu và hơn thế nữa] dưới dạng đạo cụ cho các thành phần Trang Vue của chúng tôi
Khi bạn mở tệp
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
Hãy xem xét lộ trình trang chủ
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
vendor/bin/sail up
Nó trông giống như định nghĩa Route thông thường của chúng ta, ngoại trừ trong phần đóng, chúng ta sẽ trả về một
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
sail artisan tinker
sail artisan tinker
Phương thức này chấp nhận hai tham số. Đầu tiên là tên thành phần. Ở đây chúng tôi đã chuyển thành phần Trang
sail artisan tinker
sail artisan tinker
Nhìn vào bên trong thành phần Chào mừng, bạn sẽ nhận thấy rằng trong phần tập lệnh của nó, chúng tôi chỉ định nghĩa bốn đạo cụ phù hợp với các khóa của mảng kết hợp của chúng tôi. Sau đó, quán tính sẽ làm phần còn lại
vendor/bin/sail up
Sau đó, chúng ta có thể gọi các đạo cụ bên trong mẫu. Nếu bạn nhìn vào phần mẫu, bạn sẽ nhận thấy rằng
sail artisan tinker
sail artisan tinker
vendor/bin/sail up
Thành phần bảng điều khiển hơi khác một chút. Trên thực tế, nó sử dụng Bố cục được xác định trong
sail artisan tinker
sail artisan tinker
vendor/bin/sail up
Bên trong thành phần bố cục, bạn sẽ nhận thấy hai thành phần quán tính
sail artisan tinker
sail artisan tinker
Chúng ta có thể sử dụng thành phần
sail artisan tinker
sail artisan tinker
Thành phần liên kết
Vô hiệu hóa tính năng đăng ký
Nếu bạn đang làm theo, bước tiếp theo tôi sẽ thực hiện là tắt một tính năng mà Jetstream cung cấp – đăng ký tài khoản
Để làm điều đó, chúng ta có thể điều hướng đến
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Nếu chúng tôi truy cập trang chào mừng, chúng tôi sẽ nhận thấy rằng liên kết
vendor/bin/sail up
vendor/bin/sail up
Bật ảnh hồ sơ người dùng Jetstream
Bây giờ, hãy thử bật tính năng Jetstream có tên là ProfilePhotos. Như bạn có thể đoán, điều này sẽ cho phép người dùng thêm ảnh hồ sơ
Để làm điều đó, chúng ta cần truy cập vào
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Nếu bạn đăng nhập, bạn sẽ thấy rằng trong hồ sơ người dùng, có một phần mới để tải ảnh hồ sơ lên
Nhưng trước khi làm bất cứ điều gì khác, chúng ta cần chạy
vendor/bin/sail up
vendor/bin/sail up
Bây giờ hãy thử truy cập hồ sơ người dùng và cập nhật ảnh hồ sơ. Nếu bạn nhận được 404 trên hình ảnh thì điều này là do theo mặc định, Laravel sail giả định rằng chúng tôi đang sử dụng Laravel valet và đặt URL ứng dụng như vậy
vendor/bin/sail up
sail artisan migrate
vendor/bin/sail up
Bây giờ chúng ta nên đi và có thể xem và thay đổi hình ảnh hồ sơ của mình. 🥳
Cách thêm trang quán tính đầu tiên của chúng tôi và kết xuất bản ghi từ DB
Vì chúng tôi đang hiển thị các thành phần Vue thay vì chế độ xem phiến, nên bắt đầu
vendor/bin/sail up
Tôi sẽ bắt đầu bằng cách tạo một Tuyến mới bên trong web. php
vendor/bin/sail up
Trong đoạn mã trên, tôi đã xác định một tuyến GET mới và sau đó kết xuất một thành phần mà tôi sẽ đặt bên trong
vendor/bin/sail up
vendor/bin/sail up
Tạo thư mục Khách
vendor/bin/sail up
Sau đó, hãy xác định một thành phần cơ bản
ERROR: Service 'laravel.test' failed to build:
Nếu chúng tôi truy cập
vendor/bin/sail up
Thành phần sẽ thay đổi thành này
ERROR: Service 'laravel.test' failed to build:
Bước tiếp theo là hiển thị một loạt dữ liệu trên trang mới này. Để làm được điều đó, chúng tôi sẽ xây dựng một Mô hình và thêm một số bản ghi vào cơ sở dữ liệu
ERROR: Service 'laravel.test' failed to build:
Lệnh này tạo một Mô hình có tên là
vendor/bin/sail up
Bây giờ, hãy xác định bảng cơ sở dữ liệu bên trong quá trình di chuyển mà chúng ta vừa tạo. Truy cập thư mục
vendor/bin/sail up
vendor/bin/sail up
Bên trong tệp di chuyển, chúng ta có thể xác định một bảng cơ bản như sau
ERROR: Service 'laravel.test' failed to build:
Đối với bảng của chúng tôi, chúng tôi chỉ xác định hai cột mới,
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Sau khi di chuyển, chúng tôi sẽ xác định một seeder và sau đó chạy di chuyển và tạo cơ sở dữ liệu
Ở đầu tệp
vendor/bin/sail up
ERROR: Service 'laravel.test' failed to build:
Tiếp theo, chúng ta sẽ triển khai phương thức chạy bằng vòng lặp for để tạo 10 bản ghi trong cơ sở dữ liệu
ERROR: Service 'laravel.test' failed to build:
Chúng tôi đã sẵn sàng để chạy di chuyển và khởi tạo cơ sở dữ liệu
ERROR: Service 'laravel.test' failed to build:
Bây giờ chúng tôi đã sẵn sàng để hiển thị dữ liệu trên thành phần trang
vendor/bin/sail up
Trước tiên hãy cập nhật tuyến đường và chuyển bộ sưu tập Ảnh làm đạo cụ cho thành phần được hiển thị
ERROR: Service 'laravel.test' failed to build:
Thứ hai, chuyển prop đến props trong phần script của thành phần Guest/Photos
ERROR: Service 'laravel.test' failed to build:
Cuối cùng lặp lại mảng và hiển thị tất cả ảnh trong phần mẫu, ngay dưới h1
ERROR: Service 'laravel.test' failed to build:
Xong. nếu bạn truy cập trang
vendor/bin/sail up
Cách cấu trúc lại Bảng điều khiển quản trị và tạo trang quản trị mới
Trong chương này, chúng ta sẽ Định tuyến lại bảng điều khiển Jetstream và tạo một nhóm định tuyến cho tất cả các trang quản trị
Sau đó, chúng ta sẽ xem cách thêm liên kết mới vào bảng điều khiển và thêm trang quản trị mới
Cuối cùng, chúng tôi sẽ lấy một tập hợp dữ liệu từ db và hiển thị chúng trong một bảng cơ bản. Bảng mặc định không đủ hấp dẫn, vì vậy, đối với những người đang đọc bài viết này, tôi đã quyết định thêm một thành phần bảng Tailwind
Định tuyến lại Bảng điều khiển Jetstream
Nếu chúng ta xem tệp
vendor/bin/sail up
vendor/bin/sail up
Điều này có nghĩa là chúng ta có thể nhân đôi hằng số và chuyển hướng người dùng đã xác thực sang một tuyến đường khác
Hãy đi qua nó từng bước
- cập nhật hằng số HOME
- tạo một nhóm tuyến đường và chuyển hướng người dùng đã đăng nhập tới
31 thay vì '/dashboard'vendor/bin/sail up
Ứng dụng của chúng ta sẽ chỉ có một người dùng duy nhất, vì vậy sau khi họ đăng nhập thì đó rõ ràng là quản trị viên của trang – vì vậy nên chuyển hướng đến một URI
vendor/bin/sail up
Thay đổi hằng số HOME trong
vendor/bin/sail up
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Cách thêm nhóm định tuyến trang quản trị
Tiếp theo, hãy cập nhật tuyến đường của chúng tôi bên trong web. php. Chúng tôi sẽ thay đổi tuyến đường đã đăng ký bởi Jetstream từ đây
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
để này
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Tuyến ở trên là một nhóm tuyến sử dụng phần mềm trung gian
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Kết quả cuối cùng là chúng ta sẽ có thể tham khảo lộ trình bảng điều khiển theo tên, bây giờ sẽ là
vendor/bin/sail up
vendor/bin/sail up
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password
vendor/bin/sail up
Nếu bây giờ bạn chạy
vendor/bin/sail up
Trước khi chuyển sang bước tiếp theo, chúng ta cần cập nhật cả hai thành phần
vendor/bin/sail up
vendor/bin/sail up
Bạn có nhớ rằng tên lộ trình trên bảng điều khiển bây giờ là
vendor/bin/sail up
vendor/bin/sail up
Hãy kiểm tra hai thành phần và cập nhật mọi tham chiếu của
vendor/bin/sail up
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
và mọi tài liệu tham khảo của
vendor/bin/sail up
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Sau tất cả các thay đổi, hãy đảm bảo biên dịch lại các thành phần Vue và xem các thay đổi bằng cách chạy
vendor/bin/sail up
Cách thêm một liên kết mới vào bảng điều khiển
Bây giờ, để thêm một trang quản trị mới, nơi chúng tôi có thể liệt kê tất cả ảnh được lưu trữ trong cơ sở dữ liệu, chúng tôi cần thêm một tuyến đường mới vào nhóm mà chúng tôi đã tạo trước đó. Hãy nhấn vào tệp
vendor/bin/sail up
Trong nhóm Tuyến đường, chúng tôi sẽ thêm một tuyến đường mới
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Trong lộ trình mới ở trên, chúng tôi đã sử dụng hàm trợ giúp
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Trước khi chúng tôi tạo thành phần, hãy thêm một liên kết mới vào bảng điều khiển trỏ đến tuyến đường mới của chúng tôi
Bên trong
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Cuối cùng bạn sẽ có một cái gì đó như thế này
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Liên kết của chúng tôi ở trên sử dụng
vendor/bin/sail up
Nếu bạn truy cập
vendor/bin/sail up
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Không sao đâu – chúng tôi chưa tạo thành phần trang Ảnh. Vì vậy, hãy làm điều đó ngay bây giờ
Cách thêm thành phần trang quản trị mới
Tạo một tệp có tên
vendor/bin/sail up
vendor/bin/sail up
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Để làm cho trang mới này trông giống như trang Bảng điều khiển, chúng tôi sẽ sao chép nội dung của nó. Cuối cùng bạn sẽ có một cái gì đó như thế này
# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require # it was: composer require
# Use npm commands
sail npm run dev # it was: npm run dev
Tôi đã xóa một vài phần khỏi mẫu Trang tổng quan, vì vậy hãy đảm bảo kiểm tra kỹ mã ở trên. Thành phần
vendor/bin/sail up
Vui lòng cập nhật tiêu đề trang được tham chiếu làm chỗ dựa trên
vendor/bin/sail up
Giờ đây, khi bạn truy cập
vendor/bin/sail up
vendor/bin/sail up
Cách kết xuất bản ghi trong Trang quản trị dưới dạng bảng
Bây giờ là lúc hiển thị dữ liệu lên bảng. Để làm cho mọi thứ hoạt động, trước tiên hãy thêm đánh dấu và giả mạo rằng chúng ta đã có quyền truy cập dưới dạng một mảng đối tượng và lặp qua chúng bên trong bảng của chúng ta. Hơn là chúng ta sẽ tìm ra cách làm cho mọi thứ hoạt động thực sự
cd my-example-app
sail composer require laravel/jetstream
Ok, vì chúng ta đã giả định rằng thành phần của chúng ta có quyền truy cập vào danh sách Ảnh, hãy chuyển một chỗ dựa mới cho thành phần từ Tuyến đường
Cập nhật lộ trình trên web. php và chuyển đến hàm
vendor/bin/sail up
Trong đó, chúng tôi sẽ gọi
vendor/bin/sail up
vendor/bin/sail up
cd my-example-app
sail composer require laravel/jetstream
Để kết nối chỗ dựa với thành phần Trang của chúng tôi, chúng tôi cũng cần xác định chỗ dựa bên trong thành phần
cd my-example-app
sail composer require laravel/jetstream
Thêm. Cách sử dụng thành phần bảng Tailwind
Tailwind là một khung CSS tương tự như Bootstrap. Có một số thành phần miễn phí sử dụng mà chúng ta có thể lấy từ tài liệu, chỉnh sửa và sử dụng
Thành phần bảng này miễn phí và trông rất đẹp. https. //tailwind ui. com/thành phần/ứng dụng-ui/danh sách/bảng
Chúng ta có thể gấp đôi mẫu trang Ảnh và sử dụng thành phần bảng Tailwind để có được một bảng trông đẹp mắt như vậy
cd my-example-app
sail composer require laravel/jetstream
Cách gửi biểu mẫu với tệp
Đối với phần tiếp theo, chúng ta sẽ xem xét cách gửi biểu mẫu để có thể thêm ảnh mới vào cơ sở dữ liệu
- Thêm một nút tạo
- Thêm một tuyến đường tạo
- Xác định thành phần PhotosCreate
- thêm biểu mẫu
- Xác thực dữ liệu
- Hiển thị lỗi xác thực
- Lưu tệp vào hệ thống tệp
- Lưu mô hình
Cách tạo ảnh mới
Thêm một liên kết trỏ đến một tuyến đường tạo
cd my-example-app
sail composer require laravel/jetstream
Tạo tuyến đường trong nhóm quản trị
cd my-example-app
sail composer require laravel/jetstream
Hãy thêm tuyến đường sẽ xử lý việc gửi biểu mẫu sau này
cd my-example-app
sail composer require laravel/jetstream
Tạo thành phần
vendor/bin/sail up
cd my-example-app
sail composer require laravel/jetstream
Cách thêm biểu mẫu vào thành phần
Bước tiếp theo là thêm biểu mẫu vào trang và tìm cách gửi biểu mẫu đó
Nếu bạn nhấn vào tài liệu Quán tính, bạn sẽ thấy rằng có một lớp useForm mà chúng ta có thể sử dụng để đơn giản hóa quy trình
Đầu tiên, nhập mô-đun bên trong thẻ tập lệnh của Quản trị viên/PhotosCreate. thành phần vue
cd my-example-app
sail composer require laravel/jetstream
Tiếp theo, chúng ta có thể sử dụng nó trong chức năng thiết lập [API thành phần Vue 3]
cd my-example-app
sail composer require laravel/jetstream
Trong đoạn mã trên, chúng ta đã định nghĩa hàm có tên là
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Bên trong dấu ngoặc đơn của nó, chúng tôi đã xác định hai thuộc tính,
vendor/bin/sail up
vendor/bin/sail up
Cuối cùng, chúng tôi đã trả lại biến
vendor/bin/sail up
Tiếp theo chúng ta có thể thêm đánh dấu biểu mẫu
sail artisan jetstream:install inertia
Đoạn mã trên sử dụng cú pháp kết thúc ngắn chỉ thị Vue v-on
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Sau đó, nó sử dụng biến
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Tiếp theo, chúng tôi trỏ biểu mẫu đến tuyến đường có tên là quản trị viên. ảnh. cửa hàng mà chúng tôi đã tạo trước đó
Bên trong biểu mẫu, chúng tôi có hai nhóm đầu vào. Đầu tiên, chúng ta có vùng văn bản sử dụng mô hình v để liên kết nó với thuộc tính
vendor/bin/sail up
Nhóm thứ hai sử dụng
vendor/bin/sail up
Hiện tại, chúng tôi chỉ cho phép người dùng tải lên một ảnh duy nhất bằng cách sử dụng chỉ thị v-on trên sự kiện DOM đầu vào
vendor/bin/sail up
Hai điều cuối cùng cần lưu ý là việc xử lý lỗi được thực hiện thông qua
vendor/bin/sail up
Cuối cùng, chúng tôi sử dụng
vendor/bin/sail up
Bước tiếp theo là xác định logic để lưu dữ liệu bên trong cơ sở dữ liệu
Cách lưu trữ dữ liệu
Để lưu trữ dữ liệu, chúng tôi có thể chỉnh sửa tuyến đường mà chúng tôi đã xác định trước đó như vậy
sail artisan jetstream:install inertia
Đoạn mã trên sử dụng phép nội xạ phụ thuộc để cho phép chúng tôi sử dụng tham số
vendor/bin/sail up
Trước tiên, chúng tôi xác thực yêu cầu và lưu mảng kết quả bên trong biến
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Cuối cùng, chúng tôi thêm khóa
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
vendor/bin/sail up
Đảm bảo nhập lớp
vendor/bin/sail up
vendor/bin/sail up
sail artisan jetstream:install inertia
Bây giờ chúng tôi có thể thêm ảnh mới vào cơ sở dữ liệu và hiển thị danh sách ảnh cho cả quản trị viên và khách truy cập tiêu chuẩn
Tiếp theo, chúng ta cần hoàn thành các thao tác CRUD và cho phép người dùng chỉnh sửa/cập nhật ảnh và xóa ảnh đó
Cách cập nhật hoạt động
Hãy bắt đầu bằng cách thêm các tuyến chịu trách nhiệm hiển thị các biểu mẫu được sử dụng để chỉnh sửa tài nguyên và cập nhật giá trị của nó vào cơ sở dữ liệu
Ngay bên dưới các route khác trong nhóm Admin, hãy thêm đoạn mã sau
sail artisan jetstream:install inertia
Lộ trình trên sử dụng phép nội xạ phụ thuộc để đưa vào bên trong hàm bài đăng hiện tại, được chọn bởi URI
vendor/bin/sail up
Tiếp theo, nó trả về phản hồi Quán tính thông qua hàm
vendor/bin/sail up
vendor/bin/sail up
Thực hiện
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
Tiếp theo, hãy thêm thành phần Trang mới bên dưới
ERROR: Service 'laravel.test' failed to build:
Đây sẽ là mẫu của nó
sail artisan jetstream:install inertia
Mẫu thực sự giống với thành phần Tạo, ngoại trừ một vài điều. Biểu mẫu trỏ đến một tuyến đường mong đợi một tham số mà chúng ta chuyển làm đối số thứ hai cho hàm
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
Có một phần chúng ta có thể xem ảnh gốc bên cạnh hình thức tải lên nhóm
sail artisan jetstream:install inertia
Phần còn lại giống hệt nhau và ở đây chúng ta có phần kịch bản
sail artisan jetstream:install inertia
Lưu ý rằng chúng tôi đang chuyển một đối tượng đạo cụ bằng khóa ảnh, cho phép chúng tôi tham chiếu mô hình trong mẫu
Tiếp theo, dòng mã
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
Bây giờ, hãy triển khai logic để xử lý việc gửi biểu mẫu bên trong Tuyến đường bên dưới
trong web. php ngay dưới route trước, hãy thêm một cái đáp ứng yêu cầu PUT được gửi bởi biểu mẫu của chúng tôi
sail artisan jetstream:install inertia
Logic tuyến đường rất đơn giản. Trước tiên, chúng tôi xác thực mô tả, tiếp theo, chúng tôi kiểm tra xem tệp đã được tải lên chưa và nếu có, chúng tôi xác thực tệp đó
Sau đó, chúng tôi xóa hình ảnh đã tải lên trước đó
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
Như trước đây với tuyến cửa hàng, chúng tôi chuyển hướng đến tuyến
vendor/bin/sail up
ERROR: Service 'laravel.test' failed to build:
Cách xóa tài nguyên
Bước cuối cùng chúng ta cần làm là viết logic để xóa ảnh. Hãy bắt đầu bằng cách thêm tuyến đường
Ngay bên dưới route trước chúng ta có thể viết
sail artisan jetstream:install inertia
Tuyến đường này cũng đang sử dụng ký tự đại diện trong URI của nó để xác định tài nguyên. Tiếp theo, tham số thứ hai của nó là cuộc gọi lại sử dụng phép nội xạ phụ thuộc như trước. Bên trong cuộc gọi lại, trước tiên chúng tôi xóa hình ảnh khỏi hệ thống tệp bằng cách sử dụng
ERROR: Service 'laravel.test' failed to build:
Sau đó, chúng tôi xóa tài nguyên khỏi cơ sở dữ liệu
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
Bây giờ chúng ta cần thêm nút xóa vào bảng mà chúng ta đã tạo ở một trong các bước trước để hiển thị tất cả ảnh
Bên trong phần mẫu của thành phần
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
sail artisan jetstream:install inertia
Tìm ô trong bảng có nhận xét
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
Vì vậy, mã cuối cùng sẽ là
sail npm install
sail npm run dev
Như bạn có thể thấy có một trình lắng nghe sự kiện
ERROR: Service 'laravel.test' failed to build:
ERROR: Service 'laravel.test' failed to build:
Trước tiên hãy nhập hàm trợ giúp Inertia useForm
sail npm install
sail npm run dev
Hãy nhớ đăng ký thành phần
ERROR: Service 'laravel.test' failed to build:
Tiếp theo, thêm hàm
vendor/bin/sail up
sail npm install
sail npm run dev
Cuối cùng, bên ngoài vòng lặp
ERROR: Service 'laravel.test' failed to build:
sail npm install
sail npm run dev
Đây là mã JavaScript cuối cùng của chúng tôi
sail npm install
sail npm run dev
Và ở đây chúng ta có HTML
sail npm install
sail npm run dev
Đó là nó. Nếu bạn đã làm đúng mọi thứ, bạn sẽ có thể xem tất cả ảnh, tạo ảnh mới cũng như chỉnh sửa và xóa chúng
Tôi sẽ để lại cho bạn một số công việc nhà. Bạn có thể tìm ra cách triển khai xem và chỉnh sửa liên kết trước nút xóa trong phần bên dưới không?
sail npm install
sail npm run dev
Kết thúc và những gì tiếp theo
Trong hướng dẫn này, chúng tôi đã thực hiện những bước đầu tiên và học cách xây dựng ứng dụng một trang bằng cách sử dụng Laravel làm khung phụ trợ và Vue3 cho giao diện người dùng. Chúng tôi đã dán chúng lại với nhau bằng Inertia js và xây dựng một ứng dụng ảnh đơn giản cho phép người dùng quản lý ảnh
Chúng tôi chỉ mới bắt đầu một cuộc hành trình tuyệt vời. Học các công nghệ mới không dễ dàng, nhưng nhờ các tài liệu đầy đủ của chúng, chúng tôi có thể theo kịp và xây dựng các ứng dụng tuyệt vời
Bước tiếp theo của bạn để thành thạo Laravel, Vue3, Inertia và tất cả công nghệ chúng tôi đang sử dụng cho đến nay là xem tài liệu của họ và tiếp tục học. Sử dụng ứng dụng chúng tôi đã xây dựng nếu bạn muốn và cải thiện nó hoặc bắt đầu lại từ đầu
Chỉ cần ghi nhớ điều đó, viết mã rất thú vị, vì vậy hãy thư giãn và tận hưởng nó
Mã hóa trực tiếp - Laravel 9 + Quán tính + Vue3
Đây là một loạt mã hóa trực tiếp đang diễn ra, nơi tôi viết mã trực tiếp hoàn toàn không có kịch bản. Trong loạt bài này, chúng tôi sẽ xây dựng một dự án hoàn chỉnh từ đầu, bắt đầu với dự án mới
Phần kết luận
Đây chỉ là tổng quan về cách tôi xây dựng ứng dụng một trang bằng các công nghệ này
Nếu bạn đã quen thuộc với định tuyến phía máy chủ và Vuejs thì bạn sẽ thích xây dựng ứng dụng một trang với Laravel, Inertia và Vuejs. Đường cong học tập không dốc cộng với việc bạn có tài liệu tuyệt vời để giúp bạn
Tôi hy vọng bạn thích hướng dẫn này. Nếu vậy, hãy cho tôi biết và xem xét đăng ký kênh YouTube của tôi và theo dõi tôi trên Twitter. Và nếu bạn gặp khó khăn, hãy liên lạc để được giúp đỡ
Bạn có thể tìm thấy mã nguồn cho hướng dẫn này tại đây
Theo dõi tôi trên Twitter
Tham gia cùng tôi trên chùng
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
CHÀO. Tôi là Fabio, nhà phát triển web toàn diện, giáo viên và chuyên gia được chứng nhận về tự động hóa CNTT với Python. Tôi thích chia sẻ kiến thức, viết kịch bản Python và xây dựng ứng dụng web với Laravel
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu