2016-05-31 3 views
0

это файл server.js

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

Это todo.html файл

<!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>

Это является frontend.js файл

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

 
}]);

Это ошибка, она показывает в браузере консоли

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
Я попытался отобразить файл todo.html путем подключения к // Localhost: 3000, файл был отображен, но файл frontend.js, который содержит javascript todo.html, не загружался, и он также забросил несколько ошибок в консоли brower. Любая помощь о том, как точно импортировать файл frontend.js в файл todo.html при подключении к серверу localhost будет полезна

+0

У меня возникли проблемы при загрузке локальных файлов, так как некоторые браузеры блокируют их. Какой браузер вы используете и у него есть настройки, которые предотвращают загрузку локальных файлов (т. Е. Файлов непосредственно с вашего жесткого диска). Вы должны попробовать настроить локальный HTTP-сервер и загрузить файлы через него, чтобы узнать, начинает ли он работать. – Paurian

+0

Я не знаю, как загружать файлы через локальный http-сервер, можете ли я проинформировать меня об этом – Robin

+0

Установка локального веб-сервера имеет тенденцию варьироваться от одной ОС к другой, но вы можете попробовать Apache http://httpd.apache.org/прохождение вас через его настройку немного для этой конкретной темы. В каком браузере включен режим? Возможно, мы можем найти более непосредственный подход к работе над разрешением? – Paurian

ответ

0

Я проверил ваш код после слияния двух файлов JS. Он работал так, как ожидалось, и он столкнулся с проблемой, вызывающей веб-службу todolist (ожидается, так как у меня нет этой службы, запущенной на моей машине).

Обратите внимание, что я не вызываю src любых локальных файлов. Локальные файлы представляют угрозу безопасности для браузеров и не устанавливают разрешения для их игнорирования этого риска, они не будут загружать ваш JavaScript с локального диска (за исключением использования HTTP-сервера).

Пожалуйста, дайте мне знать тип браузера, который у вас есть, и я посмотрю, смогу ли я помочь вам решить эту часть проблемы. У вас, вероятно, будет больше проблем, поскольку вы не загружаете эти файлы из Интернета сервер, который требуется вашим веб-службам.

Если вы вернули успешный результат с http://localhost:3000, то либо у вас есть активный веб-сервер, работающий на вашем компьютере, либо вы используете этот URL-адрес из браузера в контексте другой машины (например, через сеанс TS). Если вы уверены, что вы являетесь «localhost», это ваша машина, вы должны попробовать работать из каталога, с которого веб-сервер извлекает файлы.

<!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> 
+0

Я тоже запускал код, объединяя оба файла, но кнопки не работают так, как должны, они просто мертвы, не могли бы вы заглянуть во все 3 файла и узнать, почему приложение списка задач не работает – Robin

+0

Я бы не ожидал, что кнопки будут работать, или по нескольким причинам: 1. В вашем браузере не будет разрешено выполнять запросы перекрестного происхождения из локального файла (файл: /// URI). 2. Ваш сервер может не обслуживать запросы для todolist. Если вы находитесь в своем браузере и набираете http: // loclhost: 3000/todolist/X, ваш код сервера не будет обрабатывать какие-либо ошибки (если «X» недействителен). Поместите код регистрации на всем протяжении [только при отладке], чтобы узнать, поможет ли это вам понять - проверьте сообщения консоли на 404 или 500 ошибок. (Я обновил код, чтобы отразить это предложение). – Paurian

Смежные вопросы