javascript - 平均堆栈 Controller 服务器端未连接到 API

Question

我是平均堆栈的新手，并且已经为此苦苦挣扎了好几天。 让您了解我正在尝试做的事情；我正在创建一个标记工具，它将所有请求及其标签存储在一个称为标签的集合中，然后还将所有不同的标签存储到 Tagnames 集合中。我想了解为什么我的 MEAN stack api 层给我一个 404 错误。 此错误仅发生在 server.js 文件中的 put 方法中。

标记工具\server.js

var express           = require('express'),
app               = express(),
bodyParser        = require('body-parser'),
mongoose          = require('mongoose'),
tagsController = require('./server/controllers/tagscontroller');

mongoose.connect('mongodb://localhost:27017/STDBank');

app.use(bodyParser());

app.get('/', function (req, res) {
res.sendfile(__dirname + '/client/views/index.html');
});

app.use('/js', express.static(__dirname + '/client/js'));

//REST API
app.get('/api/tags', tagsController.list);
app.get('/api/tagnames', tagsController.listName);
app.post('/api/tags', tagsController.create);
app.put('/api/tagUpdate/:id', tagsController.update);

app.listen(3000, function() {
console.log('I\'m Listening...');
})

TaggingTool\server\models\tag.js

var mongoose     = require('mongoose');
var Schema       = mongoose.Schema;

var TagSchema   = new Schema({
    request: String,
    intentTag: String
}, {collection : "requests"});

module.exports = mongoose.model('Tag', TagSchema);

TaggingTool\server\models\name.js

var mongoose     = require('mongoose');
var Schema       = mongoose.Schema;

var nameSchema   = new Schema({
    name: String
}, {collection : "tags"});

module.exports = mongoose.model('TagName', nameSchema);

TaggingTool\server\controllers\tagscontroller.js

var Tag = require('../models/tag');
var TagName = require('../models/name');

module.exports.create = function (req, res) {
  var tag = new Tag(req.body);
  tag.save(function (err, result) {
    res.json(result);
  });
}
module.exports.listName = function(req, res){
    TagName.find({}, function(err, results){
        res.json(results);
    });
}
module.exports.list = function (req, res) {
  Tag.find({}, function (err, results) {

    /*var arr = [];
    for(var i = 0; i<results.length;i++){
        if(results[i].intentTag){
            console.log("enter if: ",  results[i].intentTag);
        }//end of if statement
        else{
            console.log("enter if: ",  results[i].intentTag);
            console.log("enters else statement ",  arr);
            arr.push({
            _id : results[i]._id,
            request : results[i].request
            });
        }//end of else statement 
     }//end of for loop 
     console.log("results ",arr);
     */
    res.json(results);
   });
 }

module.exports.update = function(req, res){
    console.log("Server side entered", res);
    Tag.findByIdAndUpdate(req.params.id, {
        $set: {
             request: req.body.request,
             intentTag: req.body.intentTag
             }
       },   function (err, tag){
            if(err) res.send(err);
            res.json(tag);
   });
}

TaggingTool\client\js\controllers\tagsController.js

app.controller('tagsController', ['$scope', '$resource', function ($scope, $resource) {
var Tag = $resource('/api/tags');
var TagName = $resource('/api/tagnames');
var tagUpdate = $resource('/api/tagUpdate/:id');

    Tag.query(function (results) {
         $scope.tags = results;
    });

    TagName.query(function(results){
         $scope.tagnames = results;
    });

    tagUpdate.query(function(results){
         $scope.tags = results;
         console.log("results: ", results);
    });
    //$scope.tags = [];
    $scope.newtags=[];

    console.log("tagReq", $scope);

     $scope.newTag = function (index) {
        console.log("newTag initiated");
        var ntag = new tagUpdate();
        console.log("_id: ", index);
        var k = $scope.tagReq.request;
        console.log("request: ", k);
        var t = $scope.newTagName.tagname.name;
        console.log("intentTag: ", t);
        ntag._id = index;
        ntag.request = $scope.tagReq.request;
        ntag.intentTag = $scope.newTagName.tagname.name;
        console.log("Tags: ", index);
        $scope.ntag.$update({_id: index}, ntag);

    }

  $scope.createTag = function () {
    var tag = new Tag();
    tag.request = $scope.tagReq;
    tag.intentTag = $scope.tagName;
    tag.$save(function (result) {
       $scope.tags.push(result);
       $scope.tagName = '';
    });
  }
}]);

TaggingTool\client\js\app.js

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

TaggingTool\client\views\index.html

 <!DOCTYPE html>
 <html ng-app="taggingApp"> 
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Tagging Tool </title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
      <!-- Meetups View -->
      <div ng-controller="tagsController">
      <style type="text/css">
        .tg  {border-collapse:collapse;border-spacing:0;}
        .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
        .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
        .tg .tg-yw4l{vertical-align:top}
    </style>
    <table class="tg">  
        <caption><b><strong><em>Requests and their Tags</em></strong></b></caption>
        <tr ng-repeat="tag in tags ">
            <th ng-model="tagReq">{{tag.request}}</th>
            <th>
                <select ng-model="newTagName" ng-options="tagname.name for tagname in tagnames">
                        <option value="" >Select Tag</option>
                </select>
                <form ng-submit="newTag(tag._id)">
                        <input type="text" placeholder="Tag Name" ng-model="newTagName.tagname.name"></input>
                        <input type="submit"/>
                </form>
                <p>{{newTagName.tagname.name}}</p>
                <p>{{tagReq.tag.request}}</p>
            </th>
        </tr>   
    </table>
    <form ng-submit="createTag()">
      <input type="text" placeholder="Tag name" ng-model="tagName"></input>
      <button type="submit">Add</button>
    </form> 
  </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">    </script>
        <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>
        <script type="text/javascript" src="/js/controllers/tagsController.js">    </script>
  </body>
</html>

对于糟糕的代码和编码约定，我深表歉意，如果有人可以提供帮助，我将非常感激。

Answer 1

我认为，只有当您尝试从 Angular 客户端更新时才会出现此问题？如果是这样:Angular的$resource默认没有使用PUT方法的更新方法，参见here .

您需要手动定义它，大致如下:

$resource('/api/tagUpdate/:id', { id: '@_id' }, {
  'update': { method: 'PUT' }
});

然后，您可以使用资源的 update 方法来执行更新。

附加提示:关于 REST 约定，我不会调用 URL tagUpdate，而是调用 tags 或类似的东西。您正在更新的事实已由 HTTP 方法 PUT 给出。