Question

这是server.js文件

＆＃13;

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
app.use(bodyParser.json());

mongoose.connect("mongodb://localhost/test");

var todoschema = new mongoose.schema ({
 name : {type: String, required: true}
 });

var todomodel = mongoose.model('todolist',todoschema);

app.get('/',function(req,res){
   res.sendFile('C:\\Users\\Rohit\\Desktop\\New folder\\todo.htm');
});

app.get('/todolist', function (req, res){
    todomodel.find(function(err,tasks){
      res.json(tasks);
     });
});

app.post('/todolist', function (req, res) {
  
  todomodel.insert(req.body, function(err, task) {
    res.json(task);
  });
});

app.delete('/todolist/:id', function (req, res) {
  
 todomodel.remove(req.params.id, function (err, task) {
    res.json(task);
  });
});

app.get('/todolist/:id', function (req, res) {
  
  todomodel.findById({req.params.id, function (err, task) {
    res.json(task);
  });
});

app.put('/todolist/:id', function (req, res) {
  
  todomodel.findAndModify({
     query: req.params.id,
     update: {$set: {name: req.body.name}},
     new: true}, function (err, task) {
      
      res.json(task);
    }
  );
});

app.listen(3000);
console.log("Server running on port 3000");

＆＃13;

这是todo.html文件

＆＃13;

<!DOCTYPE html>
<html ng-app="App">
<head>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="C:\Users\Rohit\Desktop\New folder\frontend.js">


</script>

<style>
#list   
{ margin-left:320px;
  font-size: 40px;
  font-family:verdana;
}
button     
{ color:yellow;background-color:red;text-align:center;cursor:pointer;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  font-size:40px;
  padding: 14px 32px;
}
button:hover
{ background-color:Peachpuff;
  color:tomato;
}
</style>
</head>

<body style="background-color:cyan;">

<div ng-controller="Ctrl">

<h1 style="text-align:center;font-family:verdana;">To-Do LiSt</h1>

<div style="margin-left:300px">
<input type="text" ng-model="task.name" style="background-color:black;color:white;font-size:40px;width:40%">
<button ng-click="addtask()">Add</button>&nbsp;<button ng-click="updatetask()">Update</button><button ng-click="clearfield()">Clear</button>&nbsp;
</div>

<ul>
<li id="list" ng-repeat="task in todolist">
{{task.name}}

<button ng-click="deletetask(task._id)">Delete</button>&nbsp;<button ng-click="edittask(task._id)">Edit</button>
</tr>
</table>

</div>


</body>
</html>

＆＃13;

这是frontend.js文件

＆＃13;

var App = angular.module('App',[]);
App.controller('Ctrl',['$scope','$http',function($scope,$http) {
         
    var reset = function(){
      $http.get('/todolist').success(function(response){
        $scope.todolist=response;
        $scope.task="";
        });
     };

  reset();

$scope.addtask = function() {
  $http.post('/todolist', $scope.task).success(function(response) {
       reset();
    });
 };

$scope.deletetask = function() {
  $http.delete('/todolist/'+ id).success(function(response){
      reset();
      });
   };
 
$scope.edittask = function(id) {
   $http.get('/todolist/'+ id).success(function(response){
       $scope.task=response;
     });
   };

$scope.updatetask = function(id){
   $http.put('/todolist/'+$scope.task._id, $scope.task).success(function(response){
       reset();
    });
 };

$scope.clearfield = function(){
   $scope.task="";
}

}]);

＆＃13;

这是错误，它显示在浏览器控制台

中

＆＃13;

Not allowed to load local resource: file:///C:/Users/Rohit/Desktop/New%20folder/server.js
angular.min.js:35Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=App&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.12%2Fangular.min.js%3A17%3A381)
http://localhost:3000/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to parse SourceMap: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js.map

＆＃13;

＆＃13; 我尝试通过连接到// localhost：3000显示todo.html文件，显示了该文件，但是包含todo.html的javascript的frontend.js文件没有加载，它也引发了一些错误在浏览器控制台中。有关如何在连接到localhost服务器时将frontend.js精确导入todo.html文件的任何帮助都会有所帮助

Answer 1

我在合并两个JS文件后运行了你的代码。它按预期运行，并且遇到调用todolist Web服务的问题（因为我没有在我的机器上运行该服务，所以预计会发生这种情况）。

请注意，我没有调用任何本地文件的src。本地文件对浏览器存在安全风险，并且没有设置权限以忽略此风险，它们不会从本地驱动器加载JavaScript（使用HTTP服务器之外）。

请让我知道您拥有的浏览器类型，我会看看是否可以帮助您解决问题的这一部分 - 由于您未从Web服务器加载这些文件，因此可能会遇到更多问题您的网络服务需要调用。

如果您使用http://localhost:3000获得了成功的结果，那么您的计算机上运行的是活动的Web服务器，或者您正在使用其他计算机的上下文中的浏览器运行该URL（例如，通过TS会话）。如果您确定您的“localhost”是您的计算机，则应该尝试使用您的Web服务器从中提取文件的目录。

<!DOCTYPE html>
<html ng-app="App">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('Ctrl', ['$scope', '$http', function ($scope, $http) {
            var reset = function () {
                $http.get('/todolist').success(function (response) {
                    $scope.todolist = response;
                    $scope.task = "";
                    console.log("reset success: " + response);
                }).error(function (response, status, headers, config) {
                    console.log("reset error: " + status + ": " + response);
                });
            };

            reset();

            $scope.addtask = function () {
                $http.post('/todolist', $scope.task).success(function (response) {
                    reset();
                    console.log("addtask success: " + response);
                }).error(function (response, status, headers, config) {
                    console.log("addtask error: " + status + ": " + response);
                });
            };

            $scope.deletetask = function (id) {
                $http.delete('/todolist/' + id).success(function (response) {
                    reset();
                    console.log("deletetask success: " + response);
                }).error(function (response, status, headers, config) {
                    console.log("deletetask error: " + status + ": " + response);
                });
            };

            $scope.edittask = function (id) {
                $http.get('/todolist/' + id).success(function (response) {
                    $scope.task = response;
                    console.log("edittask success: " + response);
                }).error(function (response, status, headers, config) {
                    console.log("edittask error: " + status + ": " + response);
                });
            };

            $scope.updatetask = function (id) {
                $http.put('/todolist/' + id, $scope.task).success(function (response) {
                    reset();
                    console.log("updatetask success: " + response);
                }).error(function (response, status, headers, config) {
                    console.log("updatetask error: " + status + ": " + response);
                });
            };

            $scope.clearfield = function () {
                $scope.task = "";
            }

        }]);
    </script>

    <style>
        #list {
            margin-left: 320px;
            font-size: 40px;
            font-family: verdana;
        }

        button {
            color: yellow;
            background-color: red;
            text-align: center;
            cursor: pointer;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            font-size: 40px;
            padding: 14px 32px;
        }

        button:hover {
            background-color: Peachpuff;
            color: tomato;
        }
    </style>
</head>

<body style="background-color:cyan;">
    <div ng-controller="Ctrl">

        <h1 style="text-align:center;font-family:verdana;">To-Do LiSt</h1>

        <div style="margin-left:300px">
            <input type="text" ng-model="task.name" style="background-color:black;color:white;font-size:40px;width:40%">
            <button ng-click="addtask()">Add</button>&nbsp;<button ng-click="updatetask()">Update</button><button ng-click="clearfield()">Clear</button>&nbsp;
        </div>

        <ul>
            <li id="list" ng-repeat="task in todolist">{{task.name}}
        </ul>
        <button ng-click="deletetask(task._id)">Delete</button>&nbsp;<button ng-click="edittask(task._id)">Edit</button>
    </div>
</body>
</html>

不允许加载本地资源，而angular.min.js：35未捕获错误：[$ injector：modulerr]

1 个答案: