前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >猿进化系列15——实战之一文搞懂项目前期

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

作者头像
山旮旯的胖子
发布2020-07-28 16:47:14
9780
发布2020-07-28 16:47:14
举报
文章被收录于专栏:猿人工厂猿人工厂

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

作为一个新手,拿到一个工作任务的时候,往往是一个激动人心的事情,终于有地方施展自己的才华了,终于有机会把自己的设计转化为实现了。这个很好,很有激情,到今天我也能记得自己做第一个项目的那些日子,每天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 onclick="javascipt:load('+url+',1,\''+queryData+'\')"><ahref="javascript:void(0)">首页</a></li>'; //计算上一页的页码 var beforeNum = pb.currentPage - 1; if(beforeNum <= 0){ beforeNum = 1; } var beforePage = '<li onclick="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 = '<lionclick="javascipt:load('+url+','+i+',\''+queryData+'\')"><ahref="javascript:void(0)">'+i+'</a></li>'; }else{ //创建页码的li li = '<li onclick="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 onclick="javascipt:load('+url+','+pb.totalPage+',\''+queryData+'\')"><ahref="javascript:void(0)">末页</a></li>'; nextPage='<lionclick="javascipt:load('+url+','+(pb.currentPage+1)+',\''+queryData+'\')"><a href="javascript:void(0)">下一页</a></li>'; } lis += nextPage; lis += lastPage; //将lis内容设置到 ul

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 猿人工厂 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档