猿进化系列15——实战之一文搞懂项目前期

看完上一个章节，相信你已经完成了某网站功能的需求分析和数据库设计，是时候实现这些设计的功能了，不过在实现之前，有一些还没有搞定的关键事情你还需要了解，今天猿人工厂君就带你来完成这个小项目的关键部分。

     猿进化是一个原创系列文章，帮助你从一只小白快速进化为一个猿人，更多精彩内容，敬请大家关注公主号猿人工厂，点击猿人养成获取！

作为一个新手，拿到一个工作任务的时候，往往是一个激动人心的事情，终于有地方施展自己的才华了，终于有机会把自己的设计转化为实现了。这个很好，很有激情，到今天我也能记得自己做第一个项目的那些日子，每天7点左右就到公司了，拿着任务就吭哧吭哧地开始干……

可是一个很简单的任务，也是可能埋坑的，你看，蘑菇头没识别清楚就开始搞了，立刻掉入坑中，分页的事情都没搞定呢，开始码？写到后面时间紧迫的时候再开始来搞关键技术的突破吗？很显然，这种事情是可以避免的。在开始写代码之前，还是有很多工作需要做的。

一般来说，数据库设计完成之后，还应该进行概要设计，针对每一个功能点进行分析，之后还有详细设计（如果按照完整的流程来讲，不过现在好多互联网公司都木有这个了，都给敏捷掉了），还要进行项目框架（项目整体框架，关键公共代码的输入）搭建，设计评审（拉着测试产品评审设计是否合理），工时评估（这个是研发的命根，给合理的，也要留足自己的buffer,项目经理还要讨价还价，把项目控制在可控的成本内）。

不过鉴于这次是你人生的第一个小项目，还是产品已经跑路，需求文档都自己写的那种（现实情况也有，做为研发一定要坚守底线，需求文档你是坚决不能写的，前年一个血淋林的教训，隔壁部门某产品着急跑路换工作，各种工作不负责，发呆卖萌求研发小哥给写一个简单功能，至少她是这么说的，小哥写了，还发她看了，人家微信上回了可以这样做，结果上线后业务不买账，她直接说需求不是她写的，让拿沟通邮件出来说事儿，然后跑路……对此，只能恭喜某猫喜提靠谱产品一枚吧^_^但是研发小哥也要反思下噢，人再熟，你都能给干的），也就用不着那些了，接下来就做做项目的关键功能分析及关键代码的输入就好啦。

我们看看之前的需求：网站的每一个页面都需要出现下面的头部和尾部。

公共头尾，是站点公共的头部和尾部，内容相对固定，每个页面都会出现。像这样公共的页面，我们往往是将这他们分抽取出来，让每个页面去公用它，考虑到现在的项目基本上越来越趋于前后端分离的搞法，这次我们也简单地潮一把吧，抽出页面，每个页面加载公共部分时，动态去拉取：

    1.切割公共头部作为header.html

    2.切割公共头部作为footer.html

    3.页面固定两个标记header和footer分别代表头部和尾部

   4.使用jauery异步加载header.html和footer.html的内容，替换header.html和footer.html

我们的首页， index.html暂时就长现在这个样子吧，之后所有页面的基本机构就先这样子了。

我们再定义公共的引入头尾的代码可以考虑抽取为单独的js文件include.js，发起get请求，拉去公共的html页面：

$(function () {

    $.get("header.html",function (data) {

        $("#header").html(data);

    });

    $.get("footer.html",function (data) {

        $("#footer").html(data);

    });

});

在页面上引入incude.js就好，然后我们可以访问下1看到如下效果。

红色框画起来的范围就是我们需要考虑的分页内容了。考虑到是分类列表页面，页面跳转时，浏览器会发起get请求，将类目的id传过来，所以我们通过分类id来确定列表页面需要展示哪个分类下线路信息的数据，后端程序完成线路数据的查询，返回给列表页。由于线路的数据包含：线路基本信息、线路图片信息、线路商家信息、线路收藏信息、所以一次操作可能涉及多个表的数据。因为某个类型的线路信息可能很多，一次也没必要展示完全，所以列表页下方，有分页标记，我们浏览数据需要像“翻书”一样查看。也就是说，我们需要设定分页的大小，每一次，获取每一页的数据就好了。

要解决分页问题，其实我们重点关注的关键数据，主要分为，页码数，记录总条数，当前页码数，每页显示记录条数，以及每个页面的内容数据。那么对于后端程序而言，我们可以抽象一个分页类来体现它有这些信息就够了。

packagecom.pz.route.domain;

import java.util.List;

/**
 * 分页列表对象在list基础长增加分页的参数
 * @author pangzi
 *
 * @param <T>
 */
public class PageList<T> {

    private int totalCount;//总记录数
    private int totalPage;//总页数
    private int currentPage;//当前页码
    private int pageSize;//每页显示的条数

    private List<T> list;//每页显示的数据集合

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount =totalCount;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage =totalPage;
    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage =currentPage;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize =pageSize;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }
}

    后端程序获取数据的时候，需要对符合条件的数据进行一个统计，我们就叫totalCount好了，那么计算总页数，需要考虑能除尽和不能除尽的情况，不能除尽的情况下,会多一页，所以这个代码你就收好吧：

        int totalPage = totalCount% pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;

       page.setTotalPage(totalPage);

       后端程序的关键问题解决了，我们来看看前端程序的页面需要考虑什么事情。对于这种公共的部分我们可以尝试抽取一个公共的函数，方便页面调用：

functionload(url,page,queryData){
     //每次请求需要异步获取数据
    $.get(url,page,queryData,function (pb) {
        //解析pagebean数据，展示到页面上
        //1.分页工具条数据展示
        //1.1 展示总页码和总记录数
        $("#totalPage").html(pb.totalPage);
        $("#totalCount").html(pb.totalCount);
        var lis = "";
        var fristPage = '<li οnclick="javascipt:load('+url+',1,\''+queryData+'\')"><ahref="javascript:void(0)">首页</a></li>';
        //计算上一页的页码
        var beforeNum = pb.currentPage - 1;
        if(beforeNum <= 0){
            beforeNum = 1;
        }
        var beforePage = '<li οnclick="javascipt:load('+url+','+beforeNum+',\''+queryData+'\')"class="threeword"><a href="javascript:void(0)">上一页</a></li>';
        lis += fristPage;
        lis += beforePage;
        //1.2 展示分页页码
        /*
            1.一共展示10个页码，能够达到前5后4的效果
            2.如果前边不够5个，后边补齐10个
            3.如果后边不足4个，前边补齐10个
        */
        // 定义开始位置begin,结束位置 end
        var begin; //开始位置
        var end ; //  结束位置
        //1.要显示10个页码
        if(pb.totalPage < 10){
            //总页码不够10页
            begin = 1;
            end = pb.totalPage;
        }else{
            //总页码超过10页
            begin = pb.currentPage - 5 ;
            end = pb.currentPage + 4 ;
            //2.如果前边不够5个，后边补齐10个
            if(begin < 1){
                begin = 1;
                end = begin + 9;
            }
            //3.如果后边不足4个，前边补齐10个
            if(end > pb.totalPage){
                end = pb.totalPage;
                begin = end - 9 ;
            }
        }
        for (var i = begin; i <= end ; i++) {
            var li;
            //判断当前页码是否等于i
            if(pb.currentPage == i){
                li = '<liοnclick="javascipt:load('+url+','+i+',\''+queryData+'\')"><ahref="javascript:void(0)">'+i+'</a></li>';
            }else{
                //创建页码的li
                li = '<li οnclick="javascipt:load('+url+','+i+',\''+queryData+'\')"><ahref="javascript:void(0)">'+i+'</a></li>';
            }
            //拼接字符串
            lis += li;
        }
        var nextPage =null;lastPage=null;
        if(pb.totalPage==1){
            lastPage = '<li><ahref="javascript:;">末页</a></li>';
            nextPage = '<li><ahref="javascript:;">下一页</a></li>';
        }else{
            lastPage = '<li οnclick="javascipt:load('+url+','+pb.totalPage+',\''+queryData+'\')"><ahref="javascript:void(0)">末页</a></li>';
            nextPage='<liοnclick="javascipt:load('+url+','+(pb.currentPage+1)+',\''+queryData+'\')"><a href="javascript:void(0)">下一页</a></li>';
        }
        lis += nextPage;
        lis += lastPage;
        //将lis内容设置到 ul
        $("#pageNum").html(lis);
        //定位到页面顶部
        window.scrollTo(0,0);
    });