在 json 文件中从 Angular 前端向 NodeJS 发送数据

Question

我目前正在尝试将 AngularJS 前端连接到 NodeJS 后端应用程序。理想的目标是从 json 文件 而非数据库中读取、写入、编辑和删除数据。 我试过在两边都设置 post 方法，但它说我的 json 包含信息的文件是404。

在创建前端之后，我之前从未实施过后端，所以我很不确定如何进行。

这是我的 Angular 控制器：

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

app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

app.controller('dashCtrl', function($scope, $http){

   $http.get('/Alpha/json/details.json').then(function (response) {
        $scope.details = response.data;
        console.log(details);
    });

   $scope.newDetails = {};

    $scope.selectItem = function(item){
        console.log(item);
        $scope.clickedDetails = item;
    };

    $scope.updateItem = function(){

    };

    $scope.deleteItem = function(){
        $scope.details.splice($scope.details.indexOf($scope.clickedDetails), 1);
    };

   $scope.saveItem = function(){        
        $scope.details.push({ 'id':$scope.id, 'system': $scope.system, 'date':$scope.date, 'priority':$scope.priority, 'description':$scope.description, 'status':$scope.status });
        // Writing it to the server
        //      
        var item = {
            id:$scope.id, 
            system: $scope.system, 
            date:$scope.date, 
            priority:$scope.priority, 
            description:$scope.description, 
            status:$scope.status
        };  

        $http.post('../json/details.json', item).then(function(item, status) {
            console.log('Data posted successfully');
        });

        // Making the fields empty
        //
        $scope.id = ''; 
        $scope.system = '';
        $scope.date = '';
        $scope.priority = '';
        $scope.description = '';
        $scope.status = ''; 
    };

});

我在后面跑的 NodeJS：

var express = require('express');
var app = express();
var bodyParser  = require('body-parser');

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

app.post('/Alpha/pages/json/details.json', function(req, res) {
    console.log(details);
    res.end();
});

app.listen(3000);

我的 HTML 表单：

<table class="table table-responsive">

    <thead style="background-color:#002244; color:#FFFFFF">
        <tr>
            <th> Issue </th>
            <th> System </th>
            <th> Date </th>
            <th > Priority </th>
            <th > Description </th>
            <th > Status </th>
            <th style="background:white;">
                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" value="Add +" style=" border-color:#FFBE00; color: black;background-color:#FFBE00;">Add</button>
            </th>
        </tr>
    </thead>
    <tbody> 
        <tr ng-repeat=" item in details ">
            <td > {{item.id}}</td>
            <td > {{item.system}} </td>
            <td > {{item.date}}</td>
            <td class="{{item.priority}}-priority"> {{item.priority}} </td>
            <td > {{item.description}}</td>
            <td > {{item.status}} </td>
            <td>
                <a href ="#" data-toggle="modal" data-target="#myModalDelete" ng-click="selectItem(item)">Delete</a>
                <a href ="#" data-toggle="modal" data-target="#myModalEdit" ng-click="selectItem(item)">Edit</a>
            </td>
        </tr>
     </tbody>
</table>

为什么我在尝试发布到我的 json 文件时收到 404？如何从 NodeJS 中的 post 方法中指定使用 Angular 中的方法？

Answer 1

我认为你的问题是你把文件名和扩展名放在你的 API 中....trey 给出端点 URL...例如：

在 Angular 类中：

 $http.post('../Alpha/pages/json/', item).then(function(item, status) {
            console.log('Data posted successfully');
        });

在你的 Node.js 中

   app.post('/Alpha/pages/json/', function(req, res) {
        console.log(details);
        res.end();
    });