个人中心
gpt4 book ai didi

javascript - 在 MEAN 堆栈应用程序中从 mongodb 获取 "404 not found"

转载 作者：行者123 更新时间：2023-12-03 05:42:47 24 4
gpt4 key购买 nike

作为 MEAN 堆栈的介绍，我正在做 this我本地的 github 上的示例。这是一个非常基本的联系人列表 CRUD 应用程序，带有单个表(或文档？)。

我按照指南成功在本地安装了 mongodb。

服务器.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");

公共(public)/ Controller /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>&nbsp;</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>&nbsp;&nbsp;<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

最佳答案

您的 Angular 应用程序未由您的 Node.js 服务器提供服务，这意味着当您调用 $http.get('/contactlist') 时，您正在调用同一域上的路由与你的 Angular 应用程序，它恰好是localhost:63342。

您可以通过在请求中添加域来解决此问题:$http.get('localhost:3000/contactlist')

关于javascript - 在 MEAN 堆栈应用程序中从 mongodb 获取 "404 not found"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40464020/

24 4 0
文章推荐： javascript - 在 Ember.js 应用程序中编辑从 api 检索的数据
文章推荐： javascript - 使用 highcharts 将累积图表转换为非累积图表
文章推荐： javascript - 如何在数组中收集 id ="tripDate"的整个 内部 html，并使用当前日期检查每个 td 值
文章推荐： javascript - 页面未找到错误，甚至路由都给出了 angularJs
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com