【问题标题】:Delete list items using Node.js Express Mongoose使用 Node.js Express Mongoose 删除列表项
【发布时间】:2017-08-04 14:48:56
【问题描述】:

我正在尝试在使用 mongoose 从数据库中检索元素后删除它们。但是,我被困在我不知道如何“抓取”列表中的一个特定元素然后如何删除它的部分。

在我的应用中,我有一个用户列表和他们的年龄。 这是我的 userview.ejs(添加 frontend.js 后编辑)

<meta charset="UTF8">
<link href="../public/javascripts/frontend.js">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/userlist.css">
<link href='//fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=NTR' rel='stylesheet'>
<html>
    
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <title>Userlist</title>
        <script src="javascripts/frontend.js"></script>
     <script>
            
        </script> 
        
    </head>
   
    <div class="container-fluid">
            <div class="row">
                     <h1><strong>FORM</strong></h1>
                     <hr id="hr2" style="border: 6px solid palevioletred" >
                <div id="black">
                     <form class="form-horizontal" method="post" action="/users">
                        <fieldset>


                        <!-- Text input-->
                        <div class="form-group">
                          <label class="col-md-4 control-label" for="textinput">Name : </label>  
                          <div class="col-md-4">
                          <input id="textinput" name="name" placeholder="Enter Username" class="form-control input-md" type="text" value="Name" onfocus="if (this.value=='Name') this.value='';">

                          </div>
                        </div>

                        <!-- Text input-->
                        <div class="form-group">
                          <label class="col-md-4 control-label" for="textinput">Age : </label>  
                          <div class="col-md-4">
                          <input id="textinput" name="age" placeholder="Enter Age" class="form-control input-md" type="number">

                          </div>
                        </div>

                        <!-- Button -->
                        <!-- Button (Double) -->
                        <div class="form-group">

                          <div class="col-md-8">
                            <button id="singlebutton" name="button1id" class="btn btn-success">Add User</button>
                          </div>
                        </div>

            <body>

                 <h1><strong>USERS</strong></h1>
                 <hr id="hr1" style="border: 6px solid #7ec4ec;" >
                 <ul id="list" class="triangle">
                    <% for(var i=0; i<userlist.length; i++) {%>
                       <li><%= userlist[i].name %> : <%= userlist[i].age %> <a href="#" onclick="delete_element('<%= userlist[i]._id %>')" id="delete">Delete</a> ||  <a href="#" onclick="update_element()">Update</a></li>
                    <% } %>
                 </ul>
            </body>


                        </fieldset>
                    </form>
                </div>
                </div>
  </div>
</html>

编辑

这是我的 frontend.js

var $ = require('jquery');
function delete_element (userId) { 
     $.post('delete/user/',userId,function(){
         
         alert('Deleting....'); //For now i have just added an alert.
     }); 
}

这是我的新 users.js

'use strict'

var express = require('express');
var router = express.Router();
var User=require('../models/usermodel.js');
var $= require('jquery');
    
/* GET users listing. */


router.get('/', function(req, res, next) {
  User.find({},function(err,userModel){
      res.render('userview',{userlist:userModel});
  });
});


router.post('/', function(req, res, next) {
    
    var newUser = new User({
          name:req.body.name,
          age: req.body.age         
    });
    
    console.log(newUser);
    // save the user
    newUser.save(function(err) {
      if (err) throw err;

      console.log('User created!');
    });

});


router.post("delete/user/:id", deleteUser); 

function deleteUser(req,res){
    
    User.findById(req.params.id).remove().exec(function(err){
         if (!err) {
                console.log('Removed Successfully');
        }
        else {
                console.log('Error in removing the entry');
        }
    });
}


  /*
function delete_element(id){
    
        $('#delete').on("click",function(){
           $(this).parent().remove(); 
        });
      User.remove({_id: req.body.id }, function(err) {
        if (!err) {
                console.log('Removed Successfully');
        }
        else {
                console.log('Error in removing the entry');
        }
      
          }); 
} 
     */               



/*router.post('/', function(req, res, next) {
    userModel.update( {name: req.params.name}, { $pullAll: {uid: [req.params.deleteUid] } } )
   
});*/







module.exports = router;

【问题讨论】:

    标签: javascript jquery node.js mongodb mongoose


    【解决方案1】:

    将用户的 _id 嵌入到您的删除链接中:

    onclick="delete_element('<%= userlist[i]._id %>')"
    

    这将产生:

    onclick="delete_element('55510c6cf0e19f6414b30f97')"
    

    并将用户的 _id 传递给您的删除函数。

    编辑

    好吧,显然,您正在尝试直接从您的视图 (HTML) 调用在服务器 (Node) 上定义的函数。 这绝对不是它的工作原理:)

    onclick="delete_element()" 在您的浏览器中本地调用一个函数。控制台(F12)必须喊error : delete_element is undefined

    所以要走的路如下:

    1) 创建一个将调用服务器的 javascript 函数(不在 Node 中,在您的前端应用程序中)。

    function delete_element (userId) { // This will be called on click and passed the user's _id
         $.post('delete/user/'+userId) // This calls the server. Todo : add a callback, etc.
    }
    

    2) 你的 Node 服务器必须有相应的路由来接收调用:

    router.post("delete/user/:id", deleteUser); // This is reached when the client calls post('delete/user/1a2b3c4d'). The id is read with req.params.id
    
    deleteUser = (req,res) => {
         User.findById(req.params.id)
             .remove()
             .exec( error => { // Reply to the client, otherwise the request will hang and timeout.
                 if(error) return res.status(500).send(error);
                 res.status(200).end()
             })
    }
    

    这是第一个问题,请为第二个问题创建一个新问题。

    【讨论】:

    • 还是不行。 delete_element() 函数是否正确?
    • 是的,Mongoose 的调用似乎是正确的。你的delete_element 函数是什么样的(前端的,不是 Node 中的)?
    • 没有这样的。
    • 或.......您是否尝试直接从您的视图(HTML)调用服务器(节点)上定义的函数,中间没有任何其他操作? O_o
    • 我会说是的。如果这很荒谬,请指导我。我对这个领域比较陌生。
    猜你喜欢
    • 2017-05-16
    • 2015-03-07
    • 2021-12-28
    • 1970-01-01
    • 2011-08-14
    • 1970-01-01
    • 2011-07-06
    • 2017-08-05
    相关资源
    最近更新 更多