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');
});
};
}
]);
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上获得 。