Question

使用AngularJS，我试图将表单中的数据发布到ng-repeat中并保存到数据库中。当我点击提交时，我收到404错误的帖子并获得。有人可以帮我看看我哪里出错了吗？

这是我的html：

<html ng-app="Inventory-App">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

    <!-- SEMANTIC -->
    <link rel="stylesheet" type="text/css" href="../semantic/dist/semantic.min.css">
    <script src="../semantic/dist/semantic.min.js"></script>

    <!-- MY STUFF -->
    <link rel="stylesheet" href="../css/styles.css" media="screen" title="no title" charset="utf-8">
    <script src="../scripts/script.js" charset="utf-8"></script>
    <script src="../scripts/services/itemsAPI.js" charset="utf-8"></script>
    <script src="../scripts/controllers/main.js" charset="utf-8"></script>
    <script src="../scripts/app.js" charset="utf-8"></script>

  </head>
  <body ng-controller="MainController">
    <nav>
      <h1>Cabinet.me</h1>
      <p>An Inventory of Your Kitchen</p>
    </nav>
    <div class="ui container">
      <form class="ui form">
        <div class="field">
          <label>Item</label>
          <input type="text" placeholder="Item" ng-model="post.name">
        </div>
        <div class="field">
          <label>Details (if any)</label>
          <input type="text" placeholder="Details" ng-model="post.details">
        </div>
        <div class="field">
          <label>Amount</label>
          <select class="ui dropdown" ng-model="post.amount">
            <option value="">Amount</option>
            <option value="1">High</option>
            <option value="1">Medium</option>
            <option value="0">Low</option>
          </select>
        </div>
        <button class="ui button" type="submit" ng-click="createItem(post)">Submit</button>
      </form>
      <div class="ui divider"></div>

      <div class="ui cards">
        <div class="card" ng-repeat="item in items | orderBy: 'created_at':true">
          <div class="content">
            <div class="header">{{item.name}}</div>
            <div class="meta">Availability: {{item.amount}}</div>
            <div class="description">
              {{item.details}}
            </div>
            <button class="ui secondary button">
              Delete
            </button>
          </div>
        </div>


      </div>

    </div>
  </body>
</html>

这是我的控制器：

angular
  .module('mainController', ['itemsAPI'])
  .controller('MainController', ['$scope', '$http', 'itemsAPI',
    function( $scope, $http, itemsAPI ) {

      $scope.items = [];
      // $scope.itemData = '';

      $scope.createItem = function(post){
        var newItem = {
          item : {
            name: post.name,
            details: post.details,
            amount: post.amount
          }
        }

        itemsAPI.create(newItem).then(function(response){
          console.log(response);
          $scope.items.push(response.data);
        })

        itemsAPI.getAll().then(function(response){
          $scope.items = response.data;
        });

      }

      $scope.removeItem = function(item){

        itemsAPI.remove(item._id).then(function(response){
          if (response.status == 203) {
            $scope.items = $scope.items.filter(function(i){
              return i._id != item._id;
            });
          }
        });
      }

    }]);

这是itemsAPI代码：

angular
  .module('itemsAPI', [])
  .factory('itemsAPI', ['$http',
    function($http) {
      return {
        getAll: function(){
          return $http.get('/items');
        },

        create: function(newItem){
          return $http.post('/items', newItem);
        },

        remove: function(id){
          return $http.delete('/items/' + id);
        }

      }
    }])

我的API路线：

var express = require('express');
var router = express.Router();
var Item = require('../../models/item');

// Get
router.get('/', function(req, res, next) {
  Item.find(function(err, items) {
    if (err) {
      next(err);
    }else {
      res.json(items);
    }
  })
});

router.post('/', function(req, res, next) {
  Item.create(req.body.item, function(err, item) {
    if (err) {
      next(err);
    }else {
      res.json(item);
    }
  });
});

router.delete('/:id', function(req, res, next) {
  Item.findByIdAndRemove(req.params.id, function(err) {
    if (err) {
      next(err);
    }else {
      res.status(203).end();
    }
  })
});

module.exports = router;

我感谢任何帮助！

Answer 1

替换此

router.post('/', function(req, res){

与

router.post('/items', function(req, res){

在inventory / server / routes / api / items.js

中

修改

我错了。你在app.js中使用'/ api / items'路线，而不必像我上面写的那样添加'items'路径。但是在客户端，您尝试将数据发布在'/ items'路线而不是'/ api / items'上。

AngularJS POST和GET 404错误

1 个答案: