web学习-瀑布流布局(2)

来源：互联网发布：java 中声明short定义编辑：程序博客网时间：2024/04/30 02:07

为自己做的瀑布流加了后台代码,记录一下

php版本

通过session来储存页面中的box的个数,通过json做传递格式,通过对post的[‘action’]来判断请求的类型.是第一次加载,还是后续加载

<?php //初始化一些东西header('content-type:text/html;charset=utf-8');define('PIC_WIDTH', 200);define('FILE_PATH','./images/');define('START_NUM', 30);define('NEXT_NUM',6);session_start();$files = array();/** * [travelFile description] * @param  [type] &$files [description] * @return [type]         [description] */function travelFile(&$files){    if($handle = opendir(FILE_PATH)){        while (($file = readdir($handle)) !== false) {            if(!(is_dir($file)) && $file != '.' && $file != '..'){                array_push($files, FILE_PATH.$file);            }        }    }    closedir($handle);}遍历了目录,找到图片所在的地址travelFile($files);    将这个对象压缩成json对象class Json{    public $width;    public $files;    function __construct($width,$files){        $this->width = $width;        $this->files = $files;    }}$json = new Json(PIC_WIDTH,$files);if(isset($_POST['action'])){    if($_POST['action'] == 'first'){        $_SESSION['total'] = START_NUM;        $json = new Json(PIC_WIDTH,array_slice($files,0,$_SESSION['total']));    }    if($_POST['action'] == 'next'){        // if($_SESSIONp['total'] > $files.length){echo '';};        $_SESSION['total'] += NEXT_NUM;        $json = new Json(PIC_WIDTH,array_slice($files,$_SESSION['total'],6));    }    echo json_encode($json);}?>

node的版本

用node做了第一次调用的代码,然后就受不了了,感觉写的代码太烂.

var fs = require('fs');var url = require('url');var path = require('path');function travelFile(dir){    this.path = dir;    this.travelFiles = function(callback){        fs.readdirSync(dir).forEach(function(file){            var pathname = path.join(dir,file);            if(fs.statSync(pathname).isDirectory()){                var tmp = new travelFile(pathname);                tmp.travelFiles(callback);            }else{                callback && callback(pathname);            }        });    };    this.getFilesInfo = function(){        var data = [];        this.travelFiles(function(pathname){            data.push(pathname);        });        return data;    };};var files =  new travelFile('./images').getFilesInfo();var jsondata = JSON.stringify({'width':'200','files':files});var server = http.createServer(function(request,respons){    if(request.method == 'GET'){        if(request.url.match('jpg')){            console.log(request.url);            fs.readFile('.' + request.url,function(err,data){                if(err){                    respons.writeHead(404,{'Content-Type':'text/html','Content':'fd'});                }else{                    respons.writeHead(200,{'Content-Type':'image/jpg'});                    respons.write(data);                }                respons.end();            });        }else if(request.url == '/'){            fs.readFile('./indexJQery.html',function(err,data){            if(err){                respons.writeHead(404,{'Content-Type':'text/html'});            }else{                respons.writeHead(200,{'Content-Type':'text/html'});                respons.write(data.toString());            }            respons.end();            });        }else if(request.url.match('jquery')){            fs.readFile('./jquery-2.1.4.min.js',function(err,data){                if(err){                    respons.writeHead(404,{'Content-Type':'text/html'});                }else{                    respons.writeHead(200,{'Content-Type':'text/html'});                    respons.write(data.toString());                    respons.end();                }            })        }    }else if(request.method == 'POST'){        respons.writeHead(200,{'Content-Type':'plain/text','charset':'utf-8'});        respons.write(jsondata.toString());        respons.end();    }else{        respons.writeHead(404,{'Content-Type':'text/html'});        respons.end();    };});server.listen(3000,'127.0.0.1');

个人总结

php的apache做了太多的事情了,用node.js之后我才知道apache的好处.要把对服务器的每一次请求都要做一个配置.当时有个jquery一直不能用.想啦半天都不知道是怎么回事,后来知道是没给get请求做一个判断,没给get jquery做一个判断…….坑了好长时间
nodejs的代码情况分之很多,不知道想express的app.use()怎么写的,写的那么简洁
学习node之后,对http请求头,跟http响应头的作用理解更深了.在php下,一直没注意这些东西.

1 0