Hướng dẫn how do you fetch data from mongodb database in node js and display in html? - làm thế nào để bạn tìm nạp dữ liệu từ cơ sở dữ liệu mongodb trong nút js và hiển thị trong html?

Trong hướng dẫn này, bạn sẽ tìm ra cách tìm nạp thu thập dữ liệu từ cơ sở dữ liệu MongoDB trong ứng dụng Node JS. Cách hiển thị dữ liệu trong thành phần bảng HTML sau khi được tìm nạp từ cơ sở dữ liệu MongoDB trong nút.

Để truy xuất danh sách dữ liệu từ cơ sở dữ liệu Mongo, chúng tôi sẽ sử dụng Express JS, Express View EJS Memplating Engine. Để thiết kế thành phần bảng, chúng tôi sẽ sử dụng thành phần UI Bootstrap 5.

Chúng tôi sẽ bắt đầu hướng dẫn này từ đầu. Chúng tôi sẽ tạo ứng dụng nút từ khởi động tuyệt đối, chỉ cho bạn cách định cấu hình chế độ xem EJS trong nút, đặt kết nối MongoDB trong Node Js cục bộ, tạo mô hình hoặc lược đồ cơ sở dữ liệu và cách tạo các tuyến đường.

Sau khi hoàn thành hướng dẫn này, bạn sẽ có thể nhanh chóng lấy dữ liệu từ MongoDB trong nút và hiển thị nó trong HTML.

Cách lấy dữ liệu từ cơ sở dữ liệu MongoDB trong Node JS với Mongoose

• Bước 1: Thiết lập dự án nút Set Up Node Project
• Bước 2: Cài đặt các gói nút Install Node Packages
• Bước 3: Xây dựng kết nối MongoDB Build MongoDB Connection
• Bước 4: Xây dựng lược đồ Mongoose Build Mongoose Schema
• Bước 5: Xác định các tuyến nhanh Define Express Routes
• Bước 6: Thiết lập tệp máy chủ Set Up Server File
• Bước 7: Lấy dữ liệu trong nút Fetch Data in Node
• Bước 8: Chạy ứng dụng nút Run Node Application

Thiết lập dự án nút

Trong bước đầu tiên, bạn phải tạo một thư mục mới.

mkdir node-proxima

Tiếp theo, chuyển vào thư mục ứng dụng:

cd node-proxima

Cài đặt các gói nút

Cài đặt JS Express JS và sử dụng Thẻ EJView = EJS; Các EJ chỉ đơn giản là viết tắt của JavaScript nhúng.

Đây là một ngôn ngữ/động cơ khuôn mẫu đơn giản giúp tạo HTML với JavaScript đơn giản.

npx express --view=ejs

Một lần nữa nhập lệnh sau và nhấn Enter để cài đặt các lệnh sau:

npm install -g express-generator

npm install

npm install mongoose express-flash express-session body-parser

Xây dựng kết nối MongoDB

Bên trong dự án nút của bạn, bạn phải tạo tệp db.js. Tệp này sẽ có các cài đặt để tạo kết nối cơ sở dữ liệu.db.js file. This file will have the settings for making the database connection.

Đảm bảo nhập mã sau vào tệp db.js.db.js file.

var mongoose = require('mongoose')
mongoose.connect('mongodb://0.0.0.0:27017/nodedemodb', {
  useNewUrlParser: true,
})
var conn = mongoose.connection
conn.on('connected', function () {
  console.log('Database successfully connected')
})
conn.on('disconnected', function () {
  console.log('Database disconnected ')
})
conn.on('error', console.error.bind(console))
module.exports = conn

Xây dựng lược đồ Mongoose

Tiếp theo, tạo thư mục mô hình tại gốc của ứng dụng của bạn và tạo tệp user.js.

Ở đây chúng tôi sẽ tạo lược đồ để xác định loại đối tượng người dùng trong cơ sở dữ liệu.

Do đó, thêm mã đã cho vào tệp model/usermodel.js.models/UserModel.js file.

var mongoose = require('mongoose')

var db = require('../db')

var userSchema = new mongoose.Schema(
  {
    name: String,
    email: String,
  },
  {
    collection: 'nodedemodb',
  },
)

userTable = mongoose.model('users', userSchema)

module.exports = {
  fetchData: function (callback) {
    var userData = userTable.find({})
    userData.exec(function (err, data) {
      if (err) throw err
      return callback(data)
    })
  },
}

Bây giờ, bạn phải tạo thư mục bộ điều khiển, sau đó tạo tệp người dùng-control.js vào nó sau đó thêm mã đã cho vào tệp.controllers folder, then create user-controller.js file into it thereafter add the given code into the file.

var UserModel = require('../models/UserModel')

module.exports = {
  fetchData: function (req, res) {
    UserModel.fetchData(function (data) {
      res.render('index', { data: data })
    })
  },
}

Xác định các tuyến đường nhanh

Truy cập tệp ROULES/Users.js, đặt toàn bộ mã vào tệp, chúng tôi đang sử dụng lược đồ Mongoose để tạo các tuyến đường.routes/users.js file, place the entire code into the file, we are using mongoose schema to create the routes.

var express = require('express')

var router = express.Router()

var userController = require('../controllers/user-controller')

router.get('/users', userController.fetchData)

module.exports = router;

Thiết lập tệp máy chủ

Trong bước này, bạn phải nhập các gói phiên Body-Parser, Mongoose và Flash bên trong tệp App.js.app.js file.

var createError = require('http-errors')
var express = require('express')
var path = require('path')
var cookieParser = require('cookie-parser')
var logger = require('morgan')
var bodyParser = require('body-parser')
var flash = require('express-flash')
var session = require('express-session')
var routeUser = require('./routes/users')

var app = express()

// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')

app.use(logger('dev'))
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))

app.use(
  session({
    secret: 'abcd123456',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 60000 },
  }),
)

app.use(flash())
app.use('/', routeUser)

app.use(function (req, res, next) {
  next(createError(404))
})

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')
})

app.listen(4000, function () {
  console.log('App working on: 4000')
})

module.exports = app

Tìm nạp dữ liệu trong nút

Bây giờ, bạn phải truy cập tệp Lượt xem/Index.ejs, trong tệp này, chúng tôi sẽ thêm mã.views/index.ejs file, in this file we will add the code.

Mã này sẽ lấy dữ liệu từ cơ sở dữ liệu MongoDB không chỉ mà còn sử dụng thành phần bảng Bootstrap 5 để hiển thị dữ liệu HTML được tìm nạp từ cơ sở dữ liệu Mongo.

mkdir node-proxima

Chạy ứng dụng nút

Cuối cùng, đặt lệnh sau vào dấu nhắc lệnh và nhấn Enter để thực thi lệnh.

mkdir node-proxima

Dưới đây là URL mà bạn phải sử dụng để xem dữ liệu trên trình duyệt:

mkdir node-proxima

Bản tóm tắt

Trong suốt hướng dẫn này, chúng tôi đã mô tả sâu sắc cách lấy dữ liệu từ cơ sở dữ liệu MongoDB trong ứng dụng Node JS.

Chúng tôi đã xem xét cách sử dụng Mongoose để tạo kết nối cơ sở dữ liệu trong một nút và khám phá cách tạo API REST bằng cách sử dụng Express để tìm nạp và hiển thị dữ liệu trong mẫu HTML EJS.