Làm cách nào để hiển thị dữ liệu nút js trong html?

Nút Nhận và hiển thị dữ liệu từ hướng dẫn MySQL; . Rõ ràng, một số yêu cầu nhất định luôn được xem xét khi chọn ngăn xếp công nghệ. Tuy nhiên, MySQL này luôn chiếm ưu thế trong việc lưu trữ một số lượng lớn các bản ghi

Tương tự, Node js là môi trường máy chủ nguồn mở phổ biến không chỉ cho phép bạn tạo một chương trình phụ trợ mạnh mẽ mà còn cho phép bạn xây dựng một ứng dụng giao diện người dùng mạnh mẽ

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn sự hợp lưu của Node js và MySQL. Chúng tôi sẽ tạo một ứng dụng nút đơn giản, ứng dụng này sẽ Nhận bản ghi hoặc dữ liệu từ cơ sở dữ liệu MySQL và hiển thị dữ liệu MySQL trong mẫu HTML trong ứng dụng Node js

Để thực hiện yêu cầu tới cơ sở dữ liệu MySQL, chúng tôi sẽ nhờ sự trợ giúp của Express js và express cho phép chúng tôi viết mã cho các tuyến sẽ yêu cầu và giao tiếp với cơ sở dữ liệu MySQL thông qua nền tảng Node

Node js MySQL Kết xuất và Hiển thị Bản ghi từ Cơ sở dữ liệu trong HTML Ví dụ

  • Bước 1. Xây dựng dự án nút
  • Bước 2. Cài đặt phụ thuộc NPM
  • Bước 3. Tạo bảng SQL
  • Bước 4. Tạo kết nối cơ sở dữ liệu MySQL
  • Bước 5. Hiển thị bản ghi trong Html
  • Bước 6. Xây dựng tuyến đường cao tốc
  • Bước 7. Xây dựng tệp máy chủ
  • Bước 8. Phục vụ ứng dụng nút

Xây dựng dự án nút

Trên dấu nhắc lệnh của thiết bị đầu cuối, hãy nhập lệnh đã cho, sau đó thực hiện lệnh để tạo thư mục mới cho dự án nút mới

mkdir node-blog-demo

Tiếp theo, nhập vào bên trong thư mục ứng dụng

cd node-blog-demo

Để cài đặt các gói bổ sung trong nút, chúng ta cần có một gói cụ thể. json nằm trong ứng dụng của chúng tôi;

npm init

Cài đặt phụ thuộc NPM

Thêm tập lệnh đã cho và chạy các lệnh tương ứng để cài đặt hoàn toàn các gói từ sổ đăng ký npm

npx express --view=ejs
npm install -g express-generator
npm install
npm install mysql body-parser express-session nodemon express-flash

Tạo bảng SQL

Trong bước này, chúng ta sẽ tạo một bảng trong cơ sở dữ liệu MySQL;

CREATE TABLE `users ` [
  `id` int[20] NOT NULL,
  `name` varchar[155] NOT NULL,
  `email` varchar[155] NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT current_timestamp[]
] ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Tạo kết nối cơ sở dữ liệu MySQL

Để kết nối với cơ sở dữ liệu MySQL, hãy tạo một cơ sở dữ liệu. js, thì trong tệp này, bạn phải thêm tên máy chủ, tên người dùng, mật khẩu và tên cơ sở dữ liệu như được cung cấp trong ví dụ mã đã cho

var mysql = require['mysql']
var connection = mysql.createConnection[{
  host: 'localhost',
  user: 'root', //
  password: '', //
  database: 'test',
}]
connection.connect[[err] => {
  if [err] {
    console.log[err]
    return
  }
  console.log['Database connected']
}]
module.exports = connection

Hiển thị bản ghi trong HTML

Để hiển thị dữ liệu trong tệp xem HTML, chúng ta cần tạo hồ sơ. ejs trong thư mục dạng xem/, đồng thời chèn mã đã cho vào tệp dạng xem

DOCTYPE html>

  
    
      Node Js MySQL Fetch and Show Records from MySQL Database Example
    
    
    
    
  
  
    
      
      
      
      
      
        
          
            #Id
            Name
            Email
            Action
          
        
        
          
            
            
          
          
          
            No data ever existed.
          
          
        
      
    
  

Xây dựng tuyến đường cao tốc

Hướng đến người dùng. tập tin js;

________số 8

Xây dựng tệp máy chủ

Để thiết lập máy chủ nút, bạn phải tạo ứng dụng. tập tin js. Trong tệp này, chúng tôi sẽ viết mã để chạy ứng dụng nút

var createError = require['http-errors']
var express = require['express']
var path = require['path']
var logger = require['morgan']
var bodyParser = require['body-parser']
var flash = require['express-flash']
var cookieParser = require['cookie-parser']
var expressValidator = require['express-validator']
var session = require['express-session']
var mysql = require['mysql']
var connection = require['./database']
var nodeRoutes = require['./routes/index']
var userRoute = require['./routes/users']
var app = express[]
app.set['views', path.join[__dirname, 'views']]
app.set['view engine', 'ejs']
app.use[logger['dev']]
app.use[bodyParser.json[]]
app.use[cookieParser[]]
app.use[bodyParser.urlencoded[{ extended: true }]]
app.use[express.static[path.join[__dirname, 'public']]]
app.use[
  session[{
    secret: '123@abcd',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 60000 },
  }],
]
app.use[expressValidator[]]
app.use[flash[]]

app.use['/', nodeRoutes]
app.use['/users', userRoute]
app.use[function [req, res, next] {
  next[createError[404]]
}]
app.listen[5555, function [] {
  console.log['Node server running on port : 5555']
}]
// error
app.use[function [err, req, res, next] {
  res.locals.message = err.message
  res.locals.error = req.app.get['env'] === 'development' ? err : {}
  res.status[err.status || 500]
  res.render['error']
}]
module.exports = app

Phục vụ ứng dụng nút

Chúng ta có thể thực thi tập lệnh nút bằng lệnh đã cho, đảm bảo chạy lệnh đã cho

cd node-blog-demo
0

Bạn phải nhập url đã cho trên trình duyệt để chạy ứng dụng

cd node-blog-demo
1

Sự kết luận

Xuyên suốt hướng dẫn này, chúng ta đã tìm hiểu chi tiết cách kết nối đồng thời ứng dụng node js với cơ sở dữ liệu MySQL, kết xuất dữ liệu từ cơ sở dữ liệu MySQL và hiển thị dữ liệu vào bảng HTML trong ứng dụng Node js

Để thực hiện chức năng nhỏ này, chúng tôi đã cài đặt và sử dụng nhiều mô-đun NPM khác nhau và chúng tôi đã chia sẻ hoàn toàn ý tưởng với bạn để xây dựng một tính năng như vậy

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Twitter GitHub

Bài viết đề xuất

Node Js Xóa tài liệu theo Id từ MongoDB Collection TutorialNode AJAX Truy xuất bản ghi từ cơ sở dữ liệu MySQL Hướng dẫn cách xóa dữ liệu khỏi cơ sở dữ liệu MySQL bằng Node JsNode Nhập dữ liệu tệp CSV vào cơ sở dữ liệu MySQL bằng biểu mẫu HTMLNode Js MySQL Tải lên tệp CSV REST API Hướng dẫn Node Lưu bản ghi bằng Express và HTML

Làm cách nào để chuyển giá trị từ nút JS sang HTML?

Javascript/nút. js nhập tệp HTML
Thực hiện đồng bộ hóa readdir trong nút. js
SUM of VARIABLES trong HTML\PRT fille
Truyền giá trị biến PHP vào nhãn HTML
[BASH] chuyển một biến trong CURL

Làm cách nào để kết nối Nodejs với HTML?

đường dẫn. join[__dirname, 'views', 'add-user. html']; Điều này sẽ đề cập đến vị trí tệp thực tế của mã html người dùng bổ sung. Với việc sử dụng mô-đun đường dẫn, nó sẽ hoạt động trên mọi loại hệ điều hành mà không gặp lỗi.

Chủ Đề