Question

我是Angular的新手，我正在尝试使用MEAN堆栈构建CRUD。

然而，我在Angular上遇到了在服务器端调用DELETE函数的问题。

这是我的Angular App.JS

var app = angular.module('topshelf', [])

app.controller('MainCtrl', [
'$scope','$http',
function($scope , $http){
  var Mydata = {};
  $http.get("http://localhost:8080/inventory").success(function(data,status,header,config){
    $scope.Mydata = data;
  });

  $scope.delete = function($index) {
    var url = "http://localhost:8080/ingredients/" + $index;
    $http.delete(url).success(function(err,data){
        if (err){ console.log(err);}
        $scope.Mydata = data;
        console.log("test");

    });
  }
}]);

这是我的HTML：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>TopShelf</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
        <link href="css/animate.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
        <script src="./app.js"></script>
    </head>
    <body ng-app ="topshelf" ng-controller="MainCtrl" class="top-navigation">
    <div class="table-responsive">
       <table class="table table-striped">
          <thead>
             <tr>
                <th>Ingredient</th>
                <th>Quantity</th>
                <th>Action</th>
            </tr>
       </thead>
       <tbody>
            <tr ng-repeat="ingredients in Mydata">
                <td>{{ingredients.name}} </td>
                <td>{{ingredients.quantity}} </td>
                <td>  Add / Edit / <a ng-click="delete($index)">Delete</a></form></td>
            </tr>
      </tbody>
  </table>
</div>
</body>
</html>

更新

此外，这是我的服务器代码指定路由，但当我尝试使用POSTMAN路由时，它工作正常。：

var express = require('express');
var Ingredients = require('./models/ingredients.js');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var app = express();

mongoose.connect('mongodb://localhost/labelleassiette');

app.use(bodyParser.urlencoded({extended: true}))

app.use(express.static(__dirname + '/public'));

app.get('/', function(req,res){
    res.sendFile(__dirname+"/public/index.html");
})

app.get('/inventory',function(req,res){
    Ingredients.find(function(err,ingr){
        res.json(ingr);
    })
})

app.post('/add', function(req,res){
    var entry = new Ingredients({name: req.body.name, quantity: req.body.quantity});
    var self = this;
    Ingredients.find({name:req.body.name}, function(err,data){
        if(data.length){
            res.send(500,"Ingredient exists!");
        }
        else{
            entry.save(function(err){
                if (err) {console.log(err);}
                else { console.log('Saved to db')}
            });
        res.redirect('/');
        }
    })
})

app.put('/ingredients/:id',function(req,res) {
    var id = req.params.id;
    var obj = req.body;
    Ingredients.findByIdAndUpdate(id, {name: obj.name, quantity: obj.quantity}, function(err){
        if (err) {console.log(err);}
        console.log("updated");
    })
})

app.delete('/ingredients/:id',function(req,res){
    Ingredients.findByIdAndRemove(req.params.id,function(err){
        if (err) {console.log(err);}
        console.log("effacé");
        res.redirect('/');
    })
})

app.listen(8080, function() {
    console.log("listening on port 8080!");
});

我在浏览器的控制台上找不到DELETE http://localhost:8080 404。

谢谢你们的帮助

$ http.delete返回错误404

0 个答案: