Hướng dẫn how to call database in javascript - cách gọi cơ sở dữ liệu trong javascript
|
. Một máy chủ web mini vào máy chủ cơ sở dữ liệu, vì vậy câu trả lời này vẫn là một tuyến đường khác bạn có thể đi.) Show
Bạn cũng có thể kết nối trực tiếp bằng ổ cắm (Google "ổ cắm JavaScript") và trực tiếp tại thời điểm này, tôi có nghĩa là sử dụng tệp flash cho mục đích này, mặc dù HTML5 có ổ cắm web như một phần của thông số kỹ thuật mà tôi tin rằng cho phép bạn làm điều tương tự. Một số người trích dẫn các vấn đề bảo mật, nhưng nếu bạn thiết kế chính xác các quyền cơ sở dữ liệu của mình, bạn nên về mặt lý thuyết, bạn có thể truy cập cơ sở dữ liệu từ bất kỳ mặt trước nào, bao gồm OSQL và không vi phạm bảo mật. Sau đó, vấn đề bảo mật sẽ là nếu bạn không kết nối qua SSL. Cuối cùng, mặc dù, tôi khá chắc chắn rằng đây là tất cả các lý thuyết vì tôi không tin bất kỳ thư viện JavaScript nào tồn tại để xử lý các giao thức truyền thông cho SSL hoặc SQL Server, vì vậy trừ khi bạn sẵn sàng tìm ra những điều này Tốt hơn là đi theo tuyến đường có một ngôn ngữ tập lệnh phía máy chủ và phía máy chủ ở giữa trình duyệt và cơ sở dữ liệu. Ví dụ cơ sở dữ liệu AJAXDatabase ExampleAJAX có thể được sử dụng để giao tiếp tương tác với cơ sở dữ liệu. Ví dụ cơ sở dữ liệu AJAXAJAX có thể được sử dụng để giao tiếp tương tác với cơ sở dữ liệu. Ví dụ sau đây sẽ chứng minh làm thế nào một trang web có thể tìm nạp thông tin từ cơ sở dữ liệu với AJAX:Ví dụ giải thích - hàm showCustomer () Khi người dùng chọn khách hàng trong danh sách thả xuống ở trên, một hàm gọi là async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}3 được thực thi. Hàm được kích hoạt bởi sự kiện async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}4:Showcustomer hàm showCustomer (str) {& nbsp; if (str == "") {& nbsp; & nbsp; & nbsp; document.getEuityById ("txthint"). InternalHtml = ""; & nbsp; & nbsp; & nbsp; trở về; & nbsp; } & nbsp; const xhttp = new xmlhttprequest (); & nbsp; xhttp.onload = function () {& nbsp; & nbsp; & nbsp; document.getEuityById ("txthint"). Internhtml = this.responsetext; & nbsp; } & nbsp; xhttp.open ("get", "getCustomer.php? q ="+str); & nbsp; xhttp.send (); }
Lưu ý rằng một tham số (q) được thêm vào URL (với nội dung của danh sách thả xuống)Trang máy chủ ajax Trang trên máy chủ được gọi bởi JavaScript ở trên là một tệp PHP có tên là "getCustomer.php". Mã nguồn trong "getCustomer.php" chạy truy vấn đối với cơ sở dữ liệu và trả về kết quả trong bảng HTML: Connect_error) {& nbsp; thoát ('không thể kết nối');} $ SQL = "Chọn CreateDID, CompanyName, ContactName, Địa chỉ, Thành phố, Mã Postalc, CountryFrom khách hàng ở nơi khách hàng =?"; $ stmt = $ mysqli-> chuẩn bị ($ sql); $ stmt-> bind_param ("s", $ _get ['q']); $ stmt-> exec ); $ stmt-> đóng (); echo " CustomerID | ";echo " " . $cid . " | ";echo " CompanyName | ";echo " " . $cname . " | ";echo " ContactName | ";echo " " . $name . " | ";echo " Address | ";echo " " . $adr . " | ";echo " City | ";echo " " . $city . " | ";echo " PostalCode | ";echo " " . $pcode . " | ";echo " Country | ";echo " " . $country . " | ";echo " echo " |
?>
Hình ảnh được sử dụng theo giấy phép từ Shutterstock.com
Nếu bạn đang phát triển các ứng dụng web, bạn gần như chắc chắn sẽ liên tục tương tác với cơ sở dữ liệu. Và khi đến lúc chọn cách bạn tương tác, các lựa chọn có thể quá sức.
Trong bài viết này, chúng tôi sẽ xem xét chi tiết theo 5 cách khác nhau để tương tác với cơ sở dữ liệu của bạn bằng JavaScript và chúng tôi sẽ nói về những ưu và nhược điểm của từng người. Chúng tôi sẽ bắt đầu với sự lựa chọn cấp thấp nhất-các lệnh SQL-sau đó chuyển qua các trừu tượng cấp cao hơn.
Chọn thư viện cơ sở dữ liệu phù hợp cho ứng dụng JavaScript của bạn có thể có tác động lớn đến khả năng duy trì, khả năng mở rộng và hiệu suất mã của bạn, vì vậy, nó đáng để dành một chút thời gian để tìm ra các tùy chọn của bạn.
Ứng dụng mẫu của chúng tôi
Chúng tôi sẽ sử dụng một ứng dụng Express tầm thường được lưu trữ trên Heroku làm ví dụ của chúng tôi. Tất cả các mã cho bài viết này là trong kho GitHub này. Hãy thoải mái sao chép nó và làm theo.
Pre-requisites
Để chạy ứng dụng mẫu, bạn sẽ cần phần mềm sau trên máy của bạn:
- Môi trường đầu cuối giống như UNIX (Mac OSX và Linux vẫn ổn. Nếu bạn sử dụng Windows, bạn sẽ cần hệ thống con Windows cho Linux).
- Git (và một tài khoản GitHub).
- NPM (phiên bản 6 trở lên).
- Công cụ dòng lệnh Heroku.
Nếu bạn không có tài khoản Heroku, bạn sẽ cần phải đăng ký tài khoản miễn phí. Nếu bạn không muốn đăng ký Heroku, bạn cũng có thể chạy ứng dụng cục bộ so với một trường hợp Postgres địa phương. Nếu bạn thoải mái với điều đó, sẽ khá dễ dàng để thấy những thay đổi bạn cần thực hiện thay vì triển khai đến Heroku.
Khi bạn đã cài đặt tất cả các bên trên, hãy chạy
async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}6 trong một thiết bị đầu cuối và bạn đã sẵn sàng để bắt đầu.
Xây dựng và triển khai ứng dụng Hello World
Để bắt đầu, chúng tôi sẽ thiết lập những điều sau:
- Một ứng dụng Express tầm thường chỉ phục vụ một trang web Hello Hello, World World.
- Một cơ sở dữ liệu Postgres.
- Hai bảng, đại diện cho người dùng trên mạng và nhận xét của người dùng và người dùng (một người dùng có nhiều nhận xét).
- Một số dữ liệu mẫu (trong trường hợp này, được tạo qua mockaroo.com).
Tôi đã tạo một ứng dụng mẫu sẽ thiết lập tất cả điều này cho bạn (miễn là bạn đã chạy
async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}6 như đã đề cập ở trên). Để thiết lập nó, vui lòng thực hiện các lệnh sau từ dòng lệnh:
async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}8
async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}9
Điều này sẽ mất một vài phút để hoàn thành. Trong khi bạn đang chờ đợi, bạn có thể xem Makefile để xem các lệnh có liên quan, thực hiện những điều sau đây:
- Tạo một ứng dụng Heroku mới.
- Thêm một thể hiện cơ sở dữ liệu Postgres.
- Triển khai ứng dụng cho Heroku.
- Chạy một lệnh trên Heroku để thiết lập các bảng cơ sở dữ liệu và nhập dữ liệu mẫu CSV.
- Mở URL của ứng dụng Heroku của bạn trong cửa sổ trình duyệt mới.
Vào cuối quá trình này, bạn sẽ thấy Hello Hello, thế giới trên một trang web.
Tìm nạp dữ liệu bằng SQL
OK - chúng tôi đã thiết lập tất cả! Chúng tôi đã tạo ra một cơ sở dữ liệu với hai bảng và một số dữ liệu mẫu. Nhưng chúng tôi chưa làm gì với nó. Bước tiếp theo là cho phép ứng dụng web của chúng tôi truy xuất dữ liệu từ cơ sở dữ liệu.
Bất cứ khi nào bạn tương tác với cơ sở dữ liệu quan hệ, bạn sẽ làm như vậy bằng cách gửi các lệnh SQL đến ổ cắm mạng mà cơ sở dữ liệu đang nghe. Điều này đúng với tất cả các thư viện mà chúng tôi sẽ xem xét trong bài viết này - ở cấp độ thấp nhất, tất cả chúng đều gửi các lệnh SQL đến cơ sở dữ liệu và truy xuất bất kỳ đầu ra nào trở lại.
Vì vậy, cách đầu tiên chúng tôi sẽ xem xét tương tác với cơ sở dữ liệu của chúng tôi là làm điều đó - gửi các lệnh SQL. Để làm điều này, chúng tôi sẽ cài đặt thư viện PG JavaScript, cho phép chúng tôi gửi SQL đến cơ sở dữ liệu Postgres và truy xuất kết quả.
Để cài đặt thư viện PG, thực hiện lệnh sau:
0Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Điều này sẽ tìm nạp và cài đặt thư viện, và nó sẽ thêm nó vào các tệp pack.json và pack-lock.json của bạn. Hãy để Lừa cam kết những thay đổi đó:
1Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
2Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Để nói chuyện với cơ sở dữ liệu của chúng tôi, chúng tôi cần một số chi tiết:
- Tên máy chủ của máy Postgres đang chạy.
- Các cổng Postgres mạng đang lắng nghe.
- Tên của cơ sở dữ liệu Dữ liệu của chúng tôi đang ở.
- Tên người dùng và mật khẩu có quyền truy cập dữ liệu đó.
Hầu hết các thư viện cơ sở dữ liệu sẽ cho phép chúng tôi thiết lập kết nối bằng cách cung cấp một đối tượng cho thư viện có khóa và giá trị cho tất cả các chi tiết đó hoặc bằng cách kết hợp tất cả chúng vào một URL cơ sở dữ liệu duy nhất, đó là những gì chúng tôi sẽ làm .
Khi bạn thêm cơ sở dữ liệu vào ứng dụng Heroku, bạn sẽ tự động nhận một biến môi trường có tên là DataBase_URL, chứa tất cả các chi tiết bạn cần kết nối với cơ sở dữ liệu. Bạn có thể thấy giá trị của cơ sở dữ liệu của bạn_url bằng cách chạy:
3Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Điều này sẽ xuất ra tất cả các biến môi trường mà ứng dụng của bạn có thể sử dụng. Chỉ nên có một cái cho bây giờ, vì vậy bạn nên thấy một cái gì đó như thế này trong đầu ra:
Cơ sở dữ liệu_url:
4Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
5Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
5Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Trong trường hợp ví dụ của chúng tôi, điều đó bị phá vỡ như thế này:
SQL
{"hostname": "ec2-52-73-247-67.compute-1.amazonaws.com",
"port": 5432,
"database": "dfb3aad8c026in","username": "clqcouauvejtvw","password": "1b079cad50f3ff9b48948f15a7fa52123bc6795b875348d66886407a266c0f5b"}
Giá trị cơ sở dữ liệu của bạn_URL sẽ khác nhau, nhưng cấu trúc sẽ giống nhau.
Bây giờ chúng tôi đã cài đặt thư viện PG và chúng tôi biết cách kết nối với cơ sở dữ liệu của chúng tôi, hãy để thực hiện ví dụ đầu tiên về tương tác với cơ sở dữ liệu. Chúng tôi chỉ cần tìm nạp danh sách người dùng và hiển thị chúng trên trang web của chúng tôi. Ở đầu tệp index.js của chúng tôi, chúng tôi sẽ yêu cầu thư viện PG của chúng tôi và tạo đối tượng kết nối cơ sở dữ liệu.
JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });
Trong khối
6, chúng tôi sẽ thay đổi dòng Get để gọi một phương thức hiển thị danh sách người dùng từ cơ sở dữ liệu:Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
7Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Cuối cùng, chúng tôi sẽ thực hiện chức năng Listusers:
JavaScript
async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}
Trong khối
6, chúng tôi sẽ thay đổi dòng Get để gọi một phương thức hiển thị danh sách người dùng từ cơ sở dữ liệu:Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Cuối cùng, chúng tôi sẽ thực hiện chức năng Listusers:
Mã này đợi cho đến khi kết nối được thiết lập cho cơ sở dữ liệu của chúng tôi, sau đó gửi truy vấn SQL bằng hàm truy vấn và lấy kết quả.
Bây giờ, bước này có thể thất bại vì nhiều lý do khác nhau, vì vậy trong mã, chúng tôi kiểm tra để đảm bảo chúng tôi đã có một số dữ liệu và nếu chúng tôi thực hiện, chúng tôi gán kết quả. Hãy gửi cho người dùng chính của đối tượng kết quả của chúng tôi. Tiếp theo, chúng tôi chuyển kết quả cho chức năng kết xuất, sau đó phát hành kết nối cơ sở dữ liệu của chúng tôi.
Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Trong chế độ xem/trang/index.ejs, chúng tôi có quyền truy cập vào đối tượng kết quả, vì vậy chúng tôi có thể hiển thị dữ liệu người dùng của mình như thế này:
HTML
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}0
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}1
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}2
Bạn có thể thấy mã với những thay đổi này ở đây.
8 vàUsers
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
9 là tên của hai cột từ bảng người dùng của cơ sở dữ liệu của chúng tôi.Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Hãy để triển khai các thay đổi này để chúng ta có thể thấy dữ liệu trong ứng dụng Heroku của chúng tôi:
Điều này sẽ mất một hoặc hai phút để triển khai. Khi lệnh đó đã thực hiện xong, hãy tải lại trình duyệt của bạn và bạn sẽ thấy một danh sách người dùng trên trang web.
- Ví dụ mysql
- Ví dụ trên là dành cho Postgres, nhưng mã cho các cơ sở dữ liệu quan hệ phổ biến khác sẽ tương tự nhau. Ví dụ: nếu bạn đang sử dụng MySQL:
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}5
- Thay vì
Users
- <%= user.id %> - <%= user.first_name %> <%= user.last_name %>
<% }); %>
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}4 (sử dụng MySQL2, không phải MySQL - MySQL2 nhanh hơn và hỗ trợ Async/Await)
JavaScript
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}
Trong khối
6, chúng tôi sẽ thay đổi dòng Get để gọi một phương thức hiển thị danh sách người dùng từ cơ sở dữ liệu:Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Cuối cùng, chúng tôi sẽ thực hiện chức năng Listusers:
Mã này đợi cho đến khi kết nối được thiết lập cho cơ sở dữ liệu của chúng tôi, sau đó gửi truy vấn SQL bằng hàm truy vấn và lấy kết quả.
Bây giờ, bước này có thể thất bại vì nhiều lý do khác nhau, vì vậy trong mã, chúng tôi kiểm tra để đảm bảo chúng tôi đã có một số dữ liệu và nếu chúng tôi thực hiện, chúng tôi gán kết quả. Hãy gửi cho người dùng chính của đối tượng kết quả của chúng tôi. Tiếp theo, chúng tôi chuyển kết quả cho chức năng kết xuất, sau đó phát hành kết nối cơ sở dữ liệu của chúng tôi.
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}6
Trong chế độ xem/trang/index.ejs, chúng tôi có quyền truy cập vào đối tượng kết quả, vì vậy chúng tôi có thể hiển thị dữ liệu người dùng của mình như thế này:
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}7
HTML
Bạn có thể thấy mã với những thay đổi này ở đây.
8 vàUsers
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
9 là tên của hai cột từ bảng người dùng của cơ sở dữ liệu của chúng tôi.Users
<% users.map((user) => { %>
<%= user.id %> - <%= user.first_name %> <%= user.last_name %> <% }); %>
Hãy để triển khai các thay đổi này để chúng ta có thể thấy dữ liệu trong ứng dụng Heroku của chúng tôi:
Điều này sẽ mất một hoặc hai phút để triển khai. Khi lệnh đó đã thực hiện xong, hãy tải lại trình duyệt của bạn và bạn sẽ thấy một danh sách người dùng trên trang web.
Ví dụ mysql
Ví dụ trên là dành cho Postgres, nhưng mã cho các cơ sở dữ liệu quan hệ phổ biến khác sẽ tương tự nhau. Ví dụ: nếu bạn đang sử dụng MySQL:
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}8
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}9
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });0Thay vì Users
<% users.map((user) => { %>- <%= user.id %> - <%= user.first_name %> <%= user.last_name %>
<% }); %>
0 sử dụng async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}4 (sử dụng MySQL2, không phải MySQL - MySQL2 nhanh hơn và hỗ trợ Async/Await)
Trong index.js, bạn sẽ yêu cầu mysql như thế này:
Vì vậy, khi chúng tôi sử dụng PG, chúng tôi đã có tuyên bố này:
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });1Khi chúng ta sử dụng KNEX, chúng ta có thể viết điều này:
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });2Điều đó có thể không giống như một sự khác biệt, nhưng vì cách chúng ta có thể soạn các cuộc gọi chức năng KNEX, chúng ta cũng có thể làm những việc như thế này:
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });3Tại đây, chúng tôi nhận được 5 hồ sơ người dùng, bắt đầu ở vị trí 8 trong tổng số tất cả các bản ghi người dùng có thể phù hợp với truy vấn của chúng tôi. Bạn có thể thấy toàn bộ các tùy chọn có sẵn trong tài liệu KNEX.
Hãy để thay đổi ứng dụng Express của chúng tôi để sử dụng KNEX để hiển thị một số bản ghi từ cơ sở dữ liệu của chúng tôi. Đầu tiên, trong index.js thay thế hai dòng sau:
JavaScript
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });…Với cái này:
JavaScript
const db = require('knex')({
client: 'pg',
connection: process.env.DATABASE_URL
});…Với cái này:
JavaScript
async function listUsers(req, res) {
try {
const result = await db.select().from('users').limit(5).offset(5);
const results = { 'users': (result) ? result : null};res.render('pages/index', results );
} catch (err) {
console.error(err);res.send("Error " + err);
}
}
…Với cái này:
Sau đó, thay đổi việc thực hiện
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });4 thành điều này:const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });5const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });6async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}2
Tệp/trang/trang của chúng tôi/index.ejs có thể giữ chính xác giống như trước đây.
Cam kết, đẩy và triển khai:
Khi bạn làm mới trình duyệt của mình, bạn sẽ thấy bản ghi người dùng 6 đến 10 trên trang.
Bạn có thể thấy mã với những thay đổi này ở đây.
Ánh xạ quan hệ đối tượng (ORM)users table when you write your JavaScript code, you can think about user objects.
Knex cung cấp cho chúng tôi một cách tương tác với cơ sở dữ liệu của chúng tôi, giống như JavaScript, nhưng chúng tôi vẫn được yêu cầu phải suy nghĩ theo cách tập trung vào cơ sở dữ liệu khi chúng tôi cần thao tác dữ liệu.
Ba thư viện tiếp theo mà chúng tôi sẽ nói đến đều được xây dựng trên đỉnh Knex (được xây dựng trên đỉnh của PG hoặc MySQL) và là những ví dụ về các thư viện Lập bản đồ đối tượng của đối tượng hoặc các thư viện ORM. Như tên gọi, mục đích của thư viện ORM là dịch giữa dữ liệu trong cơ sở dữ liệu quan hệ và các đối tượng JavaScript trong ứng dụng của bạn. Điều đó có nghĩa là, thay vì nghĩ về các bản ghi trong bảng người dùng khi bạn viết mã JavaScript của mình, bạn có thể nghĩ về các đối tượng người dùng.
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });8async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}9
const db = require('knex')({
client: 'pg',
connection: process.env.DATABASE_URL
});0Sự phản đối
const db = require('knex')({
client: 'pg',
connection: process.env.DATABASE_URL
});1const db = require('knex')({
client: 'pg',
connection: process.env.DATABASE_URL
});2Thư viện đầu tiên mà chúng tôi sẽ xem xét là sự phản đối, được xây dựng trên đỉnh Knex:
JavaScript
class Comment extends Model {static get tableName() {
return 'comments';
}
}
…Với cái này:
Sau đó, thay đổi việc thực hiện
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });4 thành điều này:JavaScript
class User extends Model {static get tableName() {
return 'users';
}fullName() {
return `${this.first_name} ${this.last_name}`;
}static get relationMappings() {return {
comments: {
relation: Model.HasManyRelation,
modelClass: Comment,
join: {
from: 'users.id',
to: 'comments.user_id'
}
}
};
}
}
…Với cái này:
Sau đó, thay đổi việc thực hiện
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });4 thành điều này:JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });0
…Với cái này:
Sau đó, thay đổi việc thực hiện
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });4 thành điều này:const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });1
Tệp/trang/trang của chúng tôi/index.ejs có thể giữ chính xác giống như trước đây.
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}0
async function listUsers(req, res) {5
try {
const result = await db.select().from('users').limit(5).offset(5);
const results = { 'users': (result) ? result : null};res.render('pages/index', results );
} catch (err) {
console.error(err);res.send("Error " + err);
}
}
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}2
Cam kết, đẩy và triển khai:
Khi bạn làm mới trình duyệt của mình, bạn sẽ thấy bản ghi người dùng 6 đến 10 trên trang.
Bạn có thể thấy mã với những thay đổi này ở đây.
Ánh xạ quan hệ đối tượng (ORM)
JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });2
…Với cái này:
Sau đó, thay đổi việc thực hiện
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });4 thành điều này:Đối với ví dụ tầm thường này, bạn đã giành được thông báo về bất kỳ sự khác biệt nào, nhưng đối với các ứng dụng trong thế giới thực, hiệu suất nhấn có thể rất nghiêm trọng và gây ra nhiều vấn đề.
May mắn thay, mọi thư viện ORM đều có các tính năng giúp dễ dàng tránh được vấn đề này (miễn là bạn biết nó ở đó). Ở đây, cách thức phản đối nó; Trong index.js, thay thế khối mã ở trên bằng điều này:
async function listUsers(req, res) {7
try {
const result = await db.select().from('users').limit(5).offset(5);
const results = { 'users': (result) ? result : null};res.render('pages/index', results );
} catch (err) {
console.error(err);res.send("Error " + err);
}
}
Một dòng này không giống như khối mã ở trên, nhưng theo cách hiệu quả cơ sở dữ liệu hơn nhiều. Sự phản đối sẽ sử dụng thông tin mối quan hệ mà chúng tôi cung cấp để tìm ra cách tìm nạp dữ liệu người dùng và dữ liệu nhận xét trong một truy vấn duy nhất, và giải nén và ghép các kết quả với cùng một cấu trúc đối tượng mà chúng tôi đã xây dựng trước khi sử dụng vòng lặp của chúng tôi.
Bạn có thể thấy mã với những thay đổi này ở đây.
Giá sách
Thư viện ORM tiếp theo mà chúng tôi sẽ xem xét là giá sách.
Rất nhiều sự khác biệt giữa các thư viện ORM phụ thuộc vào trường hợp sử dụng mà thư viện được tối ưu hóa. Trong trường hợp của kệ sách, nó được thiết kế rõ ràng để giúp dễ dàng hiển thị các danh sách dữ liệu được phân trang, đây là trường hợp sử dụng rất phổ biến trong các ứng dụng web.
Hãy để thay thế sự phản đối bằng kệ sách trong ứng dụng của chúng tôi:
async function listUsers(req, res) {8
try {
const result = await db.select().from('users').limit(5).offset(5);
const results = { 'users': (result) ? result : null};res.render('pages/index', results );
} catch (err) {
console.error(err);res.send("Error " + err);
}
}
async function listUsers(req, res) {9
try {
const result = await db.select().from('users').limit(5).offset(5);
const results = { 'users': (result) ? result : null};res.render('pages/index', results );
} catch (err) {
console.error(err);res.send("Error " + err);
}
}
class Comment extends Model {static get tableName() {0
return 'comments';
}
}
class Comment extends Model {static get tableName() {1
return 'comments';
}
}
Trong index.js, thay thế các dòng sau:
JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });3
…Với cái này:
JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });4
…Với cái này:
Thay thế các định nghĩa lớp của chúng tôi bằng những điều này:
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });5
JavaScript
JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });6
…Với cái này:
Thay thế các định nghĩa lớp của chúng tôi bằng những điều này:
JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });7
Chức năng
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });4 của chúng tôi bây giờ trông như thế này:async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}0
class Comment extends Model {static get tableName() {4
return 'comments';
}
}
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}2
Như bạn có thể thấy, định nghĩa của các lớp là ngắn gọn hơn một chút, nhưng giá sách cần một định nghĩa dài dòng hơn về cách giải nén dữ liệu của chúng tôi để xây dựng cấu trúc người dùng/bình luận. Cũng lưu ý cách khái niệm các trang dữ liệu được tích hợp trực tiếp vào API thư viện.
Mã trong chế độ xem/trang/index.ejs gần như giống hệt nhau (Tôi đã xóa hàm fullName khỏi lớp người dùng):
HTML
Bạn có thể thấy mã với những thay đổi này ở đây. Và tất nhiên, một lần nữa cam kết và triển khai.
Phần tiếp theo
Thư viện cuối cùng mà chúng tôi sẽ xem xét là phần tiếp theo.
class Comment extends Model {static get tableName() {6
return 'comments';
}
}
class Comment extends Model {static get tableName() {7
return 'comments';
}
}
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}9
class Comment extends Model {static get tableName() {9
return 'comments';
}
}
Phần tiếp theo khá quan tâm theo cách nó mong đợi dữ liệu của bạn được cấu trúc. Nếu bạn tuân theo các quy ước của nó, bạn có thể viết ít mã hơn và cho phép phần tiếp theo thực hiện nhiều công việc cho bạn. Cụ thể, phần tiếp theo có rất nhiều tính năng để giúp tạo các bảng cho bạn và theo mặc định, nó sẽ tạo ra chúng theo cấu trúc của riêng nó và các quy ước đặt tên.
Trong index.js, thay thế các dòng sau:
JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });8
…Với cái này:
JavaScript
const { Pool } = require('pg');const conn = new Pool({ connectionString: process.env.DATABASE_URL });9
…Với cái này:
JavaScript
async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}0
…Với cái này:
Thay thế các định nghĩa lớp của chúng tôi bằng những điều này:
JavaScript
Chức năng
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });4 của chúng tôi bây giờ trông như thế này:Như bạn có thể thấy, định nghĩa của các lớp là ngắn gọn hơn một chút, nhưng giá sách cần một định nghĩa dài dòng hơn về cách giải nén dữ liệu của chúng tôi để xây dựng cấu trúc người dùng/bình luận. Cũng lưu ý cách khái niệm các trang dữ liệu được tích hợp trực tiếp vào API thư viện.
JavaScript
async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}1
…Với cái này:
JavaScript
async function listUsers(req, res) {try {const db = await conn.connect()const result = await db.query('SELECT * FROM users');const results = { users: (result) ? result.rows : null};res.render('pages/index', results );db.release();} catch (err) {console.error(err);res.send("Error " + err);}}2
…Với cái này:
class User extends Model {static get tableName() {4
return 'users';
}fullName() {
return `${this.first_name} ${this.last_name}`;
}static get relationMappings() {return {
comments: {
relation: Model.HasManyRelation,
modelClass: Comment,
join: {
from: 'users.id',
to: 'comments.user_id'
}
}
};
}
}
Thay thế các định nghĩa lớp của chúng tôi bằng những điều này:
class User extends Model {static get tableName() {5
return 'users';
}fullName() {
return `${this.first_name} ${this.last_name}`;
}static get relationMappings() {return {
comments: {
relation: Model.HasManyRelation,
modelClass: Comment,
join: {
from: 'users.id',
to: 'comments.user_id'
}
}
};
}
}
Bạn có thể thấy mã với những thay đổi này ở đây.
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}0
class User extends Model {static get tableName() {7
return 'users';
}fullName() {
return `${this.first_name} ${this.last_name}`;
}static get relationMappings() {return {
comments: {
relation: Model.HasManyRelation,
modelClass: Comment,
join: {
from: 'users.id',
to: 'comments.user_id'
}
}
};
}
}
async function listUsers(req, res) {try {const conn = await mysql.createConnection(process.env.DATABASE_URL);const [rows, fields] = await conn.execute('SELECT * FROM users');const results = { 'users': rows };res.render('pages/index', results );await conn.end();} catch (err) {console.error(err);res.send("Error " + err);}}2
JavaScript
Chức năng
const { Pool } = require('pg');
const conn = new Pool({ connectionString: process.env.DATABASE_URL });4 của chúng tôi bây giờ trông như thế này:Như bạn có thể thấy, định nghĩa của các lớp là ngắn gọn hơn một chút, nhưng giá sách cần một định nghĩa dài dòng hơn về cách giải nén dữ liệu của chúng tôi để xây dựng cấu trúc người dùng/bình luận. Cũng lưu ý cách khái niệm các trang dữ liệu được tích hợp trực tiếp vào API thư viện.
Mã trong chế độ xem/trang/index.ejs gần như giống hệt nhau (Tôi đã xóa hàm fullName khỏi lớp người dùng):
Nếu bạn sử dụng rất nhiều các tính năng của cơ sở dữ liệu của mình, có thể với các chế độ xem phức tạp hoặc các quy trình được lưu trữ, bạn có thể thấy việc sử dụng KNEX hoặc SQL thô dễ dàng hơn. Nhưng, đối với hầu hết các ứng dụng web, nó rất có thể là một thư viện ORM sẽ giúp cuộc sống của bạn dễ dàng hơn bằng cách trừu tượng hóa cấu trúc bảng và cho phép bạn suy nghĩ về dữ liệu ứng dụng của mình như các đối tượng JavaScript.
Nếu bạn đã quyết định về ORM, thì việc lựa chọn thư viện ORM sẽ luôn luôn rõ ràng. Phong cảnh của các thư viện JavaScript rất năng động. Các thư viện mới được tạo ra khá thường xuyên, và các thư viện cũ không được ủng hộ. Dưới đây là một vài điều cần suy nghĩ khi đưa ra lựa chọn của bạn:
- Quét qua tài liệu của thư viện và xem nó có rõ ràng và toàn diện không. Sau đó, quyết định xem cách API được kết hợp với nhau có ý nghĩa với bạn không. Các thư viện khác nhau sử dụng các cách tiếp cận khác nhau và bạn có thể thấy một trong số chúng phù hợp hơn so với các thư viện khác cho các yêu cầu và sở thích của bạn. Điều này đặc biệt đúng nếu bạn đang viết mã để làm việc với cơ sở dữ liệu hiện có hoặc tạo cơ sở dữ liệu của bạn khi bạn phát triển ứng dụng của mình.
- Hãy nhìn vào cộng đồng xung quanh thư viện. Đó có phải là điều mà rất nhiều người đang tích cực sử dụng? Nếu vậy, có lẽ sẽ có rất nhiều sự giúp đỡ và lời khuyên có sẵn nếu bạn cần nó. Một số thư viện cũng có hệ sinh thái plugin rộng lớn xung quanh chúng và có thể các plugin cụ thể làm cho cuộc sống của bạn dễ dàng hơn nhiều.
- Một vấn đề liên quan là tuổi của thư viện. Nếu nó đã tồn tại trong một thời gian, thì nhiều khả năng các vấn đề phổ biến đã được tìm thấy và khắc phục. Nếu nó là một thư viện tương đối mới, bạn có thể phải tìm ra nhiều thứ hơn cho chính mình (đó có thể là một điều tốt nếu bạn là người thích chơi với đồ chơi mới, sáng bóng và giải các câu đố).
- Hiệu suất có nhiều khả năng phụ thuộc vào cách bạn sử dụng thư viện hơn là trên chính thư viện. Nhưng, nếu bạn hoàn toàn, tích cực phải ép vài micro giây cuối cùng ra khỏi ứng dụng của bạn, sau đó làm việc gần hơn với cơ sở dữ liệu bằng SQL hoặc KNEX sẽ nhanh hơn một chút. Được cảnh báo rằng đây thường là một lợi ích cận biên và chi phí cho khả năng duy trì mã của bạn rất có thể cao hơn mức tăng trong hiệu suất điểm chuẩn.
Hạnh phúc truy vấn!
