如何使用Node.js/MongoDB在AngularJS应用程序中获取特定目标数据进行渲染
如何使用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 }}
问题的原因是需要在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
如果有人有空看一下这段代码,我还是有这个问题。
很抱歉我这些天很忙,恐怕没时间看整个代码。