Node js Lấy và Hiển thị Dữ liệu từ Hướng dẫn Cơ sở dữ liệu MySQL – lấy dữ liệu từ cơ sở dữ liệu mysql bằng cách sử dụng nút js

Hướng dẫn từng bước hùng hồn này sẽ chỉ cho bạn cách tìm nạp dữ liệu hoặc ghi lại cơ sở dữ liệu MySQL trong ứng dụng Node js.

Bạn đang xem : truy xuất dữ liệu từ cơ sở dữ liệu mysql bằng cách sử dụng nút js

Hướng dẫn từng bước hùng hồn này sẽ chỉ cho bạn cách tìm nạp dữ liệu hoặc ghi lại cơ sở dữ liệu MySQL trong ứng dụng Node js.

Không chỉ vậy, chúng tôi cũng sẽ xác định cách hiển thị dữ liệu MySQL trong thành phần bảng HTML bằng cách sử dụng khung giao diện người dùng Bootstrap 5.

Để truy xuất dữ liệu từ cơ sở dữ liệu MySQL, chúng tôi sẽ tạo một tuyến GET bằng cách sử dụng js express để hiển thị các bản ghi trong ứng dụng Node.

Chúng tôi cũng sẽ cần các mô-đun express-create, mysql, body-parser, express-session và EJS (nhúng các mẫu JavaScript).

Hầu hết chúng ta đã biết MySQL mạnh mẽ như thế nào; nó nói chung là một hệ quản trị cơ sở dữ liệu quan hệ hoạt động trên Ngôn ngữ truy vấn có cấu trúc (SQL). Nó giúp xây dựng một ứng dụng web có thể mở rộng trong đó MySQL cho phép bạn lưu trữ dữ liệu trong cơ sở dữ liệu.

Hãy để chúng tôi tìm hiểu cách lấy và hiển thị các bản ghi từ cơ sở dữ liệu MySQL sang ứng dụng Node js.

Cách lấy và hiển thị các bản ghi từ Cơ sở dữ liệu MySQL trong Node Js

  • Bước 1: Thiết lập ứng dụng Node
  • Bước 2: Thêm các mô-đun cần thiết
  • Bước 3: Tạo Bảng Cơ sở dữ liệu bằng Truy vấn SQL
  • Bước 4: Kết nối Ứng dụng Node với Cơ sở dữ liệu MySQL
  • Bước 5: Hiển thị Bản ghi trong Bảng HTML
  • Bước 6: Tạo tuyến trong nút
  • Bước 7: Định cấu hình máy chủ nút
  • Bước 8: Gọi ứng dụng Node

Thiết lập ứng dụng Node

Tạo thư mục dự án hoàn toàn mới để lưu các tệp dự án.

  

mkdir

node-dune

Di chuyển vào bên trong thư mục mới:

  

cd

node-dune

Đi tới dấu nhắc lệnh, tại đây bạn phải nhập lệnh đã cho.

  

npm

init

Sau khi bạn gọi lệnh, tệp package.json sẽ được tạo trong thư mục gốc của dự án của bạn.

Thêm các mô-đun cần thiết

Cài đặt mô-đun EJS, mô-đun này sẽ cho phép bạn tạo HTML với javascript thuần túy.

  npx express --view 

=

ejs
< / pre>

Ngay sau khi chạy bộ lệnh đã cho để cài đặt gói mysql, express-flash, express-session, body-parser và gật đầu.

  

npm

cài đặt < / p> -g express-generator

npm

cài đặt

npm

cài đặt

mysql express-flash express-session body-parser gật đầu

Tạo bảng cơ sở dữ liệu bằng truy vấn SQL

Để giao tiếp với cơ sở dữ liệu, chúng ta cần một bảng cụ thể trong cơ sở dữ liệu MySQL với các giá trị nhất định.

Hãy để chúng tôi tạo bảng vào cơ sở dữ liệu bằng cách sử dụng truy vấn SQL đã cho.

  

TẠO

BẢNG < / p>

`

nhân viên

`

(

`

id

`

int

(

20

)

KHÔNG

NULL

,

`

name

`

varchar

(

55

)

KHÔNG

NULL

,

`

email

`

varchar

(

55

)

KHÔNG

KHÔNG ĐỦ

,

`

create_at

`

dấu thời gian

KHÔNG

KHÔNG ĐỦ

DEFAULT

current_timestamp

(

)

)

ĐỘNG CƠ

=

InnoDB

DEFAULT

CHARSET

=

utf8mb4 < p class = "dấu chấm câu">;

Kết nối ứng dụng Node với Cơ sở dữ liệu MySQL

Bên trong thư mục gốc của dự án, tạo tệp db.js ; trong tệp này, chúng tôi sẽ thêm thông tin đăng nhập để tạo kết nối của Node js với cơ sở dữ liệu MySQL.

Đảm bảo thêm các chi tiết cơ sở dữ liệu của bạn như máy chủ, người dùng, mật khẩu và tên cơ sở dữ liệu.

  

var

mysql

=

yêu cầu

(

'mysql'

)

var

kết nối

=

mysql

.

createConnection

(

{

máy chủ lưu trữ

:

'localhost'

,

người dùng

:

'root'

,

mật khẩu

:

''

,

cơ sở dữ liệu

:

'demo'

,

}

)

kết nối

.

kết nối

(

(

lỗi

)

= & gt;

{

nếu

(

err

)

{

console

.

nhật ký

(

'Lỗi kết nối cơ sở dữ liệu:'

+

err

)

trả về

}

console

.

nhật ký

(

'Đã kết nối với cơ sở dữ liệu'

)

}

)

mô-đun

.

xuất

=

kết nối

Hiển thị Bản ghi trong Bảng HTML

Tiếp theo, bạn phải tạo users-list.ejs bên trong thư mục views / , đảm bảo thêm mã đã cho bên trong tệp mới tạo.

  

& lt;!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

lang

=

"

vi

"

& gt;

& lt;

đầu

& gt; < / p>

& lt;

title

& gt; < / p>

Nút Js Lấy Dữ liệu từ MySQL và Hiển thị Bảng HTML Ví dụ

& lt; / tiêu đề

& gt;

& lt;

meta

bộ ký tự

=

"

UTF-8

"

/ & gt;

& lt;

meta

tên

=

"

khung nhìn

"

nội dung

=

"

width = device-width, Initial-scale = 1

"

/ & gt;

& lt;

liên kết

href

=

"

https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

"

< / p>

rel

=

"

biểu định kiểu

"

/ & gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

& lt;

div

class

=

"

container mt-5

"

& gt;

& lt;%

nếu

(

thông báo

.

thành công

)

{

% & gt;

& lt;

p

lớp

=

"

cảnh báo alert-thành công mt-4

"

& gt;

& lt;% -

thông báo

.

thành công

% & gt;

& lt ; /

p

& gt;

& lt;%

}

% & gt;

& lt;

br

/ & gt;

& lt;

bảng

lớp

=

"

bảng

"

& gt;

& lt;

thead

& gt; < / p>

& lt;

tr

& gt; < / p>

& lt;

th

phạm vi

=

"

col

"

& gt;

#Id

& lt; /

th

& gt;

& lt;

th

phạm vi

=

"

col

"

& gt;

Tên

& lt; /

th

& gt;

& lt;

th

phạm vi

=

"

col

"

& gt;

Gửi email

< p class = "dấu chấm câu"> & lt; /

th

& gt;

& lt;

th

width

=

"

155px

"

& gt;

Hành động

& lt; /

th

& gt;

& lt; /

tr

& gt;

& lt; /

thead

& gt;

& lt;

tbody

& gt; < / p>

& lt;%

nếu

(

data

.

length

)

{

cho

(

var

i

=

0

;

i

& lt;

data

.

length

;

i

++

)

{

% & gt;

& lt;

tr

& gt; < / p>

& lt;

th

phạm vi

=

"

row

"

& gt;

& lt;% =

(

i

+

1

)

% & gt; < / p>

& lt; /

th

& gt;

& lt;

td

& gt; < / p>

& lt;% =

data < p class = "dấu chấm câu"> [

i

]

.

tên

% & gt;

& lt; / td

& gt;

& lt;

td

& gt; < / p>

& lt;% =

data < p class = "dấu chấm câu"> [

i

]

.

email

% & gt;

& lt; / td

& gt;

& lt; /

tr

& gt;

& lt;%

}

}

khác

{

% & gt;

& lt;

tr

& gt; < / p>

& lt;

td

& gt; < / p>

Không tìm thấy bản ghi nào

& lt; /

td

< p class = "dấu chấm câu"> & gt;

& lt; /

tr

& gt;

& lt;%

}

% & gt;

& lt; /

tbody

& gt;

& lt; /

bảng

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;

Tạo tuyến trong nút

Trong thư mục các tuyến / , bạn cần cập nhật mã đã cho vào tệp users.js để xây dựng tuyến, tệp này thực hiện truy vấn sql để quản lý dữ liệu trong cơ sở dữ liệu.

  

var

express

=

yêu cầu

(

'express'

)

var

connection

=

yêu cầu

(

'../ db.js'

)

var

router

=

express

.

Bộ định tuyến

(

)

bộ định tuyến

.

lấy

(

'/'

,

hàm

(>

req

,

res

,

tiếp theo

)

{

kết nối

.

truy vấn

(

'CHỌN * TỪ LỆNH CỦA nhân viên THEO ID DESC'

,

hàm

(

err

,

hàng

)

{

nếu

(

err

)

{

req

.

flash

(

'lỗi'

,

err

)

res

.

kết xuất

(

'danh sách người dùng'

,

{

dữ liệu

:

''

}

< p class = "dấu chấm câu">)

}

khác

{

res

.

kết xuất

(

'danh sách người dùng'

,

{

dữ liệu

:

row

}

)

}

}

)

}

)

mô-đun

.

xuất

=

bộ định tuyến

Định cấu hình máy chủ nút

Trong bước cuối cùng này, bạn phải cập nhật mã được đề xuất bên trong tệp app.js . Nhập tuyến đường và đặt kết nối db để ứng dụng hoạt động.

  

var

createError

=

yêu cầu

(

'http-error'

)

var

express

=

yêu cầu

(

'express'

)

var

path

=

yêu cầu

(

'đường dẫn'

)

var

cookieParser

=

yêu cầu

(

'trình phân tích cú pháp cookie'

)

var

logger

=

yêu cầu

(

'morgan'

)

var

bodyParser

=

yêu cầu

(

'trình phân tích cú pháp nội dung'

)

var

flash

=

yêu cầu

(

'express-flash'

)

var

expressValidator

=

yêu cầu

(

'trình xác thực cấp tốc'

)

var

session

=

yêu cầu

(

'phiên cấp tốc'

)

var

mysql

=

yêu cầu

(

'mysql'

)

var

connection

=

yêu cầu

(

'./ db'

)

var

appRouter

=

yêu cầu

(

'./ route / index'

)

var

sqlRoute

=

yêu cầu

(

'./ route / users'

)

var

app

=

express

(

)

ứng dụng

.

đặt

(

'lượt xem'

,

đường dẫn

.

tham gia p>

(

__dirname

,

'lượt xem'

< p class = "dấu chấm câu">)

)

ứng dụng

.

đặt

(

'công cụ xem'

,

'js'

)

ứng dụng

.

sử dụng

(

trình ghi nhật ký

(

'nhà phát triển'

)

)

ứng dụng

.

sử dụng

(

bodyParser

.

json

(

)

)

ứng dụng

.

sử dụng

(

cookieParser

(

)

)

ứng dụng

.

sử dụng

(

bodyParser

.

urlencoded

(

{

mở rộng

:

true

}

)

)

ứng dụng

.

sử dụng

(

express

.

tĩnh

(

đường dẫn

. >

tham gia

(

__dirname

,

'công khai'

)

< p class = "dấu chấm câu">)

)

ứng dụng

.

sử dụng

(

phiên

(

{

secret

:

'abcd123456'

,

lưu lại

:

false

,

saveUnitialized

:

true

,

cookie

:

{

maxAge

:

60000

}

,

}

)

,

)

ứng dụng

.

sử dụng

(

expressValidator

(

)

)

ứng dụng

.

sử dụng

(

flash

(

)

)

ứng dụng

.

sử dụng

(

'/'

,

appRouter

)

ứng dụng

.

sử dụng

(

'/ người dùng'

,

sqlRoute

)

ứng dụng

.

sử dụng

(

hàm

(

req

,

res

,

tiếp theo

)

{

tiếp theo

(

createError

(

404

)

)

}

)

app

.

danh sách

(

4000

,

hàm

(

< p class = "dấu chấm câu">)

{

console

.

nhật ký

(

'Ứng dụng được kết nối với cổng: 4000'

)

}

)

ứng dụng

.

sử dụng

(

hàm

(

err

,

req

,

res

,

tiếp theo

)

{

res

.

người dân địa phương

.

message

=

err

.

res

.

người dân địa phương

.

error

=

req

.

app

.

lấy

(< / p>

'env'

)

===

< p class = "token string"> 'development'

?

err

:

{

}

res

.

trạng thái

(

err

.

trạng thái

||

500

) res

.

kết xuất

(

'lỗi'

)

}

)

mô-đun

.

xuất

=

ứng dụng

Ứng dụng nút gọi

Hãy kích hoạt máy chủ ứng dụng nút bằng lệnh đã cho.

  gật đầu  

Url được cung cấp sẽ hiển thị danh sách người dùng trên trình duyệt:

  http: // localhost: 4000 / người dùng  

Nút js Lấy và Hiển thị Dữ liệu từ Hướng dẫn Cơ sở dữ liệu MySQL

Tóm tắt

Trong hướng dẫn nhanh này, chúng tôi đã xem xét chi tiết cách tìm nạp các bản ghi từ cơ sở dữ liệu MySQL và cách hiển thị kết quả cơ sở dữ liệu MySQL trong một bảng HTML đơn giản trong ứng dụng Node js.

Chúng tôi hoàn toàn tin rằng hướng dẫn ngắn này chắc chắn sẽ giúp ích cho hành trình phát triển web của bạn.


Xem thêm những thông tin liên quan đến chủ đề lấy dữ liệu từ cơ sở dữ liệu mysql bằng cách sử dụng nút js

500 - Node JS - Express JS - Kết nối với MySQL - Thêm và truy cập dữ liệu

alt

  • Tác giả: Code là Ghiền
  • Ngày đăng: 2021-02-02
  • Đánh giá: 4 ⭐ ( 6251 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 500 - Node JS - Express JS - Kết nối với MySQL - Thêm và truy cập dữ liệu

    Code:
    https://github.com/codelaghien/NodeJS_ExpressJS

    1. New folder
    2. Vào DOS Prompt (lệnh cmd)
    c:\\..\\New folder: git clone https://github.com/codelaghien/NodeJS_ExpressJS.git
    3. Vào thư mục: NodeJS_ExpressJS
    c:\\..\\New folder: cd NodeJS_ExpressJS
    4. Chạy chương trình
    c:\\..\\New folder\\NodeJS_ExpressJS: git checkout 500
    5. Chạy lệnh
    c:\\..\\New folder\\NodeJS_ExpressJS: npm install
    6. Chạy chương trình
    c:\\..\\New folder\\NodeJS_ExpressJS: node app.js

    Background Music:
    Tango de la Noche
    Wayne Jones

Xử lý MySQL trong Python (insert / update / delete / select)

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 2005 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách dùng module mysql-connector-python để xử lý kết nối và truy vấn MySQL. Các thao tác trong MySQL cơ bản như kết nối / insert / update / delete và select.

Cơ sở dữ liệu MySQL

  • Tác giả: tel4vn.edu.vn
  • Đánh giá: 5 ⭐ ( 5969 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 01: Sao chép bảng dữ liệu trong MySQL

  • Tác giả: sites.google.com
  • Đánh giá: 4 ⭐ ( 1817 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn kĩ năng thực hành tin

Truy cập cơ sở dữ liệu từ xa mysql từ dòng lệnh

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 7760 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Để đăng nhập trực tiếp vào bảng điều khiển mysql từ xa, hãy sử dụng lệnh…

Truy xuất dữ liệu MySQL trong PHP

  • Tác giả: comdy.vn
  • Đánh giá: 4 ⭐ ( 9360 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách truy xuất, lọc, sắp xếp dữ liệu MySQL trong PHP sử dụng MySQLi và PDO.

Lấy và hiển thị dữ liệu từ Database bằng PHP và MySql

  • Tác giả: www.thuthuatweb.net
  • Đánh giá: 4 ⭐ ( 1794 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web,Hướng dẫn làm Blog, Web

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cuộn ngang trong điện thoại di động - menu cuộn ngang di động