表示堆栈控制器服务器端未连接到API

Mean stack controller server side not connecting to API

本文关键字:连接 API 服务器端 堆栈 控制器 表示      更新时间:2023-09-26

我是Mean stack的新手,已经为此挣扎了好几天了。为了让你们了解我想做什么;我正在创建一个标记工具,它将所有请求及其标记存储在一个称为tags的集合中,然后还将所有不同的标记存储到Tagnames集合中。我想了解为什么我的MEAN堆栈api层给我一个404错误。此错误仅在server.js文件中的put方法中发生。

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 '模型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 '模型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 '控制器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 '控制器' 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>

我为糟糕的代码和编码惯例道歉,如果有人能帮助我,我将非常感激。

我想,这个问题只发生在你尝试从你的Angular客户端更新时?Angular的$resource默认没有一个使用PUT方法的更新方法,见这里。

你需要手动定义它,像这样:

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

你可以使用资源的update方法来执行你的更新。

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