1656687180
Di chuyển ứng dụng Laravel của bạn từ Webpack sang Vite
Vite là công cụ giao diện người dùng mới cho Laravel. Hãy xem cách chúng ta có thể di chuyển một dự án Laravel nhất định từ Webpack sang Vite sang Vite.
Vite làNext Generation Frontend Tooling,mặc định của Laravel kể từ bây giờ.
Tài liệu Laravel chứa toàn bộ phần giải thích cách thức hoạt động và cách sử dụng nó. Nhưng hầu hết chúng ta quan tâm hơn đến việc sử dụng nó trong một existing project.Vì vậy, đó là những gì bài đăng này dành cho.
Lưu ý: Bài viết này tập trung vào việc di chuyển một ứng dụng Laravel cơ bản. Sẽ có sự khác biệt nếu bạn sử dụng các công cụ khác nhau như React hoặc Vue.
Tại sao Vite
Trước khi chuyển sang một công cụ mới, bạn nên suy nghĩ về việc whybạn muốn làm điều đó. Đối với tôi, gói giao diện người dùng mặc định mới của Laravel đã là đủ rồi, nhưng chúng ta hãy nói về một số chi tiết.
Lợi ích chính là overall improved performance.Vite khởi động máy chủ nhà phát triển mới, đóng gói tài sản và cập nhật chúng nhanh hơn so với các công cụ khác như webpack.
Vite đang tận dụng những tiến bộ mới trong hệ sinh thái, như sự sẵn có của các mô-đun ES nguyên bản trong trình duyệt và sự gia tăng của các công cụ JavaScript được viết bằng ngôn ngữ biên dịch sang ngôn ngữ bản địa. Có giải thích chi tiết trong phần Tại sao Vite của tài liệu chính thức.
Sự phụ thuộc
Đảm bảo có phiên bản mới nhất của Laravel, phiên bản ngày nay 9.19, để sử dụng công cụ Vite mới. Sau đó, chúng ta cần cài đặt hai phụ thuộc mới:
npm install --save-dev vite laravel-vite-plugin
Ngoài ra, scriptsphần của package.jsontệp của chúng tôi sẽ thay đổi do các tập lệnh Vite mới.
"scripts": {
"dev": "vite",
"build": "vite build"
},
Đó là tất cả những gì chúng ta cần cho các tập lệnh.
Vì Vite là sự thay thế cho webpack, chúng tôi có thể xóa phần laravel-mixphụ thuộc và xóa webpack.mix.jstệp khỏi ứng dụng của mình.
npm remove laravel-mix && rm webpack.mix.js
Tệp của bạn package.jsonbây giờ sẽ trông giống như sau:
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^0.25",
"laravel-vite-plugin": "^0.2.1",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"postcss-import": "^14.0.1",
"vite": "^2.9.11",
}
}
Cài đặt nhanh
Bây giờ chúng ta cần thiết lập Vite. Do đó, hãy tạo một vite.config.jstệp mới trong thư mục gốc của ứng dụng Laravel của bạn.
import laravel from 'laravel-vite-plugin'
import {defineConfig} from 'vite'
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
Đây là nơi chúng tôi sử dụng các gói vitevà laravel-vite-pluginvà chúng tôi cũng xác định đường dẫn tài sản của mình.
Sử dụng Vite trong Mẫu của bạn
Trong các headtệp mẫu của bạn, chúng tôi phải tải các nội dung thông qua lệnh @vitelưỡi dao mới.
@vite(['resources/css/app.css', 'resources/js/app.js'])
Bạn không cần phải sử dụng mixhoặc tải chúng theo cách thủ công nữa.
Chạy Vite
Để chạy Vite, bạn sử dụng tập lệnh npm npm run dev,mà chúng tôi đã xác định, chỉ là bí danh chonpm run vite.
Nó sẽ biên dịch nội dung của bạn chiếu sáng nhanh chóng! Để làm cho nội dung của bạn sẵn sàng sản xuất, bạn có thể sử dụng npm run buildtập lệnh mới để tạo phiên bản và nhóm nội dung của mình.
Trong nền, Vite đang sử dụng các tài sản mới được biên dịch vào thư mục public/build. Điều này có nghĩa là chúng tôi có thể xóa các thư mục nội dung cũ public/cssvà public/js,trong trường hợp của tôi.
Nhập mô-đun JS có thể thay đổi cho bạn
Vite chỉ hỗ trợ các mô-đun ES, do requiređó không hoạt động nữa và bạn cần phải chuyển đổi importcác mô-đun trong tập lệnh của mình ngay bây giờ.
Ví dụ - không hoạt động với Vite nữa:
require('my-package');
Ví dụ - làm việc với Vite:
import myPackage from 'my-package';
Sử dụng CSS Tailwind
Nếu bạn sử dụng Tailwind CSS trong dự án Laravel của mình, các kiểu của bạn sẽ không hoạt động. Đó là vì chúng ta cần Post CSSCSS Tailwind.
Tạo một postcss.config.jstệp, nếu bạn chưa có và xác định hai plugin ở đó:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Bạn cũng cần phải cài đặt các gói đó, nhưng nếu bạn đã sử dụng Tailwind CSS, bạn nên cài đặt chúng.
Vite sẽ tìm kiếm cấu hình PostCSS và tự động áp dụng nếu được cung cấp. Đã thế rồi. Các kiểu CSS Tailwind của bạn giờ cũng sẽ hoạt động.
Các biến môi trường
Bạn có thể đưa các biến môi trường vào JavaScript thông qua .envtệp của mình, bằng cách thêm tiền tố cho chúng VITE_.
Ví dụ, các biến Laravel đã cho Pusherkhông còn sử dụng đối với bạn.
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Nếu bạn muốn sử dụng chúng trong JavaScript, hãy đổi tên chúng.
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Tự động di chuyển sang Vite
Laravel Shift là một dịch vụ tuyệt vời được biết đến để chuyển các ứng dụng Laravel của bạn sang phiên bản mới hơn chỉ với một cú nhấp chuột.
Hôm nay cũng là một sự thay đổi mới được phát hành để chuyển Laravel Mix sang Vite.
Tự động làm mới mẫu khi thay đổi
Một trong những tính năng nổi bật nhất của Vite là Hot Module Replacementdành cho Vue.js và React.
Nhưng nó cũng tuyệt vời để làm mới trình duyệt sau khi thay đổi tệp. Theo mặc định, điều này không hoạt động với Bladecác tệp, nhưng Freek và Spatie đã có một giải pháp hoạt động.
Chỉ cần cập nhật cấu hình Vite của bạn bằng một plugin tùy chỉnh có tên bladetại đây:
import laravel from 'laravel-vite-plugin'
import {defineConfig} from 'vite'
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
{
name: 'blade',
handleHotUpdate({ file, server }) {
if (file.endsWith('.blade.php')) {
server.ws.send({
type: 'full-reload',
path: '*',
});
}
},
}
],
});
Điều này đủ để làm mới trình duyệt của bạn sau khi tệp phiến thay đổi. Và một lần nữa, điều này xảy ra nhanh như chớp!
Xử lý sự cố
Chặn trình duyệt
Một số trình duyệt, như Brave, chặn yêu cầu của Vite theo mặc định. Bạn sẽ thấy những lỗi đó trong bảng điều khiển trình duyệt của mình. Điều này có thể ngăn Vite biên dịch nội dung của bạn. Vì vậy, hãy nhớ kiểm tra trình duyệt của bạn nếu bạn thấy lỗi yêu cầu chặn.
HTTPS và Valet
Bạn cũng có thể gặp sự cố nếu bạn đang chạy Laravel Valetcục bộ với HTTPScác trang được bảo mật. Nhưng, một lần nữa, Freek đã tìm ra giải pháp.
Yêu cầu kéo công khai thành công
Nó có thể giúp bạn biết những người khác đã chuyển thành công các dự án Laravel của họ sang Vite như thế nào:
Sự kết luận
Tôi rất thích Vite và tôi hy vọng hướng dẫn này có thể giúp bạn chuyển từ một dự án Laravel hiện có nhanh hơn.
Nguồn bài viết gốc tại https://christoph-rumpel.com
#laravel #webpack #vite #phh
What is GEEK
Buddha Community
1656687180
Di chuyển ứng dụng Laravel của bạn từ Webpack sang Vite
Vite là công cụ giao diện người dùng mới cho Laravel. Hãy xem cách chúng ta có thể di chuyển một dự án Laravel nhất định từ Webpack sang Vite sang Vite.
Vite làNext Generation Frontend Tooling,mặc định của Laravel kể từ bây giờ.
Tài liệu Laravel chứa toàn bộ phần giải thích cách thức hoạt động và cách sử dụng nó. Nhưng hầu hết chúng ta quan tâm hơn đến việc sử dụng nó trong một existing project.Vì vậy, đó là những gì bài đăng này dành cho.
Lưu ý: Bài viết này tập trung vào việc di chuyển một ứng dụng Laravel cơ bản. Sẽ có sự khác biệt nếu bạn sử dụng các công cụ khác nhau như React hoặc Vue.
Tại sao Vite
Trước khi chuyển sang một công cụ mới, bạn nên suy nghĩ về việc whybạn muốn làm điều đó. Đối với tôi, gói giao diện người dùng mặc định mới của Laravel đã là đủ rồi, nhưng chúng ta hãy nói về một số chi tiết.
Lợi ích chính là overall improved performance.Vite khởi động máy chủ nhà phát triển mới, đóng gói tài sản và cập nhật chúng nhanh hơn so với các công cụ khác như webpack.
Vite đang tận dụng những tiến bộ mới trong hệ sinh thái, như sự sẵn có của các mô-đun ES nguyên bản trong trình duyệt và sự gia tăng của các công cụ JavaScript được viết bằng ngôn ngữ biên dịch sang ngôn ngữ bản địa. Có giải thích chi tiết trong phần Tại sao Vite của tài liệu chính thức.
Sự phụ thuộc
Đảm bảo có phiên bản mới nhất của Laravel, phiên bản ngày nay 9.19, để sử dụng công cụ Vite mới. Sau đó, chúng ta cần cài đặt hai phụ thuộc mới:
npm install --save-dev vite laravel-vite-plugin
Ngoài ra, scriptsphần của package.jsontệp của chúng tôi sẽ thay đổi do các tập lệnh Vite mới.
"scripts": {
"dev": "vite",
"build": "vite build"
},
Đó là tất cả những gì chúng ta cần cho các tập lệnh.
Vì Vite là sự thay thế cho webpack, chúng tôi có thể xóa phần laravel-mixphụ thuộc và xóa webpack.mix.jstệp khỏi ứng dụng của mình.
npm remove laravel-mix && rm webpack.mix.js
Tệp của bạn package.jsonbây giờ sẽ trông giống như sau:
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^0.25",
"laravel-vite-plugin": "^0.2.1",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"postcss-import": "^14.0.1",
"vite": "^2.9.11",
}
}
Cài đặt nhanh
Bây giờ chúng ta cần thiết lập Vite. Do đó, hãy tạo một vite.config.jstệp mới trong thư mục gốc của ứng dụng Laravel của bạn.
import laravel from 'laravel-vite-plugin'
import {defineConfig} from 'vite'
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
Đây là nơi chúng tôi sử dụng các gói vitevà laravel-vite-pluginvà chúng tôi cũng xác định đường dẫn tài sản của mình.
Sử dụng Vite trong Mẫu của bạn
Trong các headtệp mẫu của bạn, chúng tôi phải tải các nội dung thông qua lệnh @vitelưỡi dao mới.
@vite(['resources/css/app.css', 'resources/js/app.js'])
Bạn không cần phải sử dụng mixhoặc tải chúng theo cách thủ công nữa.
Chạy Vite
Để chạy Vite, bạn sử dụng tập lệnh npm npm run dev,mà chúng tôi đã xác định, chỉ là bí danh chonpm run vite.
Nó sẽ biên dịch nội dung của bạn chiếu sáng nhanh chóng! Để làm cho nội dung của bạn sẵn sàng sản xuất, bạn có thể sử dụng npm run buildtập lệnh mới để tạo phiên bản và nhóm nội dung của mình.
Trong nền, Vite đang sử dụng các tài sản mới được biên dịch vào thư mục public/build. Điều này có nghĩa là chúng tôi có thể xóa các thư mục nội dung cũ public/cssvà public/js,trong trường hợp của tôi.
Nhập mô-đun JS có thể thay đổi cho bạn
Vite chỉ hỗ trợ các mô-đun ES, do requiređó không hoạt động nữa và bạn cần phải chuyển đổi importcác mô-đun trong tập lệnh của mình ngay bây giờ.
Ví dụ - không hoạt động với Vite nữa:
require('my-package');
Ví dụ - làm việc với Vite:
import myPackage from 'my-package';
Sử dụng CSS Tailwind
Nếu bạn sử dụng Tailwind CSS trong dự án Laravel của mình, các kiểu của bạn sẽ không hoạt động. Đó là vì chúng ta cần Post CSSCSS Tailwind.
Tạo một postcss.config.jstệp, nếu bạn chưa có và xác định hai plugin ở đó:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Bạn cũng cần phải cài đặt các gói đó, nhưng nếu bạn đã sử dụng Tailwind CSS, bạn nên cài đặt chúng.
Vite sẽ tìm kiếm cấu hình PostCSS và tự động áp dụng nếu được cung cấp. Đã thế rồi. Các kiểu CSS Tailwind của bạn giờ cũng sẽ hoạt động.
Các biến môi trường
Bạn có thể đưa các biến môi trường vào JavaScript thông qua .envtệp của mình, bằng cách thêm tiền tố cho chúng VITE_.
Ví dụ, các biến Laravel đã cho Pusherkhông còn sử dụng đối với bạn.
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Nếu bạn muốn sử dụng chúng trong JavaScript, hãy đổi tên chúng.
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Tự động di chuyển sang Vite
Laravel Shift là một dịch vụ tuyệt vời được biết đến để chuyển các ứng dụng Laravel của bạn sang phiên bản mới hơn chỉ với một cú nhấp chuột.
Hôm nay cũng là một sự thay đổi mới được phát hành để chuyển Laravel Mix sang Vite.
Tự động làm mới mẫu khi thay đổi
Một trong những tính năng nổi bật nhất của Vite là Hot Module Replacementdành cho Vue.js và React.
Nhưng nó cũng tuyệt vời để làm mới trình duyệt sau khi thay đổi tệp. Theo mặc định, điều này không hoạt động với Bladecác tệp, nhưng Freek và Spatie đã có một giải pháp hoạt động.
Chỉ cần cập nhật cấu hình Vite của bạn bằng một plugin tùy chỉnh có tên bladetại đây:
import laravel from 'laravel-vite-plugin'
import {defineConfig} from 'vite'
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
{
name: 'blade',
handleHotUpdate({ file, server }) {
if (file.endsWith('.blade.php')) {
server.ws.send({
type: 'full-reload',
path: '*',
});
}
},
}
],
});
Điều này đủ để làm mới trình duyệt của bạn sau khi tệp phiến thay đổi. Và một lần nữa, điều này xảy ra nhanh như chớp!
Xử lý sự cố
Chặn trình duyệt
Một số trình duyệt, như Brave, chặn yêu cầu của Vite theo mặc định. Bạn sẽ thấy những lỗi đó trong bảng điều khiển trình duyệt của mình. Điều này có thể ngăn Vite biên dịch nội dung của bạn. Vì vậy, hãy nhớ kiểm tra trình duyệt của bạn nếu bạn thấy lỗi yêu cầu chặn.
HTTPS và Valet
Bạn cũng có thể gặp sự cố nếu bạn đang chạy Laravel Valetcục bộ với HTTPScác trang được bảo mật. Nhưng, một lần nữa, Freek đã tìm ra giải pháp.
Yêu cầu kéo công khai thành công
Nó có thể giúp bạn biết những người khác đã chuyển thành công các dự án Laravel của họ sang Vite như thế nào:
Sự kết luận
Tôi rất thích Vite và tôi hy vọng hướng dẫn này có thể giúp bạn chuyển từ một dự án Laravel hiện có nhanh hơn.
Nguồn bài viết gốc tại https://christoph-rumpel.com
#laravel #webpack #vite #phh
1595201363
Php how to delete multiple rows through checkbox using ajax in laravel
First thing, we will need a table and i am creating products table for this example. So run the following query to create table.
CREATE TABLE `products` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
`updated_at` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
Next, we will need to insert some dummy records in this table that will be deleted.
INSERT INTO `products` (`name`, `description`) VALUES
('Test product 1', 'Product description example1'),
('Test product 2', 'Product description example2'),
('Test product 3', 'Product description example3'),
('Test product 4', 'Product description example4'),
('Test product 5', 'Product description example5');
Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
protected $fillable = [
'name','description'
];
}
Step 2: Create Route
Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.
routes/web.php
Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);
#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete
1621508419
Laravel App Development Company in India, Hire Laravel Developers
Hire our expert team of Laravel app developers for flexible PHP applications across various cloud service providers.
With this easy build technology, we develop feature-rich apps that make your complex business process a lot easier. Our apps are,
- More secure and scalable.
- A good framework lets you manage and organize resources better.
- And have a rich community base.
Get your business a best in classlaravel app. Hire laravel app developers in India. We have the best organizational set-up to provide you the most advanced app development services.
#laravel app development company india #hire laravel developers india #laravel app development company #hire laravel developers #laravel development agency #laravel app programmers
1635215499
35.000+ Tủ locker, tủ nhân viên cao cấp chính hãng l Nam Thuy Corp
35.000+ Tủ locker, tủ nhân viên cao cấp chính hãng l Nam Thuy Corp
Việc trang bị tủ locker cho các trường học là điều vô cùng cần thiết để giúp học sinh có ý thức và trách nhiệm hơn trong việc bảo quản tài sản cá nhân.
Website: https://namthuycorp.com/danh-muc-san-pham/tu-locker/
#tủ_sắt_locker #locker #tu_sat_locker #tu_locker #tủ_locker_sắt #tủ_nhân_viên #tu_locker_sat #tủ_locker_giá_rẻ #tu_locker_gia_re #tủ_cá_nhân_locker #tủ_sắt_nhiều_ngăn #tủ_đựng_đồ_nhân_viên
CÔNG TY TNHH QUỐC TẾ NAM THỦY
Công ty thành viên trực thuộc Nam Thủy Group
Địa chỉ: SH02-22, Sari Town, KĐT Sala, 10 Mai Chí Thọ,
Phường An Lợi Đông, Quận 2, TP. Hồ Chí Minh
Điện thoại: (028) 62700527 Hotline: 0909 420 804
Email: info@namthuycorp.com
1636358771
Tủ iLocker
Tủ iLocker mang nhiều đặc điểm nổi bật, cùng các phương thức bảo mật khác nhau như Fingerprint, RFID, Face ID hoặc QR code được xem là giải pháp lưu trữ tối ưu của Smart Locker
#tủ_locker #tủ_sắt_locker #locker #tu_sat_locker #tu_locker #tủ_locker_sắt #tủ_nhân_viên #tu_locker_sat #tủ_locker_giá rẻ #tu_locker_gia_re #tủ_cá_nhân_locker #tủ_sắt_nhiều_ngăn #tủ_đựng_đồ_nhân_viên
Website: