如何使用Meteor创建应用程序

它是一个用于开发Web和移动应用程序的全栈JavaScript平台。Meteor使用一组技术与Node.js和JavaScript一起实现我们的目标。它期望最少的开发工作并提供最佳性能。在本文中，我们将看到如何在Meteor上启动一个项目。

以下是逐步实施的步骤。

步骤1：安装

Linux和OS： 使用cURL命令与服务器进行交互，指定其位置。这里我们从Meteor提供的资源中接收到安装Meteor的代码，并使用sh命令进行安装。

curl https://install.meteor.com/ | sh

Windows: 在Windows系统中，我们需要使用Node Package Manager来安装Meteor。

npm install -g meteor

如何使用Meteor创建应用程序

步骤2： 使用Meteor创建项目非常简单，只需在终端中输入以下命令以及一些配置：

meteor create app-name --option

配置：
app-name – 这将是我们的应用程序名称。

option – JavaScript库/框架的名称，meteor支持的有Vue、Svelte、React、Blaze和Angular。此外，meteor还提供了其他一些选项。

例如，我们通过以下命令创建一个基于React的应用程序： meteor create hello-world –react

如何使用Meteor创建应用程序

项目结构： 成功初始化后，这将是我们的文件夹结构。

如何使用Meteor创建应用程序

步骤3： 运行应用程序。在运行meteor应用程序后，输入下面的命令，meteor将始终保持文件的同步更新。

meteor run

这将显示在您的终端上的东西。

如何使用Meteor创建应用程序

输出： 当我们在浏览器中打开 http://localhost:3000 来查看我们的应用程序时，会出现类似下面给出的截图。这是Meteor应用程序的默认前端视图。

如何使用Meteor创建应用程序

这样我们的流星项目就准备好了，我们可以开始在其中编写数据库模型、服务器逻辑和前端设计。

示例1： 在这个示例中，我们将替换流星的默认前端内容。在 imports/ui 目录中有一个 App.jsx 文件，我们可以在其中编写我们的React代码。

文件名：App.jsx

Javascript

import React from 'react'; 
  
export const App = () => ( 
  <div> 
    <h1>Hello, GFG Learner!</h1> 
   </div> 
);

输出结果：

如何使用Meteor创建应用程序

示例2： 这是从数据库中获取数据并使用Meteor将其渲染到前端的示例。首先，我们需要创建mongo集合，这里我们创建了一个名为gfglinks的集合，并导出它以便在其他文件中使用。

文件名：links.js

JavaScript

import { Mongo } from 'meteor/mongo'; 
  
export const LinksCollection = new Mongo.Collection('gfglinks');

说明： 集合创建后，我们可以向其中插入数据。在后台，我们正在向集合中插入一些数据。Meteor.startup在服务器启动时执行给定的功能。 **** 注意我们正在导入LinksCollection，这是从links.js文件中导出的。insert方法将给定的数据插入到数据库中。

文件名：main.js

JavaScript

import { Meteor } from 'meteor/meteor'; 
import { LinksCollection } from '/imports/api/links'; 
  
function insertLink({ title, url }) { 
  LinksCollection.insert({title, url}); 
} 
  
Meteor.startup(() => { 
    insertLink({ 
      title: 'Competitive Programming Guide', 
      url:  
'https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=shm'
    }); 
  
    insertLink({ 
      title: 'Data Structures Tutorial', 
      url:  
'https://www.geeksforgeeks.org/data-structures/?ref=shm'
    }); 
  
    insertLink({ 
      title: 'Algorithmic Tutorial', 
      url:  
'https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm'
    }); 
});

解释： 当数据在我们的数据库中时，我们可以将其获取到前端。在这里，我们正在渲染在最后一步中插入到数据库中的所有数据。useTracker是meteor中的一个钩子，它负责组件的所有反应性。LinkCollection是我们从link.js文件中导出的那个，find方法找到其中的所有数据。

然后，我们只是使用map函数简单地渲染一些li标签。

文件名：App.jsx

Javascript

import React from 'react'; 
import { useTracker } from 'meteor/react-meteor-data'; 
import { LinksCollection } from '../api/links'; 
  
const App = () => { 
  const links = useTracker(() => { 
    return LinksCollection.find().fetch(); 
  }); 
  
  return ( 
    <div> 
      <h1>Hello, GeeksforGeeks Learner</h1>H 
      <h2>Explore the Articles provided by GFG</h2> 
      <ul>{links.map( 
        link => <li key={link._id}> 
          {link.title} <a href={link.url}  
            target="_blank"> Click Here! 
           </a> 
        </li> 
      )}</ul> 
    </div> 
  ); 
}; 
export default App;

输出： 经过所有这个过程，我们的应用程序已经准备好运行了，使用 meteor run 类似下面给出的GIF将会显示出来。

如何使用Meteor创建应用程序