從MEAN Stack應用程序中的mongodb獲取“ 404 not found”
[英]Getting “404 not found” from mongodb within a MEAN stack app
問題描述
作為MEAN堆棧的簡介，我在本地的github上執行了此示例。 這是一個非常基本的聯系人列表CRUD應用程序，只有一個表（或文檔？）。
我按照指南進行操作，並在本地成功安裝了mongodb。
server.js：
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('contactlist', ['contactlist']);
var bodyParser = require('body-parser');
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());
app.get('/contactlist', function (req, res) {
console.log('I received a GET request');
db.contactlist.find(function (err, docs) {
console.log(docs);
res.json(docs);
});
});
app.post('/contactlist', function (req, res) {
console.log(req.body);
db.contactlist.insert(req.body, function(err, doc) {
res.json(doc);
});
});
app.delete('/contactlist/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.contactlist.remove({_id: mongojs.ObjectId(id)}, function (err, doc) {
res.json(doc);
});
});
app.get('/contactlist/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.contactlist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
res.json(doc);
});
});
app.put('/contactlist/:id', function (req, res) {
var id = req.params.id;
console.log(req.body.name);
db.contactlist.findAndModify({
query: {_id: mongojs.ObjectId(id)},
update: {$set: {name: req.body.name, email: req.body.email, number: req.body.number}},
new: true}, function (err, doc) {
res.json(doc);
}
);
});
app.listen(3000);
console.log("Server running on port 3000");
公共/控制器/controller.js：
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from controller");
var refresh = function() {
$http.get('/contactlist').success(function(response) {
console.log("I got the data I requested");
$scope.contactlist = response;
$scope.contact = "";
});
};
refresh();
$scope.addContact = function() {
console.log($scope.contact);
$http.post('/contactlist', $scope.contact).success(function(response) {
console.log(response);
refresh();
});
};
$scope.remove = function(id) {
console.log(id);
$http.delete('/contactlist/' + id).success(function(response) {
refresh();
});
};
$scope.edit = function(id) {
console.log(id);
$http.get('/contactlist/' + id).success(function(response) {
$scope.contact = response;
});
};
$scope.update = function() {
console.log($scope.contact._id);
$http.put('/contactlist/' + $scope.contact._id, $scope.contact).success(function(response) {
refresh();
})
};
$scope.deselect = function() {
$scope.contact = "";
}
}]);
public / index.html：
<!DOCTYPE>
<html ng-app="myApp">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<title>Contact List App</title>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>Contact List App</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number</th>
<th>Action</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" ng-model="contact.name"></td>
<td><input class="form-control" ng-model="contact.email"></td>
<td><input class="form-control" ng-model="contact.number"></td>
<td><button class="btn btn-primary" ng-click="addContact()">Add Contact</button></td>
<td><button class="btn btn-info" ng-click="update()">Update</button> <button class="btn btn-info" ng-click="deselect()">Clear</button></td>
</tr>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
<td><button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button></td>
<td><button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button></td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
package.json：
{
"name": "contactlistapp",
"version": "1.0.0",
"description": "",
"main": "server.js",
"dependencies": {
"body-parser": "^1.10.2",
"express": "^4.11.1",
"mongojs": "^0.18.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"repository": {
"type": "git",
"url": "https://github.com/michaelcheng429/meanstacktutorial.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/michaelcheng429/meanstacktutorial/issues"
},
"homepage": "https://github.com/michaelcheng429/meanstacktutorial"
}
我在mongo命令行（Windows 7）上編寫的腳本：
use contactlist
db.contactlist.insert({name: 'Tom', email: 'tom@gmail.com', number: '(444)444-4444'})
當我打開index.html時，Chrome控制台上的錯誤：
GET http://localhost:63342/contactlist 404 (Not Found)(anonymous function) @ angular.js:9827m @ angular.js:9628f @ angular.js:9344(anonymous function) @ angular.js:13189$eval @ angular.js:14401$digest @ angular.js:14217$apply @ angular.js:14506(anonymous function) @ angular.js:1448e @ angular.js:4185d @ angular.js:1446sc @ angular.js:1466Jd @ angular.js:1360(anonymous function) @ angular.js:26125a @ angular.js:2744c @ angular.js:3014
controller.js:19 Object {name: "sa", email: "sa", number: "as"}email: "sa"name: "sa"number: "as"__proto__: Object
1 個解決方案
解決方案1
1 2016-11-07 11:34:48
您的node.js服務器未提供您的$http.get('/contactlist')應用程序，這意味着當您調用$http.get('/contactlist') ，您正在與您的$http.get('/contactlist')應用程序在同一域中調用路由，該路由恰好是localhost:63342 。
您可以通過在請求中添加域來解決該問題： $http.get('localhost:3000/contactlist')
沒有收到來自Facebook OAuth API，帶有MEAN Stack的Passport的電子郵件
[英]Not getting back email from Facebook OAuth API, Passport with MEAN Stack
在Azure Web應用程序中對本地文件執行GET時獲得“ 404未找到”
[英]Getting “404 not found” on doing a GET on local file in Azure web app
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.