Add Index Page

config.js

@@ -2,13 +2,15 @@
 global.URL      = require('url');
 global.FILE     = require('fs-extra');
 global.Format   = require('util').format;
-// global.EJS  = require('ejs');
+global.EJS      = require('ejs');
 
 //Core Paths
 global.LIBPATH      = ROOTPATH+'/core/lib';
 global.HELPERPATH   = ROOTPATH+'/core/helper';
 global.HANDLERPATH  = ROOTPATH+'/handler';
 global.LOGPATH      = ROOTPATH+'/log',
+global.STATICPATH   = ROOTPATH+'/static';
+global.VIEWSPATH    = ROOTPATH+'/view';
 
 //Init Path
 FILE.mkdirsSync(LOGPATH);
@@ -16,6 +18,7 @@ FILE.mkdirsSync(LOGPATH);
 //Core Libs
 global.Logger = require(LIBPATH+'/Logger.js');
 global.ROUTER = require(LIBPATH+'/router.js');
+global.VIEW   = require(LIBPATH+'/view.js');
 global.STATIC = require(LIBPATH+'/static.js');
 global.JUMPER = require(HANDLERPATH+'/jumper.js');
 global.APIHandle = require(HANDLERPATH+'/api.js');

core/lib/static.js

@@ -10,9 +10,9 @@ var Static = {
             return false;  
         }
         if(ext.match(/png|jpg|jpeg|gif/)){
-            res.writeHead(404, {'Content-Type': 'text/html'});
-            res.end(404);
-            //return IMAGE.load(URL.parse(REQUEST.url,true).pathname,ext,query,res);
+            // res.writeHead(404, {'Content-Type': 'text/html'});
+            // res.end();
+            return IMAGE.load(URL.parse(url,true).pathname,ext,query,res);
         }else if(FILE.existsSync(url)){
             var data;
             if(ext.match(/txt|js|css|html|json/)){

core/lib/view.js

@@ -0,0 +1,22 @@
+var View = function(src,params){
+    if(!src) return null;
+
+    this.html = '';
+    this.parse
+    this.params = params?params:{};
+
+    if(!src.match(VIEWSPATH)){
+        src = VIEWSPATH+src;
+    }
+
+    if(FILE.existsSync(src)){
+        var data = FILE.readFileSync(src,'UTF-8');
+        this.html = EJS.render(data,this.params);
+    }else{
+        return null;
+    }
+    
+    return this;
+}
+
+module.exports = View;

handler/api.js

@@ -71,7 +71,7 @@ var API = {
     },
     _onError:function(msg,res){
         var data = {success:0,msg:msg,short:'',long:''};
-        res.writeHead(200, {'Content-Type': 'text/json'});
+        res.writeHead(200, {'Content-Type': 'text/json','Access-Control-Allow-Origin':'*'});
         res.write(JSON.stringify(data));
         res.end();
     }
@@ -87,7 +87,7 @@ var MongoHandler = {
                 var data = {success:1,msg:'',short:'http://l2s.ch/',long:url};
                 if(oldOne){
                     data.short += oldOne.short;
-                    res.writeHead(200, {'Content-Type': 'text/json'});
+                    res.writeHead(200, {'Content-Type': 'text/json','Access-Control-Allow-Origin':'*'});
                     res.write(JSON.stringify(data));
                     res.end();
                 }else{
@@ -96,7 +96,7 @@ var MongoHandler = {
                     LinkDB.update({key:key,long:baseLink},{$set:{short:newLink}},{upsert:true},function(err,result){
                         if(!err && result){
                             data.short += newLink;
-                            res.writeHead(200, {'Content-Type': 'text/json'});
+                            res.writeHead(200, {'Content-Type': 'text/json','Access-Control-Allow-Origin':'*'});
                             res.write(JSON.stringify(data));
                             res.end();
                             COUNT.link++;

handler/index.js

@@ -0,0 +1,9 @@
+var Index = {
+    index:function(res,req,args){
+        var a = new VIEW('/index.html');
+        res.writeHead(200, {'Content-Type': 'text/html'});
+        res.write(a.html);
+        res.end();
+    }
+};
+module.exports = Index;

package.json

@@ -7,11 +7,12 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "tracer":">=0.8.0",
-    "mongodb":"latest",
-    "fs-extra":"latest",
-    "mime-types":"latest",
-    "js-base64":"latest"
+    "ejs": "^2.5.5",
+    "fs-extra": "latest",
+    "js-base64": "latest",
+    "mime-types": "latest",
+    "mongodb": "latest",
+    "tracer": ">=0.8.0"
   },
   "engines": {
     "node": ">=0.12.5"

static/js/common.js

@@ -0,0 +1,5 @@
+function b64EncodeUnicode(str) {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
+        return String.fromCharCode('0x' + p1);
+    }));
+}

static/less/style.less

@@ -0,0 +1,21 @@
+body{margin:0;padding:0;font:13px/2em "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53",Arial,sans-serif;background:#fff}a,blockquote,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,pre,textarea,ul{padding:0;margin:0}a{text-decoration:none;outline:0;cursor:pointer}img{vertical-align:top}table{border-collapse:collapse}fieldset,img,table{border:0}ol,ul{list-style:none}li{list-style-type:none}h1,h2,h3,h4,h5,h6{font-size:13px;font-weight:400}.clear{overflow:auto;overflow-y:hidden;zoom:1}
+
+body{background:#339FE9}
+.content{
+    text-align:center;padding-top:120px;width:600px;margin:0 auto;
+    h2{font-size:28px;font-weight:bold;color:#fff;line-height:50px;}
+    h3{font-size:16px;color:#fff;line-height:30px;}
+    .generate{
+        padding:30px 0;
+        input.long_link{height:40px;border:0;border-radius:8px 0 0 8px;width:80%;box-sizing:border-box;padding:0 20px;font-size:14px;color:#999;float:left;display:inline}
+        .btn{display:inline-block;float:left;width:20%;box-sizing:border-box;background:#04bf2e;color:#fff;font-size:14px;border-radius:0 8px 8px 0;height:40px;line-height:40px;cursor: pointer;}
+        .get{margin-bottom:20px;}
+        .result{
+            position:relative;
+            .short{background:#3d74bd;height:40px;border-radius:8px;color:#fff;line-height:40px;}
+            .tag{position:absolute;height:24px;line-height:24px;display:block;left:8px;background:#04bf2e;color:#fff;border-radius:5px;width:40px;top:8px;opacity:0.8;display:none;
+                &.fail{background:#E14E4E}
+            }
+        }
+    }
+}

view/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>短链生成 Long To Short</title>
+    <link rel="stylesheet" href="/static/css/style.css" />
+</head>
+<body>
+<div class="content">
+    <h2>Long To Short</h2>
+    <h3>-= 短链接生成 =-</h3>
+    <div class="generate">
+        <div class="get clear">
+            <input class="long_link" type="text" placeholder="(～o￣3￣)～快呀~~快把链接放进这里" />
+            <div class="btn">快! ~ 点我!</div>
+        </div>
+        <div class="result">
+            <div class="tag">失败</div>
+            <div class="short">(*ﾟДﾟ*) 链接~链接~我要吃链接~~~</div>
+        </div>
+    </div>
+</div>
+<script src="/static/js/common.js"></script>
+<script src="/static/js/jquery.min.js"></script>
+<script>
+$(function(){
+    $('.get .btn').click(function(){
+        $('.tag').hide();
+        $('.short').text('─=≡Σ(((つ•̀ω•́)つ  加速获取短链接中...');
+        if($('.long_link').val() && $('.long_link').val().match(/^http(s)?:\/\/(\w+|\.|\/)+/g)){
+            var link = 'http://api.l2s.ch/getlink?key=e5e945ff9502096636bc1e903cea3325&url=' + b64EncodeUnicode($('.long_link').val());
+            // var link = 'http://127.0.0.1:3231/getlink?key=e5e945ff9502096636bc1e903cea3325&url=' + b64EncodeUnicode($('.long_link').val());
+            $.ajax({
+                url:link,
+                dataType:'json',
+                success:function(result){
+                    if(result.success==1){
+                        $('.tag').text('成功').removeClass('fail').show();
+                        $('.short').text(result.short);
+                    }else{
+                        $('.tag').text('失败').addClass('fail').show();
+                        $('.short').text('（o´ﾟ□ﾟ`o） ~啊~咧!好像获取失败了呢~   ERROR:'+result.msg);
+                    }
+                },
+                error:function(){
+                    $('.tag').text('失败').addClass('fail').show();
+                    $('.short').text('（o´ﾟ□ﾟ`o） ~啊~咧!好像获取失败了呢~');
+                }
+            })
+        }else{
+            $('.tag').text('失败').addClass('fail').show();
+            $('.short').text('(〃＞皿＜) 根本就不是一个正常的链接啊~~魂~淡!~');
+        }
+    });
+});
+</script>
+</body>
+</html>
+
+
+