利用connect建立前端开发服务器

利用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/

我也是一名网页游戏开发者，利用业余时间开发这个工具，只为提高工作效率，现在分享给大家免费使用，后面我会陆续奉上系列教程，方便业界同学，好的工具能大大提高工作效率，希望对大家有所帮助

编辑器整体图

开源的组件库

 

 

分类: as3, 游戏

 

 

分类: NodeJS

标签: Javascript, NodeJS