Question

我目前正在尝试将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 = ''; 
    };

});

我在后面运行的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 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文件中将数据从Angular Front End发送到NodeJS

1 个答案: