Question

我一直在尝试通过教程＆＃34; CRUD应用程序学习AngularJs，Node js，express js，Bootstrap，EJS，MySQL＆＃34;通过 Shiva Adhikari ，当我意识到我被困在教程的第5部分时。

我的问题

在提交表单以创建产品类别时，浏览器控制台会报告以下错误

提交表单时调用的代码

angular.module("productCategoryModule")
  .factory("productCategoryService", productCategoryService);

productCategoryService.$inject = ['$http'];

function productCategoryService($http) {
  return {

    createProductCategory: function(productCategory) {

      return $http.post('/createProductCategory', {
        categoryName: productCategory.categoryName,
        categoryDetails: productCategory.categoryDetails
      });

      /* return $http({
             method: 'POST',
             url: '/createProductCategory',
             data: {
                   'categoryName' : productCategory.categoryName,
                   'categoryDetails' : productCategory.categoryDetails
               },
             headers: {'Content-Type': 'application/x-www-form-urlencoded'}
         });*/
    },

    getAllProductCategories: function() {
      return $http.get('/getAllProductCategory');
    }

  };
}

html代码

<% include layout %>

  <div class="panel panel-info">
    <div class="panel-heading">
      <h1 class="panel-title"> <%=title %></h1>
    </div>

    <div class="panel-body">
      <div class="container" data-ng-cloak data-ng-app="productCategoryModule" data-ng-controller="productCategoryController">

        <form class="navbar-form navbar-left" role="search" method="post" name="formProductCategory">
          <div class="row">
            <div class="form-group">
              <label for="productCategory">Product Category Name</label>
              &nbsp;&nbsp;

              <input type="text" class="form-control" placeholder="Please Enter Product Category" name="productCategory" id="productCategory" ng-model="productCategory.categoryName" style="width:100%" required>
            </div>
          </div>
          <div class="row">
            <div class="form-group">
              <label for="productDetails">Product Category Details</label>
              <textarea class="form-control" placeholder="Please Enter Product Category Details" name="productDetails" id="productDetails" rows="5" cols="30" ng-model="productCategory.categoryDetails" style="width:100%" required></textarea>
            </div>
          </div>
          <div>&nbsp;</div>
          <div class="row">
            <div class="form-group" style="padding-left:40%;">
              <button type="button" class="btn btn-primary" ng-click="createProductCategory(productCategory)">Create Product Category</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="/bower_components/angular/angular.js"></script>
  <script src="../../js/app/productCategory/productCategoryModule.js"></script>
  <script src="../../js/app/productCategory/productCategoryService.js"></script>
  <script src="../../js/app/productCategory/productCategoryController.js" </script>

productCategoryRouteConfigurator.js

function productCategoryRouteConfig(app) {
    this.app = app;
    this.routeTable = [];
    this.init();
}

productCategoryRouteConfig.prototype.init = function () {
    var self = this;

    this.addRoutes();
    this.processRoutes()
}

productCategoryRouteConfig.prototype.processRoutes = function () {
    var self = this;

    self.routeTable.forEach(function (route) {
        if (route.requestType == 'get') {
            self.app.get(route.requestUrl, route.callbackFunction);
        } else if (route.requestType == 'post') {
            self.app.get(route.requestUrl, route.callbackFunction);
        } else if (route.requestType == 'delete') {

        }
    })
}

productCategoryRouteConfig.prototype.addRoutes = function () {
    var self = this;

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/createProductCategory',
        callbackFunction: function (request, response) {
            response.render('createProductCategory', {
                title: "Create a Product Category"
            });
        }
    });

    self.routeTable.push({
        requestType: 'post',
        requestUrl: '/createProductCategory',
        callbackFunction: function (request, response) {
            var productCategoryDao = require('../model/dao/productCategoryDao.js');
            console.log(request.body)

            productCategoryDao.productCategoryDao.createProductCategory(request.body, function (status) {
                response.json(status);
                console.log(status);
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/viewProductCategory',
        callbackFunction: function (request, response) {
            response.render('viewProductCategory', {
                title: "View Product Category"
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/createProduct',
        callbackFunction: function (request, response) {
            response.render('createProduct', {
                title: "Create a Product"
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/viewProduct',
        callbackFunction: function (request, response) {
            response.render('viewProduct', {
                title: "View a Product"
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/getAllProductCategory',
        callbackFunction: function (request, response) {
            var productCategoryDao = require('../model/dao/productCategoryDao.js');

            productCategoryDao.productCategoryDao.getAllProductCategory (function (productCategories) {
                console.log(productCategories);
                response.json({ productCategories : productCategories })
            });
        }
    });

    self.routeTable.push({
        requestType: 'get',
        requestUrl: '/editProductCategory/:productCategoryId',
        callbackFunction: function (request, response) {
            response.render('editProductCategory', {
                title: "Edit Product Category"
            });
        }
    });
}

module.exports = productCategoryRouteConfig;

我已尝试过$ http的实现并尝试了CORS解决方案。

在创建此问题之前，已提及以下帖子和建议的帖子，因为它们没有解决我的问题： SO post 1，SO post 2，SO post 3，SO post 4

Answer 1

我得到的错误是由于我的productCategoryRouteConfigurator.js中的轻微错误配置

我用过

else if (route.requestType == 'post') {
    self.app.get(route.requestUrl, route.callbackFunction);
}

而不是

else if (route.requestType == 'post') {
    self.app.post(route.requestUrl, route.callbackFunction);
}

这解决了我的问题。

谢谢@redA指出路线文件中可能存在问题。

AngularJS $ http.post（）返回404

1 个答案: