在MEAN堆栈中创建搜索文章功能



首先,让我告诉你,我是javascript和node.js世界的新手。我一直在寻找帮助,试图做我想做的事情,但还没有找到。

我正在使用MEAN堆栈(http://mean.io/)我正在尝试在包含文章模型中实现搜索功能。搜索将查找带有特定标记的文章,并将在索引页面中实现。请跟我来,看看你能不能找到我缺少的东西。

在后端:

应用程序/型号/

/**
* Article Schema
*/
var ArticleSchema = new Schema({
created: {
type: Date,
default: Date.now
},
title: {
type: String,
default: '',
trim: true
},
content: {
type: String,
default: '',
trim: true
},
tag: {
type: String,
default: '',
trim: true
},
user: {
type: Schema.ObjectId,
ref: 'User'
}
});

应用程序/控制器/

exports.searcharticle = function(req, res) {
Article.find({'tag': req.params.tag}).sort('-created').populate('user', 'name username').exec(function(err, articles) {
if (err) {
res.render('error', {
status: 500
});
} else {
res.jsonp(articles);
}
});
};

在app/routes/articles.js 中添加了搜索路线

app.get('/articles/search/:tag', articles.searcharticle);

在前端:

创建了将显示搜索结果的搜索视图-public/views/articles/search.html

<section data-ng-controller="ArticlesController" data-ng-init="searchart()">
<ul class="articles unstyled">
<li data-ng-repeat="article in articles">
<span>{{article.created | date:'medium'}}</span> /
<span>{{article.user.name}}</span>
<h2><a data-ng-href="#!/articles/{{article._id}}">{{article.name}}</a></h2>
<div>{{article.tag}}</div>
</li>
</ul>
<h1 data-ng-hide="!articles || articles.length">Your search hasn't returned any results. <br> Why don't you <a href="/#!/articles/create">Create One</a>?</h1>
</section>

index.html的视图,搜索框将在其中实现

<section data-ng-controller="ArticlesController">
<form role="form" data-ng-submit="searchart()">
<div>
<div>
<input type="text" id="tag" ng-model="selected" class="form-control" placeholder="Tag">
</div>
<div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div> 
</form>

将路由添加到config.js

when('/articles/search/:tag', {
templateUrl: 'views/articles/search.html'
}).

并为文章控制器添加了搜索功能

$scope.searchart = function() {
Articles.query(function(articles) {
$scope.articles = articles;
});
};

现在,实现了这段代码,当我点击索引页面中的提交按钮时,什么都不会发生。

你能找到我缺少的东西吗?

提前感谢!

为了在客户端文章服务中使用URL,您应该在文章服务中定义URL参数:packages/articles/public/services/Article.js,就像已经在其中定义的articleId参数一样:

angular.module('mean.articles').factory('Articles', ['$resource',
function($resource) {
return $resource('articles/:articleId', {
articleId: '@_id'
}, {
update: {
method: 'PUT'
}
});
}
]);

然后你需要在你的角度控制器搜索方法中传递它,就像通过id获取一个的函数,比如这样:

$scope.findOne = function() {
Articles.get({
articleId: $stateParams.articleId
}, function(article) {
$scope.article = article;
});
};

就我个人而言,我不知道如何在现有参数(articleId)之外,向$resource对象添加另一个参数,您可能必须使用新参数(:tag)创建另一个$resource服务,并在您的角度控制器中的搜索方法中使用它。

对我来说,另一种听起来更简单、更灵活的方法是在查询方法中传递搜索参数,如下所示:

$scope.searchart = function() {
Articles.query({tag:$scope.selectedTag}, function(articles) {
$scope.articles = articles;
});
};

然后在服务器端控制器上,读取您的查询参数,如下所示:

exports.searcharticle = function(req, res) {
Article.find(req.query).sort('-created').populate('user', 'name username').exec(function(err, articles) {
if (err) {
res.render('error', {
status: 500
});
} else {
res.jsonp(articles);
}
});
};

最新更新