params.json

{
  "name": "Gemrails.GitHub.io",
  "tagline": "脆饼的blog",
  "body": "**前言:** \r\n* _github提供给用户一个博客系统，称为git pages_\r\n* _关于本案，灵感主要来源于微服务与RESTful api :)_\r\n\r\n#### 概览：\r\n* 干货前置\r\n* git pages子工程实现若干博客/其他静态页\r\n* 前端数据采集和提交的实现\r\n* 服务器端的支持和实现\r\n\r\n**一、干货前置**\r\n\r\n对，实现方法就是js的跨域请求。\r\n<code>还是忍不住，先把答案直接列出来了.\"The truth is...I am Iron man.\"</code>\r\n除开程序实现部分，实现“跨域”最重要的一点就是要对服务器的web server进行调整。\r\n本人使用的是nginx，在本例应用中对服务器进行一些基本的跨域设置，如下：\r\n```\r\nhttp {\r\n    ...\r\n    add_header Access-Control-Allow-Origin http://gemrails.github.io;   #[1]\r\n    add_header Access-Control-Allow-Headers X-Requested-With;\r\n    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;\r\n    ...\r\n}\r\n```\r\n第[1]行中提及针对gemrails.github.io域开放授权，可以使用\\*代替，写作<code>add_header Access-Control-Allow-Origin \\*</code> 不过在没有其他的安全防范和校验手段的情况下不建议。\r\n一般来说在常规api设计时会使用诸如token或者某些session信息进行校验，本例由于只针对本人的git域提供数据，所以没有进行类似校验设计，仅开放单点许可 **相对** 安全。\r\n\r\n>干货结束，可以散了。下面的记录会以本次实现的2048游戏排名为例进行。\r\n\r\n**二、git pages子工程**\r\n\r\n这个说法非官方，实际的做法就是将原本的2048工程放入gitpages项目中，并增加index.html方便访问。\r\n具体如下图：\r\n![主仓结构](/images/main.png)\r\n![子目录结构](/images/pro.png)\r\n访问效果：\r\n  <a>http://gemrails.github.io/2048/</a>\r\n利用此方式可以在一个仓内开设n+静态blog页。\r\n\r\n**三、前端数据采集和提交的实现**\r\n\r\n前端设计在胜利/失败的情况下判断本次分数与最高分数的比较，与最高分持平时即判断本次该用户获得了新的最高分数。js取出分数标签与最高分数标签的数值进行判断。\r\n```\r\nfunction PushScore(proj){ \r\n    var Nscore = document.getElementById(\"score\").innerHTML.split('<')[0];\r\n    var Hscore = document.getElementById(\"hscore\").innerHTML.split('<')[0];\r\n    if ((parseInt(Nscore) != 0) && (parseInt(Nscore) == parseInt(Hscore))) {\r\n      var nname = GetName();//弹窗让用户输入一个昵称\r\n      var URL = \"http://127.0.0.1:8080/goal/name=\"+nname+\"&score=\"+Nscore;\r\n      var pdata = {\"proj\":proj};\r\n      $.ajax({\r\n          async:false,\r\n          type:'GET',\r\n          url: URL,\r\n          data:pdata,\r\n      }).success(function(gdata){\r\n          alert(gdata);//返回昵称\r\n      }).fail(function(){\r\n          return;\r\n       });\r\n    }\r\n}\r\nfunction GetName(){\r\n    // 填写昵称，如果没有填写，则生成一个随机昵称\r\n    var nname = window.prompt(\"出现最高分，输入一个昵称\",\"贾玲\");\r\n    if (nname == \"贾玲\") {\r\n        var rnum = parseInt(10*Math.random()); \r\n        var namelist = [\"大张伟\",\"薛之谦\",\"白眉大侠\",\"隔壁老王\",\"孔连顺\",\"贾玲\",\"秋引\",\"小默\",\"矮子乐\",\"卡纳瓦罗\"];\r\n        // 好像有什么奇怪的东西暴露了年龄    \r\n        nname = namelist[rnum];\r\n    };     \r\n    return nname;\r\n}\r\n```\r\n**四、服务器端的支持和实现**\r\n\r\n服务器端，接受数据、处理存库、排序返回排名序列。\r\n先是接受上传数据和处理，数据库使用的是redis，在方法中，没有使用redis的排序，由于redis是单线程模型，集合大时进行排序是会阻塞其他client的请求，设计了一个取列表，比较插入的方式。中途写了一个二分查找，参考时请注意序列的方向，注意调整front和back的位置。该方法可以想象到不适合高并发时使用。\r\n```\r\ndef sortList(self, proj, value):\r\n    self.key = proj\r\n    self.value = value\r\n    gvalue = int(self.value.split(\"=\")[1])\r\n    if not self.cr.iexist(self.key):\r\n        self.cr.rrpush(self.key, self.value)\r\n        return 5\r\n    else:\r\n        listg = self.cr.llrange(self.key, 0, -1)\r\n        sign = 0\r\n        front = 0\r\n        back = len(listg) - 1\r\n＃ 二分查找\r\n        while back >= front :\r\n            midd = (front + back)/2\r\n            if gvalue > int(listg[midd].split(\"=\")[1]):\r\n                back = midd - 1\r\n                sign = midd\r\n            elif gvalue < int(listg[midd].split(\"=\")[1]):\r\n                front = midd + 1\r\n                sign = midd + 1\r\n            else:\r\n                sign = midd + 1\r\n                front = midd + 1\r\n        listg.insert(sign, self.value)\r\n＃ 新数列插入redis\r\n        self.__remoNum(self.key, listg)\r\n```\r\n**总结：**\r\n通过上述几个方面的处理，可以使git pages来作为一个可以后台交互的系统使用。可以想到的扩展应用场景的脑洞是，在git pages blog中可以实现评论、回复、点赞等功能，且很容易实现，希望方案对钟爱git pages的人们有所帮助~~，虽然我不怎么用(热衷脸)~~。\r\n\r\n\r\n******\r\n\r\n**后记:**\r\n引<code>bao</code>用<code>guang</code>老刘的一句，与前面内容无关。\r\n>从未如此怀念Google！前段时间以为OS X下的HostTools被封了，用了一段时间的百度，上周猛然发现https方式访问Google hk的域名一切正常！顿时内牛满面.....刻意地坚持使用Google是一个程序员必须要养成的好习惯，能让你事半功倍！\r\n\r\n--我：蛤 ?",
  "note": "Don't delete this file! It's used internally to help with page regeneration."
}