MEAN开发指南

· 1 年前

MEAN栈包含数个用于开发Web应用的JavaScript技术。MEAN是MongoDBExpressAngularJSNode.js的首字母缩写词。从浏览器端到数据库,MEAN全都是JavaScript。我们接下来对MEAN一探究竟,并使用它来创建一个心愿清单程序。

Node.js是一种JavaScript在服务端的运行环境。它基于Google Chrome的V8(一种JavaScript运行时)。非常适合用来构建灵活的、高并发的应用。

Express,一种轻巧的框架,使用Node创建Web应用。它提供了很多健壮的特性用于构建单页或者多页的Web应用。Express受到了Sinatra的影响,后者是一种流行的Ruby框架。

MongoDB是一种无范式的NoSQL数据库。MongoDB使用二进制的JSON格式来存储数据,方便客户端和服务端之间的数据传递。

AngularJS是Google开发的一个JavaScript框架。它提供了一些非常赞的特性,比如数据的双向绑定。它是完整的快省的前端开发解决方案。

在本文中,我们将使用MEAN创建一个CRUD的应用。继续深入。

在开始之前,你需要安装几个MEAN用到的包。从安装Node.js开始,到下载页去下载。接下来,下载并安装MongoDB。在MongoDB的安装教程中包含了在各种系统中搭起Mongo的方法。为了简化过程,我们从一个MEAN的模板项目开始。直接将这个模板项目clone下来,使用npm安装依赖即可。命令如下:

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

安装好了必要的包,接下来,按照模板中README中说的,设置默认端口27017,MongoDB泡在这个端口上。打开文件/etc/mongodb.conf,取消掉 port = 27017这行的注释。好了,使用下面的命令重启mongod服务器。

mongod --config /etc/mongodb.conf

接下来,在项目的根目录下运行grunt,没什么问题的话,你将会看到这条消息:

Express app started on port 3000 

服务器已经起来了,在浏览器中访问http://localhost:3000/,查看运行中模板项目。

项目模板概览

现在我们已经有了一个功能完整的模板项目了。包括用户认证功能,可以使用社交账号登录。我们不会往这个方向深入下去,就开始写我们自己的小应用了。如果你一定要知道的话,那就是AngularJS之类的前端代码放在public文件夹中,而NodeJS后端代码则放在server这个文件夹中。

创建一个列表视图

我们从使用AngularJS来构建我们的前端开始。进入public文件夹,新建名为bucketList的文件夹,我们把前端文件放到这里。在bucketList中,创建子文件夹controllers、routes、services和views。同时创建一个名为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>
  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启动应用。要确定MonoDB已经跑起来了。访问http://localhost:3000/#!/bucketList, 应该可以看到我们创建的列表视图。URL中的#!是为了把AngularJS和NodeJS各自的路由隔开。

向列表中添加内容

创建一个新视图,用来向列表里添加内容。在public/bucketList/views添加新文件create.html,添加代码如下:

<section>
  <form class="form-horizontal col-md-6" role="form">
    <div class="form-group">
      <label for="title" class="col-md-2 control-label">Title</label>
      <div class="col-md-10">

      </div>
    </div>
    <div class="form-group">
      <label for="description" class="col-md-2 control-label">Description</label>
      <div class="col-md-10">
        <textarea id="description" cols="30" rows="10" class="form-control"></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()方法。接下来,我们在这个控制器中创建一个名为create()方法。向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,你应该会看到创建条目的表单,不过它还不能工作,我们还需要提供后端服务。

提供后端服务

列表条目包含title、description和status字段。所有创建server/models/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.create()处理发送到/bucketList的POST请求。这个方法由服务器端的控制器提供——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>
  <ul class="bucketList unstyled">
    <li>
      <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,愿望清单应该显示出来的吧。你可以点击列表下的”Create”来创建新的条目。

本文中,我们把注意力放在使用MEAN技术栈创建一个简单的应用上。我们实现了向MongoDB中添加数据,并从中读取显示出来。如果你有兴趣继续扩展这个例子,你可以尝试提供更新和删除操作。文本涉及到的代码可以在Github上找到。

原文:An Introduction to the MEAN Stack