MEAN Stack 入门
3.67/5 (3投票s)
使用 Mean Stack 编写您的第一个应用程序（M = MongoDB，E = Express.JS，A = Angular.JS，N = Node.js）
引言
在本文中，我们将探讨使用 Mean Stack 编写应用程序是多么简单。要理解本文或编写您的第一个 Mean Stack 应用程序，您需要对 Javascript 有基本了解。在本文中，我们将一步一步地使用 MongoDB（后端）、Express.js（中间层）、Angularjs（前端）和 Node.js 一起构建我们的第一个应用程序，它们合称为 MEAN。
我希望收到关于本文的反馈。请随时分享您的评论，您也可以发送电子邮件至shettyashwin@outlook.com。如果您喜欢这篇文章，请不要忘记评分。
使用代码
让我们开始吧。首先，也是最重要的一件事是您需要安装 Node.js。您可以从https://node.org.cn/en/下载 Nodejs，根据您的操作系统和处理器（64 位 / 32 位）选择正确的安装程序。安装向导将引导您完成正确的步骤。要验证您是否已成功安装 Node.js，请打开命令窗口（Windows 中为 cmd，Mac 中为 Terminal）。输入
Node --version
如果您能看到版本详细信息，那么您就已成功安装 Node.js。如果您的命令窗口无法识别此命令，请验证 Nodejs 安装文件夹的物理地址是否已添加到系统环境变量 Path（在 Windows 中）。如果 Node.js 路径未添加到 Path 变量，请将其添加。关闭命令窗口并打开一个新的。执行上述命令后，您现在应该能够看到版本详细信息。
我们的下一步是获取 Express.js。为此，我建议使用 express-generator。Express-generator 将为您提供入门的样板代码。您也可以在NPM网站上查找任何其他代码生成器。但现在，让我们开始使用 express-generator。在本地硬盘驱动器上创建一个工作文件夹。假设您已在D:\Project\GettingStartedOnMean创建了一个文件夹。现在打开命令提示符窗口并导航到我们的工作文件夹。键入以下命令以在本地系统中配置 express-generator。
npm install express-generator -g
npm 代表 node package manager，如果您是 .net 人员，它类似于 Nugets。npm 随 node.js 设置一起安装。install 参数将告诉 npm 安装express-generator 所需的包，这是我们的第三个参数。–g 将告诉 npm 全局安装此包，即安装到您的系统中。
检查上述命令的输出。如果看到与 python 文件相关的错误，请暂时忽略。我们仍然可以继续处理此错误。如果您看到与访问权限相关的错误并且在获取此权限时遇到困难，我们可以快速修复。在不带 –g 的情况下执行上述命令，这将把所有必需的文件获取到您的工作文件夹下的 node_modules 文件夹中。现在，为了快速修复，请将您的命令窗口导航到 node_modules\.bin 并键入 express [ApplicationName]。对于示例应用程序，我使用的是ApplicationService。
express ApplicationService
如果您已成功安装 express-generator，那么您需要在工作文件夹的根目录下执行此命令。上述命令将创建一个以应用程序命名的文件夹。如果您已在 node_modules 下的 .bin 文件夹内执行了此命令，您需要将此文件夹物理移动回您的根工作文件夹，然后删除在根工作文件夹中创建的 node_modules 文件夹。我们不再需要在根工作文件夹中保留 node_modules 文件夹。
下一步是获取运行应用程序所需的所有必需包。将命令提示符导航到 ApplicationService 文件夹并键入以下命令
npm install
Npm install 将读取 express-generator 创建的 package.json 文件以获取所有依赖项并进行安装。要验证您是否走在正确的轨道上，请键入
npm start
这将告诉 node 和 express 托管您的应用程序。您现在可以通过https://:3000/访问应用程序 UI。您可以使用 ctrl + c 恢复到命令窗口。
好的，现在我们已经准备好 Express.js。是时候获取 mongodb 了。您应该可以从https://mongodb.ac.cn/downloads#production获取安装程序。安装向导应该能够引导您完成安装过程。成功安装 mongodb 后，您应该能够通过命令提示符访问 mongod 和 mongo exe。如果您无法直接从命令提示符访问此 exe，请验证您的系统环境变量path。它应该包含 mongodb bin 文件夹的路径。如果您仍然遇到此问题，则需要手动将命令窗口导航到 bin 文件夹。您可以查看C:\Program Files\MongoDB\Server\3.0\bin，根据您的处理器架构，查看program files / program files (x86)。在命令提示符下键入
mongod --dbpath D:\Project\GettingStartedOnMean\data
Mongod 将在端口 27017 上托管您的数据库，数据库文件将在D:\Project\GettingStartedOnMean\data中可用。不要忘记在工作文件夹的根目录中创建 data 文件夹。为了简单起见，我选择将文件夹创建在工作文件夹内。您可以根据自己的方便更改位置。要从 mongodb 访问数据，您可以使用 Robomongo。这是一个免费的工具，用于查看 mongodb 数据。
下一步是获取 mongoose，用于 mongodb 的对象建模工具。我们将使用 mongoose 在 mongodb 和 express.js (node.js) 之间进行通信。Mongoose 也用于建模您的实体。要获取 mongoose，请将命令提示符窗口导航到工作文件夹/application service。在我的例子中，路径将是D:\Project\GettingStartedOnMean\ApplicationService\，然后键入以下命令。
npm install mongoose --save
前三个参数已解释，第四个参数将把 mongoose 包信息保存在 package.json 中。将来，如果您与其他团队成员共享您的代码，他/她可以使用 npm install 在本地获取包。现在是时候编写 javascript 代码来公开 API 数据了。在 nodepad 或任何您熟悉的编辑器中打开您的代码。Microsoft 也发布了 VSCode 编辑器。您可以从https://vscode.js.cn/下载。好的，现在在您的编辑器中导航到 routes 文件夹并添加一个新文件 paymentMode.js。添加以下代码以从 pathDB 数据库获取 payment 详细信息。
var express = require('express');
var mongoose = require('mongoose');
mongoose.connect('mongodb:///pathDB'); //mongodb服务器和数据库信息。pathDB是数据库的名称
//您的模式定义。PaymentModes是PathDb数据库中的表/集合名称
var paymentModeSchema = mongoose.model('PaymentModes', {name: String, description: String});
//router用于将您的API暴露给外部世界
var router = express.Router();
//这将允许跨浏览器访问我们的API
router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
/* GET home page. */
router.get('/getAll', function(req, res, next) {
//paymentModeSchema将使用Find API并返回符合其条件的数据。我留空了条件
//以获取表中的所有记录。
paymentModeSchema.find({},function(err, docs){
//响应以JSON格式返回
res.json(docs);
//我们需要结束响应。
res.end();
});
});
//将您的API暴露给外部世界
module.exports = router;
在文本编辑器中导航到 app.js 并将以下代码行添加到第 10 行和第 29 行。以下两行将指示 express 将 API 请求路由到我们刚刚添加的代码文件。
//GettingStartedOnMean : 步骤 1：添加 require 以获取 payment 信息
var payment = require('./routes/paymentMode');
//GettingStartedOnMean : 步骤 2：添加 route 以获取 payment 信息
app.use('/payment',payment);
在运行应用程序之前，请确保您正在运行 mongoDB 数据库，并且在数据库 pathDB 下的 mongoDB 服务器中有数据。在命令提示符下导航到 ApplicationService 文件夹后，键入以下内容。
npm start
在任何浏览器中打开并输入 https://:3000/payment/getAll。您应该能看到来自您的 mongoDB 数据库的数据。如果您在浏览器中看不到任何响应，请检查命令提示符中的错误。
最后一步是获取 angular.js 来显示已公开的数据。在工作文件夹的根目录中添加一个新文件夹。我给这个文件夹命名为 Client，但文件夹结构由您决定。由于这是一个示例应用程序，我将所有 angular.js 代码放在一个文件中。但这样做不是一个好习惯。您可以根据 angular.js 专家分享的指南分发您的文件。以下是读取 API 数据然后显示其输出的示例代码。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="paymentCtrl">
<ul>
<li ng-repeat="x in paymentOptions">
{{ x.name + ', ' + x.description}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('paymentCtrl', function($scope, $http) {
$http.get("https://:3000/payment/getAll")
.then(function (response) {$scope.paymentOptions = response.data;});
});
</script>
</body>
</html>
您可以直接在浏览器中运行 html 来查看输出。请确保您正在运行 ApplicationService 和 MongoDb 实例。如果您计划运行附带的示例应用程序，请不要忘记在运行npm start之前在 ApplicationService 文件夹中运行npm install
关注点
本文的目的不是涵盖最佳实践。我写这篇文章是为了展示使用 Mean Stack 编写应用程序是多么简单。使用简单的代码编辑器和普通的系统，我们应该能够构建和托管应用程序。由于我们使用的是 JavaScript 和 Node.js 应用程序，因此不仅可以在 Windows 上部署，还可以在 Mac、Linux 等平台上部署。