发表于

phpStudy的使用
(1)安装 phpstudy 环境 下载地址http://www.phpstudy.net/
(2)其他选项菜单 –>php版本切换 –>php版本选择
(3)其他选项菜单 –>站点域名管理 –>站点管理 编辑新增 保存配置
(4)打开hosts 修改hosts文件 指向本地服务器10.0.10.29 www.zsxcar.com

MySql数据库的使用
(5)navicat for MySql中文版下载 http://www.php.cn/xiazai/gongju/757
(6)连接登录localhost –>账号root密码root
(7)localhost_3306 –>新建数据库 usedcar –>字符集utf8 – UTF-8 Unicode –>排序规则utf8_general_ci
(8)usedcar右键运行SQL文件 即将数据库usedcar.sql导入

1
2
3
4
5
6
7
8
// 服务器地址
'hostname'        => 'localhost',
// 数据库名
'database'        => 'usedcar',
// 用户名
'username'        => 'root',
// 密码
'password'        => 'root'

(9)项目目录下application/database.php修改配置参数

注意：以上步骤需要在已有usedcar.sql数据库文件和打包项目usedcar的前提下使用

发表于

1、路由
2、嵌套路由
3、path属性
4、path属性使用通配符

1
2
3
4
5
<Route path="/repos/:userName/:repoName" component={Repo}/>
path="/repos(/:name)"
path="/repos/."
path="/repos/*"
path="/repos/*.jpg"

使用通配符的路由要写在路由规则的底部，防止同时匹配到两个规则第二个规则不生效！

5、IndexRoute组件
使用可以显式指定Home是根路由的子组件，即指定默认情况下加载的子组件，
本身的展示内容由Home组件定义

6、Redirect重定向组件 用于路由的跳转
例如，访问”/home/mylist/:id” 会自动跳转到”/mylist/:id”

1
2
3
<Route path="home" component="{Home}">
    <Redirect from="mylist/:id" to="/mylist/:id" />
</Route>

7、IndexRedirect组件
访问跟路由时 用户重定向到Welcome组件

1
2
3
4
<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
</Route>

8、Link组件

1
2
<Link to="/about" activeStyle={{color: 'red'}}>About</Link>
<Link to="/about" activeClassName="active">About</Link>

9、IndexLink组件
10、history属性
hashHistory 通过URL的hash部分（#）切换
browserHistory 调用浏览器的History API，此时开发服务器可使用webpack-dev-server
createMemoryHistory 主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动。
参考github上的demo react-router-tutorial

发表于

(1)数据类型

7中基础数据类型6中原始类型以及Object类型
String,Number,Boolean,Null,Undefined,Symbol

(2)如何判断数据类型

(2.0)
typeof 判断基础数据类型 返回字符串

1
2
3
4
5
6
typeof(1) //&quot;number&quot;
typeof(true) //"boolean"
typeof('hello') //"string"
typeof(null) //"object"
typeof(undefined) //"undefined"
对于对象类型只能得到"object"

注意以下几处的用法：

1
2
3
4
5
6
7
8
9
typeof(null) //"object"
typeof(NaN) //"number"
typeof(typeof 1) //"string"
函数对象function setName(){} typeof(setName) //"function"
typeof Math.sin === "function";
typeof 1/0 === "NaN"
typeof alert === "function"
在 IE 6, 7 和 8 中，大多数的宿主对象是对象，而不是函数，例如：
typeof alert === "object"

(2.1)
instanceof 判断引用数据类型 返回true或者false
测试一个对象在其原型链上是否存在一个构造函数的prototype属性

1
2
var myArr = new Array();
console.log(myArr instanceof Array); //true
1
2
3
4
5
function C(){} 
function D(){} 
var o = new C();
// true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C;

判断数据类型是否是数组

1
2
Array.isArray([]) //true
Object.prototype.toString.call([]) === "[object Array]" //true

(2.2)
object.constructor 返回创建实例对象的Object构造函数的引用，为只读的原始类型。

1
2
3
4
5
var son = 5;
console.log(son.constructor.name); //Number
var myArr = new Array();
console.log(myArr.constructor.name); //Array
console.log(myArr.constructor===Array); //true

示例：

1
2
3
4
5
6
7
8
9
function myFunction(name){
console.log(name)
}; 
var myfun = new myFunction('zsx');
console.log('myfun.constructor is '+ myfun.constructor);
//zsx
//myfun.constructor is function myFunction(name){console.log(name)}
console.log('myfun.constructor is '+ myFunction.prototype.constructor);
//myfun.constructor is function myFunction(name){console.log(name)}

发表于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getCookieData(ckname){
	    var cookies = document.cookie;
	    var name = ckname+'=';
	    var name_s = cookies.indexOf(name);
	    var s,e;
	    if(name_s>-1){
	        s = name_s + name.length;
	        e = cookies.indexOf(';',s);
	        if(e == -1){
	            e = cookies.length;
	        }
	        return unescape(cookies.substring(s,e));
	    }else{
	        return '';
	    }
	}

定义一个getCookieData的方法，传入参数ckname为要查找的cookie的name。

在浏览器中，cookie是以name=value的方式存在的，document.cookie获取到的值为 name1=value1;name2=value2;name3=value3; etc.的字符串，

indexOf获取要查找的cookie name的索引值 根据索引值substring截取字符串，如果cookie name没有找到对应的索引则返回’’空内容。

可以参考MDN文章 一个支持unicode的cookie读取/写入器

发表于

先po代码如下，

之后再做详细描述

—— emmmm 分割线 ——

现在来说说下面的懒加载的代码

(1)先说思路，所有图片元素img一开始当然是不显示的，辣么给他们的src属性全都值为空，或者全都置为一个default默认图片，在浏览器srcoll触发时，计算并判断img元素是否在当前屏幕可见区域内，在区域内的话，则onload图片。

(2) $.extend使用jquery的extend扩展方法，注意此处 

1
$.extend用在全局对象 $.fn,extend用在实例对象

这里是扩展了全局对象的方法lazyImage，lazyImage里遍历所有图片元素，isView判断图片是否在可是区域内，loadThisImg是加载图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
;(function($){
    function loadThisImg($img){
        $img.attr("src",$img.attr("lazy-src"));
        $img[0].onload = function(){
            $img.removeClass("lazy-img");
        }
    }
    function isView($img,callback){
        var win_h = $(window).height(),
            sTop = $(window).scrollTop(),
            oTop = $img.offset().top,
            h = $img.outerHeight(true);
            if(sTop + win_h > oTop + h && sTop < oTop + h){
                callback($img);
            }
    }
    $.extend({
        lazyImage: function(){
            var lazys = $("body").find("img.lazy-img");
            if(lazys.length>0){
                var timer = null;
                $(window).on("scroll",function(){
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                       lazys.each(function(index,item){
                            var _this = $(this);
                            if(_this.attr("src") !== _this.attr("lazy-src")){
                                isView(_this,loadThisImg);
                            }
                        })
                    },100)
                }).trigger("scroll");
            }
        }
    }) 
})(jQuery)
$.lazyImage();

(3)以上基本配合相应的css样式即可。但是又有一个新的问题，真正的瀑布流加载时，不仅要对图片懒加载，还要根据图像的显示对，元素布局。

可参考以下的代码片段，元素生成时计算图片列的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
//图集布局
$(function(){
    var _t = $('.image_box');
    var tuLayout = {
        getMinColumn:function(obj){
            /**
             * [_min 获取最小高度列]
             * @type {[type]}
             */
            var _min = obj[0],_index;
            $.each(obj,function(index,item){
                if(_min>=obj[index]){
                    _index = index;
                    _min = obj[index];
                }
            });
            return {"index":_index,"min":_min};
        },
        getMaxColumn:function(obj){
            /**
             * [_max 获取最大高度列]
             * @type {[type]}
             */
            var _max = obj[0],_index;
            $.each(obj,function(index,item){
                if(obj[index]>=_max){
                    _index = index;
                    _max = obj[index];
                }
            });
            return {"index":_index,"max":_max};
        }
    }
    tuLayout.init = function(){
            /**
             * [heightObj 记录每列高度]
             * @type {Object}
             */
            var heightObj = {};
            for(var n=0;n<5;n++){
                heightObj[n] = 0;
            }
            var items = $(".image_trunk").find("li");
            $.each(items,function(index,item){
                if(index%5==0){
                    for(var i=0;i<5;i++){
                        var min_index = tuLayout.getMinColumn(heightObj)["index"];
                            items.eq(index-(-i)).animate({
                                "top": heightObj[min_index],
                                "left": 245*min_index+"px"
                            });
                            heightObj[min_index] = parseInt(heightObj[min_index])-(-items.eq(index-(-i)).outerHeight(true));
                            items.eq(index-(-i)).css("position","absolute");
                    }
                }
                if(index===(items.length-1)){
                    var max_height = tuLayout.getMaxColumn(heightObj)["max"];
                        $(".image_trunk").css("height",max_height);
                        // tuLayout.lazyLoad();
                        $.lazyImage();
                }
            })
    }
    if(_t){
        var trunks = {imgs:[]};
            _t.append('<ul class="image_trunk"></ul>');
        var imageJson = $.trim(_t.find('.image_json').html());
        var _imageList = window.JSON ? JSON.parse(imageJson) : eval('(' + imageJson + ')');
            trunks.imgs = _imageList;
        //生成页面dom元素
        function trunksRenderToBox() {
            $.each(trunks.imgs, function (inx, img) {
                if (!img.appended) {
                    img.appended = true;
                    _t.find('.image_trunk').append('<li><a href="" title=""><img class="lazy-img" lazy-src="' + img.src + '" alt="' + img.title + '" width="' + img.width + '" height="' + img.height + '"/></a><a class="img_title">' + img.title + '</a><div class="img_time">' + img.time + '</div></li>');
                }
            });
        }
        //渲染dom样式
        trunksRenderToBox();
        //dom元素重新布局
        tuLayout.init();
    }
})

排列后如下图：

lazyload_demo

发表于

这两天关于项目中列表排序的的问题，php程序员建议在表格中增加input输入框order字段，来作为输入提交给每行数据进行排序。

关于这个之前大概也有做过，所以便有了下面的思路。

键盘控制输入类型只能为数字，以及小键盘的数字，当输入为中文时，keydown事件匹配中文后对文本进行字符串替换；当键盘触发enter按键时，提交input框中的文本，或者input框失去焦点时，也提交；但是最后有一个bug，就是当正在输入中文时切换输入法，那么输入会变为字母并且enter提交，对于这个暂时未有合适的办法。后续可以解决时候再更新本文。

代码如下，可以参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
 * table cell number order property
 */
$(function(){
    //网站管理 - 新闻 活动 底部链接 输入order值排序
    $(document).on("keydown keyup press change","input[table-cell-number=true]",function(e){
        var _input = $(this); 
        var c = e.keyCode || e.charCode;
        var r = checkKeyResult(_input,c);
        // console.log(r+'--');
        if(r){
            if(r && r == 13){
                attrSort($(this),$(this).val(),iorderCallback);
            }
        }else{
            e.preventDefault();
        }
    })
    $(document).on("blur","input[table-cell-number=true]",function(e){
        attrSort($(this),$(this).val(),iorderCallback);
    })
    function attrSort(obj,val,callbackFun){
        //is empty submit or don't
        var _this = obj;
        var _sort = _this.attr("attr-sort");
        var _id = _this.attr("attr-id");
        var _val = $.trim(val)=='' ? 0:val;
            if(_val==_sort){
                //没改变
                return false;
            }else{
                //已改变 ajax提交
                return callbackFun(_id,_val);
            }
    }
    function checkKeyResult(that,c){
        if((c >=48 && c <= 57)||(c >= 96 && c <= 105)){
            // console.log(c+'数字');
            return true;
        }else if(c == 8){
            // console.log(c+'栅格');
            return true;
        }else if(c == 13){
            // console.log(c+'enter');
            return 13;
        }else{
            // console.log(c+'中文或字符');
            that.val(that.val().replace(/[\u4e00-\u9fa5]/g, ''));
            return false;
        }
    }
    //------------------
})

后续会再次更新。

发表于

hexo个人博客使用很灵活，可以自定义主题，浏览站点时看到许多很漂亮的主题，虽然自己不会开发主题，但是按照NexT的配置文档，用了一下试试看。

在博客本地存放位置的根目录下 git Bash；将想要的主题从github上克隆到本地目录，使用如下命令行，这样主题就被clone到我们的themes文件夹了。

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

在博客的配置文件中_config.yml修改theme为next;

hexo s --debug进行本地测试；

之后我们会看到自己博客的新主题：大概是这个样子

534534534

这个主题非常简洁，这是默认的外观，当然我们也可以对这个主题做更多的配置，更改外观，在NexT主题官网上我们还可以学习如何引入第三方服务，如加入评论，百度统计等。

可以参考博文 NexT

发表于

看了几篇关于用nodejs的hexo框架结合git使用搭建个人博客的文章，自己尝试着做了一个自己的博客站点。
记录一下大致的思路和步骤，以便以后回顾查看。

nodejs是服务器端JavaScript解释器，而Hexo是基于nodejs的静态博客框架。git作为分布式版本控制系统可以创建本地git仓库，并将hexo创建的页面程序push提交到远端仓库github上管理。

大致分为以下几个步骤
  1. 配置环境：安装Git安装node.js
  2. 安装nodejs框架hexo并创建本地工作目录,安装hexo依赖包用于生成静态页面并本地测试
  3. github上添加ssh key，并将本地代码部署push到github上
  4. 后期维护并对博客更新

可以参考博文 cnblog 和 jianshu 操作