stack_MEAN Stack简介

最新推荐文章于 2024-07-20 20:04:43 发布

dingshi7798

最新推荐文章于 2024-07-20 20:04:43 发布

阅读量179

点赞数

文章标签：数据库 java python mysql javascript ViewUI

原文链接：https://www.sitepoint.com/introduction-to-mean-stack/

版权

stack

自从缩写LAMP（Linux Apache MySql PHP）创建以来，已经很久了。今天，另一个非常常见的堆栈是MEAN堆栈。也许并非所有人都知道缩写词“ MEAN”代表什么，所以让我们从基础开始。 MEAN代表MongoDB ， Express ， AngularJS和Node.js。它处理用于构建网站和Web应用程序的全栈JavaScript解决方案。从数据库到后端代码和前端代码，所有内容都使用JavaScript编写。如果您不熟悉MEAN堆栈使用的技术，则可以在下一节中找到有关这些技术的简短介绍。

您可以在GitHub上找到本文的全部源代码。随意分叉并玩转它。

意思

M代表世界领先的NoSQL数据库MongoDB 。这是一种文档类型数据库，将其数据存储到类似JSON的格式二进制文件BSON（二进制JSON）中。它易于使用，对于JavaScript开发人员来说，它应该与使用JSON一样简单。

E代表Express ，它是为Node.js构建的轻量级极简框架。它是为Web应用程序和API创建的，并为开发人员提供了无数HTTP功能。

A代表AngularJS ，它是Google构建的Model-View-Whatever JS框架。 AngularJS使API的使用变得尽可能简单，因此将其用作MEAN的客户端对每个开发人员都非常有帮助。此外，AngularJS针对移动开发进行了优化，因此通过在浏览器上使用相同的代码库，您已经为正在开发的Web应用程序构建了移动应用程序。

N代表Express的基础Node.js。 它运行在Chrome的V8引擎上，并且能够进行非阻塞的，事件驱动的I / O。 Node.js应用程序将在单个服务上处理多个请求，而不会彼此阻塞（因此不阻塞）。

先决条件

在开始之前，请确保已安装MongoDB和Node.js。 Node.js带有一个名为npm的软件包管理器，我们将使用它来进行软件包（依赖项）管理。如果您有PHP经验，则npm相当于Composer ，而Packagist的等效物是npmjs.org 。在这里，您会发现几乎每个使用PHP包都具有同等的包，这使向Node.js Web应用程序的过渡更加简单。

第一台Express服务器

首先，在终端上运行以下命令：

npm init

回答问题后，它将创建一个包含必要信息的package.json文件。这是我的：

{
  "name": "sp-mean",
  "version": "0.1.0",
  "description": "An introduction to MEANstack for SitePoint",
  "main": "server.js",
  "scripts": {
    "start": "node ./server"
  },
  "author": "Aldo Ziflaj",
  "license": "None"
}

"main": "server.js"表示将在服务器上执行的主文件是server.js 。

第二步，通过执行以下命令将express添加为依赖项：

npm install express --save

这将添加一个存储依赖项的node_modules目录。请记住，您应该从版本控制中忽略此文件夹。

此时，下一步是编写将充当服务器的Express应用程序：

var express = require('express'),
    app = express();

app.get('/', function(req, res) {
    res.send("Hello from Express");
});

app.listen(3000, function() {
    console.log("Server ready. Listening on port 3000");
});

通过执行npm start它将在http：// localhost：3000上npm start服务器，并在您浏览到索引时Hello from Express发送Hello from Express 。

使用MongoDB

为了从Express应用程序使用MongoDB，我们将使用npmjs.com的软件包。您可以使用很多软件包，包括mongodb ， monk或mongoose 。在此示例中，我将使用和尚。要开始安装，请运行以下命令：

npm install monk --save

然后，通过执行以下命令启动Mongo控制台

mongo

现在，通过执行以下命令将一些数据插入Mongo：

use starwars;

db.character.insert({
    name: "Luke", 
    surname: "Skywalker", 
    side: "Light", 
    weapon: "Lightsaber"
});

db.character.insert({
    name: "Yoda",
    side: "Light",
    weapon: "Lightsaber"
});

db.character.insert({
    sith_name: "Vader",
    side: "Dark",
    weapon: "Lightsaber"
});

db.character.insert({
    sith_name: "Sidious",
    side: "Dark",
    weapon: "Force lightning"
});

这对于我们的收藏应该足够了。如您所见，我们不必为所有记录设置相同的键：Luke和Master Yoda没有sith_name 。由于它没有架构，因此在MongoDB中是合法的。只要插入合法JavaScript对象，您就可以使用。

现在我们可以使用monk从数据库中获取数据并将其显示给用户。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

首先，在server.js的顶部要求依赖项：

var monk = require('monk');

现在获得对我们之前创建的集合的引用：

var swChars = monk('localhost:27017/starwars').get('character');

最好这样写：

var db = monk('localhost:27017/starwars');
var swChars = db.get('character');

如果需要使用多个集合，第一行代码为您提供了对数据库（ starwars ）的引用。接下来，我们get()对所使用的character集的引用。

现在，让我们为用户提供浏览到/character时存储的完整字符列表：

app.get('/character', function (req, res) {
  swChars.find({}, function (err, docs) {
    if (err == null) {
      res.json(docs);
    } else {
      console.log(err);
    }
  });
});

通过使用find()函数，我们查询swChars引用的swChars 。第一个参数是查询规则，但是由于我们显示了所有字符，因此我在其中放置了一个空JavaScript对象。第二个参数是在从数据库集合中获取记录之后执行的回调函数。

我们可以通过side查询来显示一些记录，比如只说绝地武士：

app.get('/jedi', function (req, res) {
  swChars.find({side: "Light"}, function (err, docs) {
    if (err == null) {
      res.json(docs);
    } else {
      console.log(err);
    }
  });
});

Monk涵盖了许多功能，可帮助您使用Mongo数据库。检查其GitHub存储库以获取有关如何使用monk的更多信息。

前端的AngularJS

构建后端非常简单。没有太多样板代码，简单的API路由和真正简单的数据持久化。现在，为了向用户显示该信息，我们将使用AngularJS。

使用Bower获取AngularJS：

# create a bower.json file to store dependencies
bower init
bower install angular#1.4.3 --save

对于客户端，创建以下文件/文件夹：

assets/js/ngapp.js
assets/js/controllers
assets/js/services

第一个是我们正在构建的基础AngularJS应用程序。第二个是控制器将保留的目录，第三个是服务（例如工厂）将保留的目录。要创建基本的Angular应用程序，请将其放在ngapp.js ：

var app = angular.module('starwars', []);

不要忘记在index.html文件中包括它。

现在，要从后端API获取数据，我们将创建一个工厂。在services文件夹中创建一个名为StarWarsFactory.js的文件：

app.factory('StarWarsFactory', function ($http) {
  return {
    characters: function () {
      return $http.get('/character');
    },

    jedi: function () {
      return $http.get('/jedi');
    }
  }
});

现在使用它，添加一个简单的控制器，称为MainCtrl.js ：

app.controller('MainCtrl',function(StarWarsFactory) {
  var self = this;
  StarWarsFactory.characters().success(function(data) {
    self.charList = data;
  });
});

将所有这些JS文件包括在index.html文件中，并将此div放入其中以显示从服务器获取的数据：

<div ng-controller="MainCtrl as m">
  <ul>
    <li ng-repeat="item in m.charList">
      <span ng-if="item.side === 'Light'">
        {{item.name}} {{item.surname}} uses {{item.weapon}}
      </span>

      <span ng-if="item.side === 'Dark'">
        Darth {{item.sith_name}} uses {{item.weapon}}
      </span>
      </li>
  </ul>
</div>

最后，要从Express应用程序提供此服务，您必须删除仅显示“ Hello from Express”的/路由，并放置以下代码，而不是：

app.use('/', express.static(__dirname + '/'));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + "/index.html"));
});

当您浏览到localhost:3000 ，您将看到角色列表及其选择的武器。

结论

在本文中，我们学习了如何使用称为MEAN的堆栈构建简单的应用程序。我们使用Mongo将数据存储为JavaScript对象，使用Express在后端构建API，并在AngularJS作为API的客户端。

您可以在GitHub上找到本文的全部源代码。随意分叉并玩转它。

最后，您应该知道MEAN有很多生成器。在本文中，我考虑过不要使用生成器来简化完整的初学者进入MEAN的过程。如果您对MEAN更有经验，请签出任何生成器，例如mean.io ， Yeoman生成器甚至Express生成器，然后在您的项目中使用它们。

翻译自: https://www.sitepoint.com/introduction-to-mean-stack/

stack

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
stack_MEAN Stack简介

stack 自从缩写LAMP（Linux Apache MySql PHP）创建以来，已经很久了。今天，另一个非常常见的堆栈是MEAN堆栈。也许并非所有人都知道缩写词“ MEAN”代表什么，所以让我们从基础开始。 MEAN代表MongoDB ， Express ， AngularJS和Node.js。它处理用于构建网站和Web应用程序的全栈JavaScript解决方案。从数据库到后端代码和...
复制链接

扫一扫