Mongoose を使用して Node.js の Mongodb にデータを更新する方法

データの更新は、データベースまたはその他のデータ ストレージ システム内の既存のデータを変更するプロセスです。これは、エラーの修正、新しい情報の追加、現実世界の変更の反映など、さまざまな理由で実行できます。

このチュートリアルでは、Node js、Express の Mongoose モジュールを使用して、Mongodb データベースにデータを更新する方法を学びます。Mongoose を使用して Node js の mongodb にデータを更新するには、次の手順に従います。

このチュートリアルでは、bootstrap 4 ライブラリを使用してテーブルを作成し、編集ボタンでリストを表示します。次に、ルートを作成し、app.js ファイルにインポートして、Node.js、Express アプリの Mongodb からデータを取得して更新します。

• ステップ 1 – Node Express js アプリを作成する
• ステップ 2 – Express Flash Validator ejs body-parser mongoose 依存関係をインストールする
• ステップ 3 – アプリを MongoDB に接続する
• ステップ 4 – モデルの作成
• ステップ 5 – ルートの作成
• ステップ 6 – ビューの作成
  • リストページの作成
  • 編集ページの作成
• ステップ 7 – App.js にモジュールをインポートする
• ステップ 8 – アプリサーバーを開始する

ステップ 1: Node Express js アプリを作成する

ターミナルで次のコマンドを実行して、node js アプリを作成します。

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

ステップ 2: Express flash ejs body-parser mongoose モジュールをインストールする

ターミナルで次のコマンドを実行して、flash ejs body-parser mongoose の依存関係を表現します。

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 mongoose
npm install express-validator cors --save

ステップ 3: アプリを MongoDB に接続する

アプリのルート ディレクトリにdatabase.js ファイルを作成し、次のコードをそこに追加して、アプリを mongodb データベースに接続します。

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/users', {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;

ステップ 4: モデルの作成

Models ディレクトリを作成し、このディレクトリ内に userModel.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);

ステップ 5: ルートを作成する

ルートを作成します。そのため、routes ディレクトリにアクセスし、users.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) {
      
    userModel.find((err, docs) => {
        if (!err) {
            res.render("users/list", {
                data: docs
            });
        } else {
            console.log('Failed to retrieve the Users List: ' + err);
        }
    });
 
});
 
// SHOW EDIT USER FORM
router.get('/edit/(:id)', function(req, res, next){
   
        userModel.findById(req.params.id, (err, doc) => {
        if (!err) {
            res.render("users/edit", {
                title: "Update User Details",
                data: doc
            });
        }else{
            req.flash('error', 'User not found with id = ' + req.params.id)
            res.redirect('/users/list')
        }
    });
  
})
 
// EDIT USER POST ACTION
router.post('/update/:id', function(req, res, next) {
    req.assert('name', 'Name is required').notEmpty()   //Validate nam
    req.assert('email', 'A valid email is required').isEmail()  //Validate email
  
    var errors = req.validationErrors()
     
    if( !errors ) {   
 
        var user = {
            name: req.sanitize('name').escape().trim(),
            email: req.sanitize('email').escape().trim()
        }
        userModel.findByIdAndUpdate(req.body.id, 
            {name:req.body.name} {email:req.body.email}, function(err, data) {
                if(err){
                        req.flash('error', 'Something Goes to Wrong!');
                        res.render('users/list');
                }
                else{
                  req.flash('success', 'User has been updated successfully!');
                  res.redirect('/users');
                }
        }); 
 
    }
    else {   //Display errors to user
        var error_msg = ''
        errors.forEach(function(error) {
            error_msg += error.msg + '<br>'
        })
        req.flash('error', error_msg)
         
        /**
         * Using req.body.name 
         * because req.param('name') is deprecated
         */
        res.render('users/edit', { 
            title: 'Edit user',            
            id: req.params.id, 
            name: req.body.name,
            email: req.body.email
        })
    }
})
 
module.exports = router;

ビューの作成

いくつかのビューを作成します。そのため、アプリの views ディレクトリにアクセスし、list.ejs を作成し、その中に edit.js ファイルを作成します。

リストページの作成

mongodb データベースから表示リスト用の HTML マークアップを作成します。したがって、viewsディレクトリにアクセスし、その中に list.ejs ファイルを作成します。次に、次のコードをそれに追加します。

<!DOCTYPE html>
<html>
 
<head>
    <title>Fetch and display data in hmtl table in node js express</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head>
 
<body>
    <div> <a href="/" class="btn btn-primary ml-3">Home</a> </div>
    <!--   <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
<% } %> -->
    <% if (messages.success) { %>
        <p class="alert alert-success mt-4">
            <%- messages.success %>
        </p>
        <% } %>
            <br>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th width="200px">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <% if(data.length){
 
  for(var i = 0; i< data.length; i++) {%>
                        <tr>
                            <th scope="row">
                                <%= (i+1) %>
                            </th>
                            <td>
                                <%= data[i].name%>
                            </td>
                            <td>
                                <%= data[i].email%>
                            </td>
                            <td> <a class="btn btn-success edit" href="../users/edit/<%= data[i]._id%>">Edit</a> </td>
                        </tr>
                        <% }
           
   }else{ %>
                            <tr>
                                <td colspan="3">No user</td>
                            </tr>
                            <% } %>
                </tbody>
            </table>
</body>
 
</html>

編集ページの作成

ユーザーデータを mongodb データベースに編集して表示するための HTML フォームを作成します。したがって、viewsディレクトリにアクセスし、その中に edit.ejs ファイルを作成します。次に、次のコードをそれに追加します。

<!DOCTYPE html>
<html>
 
<head>
    <title>node js edit data mongodb database - tutsmake.com</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head>
 
<body>
    <form action="/users/update/<%= data._id %>" method="post" name="form1">
        <div class="form-group">
            <label for="exampleInputPassword1">Name</label>
            <input type="text" class="form-control" name="name" id="name" value="<%= data.name %>" placeholder="Name"> </div>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="Enter email" value="<%= data.email %>"> </div>
        <button type="submit" class="btn btn-info">Update</button>
    </form>
</body>
 
</html>

ステップ 5: App.js にモジュールをインポートする

高速フラッシュ セッションのボディパーサーのマングース依存関係を app.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('/list', 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;

ステップ 7: アプリサーバーを開始する

次のコマンドを使用して、node js アプリ サーバーを起動できます。

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/list

このチュートリアルでは、Node JS Express アプリで Moongose を使用して mongodb データベースにデータを更新する方法を学びました。