Mongo, Express, Angular, Node-- MEAN Stack搭建
前言
作为一个从后端转全栈的码农,我一直使用express,jade & bootstrap, jquery的组合。重复了几次相同的工作后,看到网上开始流行MEAN Stack,于是也对其研究了一番。
MEAN Stack在我看来最大的意义是可以节省很多繁琐重复的数据操作代码,按照正常方式,页面上需要数据时,前端需要写ajax调用代码取数据,后端需要写接口接受数据请求,然后向Mongo发送请求取数据,最后返回到前端。而在MEAN Stack的体系里,这只需要在前端通过类似ORM的方式就可以直接存取数据了,可以节省大量的精力。
我花了一些时间研究了下MEAN.io和MEAN.js,但是都觉得他们做的太繁琐了,没办法,只能自己另起炉灶搭一个MEAN Stack了,又Google了下,发现不少介绍MEAN Stack搭建的文章教的都是自己在Express中写restful接口然后操作数据,如果这些都需要自己写代码,我用MEAN Stack的意义何在?本着偷懒到底的精神,我找到了express-restify-mongoose。恩,这下手头材料齐全了,我们就来搭一个MEAN Stack。
环境准备:Mongo, Angular, Express
这个我就不教大家了,请大家自己搭建。注意就是我们需要angular-resource.min.js,这是angular处理Restful绑定的功能。
Mongo, Express Restful接口搭建
首先安装express-restify-mongoose
npm install express-restify-mongoose --save
然后新建一个router做Restful Service,假设我们的数据类是Customer,需要一个name字段和一个可选的comment字段.
/* models.js */ var express = require('express'); var router = express.Router(); var mongoose = require("mongoose"); var resify = require("express-restify-mongoose") mongoose.connect("mongodb://localhost/test"); resify.serve(router, mongoose.model('Customer', new mongoose.Schema( { name : {type : String, required : true}, comment : {type : String} } ))) module.exports = router;
然后把这个router注册到express里
/* in app.js */ var models = require("[models.js位置]"); ... app.use(models)
OK,现在运行server测试下: http://localhost:3000/api/v1/Customers,Restful接口已经有了~
Angular Restful接口绑定
我在layout.jade里加入了对angular库文件的引用
/* in layout.jade */ script(src="/javascripts/lib/angular.min.js") script(src="/javascripts/lib/angular-route.min.js") script(src="/javascripts/lib/angular-resource.min.js")
然后在app.js(这是加载在前端的angular用的app.js,不要跟后端express的app.js混淆了)里绑定restful接口
//注意在app的依赖里加上ngResource var app = angular.module('**', ['ngResource']); ... app.factory("Customer", function($resource){ return $resource("/api/v1/Customers/:id"); });
搞定,这样我们就可以在Controller中简单的存取数据了!
app.controller("CustomerListCtrl", function($scope, Customer){ var customer = { name : "jerry", comment : "handsome" }; Customer.save(customer); //存数据 Customer.query(function(customers){ $scope.customers = customers; }); //取数据 });
怎么样,是不是很方便,以后只需要在后端添加新的数据定义和在前端绑定新的数据接口就可以啦。
- python和nodejs的aes128加密对比
- hadoop namenode无法启动,提示 java.net.unknownhostexception 的解决方法
- node干货
- node express 学习1
- Node.js小示例
- Delete Node in a Linked List
- node.js was not found in the default path
- <LeetCode><Easy>237Delete Node in a Linked List ****
- ClippingNode 新手引导 高亮选择提示
- leetcode Swap Nodes in Pairs
- nodejs读写json文件
- Ubuntu 下安装NodeJs
- NodeJS和SpringBoot的SSL配置
- nodejs express框架解决跨越问题
- Node.js与Sails ~项目结构与Mvc实现及日志机制
- Node.js与Sails~日志机制log
- nodejs API 之典型概念
- 用node-webkit把web应用打包成桌面应用
- Node.js与Sails~自定义响应体responses
- nodejs 遍历文件夹,文件