应@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或者好的提议,可以联系我哦~ berwin1995@qq.com
good!
最好做成实时通过localStorage来保存和获取代码,而ctrl+s功能应该是和服务器同步功能。 这样就算突然浏览器卡死或者电脑死机,数据都是安全的。
@wh1100717 已经把localStorage加上了。。现在可以保证代码不会因为意外关闭浏览器而重新在写一遍了。
:-O 喔~ 再加个实时预览就更好了!
nb
👍 自豪地采用 CNodeJS ionic
脑子里的第一反应是 Metor来实现会不会更合适
很不错!html还好就是JS会卡。。
赞一个