Hướng dẫn can you connect javascript to database? - bạn có thể kết nối javascript với cơ sở dữ liệu không?

Chào mừng bạn đến với một hướng dẫn về cách kết nối với cơ sở dữ liệu trong JavaScript. Cần kết nối với cơ sở dữ liệu trong JavaScript để tìm nạp hoặc lưu một số dữ liệu?

Có thể kết nối với cơ sở dữ liệu với JavaScript hiện đại, nhưng đó là một quy trình khác nhau tùy thuộc vào nơi bạn đang áp dụng nó vào:

• Trên các trang web (JavaScript phía máy khách), thực tiễn thông thường là thực hiện cuộc gọi AJAX đến tập lệnh phía máy chủ sẽ kết nối với cơ sở dữ liệu.
• Trong NodeJS (JavaScript phía máy chủ), chúng ta có thể dễ dàng kết nối với cơ sở dữ liệu bằng mô-đun cơ sở dữ liệu tương ứng.

Vì vậy, chính xác làm thế nào để chúng ta kết nối với cơ sở dữ liệu trong các trường hợp trên? Hãy để chúng tôi đi qua một số ví dụ và lựa chọn thay thế - đọc tiếp để tìm hiểu!

Tôi đã bao gồm một tệp zip với tất cả các mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.

MỤC LỤC

Tải xuống & ghi chú

Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.

Ghi chú nhanh

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.

Mã hóa ví dụ Tải xuống

Nhấn vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.

Kết nối cơ sở dữ liệu thông qua AJAX (JS phía máy khách)

Nếu bạn đang làm việc với một trang web, nó được gọi là JavaScript phía máy khách vì nó chạy trên thiết bị của người dùng. Trong trường hợp này, chúng tôi thực hiện một cuộc gọi AJAX trung gian đến tập lệnh phía máy chủ sẽ kết nối với cơ sở dữ liệu. Hãy lưu ý, điều này dựa trên PHP MySQL, tôi sẽ để lại nhiều liên kết bên dưới cho các ngôn ngữ và cơ sở dữ liệu khác.

Bước 1) Bảng cơ sở dữ liệu giả

1a-dummy.sql

CREATE TABLE `users` (
  `user_id` int(11) NOT NULL,
  `user_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `users`
  ADD PRIMARY KEY (`user_id`),
  ADD KEY `user_name` (`user_name`);

ALTER TABLE `users`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

INSERT INTO `users` (`user_id`, `user_name`) VALUES
  (1, 'John Doe'),
  (2, 'Jane Doe'),
  (3, 'Johan Doe');

Với mục đích trình diễn, chúng tôi sẽ sử dụng bảng người dùng giả này - chỉ 2 trường ở đây, ID người dùng và tên.

Bước 2) Tập lệnh phía máy chủ (kết nối với cơ sở dữ liệu)

1b-database.php

getMessage()); }

// (C) GET USERS
$stmt = $pdo->prepare("SELECT * FROM `users`");
$stmt->execute();
$users = $stmt->fetchAll();
foreach ($users as $u) {
  printf("
[%u] %s
", $u['user_id'], $u['user_name']);
}

// (D) CLOSE DATABASE CONNECTION
$pdo = null;
$stmt = null;

Tiếp theo, tập lệnh phía máy chủ này sẽ kết nối với cơ sở dữ liệu. Nó chỉ đơn giản là có được tất cả người dùng từ cơ sở dữ liệu và xuất chúng bằng HTML.

Bước 3) HTML & JavaScript (tập lệnh phía máy chủ gọi)

1c-javascript.html

Cuối cùng, tất cả những gì còn lại là sử dụng JavaScript trên trang web để thực hiện cuộc gọi tìm nạp AJAX đến tập lệnh phía máy chủ.

P.S. Ajax là viết tắt của JavaScript không đồng bộ và XML. Nói một cách đơn giản, dữ liệu tải mà không làm mới toàn bộ trang.

Tại sao phương pháp vòng tròn?

• Cơ sở dữ liệu sẽ phải được tiếp xúc trực tiếp với Internet để chấp nhận kết nối.
• Người dùng cơ sở dữ liệu và mật khẩu phải được mã hóa cứng trong JavaScript.
• Là phía máy khách trong trường hợp này, mã nguồn và người dùng/mật khẩu được hiển thị đầy đủ cho tất cả người dùng.

Đây là lý do tại sao việc giữ các kết nối cơ sở dữ liệu phía sau tập lệnh phía máy chủ có ý nghĩa hơn. Người dùng don lồng có thể xem người dùng/mật khẩu và không thể trực tiếp gây rối với cơ sở dữ liệu.

NodeJS Kết nối với cơ sở dữ liệu (JS phía máy chủ)

Làm việc với Nodejs phía máy chủ? Dưới đây là cách kết nối với cơ sở dữ liệu trong NodeJS. Hãy lưu ý một lần nữa, ví dụ này là sử dụng MySQL, nhưng NodeJS cũng hỗ trợ các cơ sở dữ liệu khác như MSSQL và MongoDB.

Bước 1) Cài đặt mô -đun cơ sở dữ liệu

Đầu tiên, điều hướng đến thư mục dự án của bạn trong dòng lệnh và cài đặt mô -đun cơ sở dữ liệu:

D:\YOUR\PROJECT> npm install mysql

Để đơn giản, chúng ta sẽ sử dụng lại bảng cơ sở dữ liệu giả ở trên và MySQL. Nếu bạn không có kế hoạch sử dụng MySQL, thì cũng có một số mô -đun cơ sở dữ liệu nút khác:

• MSSQL
• MongoDB
• Postgres

Bước 2) Kịch bản

2-node-db.js

// (A) LOAD DB MODULE
const mysql = require("mysql");

// (B) CREATE CONNECTION - CHANGE TO YOUR OWN !
const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "test"
});
db.connect((err) => {
  if (err) { throw err; }
  console.log("DB connection OK");
});

// (C) QUERY
db.query("SELECT * FROM `users`", (err, results) => {
  if (err) { throw err; }
  console.log(results);
});

Đúng, nó đơn giản - chỉ cần tải mô -đun cơ sở dữ liệu và tạo kết nối. Nhưng hãy lưu ý rằng điều này dựa trên MySQL một lần nữa, hãy cài đặt và tải của riêng bạn nếu bạn đang sử dụng thứ khác.

Thay thế) lưu trữ cục bộ & nbsp;LOCAL STORAGE 

3-localstorage.html

// (A) DATA OBJECT
var user = {
  name : "John Doe",
  email : "",
  gender : "Doe"
};
 
// (B) STORE IN LOCAL STORAGE
// Note: JSON encode
localStorage.setItem("User", JSON.stringify(user));
 
// (C) RETRIEVE
// Note: JSON decode
user = localStorage.getItem("User");
user = JSON.parse(user);
console.log(user);

Nếu bạn chỉ cần một số lưu trữ tạm thời đơn giản cho trang web của mình, bạn không cần một cơ sở dữ liệu đầy đủ. Tại đây, cách chúng tôi có thể lưu trữ một số biến đơn giản bằng API lưu trữ web, chỉ có 4 thao tác:

• localStorage.setItem(KEY, VALUE) - Lưu dữ liệu vào lưu trữ cục bộ.
• localStorage.getItem(KEY) - Lấy dữ liệu từ lưu trữ cục bộ.
• localStorage.removeItem(KEY) - Xóa dữ liệu khỏi bộ lưu trữ cục bộ.
• localStorage.clear() - Xóa mọi thứ.

Liên kết & Tài liệu tham khảo

• Kết nối cơ sở dữ liệu PHP PDO
• Cơ sở dữ liệu ASP
• Cơ sở dữ liệu Python
• Ruby DBI
• Lưu trữ địa phương JavaScript

Bảng gian lận infographic

KẾT THÚC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc!