应@alsotang，把 demos 实现过程分享出来给大家讨论～

项目地址：http://www.demos.so http://demos.berwin.me

开源地址：https://github.com/berwin/demos

实现语言

后端：nodejs mongodb

前端：js html css

实现过程

首先建立项目，我用了nodejs的一个框架，express

$ npm install express --save

–save 这个参数会自动帮你把当前安装的依赖写入 package.json

var express = require( 'express' );
var app = express();

开始写路由，由于编辑器的逻辑特别简单，因此路由写了四条

router.get( '/', controller.home ); //欢迎页面
router.get( '/:id', controller.edit );//编辑页面
router.get( '/:id/result', controller.result );//获取用户写入的代码
router.post( '/createCode', controller.createCode );//保存用户写入的代码

看到路由，有些朋友可能就明白了。其实这个项目就是把写入的代码存进数据库然后在从数据库把数据拿出来的过程。

不多废话，看数据库，数据库我用的是Mongo，这里面我用了一个mongoskin。 $ npm install mongoskin --save

为了方便以后调用数据库，我封装了一个小函数

var config = require( '../../config' );
var mongoskin = require( 'mongoskin' );
var db = null;
exports.getCollection = function( collectionName ){
    if( !db ) db = mongoskin.db( config.MONGO_RUL, {native_parser:true} );
    return db.collection( collectionName );
};
exports.ObjectID = mongoskin.ObjectID;

config.js文件大家去github开源地址去看吧，这里就不长篇大论的粘贴代码啦。（去看源代码的时候记得帮楼主点一个star哦～）

封装好函数以后，链接数据库就方便多咯，不用每次都链接一次数据库啦

var mongo = require( './mongo' );
var codeDB = mongo.getCollection( 'code' );

具体源码就不全部粘贴到文章里啦。

后端基本写完。开始写前端。

前端的编辑器我用了一个框架 ace

就这样一个编辑器就基本成型了。。

后来项目发布以后，我发现有人恶意批量往我数据库里传百度首页的源代码，因此，我加了一个cookie，每次写代码并且保存的时候，我都会验证一下是否有cookie，并且cookie值正确。cookie值是通过 id + config.js 文件里自定义一段字符串 组合的md5

小结

就这样一个编辑器的基本雏形就做好了，日后这个项目我会长期维护开发。这个项目配上 demos 这个域名，有没有很屌的感觉？ 欢迎大家使用，如果遇到什么bug或者好的提议，可以联系我哦～ [email protected]