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

Posted 2023-03-11

【中文标题】在 MEAN 堆栈中创建搜索文章功能

【英文标题】：Create search articles feature in MEAN stack

【发布时间】：2014-03-06 19:54:21

【问题描述】：

首先，让我告诉你，我是 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;
    );
;

现在，执行此代码后，当我单击索引页面中的提交按钮时，没有任何反应。

你能找到我错过了什么吗？

提前致谢！

【参考方案1】：

为了在您的客户端文章服务中使用 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'
      
    );
  
]);

然后你需要在你的 Angular 控制器搜索方法中传递它，比如通过 id 获取 1 的函数，像这样：

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

我个人不知道如何在 $resource 对象中除了现有的（articleId）之外添加另一个参数，您可能必须使用新参数（: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);
        
    );
;