SQL, hay Ngôn ngữ truy vấn có cấu trúc, là ngôn ngữ dành riêng cho miền được thiết kế để truy cập và thao tác dữ liệu được lưu trữ trong cơ sở dữ liệu quan hệ. Với sự trợ giúp của các câu lệnh SQL, bạn có thể thực hiện các thao tác như tạo, cập nhật, truy xuất và xóa dữ liệu trên cơ sở dữ liệu quan hệ
Cơ sở dữ liệu quan hệ là một mô hình dữ liệu tổ chức dữ liệu trong một bảng bằng cách sử dụng các hàng và cột. Mặc dù có thể có nhiều hệ thống quản lý cơ sở dữ liệu quan hệ sử dụng SQL, nhưng hầu hết tất cả các hệ thống này đều được thiết kế để hoạt động như các quy trình phía máy chủ. Chúng bao gồm, trong số những người khác
- mysql
- PostgreSQL
- SQLite
- MSSQL
Trong hướng dẫn này, chúng ta sẽ thảo luận về SQL. js, thư viện JavaScript SQL cho phép bạn tạo và truy vấn cơ sở dữ liệu quan hệ hoàn toàn trong trình duyệt của mình
Chúng ta sẽ thực hiện các bước sau với ví dụ chi tiết cho từng phần
- SQL là gì. js?
- Ưu và nhược điểm của việc sử dụng SQL. js
- Cài đặt [trình duyệt và Node. js]
- Viết các truy vấn SQL và các câu lệnh đã chuẩn bị
SQL là gì. js?
SQL. js là một thư viện JavaScript cho phép bạn tạo và truy vấn cơ sở dữ liệu quan hệ hoàn toàn trong trình duyệt. Nó sử dụng một tệp cơ sở dữ liệu ảo được lưu trữ trong bộ nhớ của trình duyệt, do đó, nó không duy trì các thay đổi được thực hiện đối với cơ sở dữ liệu
Thư viện này cũng sử dụng Emscripten để biên dịch SQLite thành WebAssembly [Wasm]. Với tính năng này, bạn có thể dễ dàng đưa vào cơ sở dữ liệu SQLite hiện có để sử dụng trong SQL. js và cũng chuyển đổi cơ sở dữ liệu được tạo bằng SQL. js sang SQLite
Ưu và nhược điểm của việc sử dụng SQL. js
Có một số ưu điểm khi sử dụng SQL. js. Nó được xây dựng và hoạt động hoàn toàn ở phía máy khách, điều đó có nghĩa là nó sẽ không yêu cầu bất kỳ quy trình phía máy chủ nào hoạt động. Nó dễ cài đặt hơn MySQL, PostgreSQL và các phần mềm khác yêu cầu sử dụng phần mềm của bên thứ ba. Bắt đầu với SQL. js dễ như cài đặt jQuery trong một dự án HTML hiện có. Và SQL. js cung cấp hỗ trợ để thực thi các chuỗi SQL đơn có chứa nhiều câu lệnh, như bên dưới
sqlstr = "CREATE TABLE tableName[colA, colB];"; sqlstr += "INSERT INTO hello VALUES [0, 'hello'];" ....
Nhưng cũng có một điều quan trọng. thay đổi cơ sở dữ liệu của bạn khi sử dụng SQL. js không liên tục. Đọc lại lần nữa. tất cả các thay đổi được thực hiện đối với cơ sở dữ liệu của bạn sẽ không còn tồn tại khi bạn tải lại trình duyệt của mình. Điều này là do SQL. js sử dụng tệp cơ sở dữ liệu ảo được lưu trữ trong bộ nhớ trình duyệt. Tuy nhiên, bạn có thể nhập bất kỳ tệp SQLite hiện có nào và xuất cơ sở dữ liệu đã tạo dưới dạng một mảng được nhập JavaScript
Cài đặt SQL. js
cài đặt trình duyệt
Tích hợp SQL. js vào một dự án dựa trên phía máy khách mới cực kỳ dễ dàng. Bạn có thể bắt đầu bằng cách bao gồm CDN hoặc tải xuống các tệp nguồn và liên kết chúng với trang đánh dấu của bạn
Theo mặc định, SQL. js sử dụng WebAssembly và cần tải tệp
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];1 ngoài thư viện JavaScript. Bạn có thể tải xuống tệp này trực tuyến và sử dụng hàm
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];2 để tải tệp trong trang web của mình, như vậy
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];
Trong khối mã ở trên, chúng tôi đã sử dụng
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];3 để tải tệp nhị phân Wasm không đồng bộ và khởi tạo SQL. js sau khi tải các tệp cần thiết
Nút. cài đặt js
Cài đặt SQL. js trong một dự án dựa trên Node cũng khá đơn giản. Để cài đặt nó, bạn chỉ cần chạy
npm install sql.js
Ngoài ra, bạn có thể tải xuống
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];4 và
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];5 từ các liên kết trước đó và sử dụng Nút. js
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];6 để tải chúng trong dự án của bạn
Ngoài ra, trong một dự án dựa trên Node, bạn có thể bỏ qua phương thức
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];2 để tải tệp
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];5 vì nó sẽ tự động tải nếu nó nằm trong cùng thư mục với tệp hiện tại mà bạn đang làm việc. Vì vậy, mã của chúng tôi sẽ trông như thế này
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];1
Viết các truy vấn SQL và các câu lệnh đã chuẩn bị
Bây giờ chúng ta đã làm theo tất cả các bước cần thiết để cài đặt và khởi tạo SQL. js, hãy đi sâu vào cách sử dụng nó
Tạo cơ sở dữ liệu
Đoạn mã dưới đây tạo một cơ sở dữ liệu mới
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];2
Điều đáng chú ý là phương thức
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];9 chấp nhận một tham số tùy chọn
npm install sql.js0, phải là một
npm install sql.js1 đại diện cho một tệp cơ sở dữ liệu SQLite. Ví dụ, trong nút. js, chúng tôi có thể tải tệp
npm install sql.js2 hiện có như bên dưới
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];7
Trong đoạn mã trên, chúng tôi đã sử dụng Node tích hợp. js
npm install sql.js3 và
npm install sql.js4 để đọc tệp
npm install sql.js5 hiện có của chúng tôi
Chạy câu lệnh SQL
Một câu lệnh SQL có thể là một yêu cầu để tạo hoặc truy xuất một phần thông tin trong cơ sở dữ liệu hoặc để thực hiện một thao tác trên dữ liệu hiện có
Với SQL. js, bạn có thể dễ dàng chạy một câu lệnh mà không cần đọc kết quả của nó. Cú pháp như được viết dưới đây
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];1
Tất nhiên, tham số
npm install sql.js6 là câu lệnh SQL của bạn. Dưới đây là một ví dụ về cách tạo một bảng mới có tên là
npm install sql.js7 với các cột ID, tên, số điện thoại và địa chỉ trong cơ sở dữ liệu của chúng tôi. Nó cũng sẽ chèn một hàng mới vào bảng này
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];4
Các câu lệnh SQL đã chuẩn bị
Bạn có thể sử dụng các câu lệnh đã chuẩn bị để thực thi lặp đi lặp lại các câu lệnh SQL giống nhau hoặc tương tự với hiệu quả cao. Các câu lệnh đã chuẩn bị có thời gian phân tích cú pháp ngắn hơn nhiều so với các câu lệnh SQL đang chạy vì việc chuẩn bị cho truy vấn chỉ được thực hiện một lần. Chúng cũng rất hữu ích đối với việc tiêm SQL vì bạn không cần thoát khỏi các giá trị tham số, các giá trị này sẽ được truyền sau này bằng một giao thức khác
Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn
Với SQL. js, chúng ta cũng có thể viết các câu lệnh đã chuẩn bị bằng phương thức
npm install sql.js8
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];6
Dưới đây là một ví dụ để tìm nạp tất cả người dùng có ID từ một đến 10 trong cơ sở dữ liệu trước đây của chúng tôi
npm install sql.js9
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];8
Sau khi viết các câu lệnh SQL đã chuẩn bị, chúng ta sử dụng phương thức
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];10 để ràng buộc các giá trị bắt buộc của câu lệnh [
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];11 và
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];12 trong ví dụ trên]. Trong tương lai, chúng tôi sẽ sử dụng vòng lặp
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];13 để trả về tất cả các hàng có thể và ghi chúng vào bảng điều khiển
Ghi cơ sở dữ liệu vào đĩa
SQL. js cũng cung cấp tùy chọn xuất/ghi cơ sở dữ liệu vào đĩa dưới dạng tệp
npm install sql.js2 thông qua phương thức
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];15. Kết quả sẽ được trả về dưới dạng
npm install sql.js1 và bạn có thể sử dụng Nút. js
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];17 lớp và gói hệ thống tệp để ghi cơ sở dữ liệu vào đĩa
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];0
Sau khi chạy mã ở trên, bạn sẽ thấy một tệp mới có tên
Page Title // Load sql.js WebAssembly file let config = { locateFile: [] => "/path/to/downloaded/sql-wasm.wasm", }; initSqlJs[config].then[function [SQL] { console.log["sql.js initialized 🎉"]; }];18 trong thư mục gốc của dự án của bạn
Sự kết luận
Trong bài viết này, chúng tôi đã đề cập đến SQL. js, các tính năng mà nó cung cấp và cách sử dụng nó trong các ứng dụng trong thế giới thực. Trong khi SQL. js có thể tuyệt vời để xây dựng ứng dụng ưu tiên ngoại tuyến, chẳng hạn như ứng dụng ghi chú, bạn có thể cân nhắc sử dụng cơ sở dữ liệu quan hệ khác [MySQL, PostgreSQL] trong trường hợp bạn muốn quản lý dữ liệu người dùng từ bảng quản trị
Bạn có đang thêm các thư viện JS mới để cải thiện hiệu suất hoặc xây dựng các tính năng mới không?
Không còn nghi ngờ gì nữa, giao diện người dùng đang trở nên phức tạp hơn. Khi bạn thêm các thư viện JavaScript mới và các phần phụ thuộc khác vào ứng dụng của mình, bạn sẽ cần nhiều khả năng hiển thị hơn để đảm bảo người dùng của bạn không gặp phải các sự cố không xác định
LogRocket là một giải pháp giám sát ứng dụng giao diện người dùng cho phép bạn phát lại các lỗi JavaScript như thể chúng xảy ra trong trình duyệt của chính bạn để bạn có thể phản ứng với các lỗi hiệu quả hơn
LogRocket hoạt động hoàn hảo với mọi ứng dụng, bất kể khuôn khổ nào và có plugin để ghi lại ngữ cảnh bổ sung từ Redux, Vuex và @ngrx/store. Thay vì đoán lý do tại sao xảy ra sự cố, bạn có thể tổng hợp và báo cáo về trạng thái ứng dụng của bạn khi xảy ra sự cố. LogRocket cũng theo dõi hiệu suất của ứng dụng của bạn, báo cáo các số liệu như tải CPU của máy khách, mức sử dụng bộ nhớ của máy khách, v.v.