Средняя сторона сервера контроллера стека не подключается к API

Я новичок в Mean stack и борюсь с этим уже несколько дней. Чтобы дать вам представление о том, что я пытаюсь сделать; Я создаю инструмент тегов, который хранит все запросы и их теги в коллекции, называемой тегами, а затем также сохраняю все отдельные теги в коллекции Tagnames. Я хотел бы понять, почему мой слой API стека MEAN выдает ошибку 404. Эта ошибка возникает только с моим методом put в файле server.js.

TaggingTool \ 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 \ сервер \ контроллеры \ 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>

Прошу прощения за ужасный код и правила кодирования, если бы кто-нибудь мог помочь, я был бы чрезвычайно благодарен.


person Johann Muller    schedule 14.11.2016    source источник


Ответы (1)


Я предполагаю, что эта проблема возникает только при попытке обновления с вашего клиента Angular? Если это так: ресурс $ Angular не имеет метода обновления, использующего методы PUT по умолчанию, см. здесь.

Вам нужно будет определить это вручную, примерно так:

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

Затем вы можете использовать update метод ресурса для выполнения обновления.

Дополнительная подсказка: что касается соглашений REST, я бы не назвал URL-адрес tagUpdate, а скорее tags или что-то в этом роде. Тот факт, что вы обновляете, уже определяется методом HTTP PUT.

person qqilihq    schedule 14.11.2016
comment
Большое спасибо. Это решило проблему. Я также обновил свой код, чтобы он соответствовал соглашениям REST. Спасибо - person Johann Muller; 15.11.2016