使用NPM模块创建Meteor应用

最新推荐文章于 2022-03-24 20:28:25 发布

dingshi7798

最新推荐文章于 2022-03-24 20:28:25 发布

阅读量158

点赞数

文章标签： json ui 数据库

在版本0.6.0中，Meteor引入了NPM支持。但是完整的NPM支持仅适用于流星包。流星应用只能加载流星使用的核心NPM模块。这意味着，如果您需要使用Redis，github或winston等NPM模块，那么您就不走运了。但这不是不可能的。

不过，最近，我想出了一种将NPM与Meteor结合使用的更聪明的方法。它打包成一个智能软件包，非常易于使用。

对于本教程，我将指导您使用github NPM模块创建Github Issue Search应用程序。我将逐步介绍如何构建它。但我认为您对Meteor和Meteorite有很好的了解。

您可以在http://gh-search.meteor.com上看到实时应用程序，并且代码托管在github上。 Github问题搜索流星应用

创建应用

让我们创建我们的应用程序。

mrt create gh-issue-search
cd gh-issue-search
mrt add bootstrap

我们不需要Meteor自动创建的文件，因此请确保删除以下文件。

gh-issue-search.css
gh-issue-search.html
gh-issue-search.js

让我们添加NPM支持

在本教程中，我们将使用github NPM模块，并将如下所示添加它。

从大气层安装npm智能软件包。

mrt add npm

在项目根目录上创建packages.json文件，并添加以下内容。

{
  "github": "0.1.10"
}

packages.json是我们定义要加载的NPM模块的文件。声明版本时，请确保设置绝对版本号。像0.1.x这样的东西在Meteor中不起作用。

编码流星客户端

创建一个名为client的文件夹，并添加以下HTML和CSS文件。我们不太担心这些文件，因为我们的重点是使用NPM模块。

文件：client / home.html

<head>
  <title>github-search</title>
</head>

<body>
  {{> home}}
</body>

<template name="home">
  <div class='container'>
    <h1>Github Issue Search</h1><br>
    <input type="text" id='user' placeholder="Enter User Name" value="meteor">
    <input type="text" id='repo' placeholder="Enter Repo Name" value="meteor">
    <br>
    <input type='text' id='keyword' placeholder="Enter Search Keyword"><br>
    <button id='search' class='btn btn-info'>Search Now</button>
    <hr/>
    {{> results}}
  </div>
</template>

<template name='results'>
  {{#with error}}
    <div class='alert'>
      {{reason}}
    </div>
  {{/with}}

  {{#each results}}
    <div class='result'>
      <a href='{{html_url}}' target='_blank'>{{title}}</a>
    </div>
  {{/each}}
</template>

文件：client / main.css

h1 {
  margin-top: 30px;
}

.result {
  padding: 10px 0px 10px 10px;
  margin: 5px 0px 5px 0px;
  border-left: 5px solid rgb(200, 200, 200);
  font-size: 16px;
}

文件：client / helpers.js

Template.results.helpers({
  "results": function() {
    return Session.get('results') || [];
  },

  "error": function() {
    return Session.get('error');
  }
});

搜索结果和错误将通过会话变量在模板中呈现。我们要做的就是设置会话变量，然后相应地更改UI。

实施搜索

这就是我们要实现搜索的方式。

我们正在将搜索作为流星方法实施。
Npm github模块将用于进行实际搜索。
来自客户端的搜索请求详细信息（用户，存储库，搜索关键字）将通过Meteor.call发送到Meteor方法
流星方法的结果（或错误）将在Meteor.call捕获，并将其设置为正确的会话变量。

监听按钮单击事件

我们将监听按钮的click事件，并将文本字段值发送到名为search的方法。

文件：/client/events.js

Template.home.events({
  "click #search": function() {
    Session.set('error', null);
    Session.set('results', null);

    var user = $('#user').val();
    var repo = $('#repo').val();
    var keyword = $('#keyword').val();

    $('#search').html('Searching...');
    Meteor.call('search', user, repo, keyword, function(err, results) {
      console.log(results);
      $('#search').html('Search Now');
      if(err) {
        Session.set('error', err);
      } else {
        Session.set('results', results.issues);
      }
    });
  }
});

使用npm模块

现在是时候在服务器中实现我们的方法了。让我们在项目根目录上创建一个名为server的文件夹，并添加如下所示的方法。

文件：server / methods.js

### CodeBlock: 1
Meteor.methods({
  "search": function(user, repo, keyword) {
    ### CodeBlock: 2
  }
});

标记为CodeBlock: x将被以下代码替换。

首先，让我们加载我们的NPM模块。通常，加载NPM模块是Npm.require()的工作。但是，为了加载packages.json定义的模块，您需要使用Meteor.require()代替。

让我们在CodeBlock: 1加载Github模块CodeBlock: 1

var Github = Meteor.require('github');
var github = new Github({version: "3.0.0"});

让我们用github npm模块搜索

等一下 NPM模块异步工作，但Meteor方法同步工作。他们在一起玩的不好。

但是， npm智能软件包引入了另一个有用的方法，称为Meteor.sync ，它可以解决此问题。让我们看看它是如何工作的。

此代码将添加到CodeBlock: 2 。

//this is the search request object (which is accept by our github npm module)
var searchRequest = {
  user: user,
  repo: repo,
  keyword: keyword,
  state: 'open'
};

//execution pause here until done() callback is called.
var repos = Meteor.sync(function(done) {
  github.search.issues(searchRequest, function(err, searchResults) {
    done(err, searchResults);
  });
});

if(repos.error) {
  throw new Meteor.Error(401, repos.error.message);
} else {
  return repos.result;
}

Meteor.sync()将暂停执行流星方法，直到触发done()回调为止。因此，现在我们可以安全地在Meteor.sync执行任何异步任务。

获得结果（或错误）后，我们可以通过调用done回调来恢复执行。

done()接受第一个参数作为错误对象，第二个参数作为结果。然后将这些值作为Meteor.sync()的返回值发送到Meteor方法。

返回值被封装到一个对象中，如下所示。

{
  error: {error: "object"},
  result: "resultValue"
}

该代码的另一部分是不言自明的。

这是我们最终代码的外观。

var Github = Meteor.require('github');
var github = new Github({version: "3.0.0"});

Meteor.methods({
  "search": function(user, repo, keyword) {
    var searchRequest = {
      user: user,
      repo: repo,
      keyword: keyword,
      state: 'open'
    };

    //execution pause here until done() callback is called.
    var repos = Meteor.sync(function(done) {
      github.search.issues(searchRequest, function(err, searchResults) {
        done(err, searchResults);
      });
    });

    if(repos.error) {
      throw new Meteor.Error(401, repos.error.message);
    } else {
      return repos.result;
    }
  }
});

开演时间

让我们在mrt和http://localhost:3000上运行我们的应用程序。托管版本可以在http://gh-search.meteor.com上找到。

如果遇到任何错误，请尝试将其与github repo进行比较。

NPM模块不限于方法

我们可以在服务器中的任何位置使用npm模块。当然，您可以在Publications，Permissions和Meteor.sync使用它们。

而且，如果您不需要同步行为，只需使用不带Meteor.sync的NPM模块。没有人会阻止您这样做。

我个人认为这对于Meteor来说是一个非常好的机会。从技术上讲，有30,000+ NPM模块正在等待与Meteor一起使用。

那有很大的潜力。

From: https://www.sitepoint.com/create-a-meteor-app-using-npm-module/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用NPM模块创建Meteor应用

随着0.6.0版本，流星介绍NPM支持。但全NPM支持仅适用于流星包。仅通过流星使用的核心NPM模块可以从流星应用被加载。这意味着如果你需要使用NPM模块像Redis的，github上，或温斯顿你的运气了。但是，这并非不可能。但最近，我想出了一个使用NPM与流星更聪明的方式。捆绑在一起作为一个聪明的包装，使用非常方便。在本教程中，我将引导您创建使用Github的问题搜索应...
复制链接

扫一扫