Cách chèn dữ liệu vào MongoDB bằng Reacjs

Lưu/chèn dữ liệu từ biểu mẫu vào cơ sở dữ liệu mongoDB trong ứng dụng nút js express;

Mongoose là giải pháp tốt nhất để chèn dữ liệu vào MongoDB. Bởi vì nó rất dễ dàng và nhanh chóng. Vì vậy, trong hướng dẫn này, bạn sẽ tìm thấy ví dụ đơn giản và dễ dàng để chèn dữ liệu biểu mẫu vào Node. js Express

Hướng dẫn này sẽ tạo một biểu mẫu đơn giản bằng thư viện bootstrap 4 và sau đó tạo tuyến đường trong ứng dụng. js để chèn dữ liệu vào cơ sở dữ liệu MongoDB bằng cầy mangut trong ứng dụng nút js express

Cách chèn dữ liệu vào MongoDB bằng Mongoose trong nút. js Express

Làm theo các bước sau để chèn dữ liệu vào MongoDB bằng cầy mangut và nút. js

  • Bước 1 – Tạo ứng dụng Node Express js
  • Bước 2 – Cài đặt phụ thuộc cầy mangut flash ejs body-parser
  • Bước 3 – Kết nối ứng dụng với MongoDB
  • Bước 4 – Tạo mô hình
  • Bước 5 – Tạo các tuyến đường
  • Bước 6 – Tạo biểu mẫu đánh dấu HTML
  • Bước 7 – Nhập mô-đun trong ứng dụng. js
  • Bước 8 – Khởi động máy chủ ứng dụng

Bước 1 – Tạo ứng dụng Node Express js

Thực hiện lệnh sau trên thiết bị đầu cuối để tạo ứng dụng nút js

mkdir my-app
cd my-app
npm init -y

Khuyến khích. -Node Js Google ReCaptcha v3 Ví dụ

Bước 2 – Cài đặt mô-đun cầy mangut flash ejs body-parser

Thực hiện lệnh sau trên thiết bị đầu cuối để thể hiện các phụ thuộc mysql của trình phân tích cú pháp cơ thể flash ejs

npm install -g express-generator
npx express --view=ejs

npm install

npm install express-flash --save
npm install express-session --save
npm install body-parser --save
npm install express-validator cors --save
npm install mongoose

trình phân tích nội dung – Nút. phần mềm trung gian phân tích nội dung yêu cầu js sẽ phân tích nội dung yêu cầu đến trước trình xử lý của bạn và cung cấp nội dung đó theo req. thuộc tính cơ thể. Nói cách khác, nó đơn giản hóa yêu cầu đến

Express-Flash – Tin nhắn Flash cho Ứng dụng Express của bạn. Flash là phần mở rộng của connect-flash với khả năng xác định và hiển thị thông báo flash mà không cần chuyển hướng yêu cầu

Express-Session– Express-session – khung phía máy chủ HTTP được sử dụng để tạo và quản lý phần mềm trung gian phiên

Express-EJS– EJS là ngôn ngữ tạo khuôn mẫu đơn giản được sử dụng để tạo đánh dấu HTML bằng JavaScript đơn giản. Nó cũng giúp nhúng JavaScript vào các trang HTML

Mongoose – Mongoose là công cụ tạo mô hình đối tượng MongoDB được thiết kế để hoạt động trong môi trường không đồng bộ. Mongoose hỗ trợ cả lời hứa và cuộc gọi lại

Khuyến khích. -Node js Express MySQL User Authentication Rest API Ví dụ

Bước 3 – Kết nối ứng dụng với MongoDB

Tạo nên cơ sở dữ liệu. js vào thư mục gốc ứng dụng của bạn và thêm đoạn mã sau vào đó để kết nối ứng dụng của bạn với cơ sở dữ liệu mongodb

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/test', {useNewUrlParser: true});
var conn = mongoose.connection;
conn.on('connected', function() {
    console.log('database is connected successfully');
});
conn.on('disconnected',function(){
    console.log('database is disconnected successfully');
})
conn.on('error', console.error.bind(console, 'connection error:'));
module.exports = conn;

Bước 4 – Tạo mô hình

Tạo thư mục Models và bên trong thư mục này tạo userModel. tập tin js;

const mongoose = require("../database");

// create an schema
var userSchema = new mongoose.Schema({
            name: String,
            email:String
        });

var userModel=mongoose.model('users',userSchema);

module.exports = mongoose.model("Users", userModel);

Bước 5 – Tạo các tuyến đường

Tạo tuyến đường; . tập tin định tuyến js;

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var userModel = require('./models/userModel');


/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'add user' });
});

router.post('/add-user', function(req, res, next) {
    
    req.assert('name', 'Name is required').notEmpty()           //Validate name
    req.assert('email', 'A valid email is required').isEmail()  //Validate email
 
    var errors = req.validationErrors()
    
    if( !errors ) {   //No errors were found.  Passed Validation!
        
    
      var userDetails = new userModel({
        name: req.body.name,
        email: req.body.email,
      });
      
      userDetails .save((err, doc) => {
            if (!err)
                req.flash('success', 'User added successfully!');
                res.redirect('/');
            else
                console.log('Error during record insertion : ' + err);
      });
  
    }
    else {   //Display errors to user
        var error_msg = ''
        errors.forEach(function(error) {
            error_msg += error.msg + '
' }) req.flash('error', error_msg) res.render('/', { title: 'Add New User', name: req.body.name, email: req.body.email }) } }); module.exports = router;

Bước 6 – Tạo biểu mẫu đánh dấu HTML

Tạo biểu mẫu html để chèn dữ liệu vào cơ sở dữ liệu; . tập tin ejs bên trong nó. Sau đó thêm đoạn mã sau vào nó



  
    Node.js Express Save Data from Html Form to Mongodb Database - Tutsmake.com
    
    
    
  
  
    
<% if (messages.success) { %>

<%- messages.success %>

<% } %>

Node.js Express Save Data from Html Form to Mongodb Database - Tutsmake.com

Khuyến khích. -Góc 12 CRUD + Nút. js + Express + Hướng dẫn MySQL

Bước 7 – Nhập mô-đun trong ứng dụng. js

Nhập các phụ thuộc cầy mangut phân tích cú pháp cơ thể phiên flash nhanh trong ứng dụng. js;

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 usersRouter = 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: '123456catr',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 60000 }
}))

app.use(flash());
app.use('/', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Khuyến khích. -Tạo API nghỉ ngơi bằng nút. js, Express và MySQL

Bước 8 – Khởi động máy chủ ứng dụng

Bạn có thể sử dụng lệnh sau để khởi động máy chủ ứng dụng nút js

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Phần kết luận

Lưu/chèn dữ liệu từ biểu mẫu vào cơ sở dữ liệu mongoDB trong ứng dụng nút js express;

Làm cách nào để kết nối React JS với MongoDB?

Bước chạy ứng dụng. Nhập lệnh sau để chạy ứng dụng. Thiết lập phụ trợ với NodeJS. Setup NodeJs cho Backend để tích hợp với frontend. Bước 3. Bây giờ Cài đặt MongoDB cầy mangut bằng lệnh sau . Bước chạy ứng dụng. Nhập lệnh sau để chạy ứng dụng.

Làm cách nào để gửi dữ liệu từ phản ứng đến nút js tới MongoDB?

Phản ứng. .
Tạo nút. ứng dụng js
Cài đặt máy chủ web Express
Định cấu hình cơ sở dữ liệu MongoDB & Mongoose
Định nghĩa Mongoose
Xác định mô hình Mongoose
Tạo bộ điều khiển
Chạy nút. Máy chủ tốc hành js

Làm cách nào để lưu trữ dữ liệu biểu mẫu vào MongoDB?

Để chèn một bản ghi hoặc tài liệu vào MongoDB, bạn cần gọi phương thức save() trên phiên bản tài liệu . Hàm gọi lại(err, document) là một đối số tùy chọn cho phương thức save(). Việc chèn diễn ra không đồng bộ và mọi hoạt động phụ thuộc vào tài liệu được chèn phải xảy ra trong hàm gọi lại để đảm bảo tính chính xác.

Làm cách nào để lưu trữ dữ liệu biểu mẫu trong cơ sở dữ liệu bằng React JS?

Tạo thành phần phản ứng . Đặt tên cho tệp này là biểu mẫu-dữ liệu-thành phần. js và dán đoạn mã sau vào đó. Chúng tôi đã tạo một biểu mẫu người dùng cơ bản bằng Bootstrap 4. Create src > components folder and create a component file for storing form data in local storage. Name this file form-data-component. js and paste the following code in it. We created a basic user form using Bootstrap 4.