(转) 淘淘商城系列——首页跳转到搜索页面
2017-06-08 13:51
351 查看
http://blog.csdn.net/yerenyuan_pku/article/details/72905607
通过上文的学习,我们已经学会如何把商品数据导入到索引库中了,本文我会教大家如何从淘淘商城首页跳转到搜索页面。
我们要访问taotao-portal-web工程就要先启动Redis服务,大家根据自己使用的情况启动,使用的是单机版就启动单机版服务器,使用的是集群就启动集群版服务器。
启动好taotao-portal-web工程之后,我们访问淘淘商城首页,如下图所示。
该首页对应的后台代码如下图所示,在index.jsp页面当中是没有搜索相关代码的,那么这部分代码在哪儿呢?其实是在commons目录下的header.jsp页面当中。
header.jsp页面的代码如下图所示,可以看到在搜索框中输入搜索关键词之后,回车或者点击”搜索”按钮可触发search方法,但我们发现在整个header.jsp页面当中并没有search方法,那么search方法在哪儿定义的呢?其实是在页面引用的src=”/js/base-v1.js”当中。
我们打开base-v1.js文件,可发现在base-v1.js文件中有search这个方法,如下图所示,它指定的访问端口是8082,我们要把它改成8085,,因为8085对应着我们的taotao-search-web工程。
接下来我们使用tomcat插件启动的方式启动taotao-search-web工程,方法是在工程上右键→Run As→Maven build…,会看到如下图所示的对话框,在Goals一栏输入”clean tomcat7:run”。然后点击”Apply”,之后点击”Run”启动该工程。
我们在淘淘商城首页的搜索框中输入”手机”然后点击搜索按钮,会看到如下图所示界面,可以看到已经正确跳转到搜索系统工程中了,只是我们的搜索功能还没完成因此现在访问是报404错误的。
下面我们来分析一下搜索功能的实现,我们首先把下图所示的搜索工程的静态资源放到搜索系统工程当中。
在淘淘商城这个项目中,我们的商品搜索页面只需进行查询和分页即可,现在也不用像京东做的这么复杂,练习嘛,我们就不使用过滤条件、排序等功能了,我们只实现查询和分页功能,正如下图这样。
我们再到搜索系统工程中的search.jsp页面查看一下代码,可以看到搜索页面由总页数totalPages和搜索出来的内容列表itemList组成,而且可能会用到查询总数量,这些我们应该放到一个pojo当中。
由于搜索服务和搜索系统这两个工程都需要用到这个pojo,因此我们还是把这个pojo放到taotao-common当中比较合适,如下图所示。
注意该类一定要实现序列化接口!!
为方便大家复制,现将该类的代码贴出。
通过上文的学习,我们已经学会如何把商品数据导入到索引库中了,本文我会教大家如何从淘淘商城首页跳转到搜索页面。
我们要访问taotao-portal-web工程就要先启动Redis服务,大家根据自己使用的情况启动,使用的是单机版就启动单机版服务器,使用的是集群就启动集群版服务器。
启动好taotao-portal-web工程之后,我们访问淘淘商城首页,如下图所示。
该首页对应的后台代码如下图所示,在index.jsp页面当中是没有搜索相关代码的,那么这部分代码在哪儿呢?其实是在commons目录下的header.jsp页面当中。
header.jsp页面的代码如下图所示,可以看到在搜索框中输入搜索关键词之后,回车或者点击”搜索”按钮可触发search方法,但我们发现在整个header.jsp页面当中并没有search方法,那么search方法在哪儿定义的呢?其实是在页面引用的src=”/js/base-v1.js”当中。
我们打开base-v1.js文件,可发现在base-v1.js文件中有search这个方法,如下图所示,它指定的访问端口是8082,我们要把它改成8085,,因为8085对应着我们的taotao-search-web工程。
接下来我们使用tomcat插件启动的方式启动taotao-search-web工程,方法是在工程上右键→Run As→Maven build…,会看到如下图所示的对话框,在Goals一栏输入”clean tomcat7:run”。然后点击”Apply”,之后点击”Run”启动该工程。
我们在淘淘商城首页的搜索框中输入”手机”然后点击搜索按钮,会看到如下图所示界面,可以看到已经正确跳转到搜索系统工程中了,只是我们的搜索功能还没完成因此现在访问是报404错误的。
下面我们来分析一下搜索功能的实现,我们首先把下图所示的搜索工程的静态资源放到搜索系统工程当中。
在淘淘商城这个项目中,我们的商品搜索页面只需进行查询和分页即可,现在也不用像京东做的这么复杂,练习嘛,我们就不使用过滤条件、排序等功能了,我们只实现查询和分页功能,正如下图这样。
我们再到搜索系统工程中的search.jsp页面查看一下代码,可以看到搜索页面由总页数totalPages和搜索出来的内容列表itemList组成,而且可能会用到查询总数量,这些我们应该放到一个pojo当中。
由于搜索服务和搜索系统这两个工程都需要用到这个pojo,因此我们还是把这个pojo放到taotao-common当中比较合适,如下图所示。
注意该类一定要实现序列化接口!!
为方便大家复制,现将该类的代码贴出。
public class SearchResult implements Serializable { // 总页数 private Long totalPage; // 总数量 private Long totalNumber; // 查询出的商品列表 private List<SearchItem> itemList; public Long getTotalPage() { return totalPage; } public void setTotalPage(Long totalPage) { this.totalPage = totalPage; } public Long getTotalNumber() { return totalNumber; } public void setTotalNumber(Long totalNumber) { this.totalNumber = totalNumber; } public List<SearchItem> getItemList() { return itemList; } public void setItemList(List<SearchItem> itemList) { this.itemList = itemList; } }
相关文章推荐
- 淘淘商城系列——首页跳转到搜索页面
- 学习淘淘商城第四十四课(首页跳转到搜索页面及搜索实现分析)
- 模仿Google首页的资料搜索页面
- 为了增加用户体验让出错页面跳转回首页
- 玩转CSLA.NET小技巧系列一:跳转页面丢失session,如何解决
- 那些琐碎的知识-----搜索回车跳转页面
- asp.net网站首页根据IP自动跳转指定页面的示例
- MSDN Visual系列:MOSS企业级搜索之一——在搜索中心里创建自定义搜索页面和标签选项卡
- dedecms首页添加根据IP访问区域跳转对应页面的方法
- 项目初始化首页跳转页面
- 跳转appstore的评分页面和软件的首页
- 搜索会页面跳转
- 转:MSDN Visual系列:MOSS企业级搜索之一——在搜索中心里创建自定义搜索页面和标签选项卡
- 新增Activity、页面传值跳转和点击按钮触发事件『Android系列九』
- Android学习笔记之百度地图(周边检索poiSearchNearBy跳转页面并输出搜索结果)
- index 首页页面跳转
- 自定义错误404页面,自动跳转到站点首页
- Android深入浅出系列之实例应用—手机页面之间的跳转
- 网站判断从百度搜索来的关键词 从而跳转到指定页面
- Flah自动跳转到首页页面