如何使用Node.js/MongoDB在AngularJS应用程序中获取特定目标数据进行渲染

12 浏览
0 Comments

如何使用Node.js/MongoDB在AngularJS应用程序中获取特定目标数据进行渲染

我正在创建一个MEAN堆栈的博客应用程序,我想要实现的目标是从我保存在Mongo数据库中的博客列表(使用Mongoose模式的div和ng-repeat)中获取一个“博客”,并在一个单独的HTML视图中渲染出来。

具体来说,我希望能够在main.html中点击,然后通过AngularJS的数据绑定在readblog.html中呈现该数据。

我尝试过的方法:

1.) 我尝试在readPost函数中放置$location.path('/readblog' + id);,但我猜想如果该路径没有在我的app.js文件中具体声明,这种方法可能不起作用。

2.) 在server.js中的API调用中放置res.redirect('/readblog');res.redirect('/readblog' + id);

...现在我正在寻找是否有这个问题的示例或实现这个功能的替代方法。

由于我对编程还比较新,所以如果有任何不太清楚的地方,我会很乐意进行澄清。

以下是我的代码示例:

server.js

//依赖项。
var express = require('express');
var router = express.Router();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var http = require('http');
var path = require('path');
var fs = require('fs');
var port = 9001;
var mongoUri = 'mongodb://localhost:27017/blog-app';
var app = express();
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());
var Schema = mongoose.Schema;
var blogSchema = new Schema({
    title : {type: String, min: 8, max: 50, required: true},
    body : {type: String, required: true},
    author : {type: String, min: 3, max: 40, required: true},
    pubdate : {type: Date, default: Date.now}
});
var Blog = mongoose.model('Blog', blogSchema);
app.get('/api/blogs/:blog_id', function(req, res) { //通过ID获取博客。
    Blog.find({
        _id: req.params.blog_id
    }, function(err, blog) {
        if (err)
            res.send(err);
    });
});
mongoose.connect(mongoUri);
mongoose.connection.once('open', function() {
  console.log("我们现在连接到MongoDB了:", mongoUri);
});
app.listen(port, function() {
  console.log('正在监听端口:', port);
});

mainCtrl.js

var app = angular.module("blog-app");
app.controller('MainController', ['$scope', '$http', '$location', function($scope, $http, $location) { 
  $scope.apptitle = "AngularJS博客";
  $scope.formData = {};
  $http.get('/api/blogs').success(function(data){
      $scope.blog = data;
      console.log(data);
    }).error(function(data) {
      console.log('错误:' + data);
    });
 $scope.readPost = function(id) {
    $http.get('/api/blogs/' + id)
      .success(function(data) {
        $scope.readblog = data;
        console.log('这是您选择的博客:', data);
      });
  };
}]);

app.js

var app = angular.module('blog-app', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainController'
    })
    .when('/newblog', {
        templateUrl: 'views/newblog.html',
        controller: 'MainController'
    })
    .when('/readblog', {
        templateUrl: 'views/readblog.html',
        controller: 'MainController'
    })
    .otherwise({
      redirectTo: '/'
    });
}) //结束配置。

main.html

 {{ post.title }}
由{{ post.author }}撰写
{{ post.pubdate | date }}

{{ post.body }}



readblog.html

标题:{{ readblog.title }}

作者:{{ readblog.author }}

日期:{{ readblog.pubdate }}

内容:{{ readblog.body }}

0
0 Comments

问题的原因是需要在AngularJS应用程序中获取特定目标的数据。解决方法是使用ui.router来传递数据,并在第二个状态中使用$Stateparams来检索数据。此外,还需要通过向服务器发出get请求来获取数据。

首先,我们需要将客户端和服务器分开。在这里,问题出现在客户端。建议阅读ui.router的文档,以实现从一个状态传递数据到另一个状态的目的。在这种情况下,需要传递所选博客的blogid。然后,在第二个状态中,可以通过$Stateparams检索blogid,并通过向服务器发出get请求来获取数据。

解决方法是在$stateProvider中定义两个状态,一个用于显示博客列表,另一个用于显示所选博客的详细信息。在第二个状态中,通过params关键字定义一个参数来接收所选博客的id。然后在模板中使用这个id来获取特定博客的数据。

具体代码如下:

$stateProvider
  .state('blog', {
    url: "/blogs",
    templateUrl: "views/blog.html"
  })
  .state('readblog', {
    url: "/blogs/:blogid",
    templateUrl: "views/readblog.html",
    params: {
      'id':'123456'
    }
  })

在这个例子中,使用ui.router来代替ngRoute,因为它更强大,并且在问题描述中的语法表明你会使用它。通过params关键字,将id作为参数的值来指示所选对象(在这种情况下是所选的目标博客条目),这是最好的解决方法。

你尝试将'id'作为参数的值传入,但似乎返回了整个数据库。如果有时间,你可以看一下你在github上的项目,帮我看看问题出在哪里。这是github仓库的链接:https://github.com/princetoncollins/blog-app

如果有人有空看一下这段代码,我还是有这个问题。

很抱歉我这些天很忙,恐怕没时间看整个代码。

0
0 Comments

问题的原因是希望在AngularJS应用程序中获取特定目标的数据并进行渲染,但是目前的方法无法实现这一目标。解决方法是通过使用Node.js和MongoDB来实现。

解决方法一是放弃使用ngclick,改用nghref来导航到具有所选id的博客文章,然后异步加载并将其分配给博客文章的作用域。

解决方法二是通过使用$location来以编程方式实现,定义博客接受id的路径。

参考链接:[类似问题](https://stackoverflow.com/questions/14201753/14202514#14202514)

0