基本流星技巧

最新推荐文章于 2023-11-11 20:13:16 发布

cunjie3951

最新推荐文章于 2023-11-11 20:13:16 发布

阅读量563

点赞数

文章标签： java vue 大数据 python javascript ViewUI

Meteor项目是一个开放源代码Web应用程序开发平台，使您可以创建完全用JavaScript编写的应用程序。

Meteor提供了满足基本Web应用程序需求的开发工具，使其自然而然地适合于初创企业和新项目。它提供了诸如从一个代码库（iOS，Android，桌面）部署到许多设备的功能，并支持开箱即用的热推更新。

这意味着您可以在用户设备上更新应用程序，而无需等待App Store批准。通过npm及其自己的Atmosphere库提供的丰富软件包使Meteor成为一个有趣的工具。

流星的快速发展

三年前，我开始使用Meteor的主要原因之一是它必须在数小时内交付可运行的Web应用程序的快速能力。它使我能够满足客户的高期望和他们的第一轮前融资预算。

最终，有了这个可以从一开始就容纳大创意的Web框架，单人开发团队就可以轻松获得高质量的响应式移动Web应用程序。

NPM +大气套餐

流星提供的任何npm软件包都可以在Meteor中使用，因此，如果您喜欢使用Grunt，Browserify，Webpack，Bootstrap，React，jQuery和Angular之类的工具，则在Meteor中使用它们不会有任何问题。

要搜索新软件包：

对于npm软件包，请使用npmjs.com 。
对于Meteor软件包，请使用moneyjs.com 。

要在Meteor中安装npm软件包，只需运行：

$ meteor npm install --save browserify

运行此命令将使用依赖关系更新您的package.json ，还将包下载到应用程序的本地node_modules/目录中。

版本控制

重要说明：为了可移植性，我建议您不要将node_modules/提交到git中，并且在将其传递给新开发人员时，请他们运行meteor npm install ，它将安装所有必需的软件包。

用户帐号

accounts-ui软件包使用户可以登录并注册该应用程序，并且还提供了oAuth支持，并将其与Meteor Accounts进行了接口。

为了品牌和交流目的，自定义电子邮件验证（ sendVerificationEmail ）或邀请（ sendEnrollmentEmail ）以适合应用程序的整体主题是常见的要求。

在Meteor中做HTML电子邮件的一种好方法是使用yogiben的漂亮电子邮件包。

meteor add yogiben:pretty-email

现在，您只需几行即可更改验证电子邮件：

PrettyEmail.defaults.verifyEmail =
  heading: 'Yo - You Need to activate your account on mega mushrooms'
  buttonText: 'Activate'
  ...

对于您的公司信息，您可以这样配置PrettyEmail.options ：

PrettyEmail.options =
  from: 'support@mycompany.com'
  logoUrl: 'http://mycompany.com/logo.png'
  companyName: 'myCompany'
  companyUrl: 'http://mycompany.com'
  companyAddress: '123 Street, ZipCode, City, Country'
  companyTelephone: '+1234567890'
  companyEmail: 'support@mycompany.com'
  siteName: 'mycompany'

要发送电子邮件，请使用以下方法：

Accounts.sendVerificationEmail Meteor.userId()
Accounts.sendResetPasswordEmail Meteor.userId()
Accounts.sendEnrollmentEmail Meteor.userId()

如果要添加模板，可以通过自定义以下选项来添加：

PrettyEmail.send 'call-to-action',
  to: 'myuser@myuser.com'
  subject: 'You got new message'
  heading: 'Your friend sent you a message'
  message: 'Click the button below to read the message'
  buttonText: 'Read message'
  buttonUrl: 'http://mycompany.com/messages/2314'
  messageAfterButton: "I come after the button!"

更改样式也非常容易：

PrettyEmail.style =
  fontFamily: 'Helvetica'
  textColor: '#606060'
  buttonColor: '#FFFFFF'
  buttonBgColor: '#007FFF

这是用户将在其电子邮件客户端中收到的激活电子邮件的示例。

漂亮的电子邮件为社交，反向链接，页眉和页脚等提供了更多的选择-阅读手册页上的更多内容。

棘轮，物化和引导支持

对于每个流行的前端库以及Ionic，也都有用户帐户包。每个都可以完全配置以满足您的需求。

棘轮： meteor add useraccounts:ratchet
离子： meteor add useraccounts:ionic
引导程序： meteor add useraccounts:bootstrap
实现： meteor add useraccounts:materialize

用户界面

与用户帐户类似，有一些软件包可用于流行的前端库，例如Bootstrap，Angular，React和Blaze模板引擎，以及许多其他库，例如Semantic UI 。

搜寻大气层会产生许多结果。这是我的最爱：

Angular软件包： angularui
语义UI集成：语义UI流星
Blaze组件（用于Blaze的可重复使用组件）：Blaze -components
离子成分：流变：离子
棘轮框架： pcjpcj2：ratchet

React + Bootstrap

您首先需要安装React npm软件包：

$ npm install --save react react-dom
$ npm install --save react-bootstrap

现在，对于meteor包，运行meteor add universe:react-bootstrap 。

您现在可以在React JSX中使用Bootstrap组件：

const buttonsInstance = (
  <div>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="large">Large button</Button>
      <Button bsSize="large">Large button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary">Default button</Button>
      <Button>Default button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="small">Small button</Button>
      <Button bsSize="small">Small button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
      <Button bsSize="xsmall">Extra small button</Button>
    </ButtonToolbar>
  </div>
);

ReactDOM.render(buttonsInstance, mountNode);

页面过渡

如果您使用的是Iron Router，则可以利用流星转换程序包。在您的Blaze模板上，在{ {yield}}周围添加以下车把：

{{#transitioner}}
  {{> yield}}
{{/transitioner}}

现在设置路线之间的过渡：

Transitioner.transition({
    fromRoute: 'fromRouteName',
    toRoute: 'toRouteName',
    velocityAnimation: {
        in: animation,
        out: animation
    }
})

有关转换的更多信息，请查看README 。

蒙哥

为了在Web浏览器中编辑mongo数据库， Mongol工具是我使用过的最好的工具之一。使用以下方法安装Mongol后：

$ meteor add msavin:mongol

只需按Control-M ，您就可以使用浏览器中的完整CRUD支持访问您的收藏集。

我发现在调试新应用或对现有应用进行数据更改时，使用Mongol非常有用。

浏览器扩展

对于使用Chrome的用户，有一个名为MiniMongo的Mongo插件可用，使您能够在开发人员工具窗格中浏览Meteor数据库。

如果您想自己构建源代码，可以在GitHub上使用MiniMongo Explorer项目。

部署方式

使用出色的免费工具mup ，您可以在数分钟内将站点部署到Digital Ocean VPN。

配置非常简单，如果您想启用HTTPS，则只需要拥有您的应用程序，SSH凭证以及一个SSL证书即可。

要设置mup ，首先要创建一个用于部署的目录：

$ cd meteor-app
$ mkdir .deploy
$ cd .deploy

安装Mup：

$ npm install -g mup

初始化目录：

$ mup init

现在，您需要通过设置通过上一步创建的mup.js文件来配置部署。

module.exports = {
  servers: {
    one: {
      host: '1.2.3.4',
      username: 'root',
      // pem: '/home/user/.ssh/id_rsa',
      // password: 'password',
      // or leave blank to authenticate using ssh-agent
      opts: {
        port: 22,
      },
    }
  },

  meteor: {
    name: 'app',
    path: '../app',
    // lets you add docker volumes (optional)
    volumes: {
      // passed as '-v /host/path:/container/path' to the docker run command
      '/host/path': '/container/path',
      '/second/host/path': '/second/container/path'
    },
    docker: {
      // Change the image to 'kadirahq/meteord' if you
      // are using Meteor 1.3 or older
      image: 'abernix/meteord:base' , // (optional)
      imagePort: 80, // (optional, default: 80)

      // lets you add/overwrite any parameter on
      // the docker run command (optional)
      args: [
        '--link=myCustomMongoDB:myCustomMongoDB', // linking example
        '--memory-reservation 200M' // memory reservation example
      ],
      // (optional) Only used if using your own ssl certificates.
      // Default is "meteorhacks/mup-frontend-server"
      imageFrontendServer: 'meteorhacks/mup-frontend-server',
      // lets you bind the docker container to a
      // specific network interface (optional)
      bind: '127.0.0.1',
      // lets you add network connections to perform after run
      // (runs docker network connect <net name> for each network listed here)
      networks: [
        'net1'
      ]
    },

     // list of servers to deploy, from the 'servers' list
    servers: {
      one: {}, two: {}, three: {}
    },

    buildOptions: {
      // skip building mobile apps, but still build the web.cordova architecture
      serverOnly: true,
      debug: true,
      cleanAfterBuild: true, // default
      buildLocation: '/my/build/folder', // defaults to /tmp/<uuid>

      // set serverOnly: false if want to build mobile apps when deploying

      // Remove this property for mobileSettings to use your settings.json
      // (optional)
      mobileSettings: {
        yourMobileSetting: 'setting value'
      },
      server: 'http://app.com', // your app url for mobile app access (optional)
       // adds --allow-incompatible-updates arg to build command (optional)
      allowIncompatibleUpdates: true,
    },
    env: {
      // PORT: 8000, // useful when deploying multiple instances (optional)
      ROOT_URL: 'http://app.com', // If you are using ssl, this needs to start with https
      MONGO_URL: 'mongodb://localhost/meteor'
    },
    log: { // (optional)
      driver: 'syslog',
      opts: {
        'syslog-address': 'udp://syslogserverurl.com:1234'
      }
    },
    ssl: {
      // Enables let's encrypt (optional)
      autogenerate: {
        email: 'email.address@domain.com',
        domains: 'website.com,www.website.com' // comma separated list of domains
      }
    },
    deployCheckWaitTime: 60, // default 10
    // lets you define which port to check after the deploy process, if it
    // differs from the meteor port you are serving
    // (like meteor behind a proxy/firewall) (optional)
    deployCheckPort: 80,

    // Shows progress bar while uploading bundle to server (optional)
    // You might need to disable it on CI servers
    enableUploadProgressBar: true // default false.
  },

  mongo: { // (optional)
    port: 27017,
    version: '3.4.1', // (optional), default is 3.4.1
    servers: {
      one: {},
    },
  },
};

现在设置服务器：

$ mup setup

并部署：

$ mup deploy

您将在终端中看到该过程每个步骤的确认。部署完成后，该应用程序现在已在您的服务器上运行，您可以在浏览器中检出该应用程序。

有关使用SSL配置的更多信息，请参阅本指南。

快取

Meteor随附有appcache ，它将在首次加载后缓存应用程序，但不用于离线使用。

如果您想脱机缓存，则需要使用GroundMeteor 。这是仅适用于LocalCollection的客户端存储。

例如，我们可以监视一个集合并将其存储在本地：

local = new Ground.Collection('offlineCache');

local.observeSource(Data.find());

Meteor.setTimeout(() => {
  // Stop observing - keeping all documents as is
  local.stopObserver();
}, 1000);

在这里， Data.find()发布的内容将被缓存到脱机的地面集合中。

密钥库缓存

对于内存密钥库缓存，您可以使用memcache 包或redis包来访问服务器上的数据缓存。

该程序包假定内存缓存或Redis服务器已在运行，然后可以将密钥存储在内存缓存中。

var memcached = new Memcached( [ 'localhost:11211', 'localhost:11212'] );

  memcached.set( "key", "value", 2, function (err, res) {
    console.log("memcached set action response", err, res);
  });

或在Redis集合中：

var redisCollection = new Meteor.RedisCollection("redis");

Meteor.publish("movies", function () {
  return redisCollection.matching("movies-*");
});

redis实现非常好，因为它可以通过Meteor的发布/订阅体系结构进行广播。

开发工具

除了已经提到的工具外，Chrome for Meteor中提供的类似Firebug的浏览器扩展程序使调试变得更加容易。您可以在DDP选项卡中轻松监视从服务器传递到客户端的数据，并通过Blaze检查器查看您的Blaze模板。

IDE工具

为了在Sublime文本编辑器中进行开发，Tern.js软件包的自定义版本为Meteor提供了自动补全功能。在GitHub上下载。

JetBrains通过语法高亮和调试功能自动集成Meteor项目。 Atom还提供了一些语法，代码段和自动完成功能的软件包。

锅炉板

如果您只是想快速使用已设置的应用程序，则可以看看yogiben的入门程序。流星厨师也有出色的基础开胃菜。如果要使用React，可以从这个Yeoman生成器作为起点。

为了进一步启动您的应用程序， Meteor Kitchen将提供用于路由和配置的GUI。

管理面板

如果您使用的是Yogiben的Meteor Starter ，则还可以确保他创建的管理面板可以正常工作。尽管React Router应用可能与Iron Router发生冲突，但几乎所有其他使用mongo and blaze的项目都应适用于此。

管理面板的主题可以进行广泛修改，您可以阅读文档。

流星陨石

在我们总结之前，让我为您介绍Meteor项目的背景知识。 Meteor于2012年1月公开发布，这是Y Combinator孵化器项目的结果，该项目获得了风险投资公司Andreessen Horowitz的1,120万美元资金。

它最初是由一个名为Meteorite的软件包管理器启动的（cli上为mrt ），而可扩展性一直是Meteor的核心要素。随着Meteor 0.9的发布，随着Atmosphere软件包的问世，情况发生了根本改变。

将包添加到Meteor应用程序变得很简单，就像meteor add mrt:moment 。

随着该项目的发展势头不断，它赢得了公众的关注，并被新老开发商广泛采用。我认为，实现这一目标的核心驱动力之一是能够在JavaScript（客户端和服务器）中完全运行的灵活性。

最初，npm软件包不可用，直到Meteor发布1.3版，这标志着迄今为止开发周期中的一个重要里程碑。

完全使用JavaScript进行工作意味着Meteor能够通过集成npm与现有的JS和Node库的庞大库进行接口。这使Meteor成为了最前沿的框架。

npm ，它为我们在Web开发中取得的进展提供了前景，它可以想到Meteor， npm及其大气包所提供的强大功能。这与我们以前在大型jQuery开发人员，npm前，Flash的Bower时代，NotePad / Dreamweaver和PHP 3方面的工作方式发生了很大的变化。十个员工制作的作品，听起来并不荒谬，实际上可以在一两个星期内在Meteor中完成。

有了这些工具，您再没有比现在更好的时间成为一名具有技术头脑的网络企业家了。自己构建理想的应用程序肯定可以实现。

例如，今天早些时候，我将一个数据库支持的CMS与一个完整的用户系统和一个后台管理部门（使用Facebook和Google+ oAuth登录名）组合在一起。我将其部署到新服务器上以与他人共享以进行调试，并且我可以看到数据正在实时更改。

流星真的可以这么快地工作。在短短八个小时的开发时间之后，表格验证已完成，明天可以开始适当的数据输入工作。