javascript - Bagaimana anda melaksanakan halaman muka depan?

Question

Saya boleh melaksanakan paging dalam nodej hujung belakang, tetapi bagaimana untuk menulis kod hujung hadapan?

欧阳克 · Answer

Saya rasa apa yang penyoal perlukan ialah skrip muka surat hadapan:

var getPageList = function(options){
    if(typeof options != "object" || !('pageId' in options) || !('pageRecord' in options)){
        throw Error("options Error! eg:{pageId:1, pageRecord:12, pageUrlTemplate : '/page/{PAGE}/'}");
    };
    options.pageId = parseInt(options.pageId);
    options.pageRecord = parseInt(options.pageRecord);
    options.pageSize = options.pageSize || 10;
    
    options.pageUrlTemplate = options.pageUrlTemplate || "?page={PAGE}";
    options.pageCount = parseInt(( options.pageRecord - 1 ) / options.pageSize ) + 1;
    
    var page = [];
    var firstPage = parseInt(( options.pageId - 1 ) / options.pageSize ) * options.pageSize + 1;
    
    options.getLink = options.getLink || function(pageId){
        return options.pageUrlTemplate.replace("{PAGE}", pageId);
    };
    
    page.push({
        name    : '首页',
        style   : options.pageId == 1 ? "disabled" : "",
        link    : options.getLink(1)
    });
    page.push({
        name    : '上一页',
        style   : options.pageId == 1 ? "disabled" : "",
        link    : options.getLink(options.pageId - 1)
    });
    for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
        if( pageId >= 1 && pageId <= options.pageCount ){
            page.push({
                name    : pageId,
                link    : options.getLink(pageId),
                style   : pageId == options.pageId ? "active" : ""
            });
        }
    }
    page.push({
        name    : '下一页',
        style   : options.pageId == options.pageCount ? "disabled" : "",
        link    : options.getLink(options.pageId + 1)
    });
    page.push({
        name    : '尾页',
        style   : options.pageId == options.pageCount ? "disabled" : "",
        link    : options.getLink(options.pageCount)
    });
    page.toString = function(){
        return page.map(function(item){
            return '' + item.name + '';
        }).join("");
    };
    return page;
};

getPageList({pageId:1,pageRecord:1200});
/*
    [
        {"name":"首页","style":"disabled","link":"?page=1"},
        {"name":"上一页","style":"disabled","link":"?page=0"},
        {"name":1,"link":"?page=1","style":"active"},
        {"name":2,"link":"?page=2","style":""},
        {"name":3,"link":"?page=3","style":""},
        {"name":4,"link":"?page=4","style":""},
        {"name":5,"link":"?page=5","style":""},
        {"name":6,"link":"?page=6","style":""},
        {"name":7,"link":"?page=7","style":""},
        {"name":8,"link":"?page=8","style":""},
        {"name":9,"link":"?page=9","style":""},
        {"name":10,"link":"?page=10","style":""},
        {"name":"下一页","style":"","link":"?page=2"},
        {"name":"尾页","style":"","link":"?page=120"}
    ]
*/
'' + getPageList({pageId:1,pageRecord:1200,pageUrlTemplate:'/category/{PAGE}/view'});
/*
    首页
    上一页
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    下一页
    尾页
*/

Jika poster tersebut menggunakan AngularJS, anda boleh memuat turun dan menggunakan projek kecil sumber terbuka saya secara langsung: ng-penomboran.

滿天的星座 · Answer

Halaman depan menulis terus
1, 2, 3, 4, 5....
Apabila diklik, nombor yang sepadan seperti '4' dihantar ke bahagian belakang
Halaman belakang menulis pernyataan SQL seperti : pilih ＊ daripada tab had a *10,b

Anda sepatutnya dapat memahami sql ini,

Nota: Jika pangkalan data mempunyai banyak data, menggunakan SQL ini tidak cekap

给我你的怀抱 · Answer

Hujung hadapan menghantar permintaan mengikut parameter yang diperlukan oleh bahagian belakang Jika anda menghantar sebarang parameter untuk mendapatkan data yang sepadan, anda boleh mencapai paging iaitu anda perlu menghantar ajax setiap kali anda membuka halaman

伊谢尔伦 · Answer

Sebagai contoh. Latar belakang melakukan paging 200 keping data setiap halaman dan menghantarnya ke bahagian hadapan, dan mengembalikan jumlah halaman. Bahagian hadapan boleh memaparkan bilangan item yang berbeza seperti 10, 20, 50, 100, dsb. setiap halaman. Bahagian hadapan membuat pengiraan dan sepadan dengan nombor halaman muka depan dengan nombor halaman halaman latar belakang. Hanya ambil data pada setiap halaman terus daripada 200 item. Seperti sudut, ng-repeat="item in items.slice(page*10, 10)". Merangkum perintah dan ia berfungsi setiap masa