利用connect建立前端开发服务器
对于前后端完全分离的系统，开发时候我们需要给前端配置服务器，当然我们可以选择Nginx之类的服务器进行配置，但我们也能使用NodeJS构建高自由度的前端开发服务器。
简单静态服务器
下面是一个简单的静态服务器：
var http = require('http'), url = require('url'), fs = require('fs') path = require('path'); function getContentType(_path){ var contentType, ext = path.extname(_path); switch(ext){ case '.html': case '.htm': contentType = 'text/html'; break; case '.js': contentType = 'text/javascript'; break; case '.css': contentType = 'text/css'; break; case '.gif': contentType = 'image/gif'; break; case '.jpg': contentType = 'image/jpeg'; break; case '.png': contentType = 'image/png'; break; case '.ico': contentType = 'image/icon'; break; default: contentType = 'application/octet-stream'; } return contentType; } function httpService(req, res){ var reqUrl = req.url, pathName = url.parse(reqUrl).pathname, filePath; if(Path.extname(pathName) === ""){ pathName += "/"; } if(pathName.charAt(pathName.length - 1) === "/"){ pathName += "index.html"; } filePath = path.join('./', pathName); fs.exists(filePath, function(exists){ if(exists){ res.writeHead(200, {'Content-Type': getContentType(filePath)}); var stream = fs.createReadStream(filePath, {flags : "r", encoding : null}); stream.on('error', function(){ res.writeHead(404); res.end('<h1>404 Read Error</h1>'); }); stream.pipe(res); }else{ res.writeHead(404, {'Content-Type': 'text/html'}); res.end('<h1>404 Not Found</h1>'); } }); } var webService = http.createServer(httpService); webService.on('error', function(error){ console.log('[WebService][error] ' + error); }); webService.listen(300, function(){ console.log('[WebService][Start] running at http://127.0.0.1:' + 3000 + '/'); });
可以发现一个静态服务器也要写很多行代码才能完成，但是如果我们使用connect，会发现这一切只要几行代码。
Connect？
connect是高性能NodeJS Web中间件框架，提供了二十余个中间件，并有众多第三方中间件支持。connect使用非常简单，例如上面的静态服务器，在connect中只需：
var connect = require('connect'); var app = connect() .use(connect.static('public')) .listen(3000);
安装connect
我们只要在命令行中输入：
npm install connect
便可以安装了。
模型
connect的模型非常简单，通过use注册中间件，每个中间件接收request和response，如果发现request是该中间件处理的，那么处理完后通过response.end输出，否则通过next交给下一个中间件处理。
需求
OK，现在我们看看需求是怎样的：
- 由于前后端是分离的，所以开发的时候前后端也是分离的，那么前端和后端做交互就会跨域，所以首先要能反向代理到后端。
- 可以简单配置静态服务器（我们假设前端的文件全是静态的）。
- 可以在前端模拟数据交互，也就是在特定的文件夹存储模拟的数据，然后对应返回。
- 力求简便，通过json配置。
路径结构：
/static：静态服务路径与后端交互
/prototype/static：原型路径与模拟数据交互
/prototype/static/mockup-data/：模拟数据路径
代码
static.js:
module.exports = (function(){ "use strict" var connect = require('connect'), http = require('http'), url = require('url'), path = require('path'), proxy = require('proxy-middleware'), fs = require('fs'), pkg = JSON.parse(fs.readFileSync('./package.json')); // 通过后缀名得到content type function _getType(extname){ switch(extname){ case '.json': return 'application/json'; case '.xhtml': case '.html': return 'text/html'; default: return 'application/json'; } } // 使用connect var app = connect() // 使用logger中间件 .use(connect.logger('dev')) // 用static中间件处理静态服务 .use(pkg.static.path, connect.static(pkg.static.root, {maxAge: pkg.maxAge})) .use(pkg.prototype.path + '/static/mockup-data', function(req, res, next){ // 如果是GET方法，交由下面的中间件处理 if(req.method === 'GET') return next(); var urlObj = url.parse(pkg.prototype.root + req.originalUrl.replace(pkg.prototype.path, '')), filePath = urlObj.protocol + urlObj.pathname, contentType = _getType(path.extname(urlObj.pathname)), method = req.method.toLowerCase(), // 得到与方法名对应的模拟文件路径，例如原来文件路径是1.json，在POST方法中变成1.post.json methodFilePath = filePath.replace(/(\.xhtml|\.html|\.json)$/, '.' + method + '$1'); fs.exists(methodFilePath, function(exist){ // 如果方法名对应的模拟文件存在 if(exist){ // 替换文件路径 filePath = methodFilePath; } // 读取文件 fs.readFile(filePath, function(err, data){ if(err) return next(err); res.writeHead(200, {'Content-Type': contentType}); res.statuCode = 200; res.end(data); }); }); }) // 用static中间件处理原型的静态服务 .use(pkg.prototype.path, connect.static(pkg.prototype.root, {maxAge: pkg.maxAge})) // 使用proxy-middleware中间件进行反向代理 .use(proxy(url.parse(pkg.proxy))) .listen(pkg.port, function(){console.log('Connect with: http://127.0.0.1:' + pkg.port)}); })();
package.json:
{ "maxAge": 3600, "port": 80, "proxy": "http://192.168.10.202:8080", "prototype": { "path": "/prototype", "root": "C:/Users/Desktop/manggis/manggis_web/src/main/webapp/prototype" }, "static": { "path": "/manggis_web/static", "root": "C:/Users/Desktop/manggis/manggis_web/src/main/webapp/static" }, "devDependencies": { "connect": "~2.8.4", "proxy-middleware": "~0.4.0" } }
所见即所得的游戏界面开发
基于flash的网页游戏UI开发，常规基于flash IDE和flex两种方式，这两种方式都提供了可视化的操作方式，但是各自的弊端都非常明显
存在的问题：
先说flash IDE, 是Adobe最早的矢量图开发工具，定位为画图及动画制作工具。可视化操作很方便，但他对组件的支持极其有限，大家不得不仅仅用他来对UI的位置，再通过各种方式转换为对应的组件，非常不方便，组件参数设置更无从谈起。这些诸多不便，带来的是UI开发效率低下，美术和程序工作相互交叉，可视化力度不够，协助不方便，项目一旦大了资源也很不好管理。
再说flex，adobe希望把他做成一个通用框架，实现所有需求，正因为如此，框架变的庞大而臃肿，很多类和函数你甚至一辈子都不会用到，和网页游戏追求高性能，低加载量背道而驰，最终也被广大页游开发商所抛弃。
理想化的UI开发工具：
理想化的UI开发工具应该是什么样的呢？
1.可视化，应该具有flash IDE的可视化，比如拖拽，层操作，双击层级关系，任何界面都能可视化的拼出来，所有操作可撤销
2.组件化，应具有flex的组件化功能，所以界面均为组件，能方便的设置参数并立即看到效果
3.能自动管理资源，并且自动生成UI代码
4.能让美术和程序工作分离，相互配合但互不影响，方便svn管理合并，让多部门协调工作
5.UI库需高性能，代码轻量能迅速上手，编辑器便于使用，美术易于简单学习甚至无需学习直接上手
6.方便扩展，能随意扩展组件并让编辑器自动可视化支持，实现多样化需求
7.支持多项目，支持矢量图特效，支持多语言等等
解决方案：
Morn就是基于以上特点而设计的，吸取了flash IDE和flex各自的优点，并加以扩展，具有可视化，高性能，轻量级，易扩展等等特点，组件库开源，编辑器免费授权，可用来做商业开发，大大提供webgame开发效率。由于开源，Morn UI组件库代码完全可以自己控制，并且编辑器也支持插件化扩展，实现自定义的功能，可谓强大。Morn UI的官方网站http://www.mornui.com/
我也是一名网页游戏开发者，利用业余时间开发这个工具，只为提高工作效率，现在分享给大家免费使用，后面我会陆续奉上系列教程，方便业界同学，好的工具能大大提高工作效率，希望对大家有所帮助
编辑器整体图
开源的组件库
