mean堆栈_MEAN堆栈简介

最新推荐文章于 2022-01-15 11:00:00 发布

dingshi7798

最新推荐文章于 2022-01-15 11:00:00 发布

阅读量171

点赞数

文章标签：数据库 java vue python nodejs ViewUI

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

版权

mean堆栈

MEAN堆栈一词是指用于开发Web应用程序的基于JavaScript的技术的集合。 MEAN是MongoDB ， ExpressJS ， AngularJS和Node.js的首字母缩写。从客户端到服务器再到数据库，MEAN是全栈JavaScript。本文探讨了MEAN堆栈的基础知识，并展示了如何创建简单的存储桶列表应用程序。

介绍

Node.js是服务器端JavaScript执行环境。它是基于Google Chrome V8 JavaScript运行时构建的平台。它有助于快速构建高度可扩展的并发应用程序。

Express是用于在Node中构建Web应用程序的轻量级框架。它为构建单页和多页Web应用程序提供了许多强大的功能。 Express受流行的Ruby框架Sinatra的启发。

MongoDB是无模式的NoSQL数据库系统。 MongoDB以二进制JSON格式保存数据，这使得在客户端和服务器之间传递数据更加容易。

AngularJS是Google开发JavaScript框架。它提供了一些很棒的功能，例如双向数据绑定。这是用于快速，出色的前端开发的完整解决方案。

在本文中，我们将使用MEAN堆栈创建一个简单的CRUD应用程序。所以，让我们深入。

先决条件

在开始之前，我们需要安装各种MEAN软件包。首先从下载页面安装Node.js。接下来，安装下载并安装MongoDB 。安装MongoDB页面包含用于在各种操作系统上设置Mongo的指南。为了使事情变得容易，我们将从MEAN样板项目开始。只需克隆样板存储库，并使用npm安装依赖项，如下面的清单所示。

git clone http://github.com/linnovate/mean.git
cd mean
npm install

这将安装所需的软件包。接下来，我们需要将样板的README文件中指定的默认端口（运行MongoDB的默认端口）设置为27017 。打开文件/etc/mongodb.conf ，取消注释port = 27017 。现在，如下所示重新启动mongod服务器。

mongod --config /etc/mongodb.conf

接下来，从项目目录中简单地输入grunt 。如果一切顺利，您将看到以下消息：

Express app started on port 3000

现在服务器已在运行，在浏览器中导航到http://localhost:3000/以查看样板应用程序正在运行。

样板概述

我们现在有一个功能齐全的样板应用程序。它已实现身份验证，包括使用社交媒体登录。我们不会做太多事情，但是会创建我们自己的小应用程序。如果你看一下在应用结构中， public文件夹包含我们的AngularJS前端和server文件夹包含我们的后台的NodeJS。

创建清单视图

首先，让我们开始使用AngularJS创建前端。导航到public文件夹。创建一个名为bucketList的新文件夹，在其中保留前端文件。在bucketList目录中，创建名为controllers ， routes ， services和views子目录。在bucketList文件夹内，还创建一个名为bucketList.js的文件， bucketList.js包含以下代码。

'use strict';

angular.module('mean.bucketList', []);

接下来，打开mean/public/init.js并添加模块mean.bucketList 。修改后的部分应如下所示：

angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.router', 'mean.system', 'mean.articles', 'mean.auth', 'mean.bucketList']);

现在，导航至public/bucketList/routes并添加bucketList.js路由文件以处理我们应用程序中的路由。下面显示了完成此操作的代码。

'use strict';

//Setting up route
angular.module('mean.bucketList').config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
    // states for my app
    $stateProvider
      .state('all bucket list', {
        url: '/bucketList',
        templateUrl: 'public/bucketList/views/list.html'
      });
  }
]);

在public/bucketList/views/创建一个名为list.html的文件。这是我们的视图，它将显示我们的存储桶列表。该文件的内容如下所示。

<section data-ng-controller="BucketListController">
  Welcome to the bucket list collection
</section>

另外，在public/bucketList/controllers内创建一个名为bucketList.js的文件，其中包含以下代码。

'use strict';

angular.module('mean.bucketList').controller('BucketListController', ['$scope', '$stateParams', '$location', 'Global',
  function($scope, $stateParams, $location, Global) {
    $scope.global = Global;
  }
]);

接下来，使用grunt启动应用程序。如果尚未运行，请确保MongoDB也正在运行。将浏览器导航到http://localhost:3000/#!/bucketList ，您应该看到我们创建的列表视图。如果您想知道#! 在url中，只是完成了AngularJS和NodeJS路由的分离。

添加到存储桶列表

让我们创建一个视图以将内容添加到存储桶列表中。在public/bucketList/views内部添加一个名为create.html的新HTML文件， create.html包含以下代码。

<section data-ng-controller="BucketListController">
  <form class="form-horizontal col-md-6" role="form" data-ng-submit="create()">
    <div class="form-group">
      <label for="title" class="col-md-2 control-label">Title</label>
      <div class="col-md-10">
        <input type="text" class="form-control" data-ng-model="title" id="title" placeholder="Title" required>
      </div>
    </div>
    <div class="form-group">
      <label for="description" class="col-md-2 control-label">Description</label>
      <div class="col-md-10">
        <textarea data-ng-model="description" id="description" cols="30" rows="10" placeholder="Description" class="form-control" required></textarea>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</section>

此代码附加BucketListController控制器。还要注意，在表单提交时，将调用一个名为create()的方法。接下来，让我们在BucketListController创建一个名为create()的BucketListController 。必须将以下代码添加到public/bucketList/controllers/bucketList.js ，如下所示。我们已将BucketList服务注入到控制器中，我们需要与后端进行交互。

'use strict';

angular.module('mean.bucketList').controller('BucketListController', ['$scope', '$stateParams', '$location', 'Global', 'BucketList',
  function ($scope, $stateParams, $location, Global, BucketList) {
    $scope.global = Global;

    $scope.create = function() {
      var bucketList = new BucketList({
        title: this.title,
        description: this.description
      });

      bucketList.$save(function(response) {
        $location.path('/bucketList');
      });
    };
  }
]);

免费学习PHP！

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

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

public/bucketList/services/bucketList.js的内容如下所示。

'use strict';

angular.module('mean.bucketList').factory('BucketList', ['$resource',
  function($resource) {
    return $resource('bucketList);
  }
]);

我们还需要添加一条路线，以将项目添加到存储桶列表中。修改public/bucketList/routes/bucketList.js ，再添加一个状态，如下所示。

'use strict';

//Setting up route
angular.module('mean.bucketList').config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
    // states for my app
    $stateProvider
      .state('all bucket list', {
        url: '/bucketList',
        templateUrl: 'public/bucketList/views/list.html'
      })
      .state('add bucket list', {
        url: '/addBucketList',
        templateUrl: 'public/bucketList/views/create.html'
      })
  }
]);

重新启动服务器并导航到http://localhost:3000/#!/addBucketList 。您应该看到存储区列表创建表单。不幸的是，它还没有运行。我们也需要创建后端。

创建后端

存储桶列表应具有标题，描述和状态。因此，在server/models/bucketlist.js创建一个名为bucketlist.js的新文件，并添加以下代码。

'use strict';

/**
 * Module dependencies.
 */
var mongoose = require('mongoose'),
  Schema = mongoose.Schema;

/**
 * Bucket List Schema
 */
var BucketListSchema = new Schema({
  created: {
    type: Date,
    default: Date.now
  },
  title: {
    type: String,
    default: '',
    trim: true
  },
  description: {
    type: String,
    default: '',
    trim: true
  },
  status: {
    type: Boolean,
    default: false
  }
});

mongoose.model('BucketList', BucketListSchema);

我们需要配置Express路由，以便正确处理来自AngularJS的服务调用。创建一个名为server/routes/bucketList.js的文件，其中包含以下代码。

'use strict';

var bucketList = require('../controllers/bucketList');

module.exports = function (app) {
  app.post('/bucketList', bucketList.create);
};

对/bucketList POST请求由bucketList.create()方法处理。此方法属于我们仍然需要创建的服务器控制器bucketList.js 。 server/controllers/bucketList.js的内容应如下所示：

'use strict';

/**
 * Module dependencies.
 */
var mongoose = require('mongoose'),
  BucketList = mongoose.model('BucketList');

/**
 * Create an Bucket List
 */
exports.create = function(req, res) {
  var bucketList = new BucketList(req.body);

  bucketList.save(function(err) {
    if (err) {
      console.log(err);
    } else {
      res.jsonp(bucketList);
    }
  });
};

还有很多需要清理的地方，但是我们可以检查它是否按预期工作。当用户提交AngularJS表单时，它将调用AngularJS服务，该服务将调用服务器端create()方法，该方法随后将数据插入MongoDB中。

提交表单后，我们可以检查数据是否正确插入到Mongo中。为了检查MongoDB中的数据，请打开另一个终端并发出以下命令。

mongo                   // Enter the MongoDB shell prompt
show dbs;               // Shows the existing Dbs
use mean-dev;           // Selects the Db mean-dev
show collections;       // Show the existing collections in mean-dev
db.bucketlists.find()   //Show the contents of bucketlists collection

创建存储桶列表视图

首先，在server/routes/bucketList.js添加新路由：

app.get('/bucketList', bucketList.all);

此新路由调用控制器的all()方法。将此方法添加到server/controllers/bucketList.js ，如下所示。此代码在bucketList集合中找到条目并返回它们。

exports.all = function(req, res) {
  BucketList.find().exec(function(err, bucketList) {
    if (err) {
      console.log(err);
    } else {
      res.jsonp(bucketList);
    }
  });
};

接下来，如下所示，在public/bucketList/controllers/bucketList.js添加一个新方法。

$scope.getAllBucketList = function() {
  BucketList.query(function(bucketList) {
    $scope.bucketList = bucketList;
  });
};

这段代码从Mongo获取数据，并将其保存在我们的$scope.bucketList变量中。现在，我们只需要将其绑定到我们HTML。这是在public/bucketList/views/list.html ：

<section data-ng-controller="BucketListController" data-ng-init="getAllBucketList()">
  <ul class="bucketList unstyled">
    <li data-ng-repeat="item in bucketList">
      <span>{{item.created | date:'medium'}}</span> /
      <span>{{item.title}}</span>

      <div>{{item.description}}</div>
    </li>
  </ul>
  <a href="/#!/addBucketList">Create One</a>
</section>

重新启动服务器并导航到http://localhost:3000/#!/bucketList 。这应该显示存储桶列表项。您也可以通过单击列表下方的“创建”链接来尝试添加新项目。

结论

在本文中，我们专注于使用MEAN堆栈创建一个简单的应用程序。我们实现了在MongoDB中添加条目并显示数据库中的条目。如果您有兴趣扩展此示例，则可以尝试添加更新和删除操作。这篇文章中的代码可以在GitHub上找到。

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

mean堆栈

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mean堆栈_MEAN堆栈简介

mean堆栈 MEAN堆栈一词是指用于开发Web应用程序的基于JavaScript的技术的集合。 MEAN是MongoDB ， ExpressJS ， AngularJS和Node.js的首字母缩写。从客户端到服务器再到数据库，MEAN是全栈JavaScript。本文探讨了MEAN堆栈的基础知识，并展示了如何创建简单的存储桶列表应用程序。介绍 Node.js是服务器端JavaScri...
复制链接

扫一扫