前言
这个小项目花了我大概10天的时间（每天5h左右），可以说是很慢了，主要是JS的很多知识点不熟悉，边研究边开发。而且数据库部分仍然时使用本地存储，也就是说这个案例是无法投入到实际使用中，但后面我会去研究一下mysql，在服务器端部署一个小型的数据库，估计不会花太长时间，另外觉得node.js挺有意思，hexo就是基于node.js，将JS用于与计算机系统的直接沟通，That`s cool，本来我的原计划是将博客信息存储在本地文件中，比如直接在本地存储一个JSON文件用来存储一篇博客，后来发现这个是实现不了的，因为浏览器内核无法与系统直接沟通，内核是在浏览器提供的一个BOX中运行，无法直接操作系统文件，emmmm，可能这也是为系统安全把，不然随便一个恶意网页就可以操作你的文件，This is unimaginative。也是因为这个所以才有了node.js的诞生的吧！
正文
BB了那么久，咳咳，进入正题。
首页
布局过后首页上半部分是这样，和当初的设计差不多。整个上半部分是一个轮播图。
var i=0;
setInterval(function(){
if(i<4)
{
i++;
$(document).ready(function(){
$(".item").eq(i).fadeIn(2000).siblings().fadeOut(2000);
});
}
else
{
$(document).ready(function(){
$(".item").eq(3).fadeIn(2000).siblings().fadeOut(2000);
});
i=-1;
}
//console.log(i);
}, 4000);
用了jquery的fadeIn,fadeOut方法，由于没有按钮使代码很简单，只用了十多行代码。唯一有问题的最后一张图片与第一张总是相差设定时间的2倍，想了许多办法没有解决，我就直接班另一张图片插入到最后一张与第一张的间隔之间，这样就实现图片的播放速度是均匀的，但问题是不循环播放的，有一张图片要多出现一次。
顶部分别是home，catalogue，和login的链接，左半部分有博主本人的logo。
点击logo可以将其大部分隐藏到屏幕外侧，like this，
再次点击边缘部分，可再次点击召唤出logo <- <-
其原理也很简单，只是利用了jquery的动画方法，
animate（）
布局方面整个上半部分设计简单，只用了原生的CSS与html完成。
下半部分是文章展示部分，我是在首页设置了几篇置顶文章，具体方法是直接在在html文档中写入写入这一部分代码，不是JS后期插入到文档中，然后下面是使用JS写入的文章部分，这些文章都是存储在数据库中的部分，并且可以在article页面查看。
具体实现方式是在写入博客时将博客的title，date，tags，article写入到一个对象中，再JSON化写入本地（这里JSON化的原因在上期关于localStorage的介绍中已经写到，主要原因是localStorage只能存储string要想保留格式，JSON化是一种比较好的办法）。然后在首页读取数据再JSON.parse，在格式插入到文档中。
另外在首页还需要解决问题就是将文章序号传输到文章展示页面，因为当点击文章标题或more时，需要跳转至文章展示页面，展示该文章。我所想到的解决办法是在添加文章到首页文档流中时就把序号写入放置该文章的div的id的尾部，传输到展示页面时再通过this关键字读取id关键字（在测试中我也发现this无法获取class属性的值，原因我正在探索中，后面会出一起专门关于this的文章），并通过charAt()
获取该序号，然后通过URL传值的方法将其传递到展示页面。
展示页面
文章展示页面提供问文章的全面展示，并且提供评论功能。（本来是打算在首页也只展示文章的部分，后来感觉有点麻烦，看后面有时间了再实现）。
接上面首页传输文章序号到展示页面，展示页面通过函数解析序号，这个函数我实用的网上的一个模板，代码如下。
UrlParm = function() { // url参数
var data, index;
(function init() {
data = [];
index = {};
var u = window.location.search.substr(1);
if (u != '') {
var parms = decodeURIComponent(u).split('&');
for (var i = 0, len = parms.length; i < len; i++) {
if (parms[i] != '') {
var p = parms[i].split("=");
if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p=
data.push(['']);
index[p[0]] = data.length - 1;
} else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c | =
data[0] = [p[1]];
} else if (typeof(index[p[0]]) == 'undefined') { // c=aaa
data.push([p[1]]);
index[p[0]] = data.length - 1;
} else {// c=aaa
data[index[p[0]]].push(p[1]);
}
}
}
}
})();
return {
// 获得参数,类似request.getParameter()
parm : function(o) { // o: 参数名或者参数次序
try {
return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);
} catch (e) {
}
},
//获得参数组, 类似request.getParameterValues()
parmValues : function(o) { // o: 参数名或者参数次序
try {
return (typeof(o) == 'number' ? data[o] : data[index[o]]);
} catch (e) {}
},
//是否含有parmName参数
hasParm : function(parmName) {
return typeof(parmName) == 'string' ? typeof(index[parmName]) != 'undefined' : false;
},
// 获得参数Map ,类似request.getParameterMap()
parmMap : function() {
var map = {};
try {
for (var p in index) { map[p] = data[index[p]]; }
} catch (e) {}
return map;
}
}
}();
有点长，权当备份一下，后面在分析这个函数。
展示页面解析到文章序号后，展示函数直接通过读取数据库读取到数据添加到文档流中。
评论部分的实现也比较简单，通过读取文档中用户输入的信息并将其重新写入该文章数据库中的JSON中，展示时自动展示出来。
目录页面
目录页面展示了所有通过JS放入数据库的文章（不包括首页置顶文章）。
这里的实现就是直接遍历数据库中的博客文章信息，因为当时存储时是格式命名的，所以遍历很简单，再把title循环添加到文档流中就ok了。
登录及后台管理页面
登录页面使用MD5加密方式，与本地存储的密匙（未来的密匙存储在服务器端）进行对比。
这里是在登录过后显示页面，首先这里布局还是用了frame框架，我暂时还没想到更好的替代办法，虽然frame在H5已被抛弃。
在写博客页面，用户将自己的文章内容输入，然后提交，文章内容会被JSON化后被保存到数据库，下次进入首页时就会直接被展示出来。
删改页面也是遍历数据库，直接修改数据库内容就好了，还是比较简单了，具体过程就不再赘述。
最后的工具页面是我想没事可以自己开发一些简单的工具，比如什么颜色拾取等等，这也是后话。
最后
其实这个小项目还是比较简单，代码量也不是很大，主要是练一下手，熟悉以一下前端的一些知识，当然这个小项目还有很多不足需要满足，包括在代码规范等等,方便后面的深入学习。当然后面在学习玩数据库后会把本地数据库改为服务器端的数据库，使之可以实际运行。