Javascript 将数据从角度前端发送到json文件中的NodeJS

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

404

在前端创建之后，我从未实现过后端，因此我很不确定如何继续

这是我的角度控制器：

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 = ''; 
    };

});

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);

我在后面跑的节点：

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 = ''; 
    };

});

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>

问题
系统
日期
优先
描述
地位
添加
{{item.id}
{{item.system}
{{item.date}
{{item.priority}
{{item.description}
{{item.status}

---

为什么当我试图发布到json文件时，我会收到一个404？如何从NodeJS中的post方法指定使用Angular中的方法？

我认为您的问题在于您将文件名和扩展名放在了API中。。。。trey将提供端点URL。。。例如：

在角度cllas中：

 $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();
    });

---

我认为您需要在

开发工具的
网络
选项卡中提供完整路径，而不是
。/json/details.json
，右键单击
details.json
调用（您收到
404
错误），然后单击
在新选项卡中打开，并确保地址栏中显示的路径是有效的。@DavidR我可以很好地访问json文件，但它始终会给我一个404消息：您使用的是
$http.get（…）
，而在后端，您希望post请求是
app.post（…）
要么让他们都获取请求，要么让他们都发布请求，这并没有解决我遇到的问题。对不起，json在一个文件中？或者是从您的后端以编程方式生成的？json位于我正在使用的静态文件中。ahhh ok。。。那么它是在后端存储吗。。还是前端目录中的aalso。。它将被储存在前端。我使用的唯一“后端”脚本就是这个小的nodejs脚本。我写它只是为了添加、删除、编辑前端显示的数据。我不能使用数据库，而是一个静态文件。