MEAN+Redis的第一个用户认证程序

作为学习，先写了一个MEAN体系+Redis的类似HelloWord的小程序。主要实现了redis保存session信息。

代码放入网盘备份

http://pan.baidu.com/s/1lgGEU

因为是初次接触，所以有很多奇奇怪怪的地方被卡住了，不过还好，都顺利解决了。

通过这次的编写，对MEAN体系有了初步的认识。

首先，先建立一个Express的基础项目结构，大概这个样子

红框部分就是涉及到代码。

作为前台框架，Angular的routes功能直接把页面的分割拿到了public的partials中，原来express框架默认的views反倒成了一个template的作用。

1.app.js

作为整个程序的入口app,js定义了一些必须要设定的环境变量，这个以前用php的zendframework时的index页面的功能也差不多。

主要要注意的就是其中的session存储介质选用了redis。特别要注意的是这里的

app.use(app.router);必须要在session存储介质定义的后面，否则session是无法正常运用的。
另外，这次用的express是3.X版本，写法上与4.X稍微有些区别。

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');
var RedisStore = require('connect-redis')(express.session);
var app = express();
app.use(express.cookieParser());
app.use(express.cookieSession({secret : 'keyboard cat'}));
app.use(express.session({
	  store: new RedisStore({
	    host: "10.0.192.27",
	    port: 6379,
	    db: 3
	  }),
	  secret: 'keyboard cat'
	}));

app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

然后是routes功能，现在是写在app.js中的，以后开发的话肯定要分出去的，专门用个js来放这个。

app.get('/', routes.index);
app.post('/login', routes.login);
app.get('/mainframe', routes.mainframe);

这里对应的应该就是后台啦，没什么好说的。

2,/routes/index.js

var user = require('../models/User.js').user;

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};
exports.login = function(req, res){
  var session = req.session;
  var reqBody = req.body;
  if (reqBody.loginId != 'admin' || reqBody.password != '12345') {
	  res.json({error:'mast be admin/12345 ! faild!'});
  } else {
	  user.loginId = reqBody.loginId;
	  user.password = reqBody.password;
	  session.user = user;
	  res.json(user);
  }
};
exports.mainframe = function(req, res){
	res.json(req.session.user);
};

定义了三个事件，与刚才app.js中定义的路径相对应。

根据post,get的方式，从request中取数据的方式也不同。不过这个以后应该可以封装吧

不管是前后台交互，还是session，db的交互，都是用的json，确实很方便，好读好写，使用方便。不过如果中型项目以上的开发的话，还是要严格控制使用，应该把所有的对象都定义成model，不然以后代码就没法看了。

3./views/index.jade

doctype html
html(lang='en', ng-app='phonecatApp')
	head
		meta(charset='utf-8')
		meta(name='viewport', content='width=device-width, initial-scale=1, user-scalable=no')
		title Login
		link(rel='stylesheet' href='/stylesheets/style.css')
		link(rel='stylesheet' href='/libs/bootstrap/css/bootstrap.min.css')
		script(src='/libs/angular-1.2.2/angular.min.js')
		script(src='/libs/angular-1.2.2/angular-resource.min.js')
		script(src='/libs/angular-1.2.2/angular-route.min.js')
		script(src='/javascripts/controllers.js')
		script(src='/javascripts/app.js')
		script(src='/javascripts/services.js')
		script(src='/libs/bootstrap/js/bootstrap.min.js')
		script(src='/libs/jquery.min.js')
	body
		div.container
			div(ng-view)
		

第一次用这种用缩进来控制作用范围的东东，其实蛮好接受的，因为代码看起来比普通的html要清晰多了。不过确实也有其局限性，表示层和数据层结合的比较紧密，程序员和网站美工不好分工。难道要设计好的页面拿过来重新翻译一遍？而且解析也是需要耗费资源的。不过还好，这次用的Angular.js直接把页面托管了，也无所谓了。

还有，这个Angular是google的咚咚，导致我无法从官网上去down，很麻烦。

4./public/javascript/app.js

var phonecatApp = angular.module('phonecatApp', 
		['ngRoute', 'loginCtroller', 'loginServices']);
 
phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/index', {
        templateUrl: '/partials/login.html',
        controller: 'IndexCtrl'
      }).
      when('/mainframe', {
          templateUrl: '/partials/mainframe.html',
          controller: 'MainframeCtrl'
      }).
      otherwise({
    	  redirectTo: '/index'
      });
  }]);

为啥风格和express这么像呢，都是route，只不过这个只针对前台。用了这种方式，让controller和service分开，倒也是不错的体验。

这里要佩服一下Angular的设计者，依赖注入和MVC分层的思想都很好，大大清晰了前台冗长的js代码。

5./public/javascript/controllers.js

loginCtroller.controller('MainframeCtrl', ['$scope', 'Mainframe', '$http',
  function($scope, Mainframe, $http) {
	var mainframe = new Mainframe();
	mainframe.$get(function(p, resp) {
		if (!p.error) {
			$scope.user = p;
		} else {
			alert(p.error);
			$location.path('index');
		}
	});
/*	$http.get('/mainframe')
			.success(function(data, status, headers, config){
				$scope.user = data;
			}).error(function(data, status, headers, config){
				alert("error");
			});*/
  }]);

这里写了两种和后台交互的方式，个人感觉第一种好，尤其是url比较复杂的时候。现在简单业务，可能看不出太大区别。

好了，跑起来的画面是这样的，非常简单

然后，输入错误时会弹处error信息。

如果成功的话，则会迁移到mainframe页面。

session用redis保存的好处是，即使我重新启动web服务器的话，session仍然能够保持。

代码放入网盘备份

http://pan.baidu.com/s/1lgGEU