写点什么

MERN 堆栈

用户头像
DisonTangor
关注
发布于: 2 小时前

【转自 GeeksforGeeks 的 @Jasraj《MERN Stack》翻译】


MERN 堆栈: MERN 堆栈 是一个 Javascript 堆栈,用于更轻松、更快速地部署全栈 Web 应用程序。MERN 堆栈包含 4 项技术,即:MongoDBExpressReactNode.js。它旨在使开发过程更加顺畅和轻松。


这 4 种强大的技术中的每一种都为开发人员提供了一个端到端的框架,并且这些技术中的每一种都在 Web 应用程序的开发中发挥着重要作用。


入门:首先,创建一个新的项目文件夹。然后转到命令提示符/终端中的项目文件夹并键入以下命令以初始化 package.json 文件。(确保安装了 npm)


npm init
复制代码



一个普通的 package.json 文件如下所示:



注意: 根据您的要求,您可以安装将显示在 package.json 文件中的模块(通过键入 npm install module_name –save)。

了解 MERN Stack 组件:

1. MongoDB:跨平台的面向文档的数据库

MongoDB 是一个 NoSQL 数据库,其中每条记录都是一个由类似于 JSON(JavaScript Object Notation)对象的键值对组成的文档。MongoDB 非常灵活,允许其用户创建模式、数据库、表等。可通过主键识别的文档构成了 MongoDB 的基本单元。一旦安装了 MongoDB,用户也可以使用 Mongo shell。Mongo shell 提供了一个 JavaScript 接口,用户可以通过它进行交互和操作(例如:查询、更新记录、删除记录)。

为什么要使用 MongoDB?

  • 快速——作为面向文档的数据库,易于索引文档。因此反应更快。

  • 可扩展性——大数据可以通过将其分成几台机器来处理。

  • 使用 JavaScript—— MongoDB 使用 JavaScript,这是最大的优势。

  • Schema Less——单独文档中的任何类型的数据。

  • 以 JSON 形式存储的数据——

  • 对象、对象成员、数组、值和字符串

  • JSON 语法非常易于使用。

  • JSON 具有广泛的浏览器兼容性。

  • 共享数据:可以轻松共享任何大小和类型(视频、音频)的数据。

  • 简单的环境设置——设置 MongoDB 真的很简单。

  • 灵活的文档模型——MongoDB 支持文档模型(表、模式、列和 SQL),它更快更容易。

  • 创建数据库:只需使用“use”命令即可完成:

  • 创建表:如果集合/表不存在,则将创建一个新的集合/表:

  • 将记录插入到集合中:

  • **查询文档: **


2. Express:后端框架:

Express 是一个 Node.js 框架。Express 不是使用 Node.js 编写代码并创建大量 Node 模块,而是让编写后端代码更简单、更容易。Express 有助于设计出色的 Web 应用程序和 API。Express 支持许多中间件,这使得代码更短且更易于编写。

为什么要使用 Express?

  • 异步和单线程。

  • 高效、快速且可扩展

  • 拥有最大的 Node.js 社区

  • Express 通过其内置路由器提高了代码的可重用性。

  • 强大的 API

  • 创建一个新文件夹以启动您的 express 项目,并在命令提示符下键入以下命令以初始化 package.json 文件。接受默认设置并继续。

  • 然后通过键入以下命令并按 Enter 来安装 express。现在最后在名为 index.js 的目录中创建一个文件。



  • 现在在 index.js 中输入以下内容以创建示例服务器。

  • 更新 package.json 文件中的“脚本”部分


  • 然后通过运行以下命令来启动服务器



  • 现在您可以打开浏览器并获取正在运行的服务器的输出。


3.React:前端库

React 是一个用于构建用户界面的 JavaScript 库。React 用于开发单页应用程序和移动应用程序,因为它能够处理快速变化的数据。React 允许用户使用 JavaScript 编写代码并创建 UI 组件。

为什么要使用 React?

  • 虚拟 DOM ——虚拟 DOM 对象是 DOM 对象的表示。虚拟 DOM 实际上是原始 DOM 的副本。Web 应用程序中的任何修改都会导致整个 UI 重新渲染虚拟 DOM。然后比较原始 DOM 和这个虚拟 DOM 之间的差异,并根据原始 DOM 进行相应的更改。

  • JSX –— 代表 JavaScript XML。它是一个在 React 中使用的 HTML/XML JavaScript 扩展。使编写 React 组件变得更加容易和简单。

  • 组件 ——ReactJS 支持组件。组件是 UI 的构建块,其中每个组件都有一个逻辑并有助于整个 UI。这些组件还提高了代码的可重用性并使整个 Web 应用程序更易于理解。

  • 高性能 —— 虚拟 DOM、JSX 和组件等功能使其比其他框架快得多。

  • 开发 Android/Ios 应用程序 –— 使用 React Native,您只需具备 JavaScript 和 ReactJS 的知识,即可轻松编写基于 Android 或 IOS 的应用程序。

  • 您可以通过首先使用 npm 或 yarn 安装“create-react-app”来启动您的 React 应用程序。

  • 或者

  • 此后,您可以用此方式创建一个新的 React 应用。

  • 然后导航到“app_name”文件夹并键入yarn startnpm start以启动您的应用程序。


  • 一个典型的 React 应用程序如下所示:


  • 更新 index.js 文件



  • 使用以下命令运行您的应用程序。

  • 或者


4.Node.js:JS 运行时环境

Node.js 提供了一个 JavaScript 环境,允许用户在服务器上(在浏览器之外)运行他们的代码。节点包管理器即 npm 允许用户从数千个免费包(节点模块)中进行选择下载。

为什么要使用 Node.JS?

  • 开源 JavaScript 运行时环境

  • 单线程——遵循单线程模型。

  • 数据流

  • 快速 —— Node.js 基于 Google Chrome 的 JavaScript 引擎构建,代码执行速度快。

  • 高度可扩展

  • 通过在命令窗口中键入运行以下命令来初始化 Node.js 应用程序。接受标准设置。

  • 创建一个名为 index.js 的文件。

  • 示例

  • 计算矩形周长和面积的基本 Node.js 示例。

  • 通过在命令窗口中运行以下命令来运行节点应用程序。



发布于: 2 小时前阅读数: 4
用户头像

DisonTangor

关注

怀揣一个武侠梦的男孩 2020.07.29 加入

还未添加个人简介

评论

发布
暂无评论
MERN堆栈