淘淘商城系列——首页轮播图展示
来源:互联网 发布:cpda数据分析师 含金量 编辑:程序博客网 时间:2024/05/17 06:22
上文我们一起学习了内容管理,由于时间太紧了,好多功能都没实现,在此对读者说声抱歉!以后我一定会完善这些功能,读者如果有兴趣,也可以实现这些功能,希望大家都能学有所成。废话扯了一大堆,进入主题,本文我们将一起学习如何展示商城首页的轮播图。
首先,看一下index.jsp页面代码,如下图所示,首页大广告是采用轮播图的方式显示的。数据需要从后台动态获取,它是从”ad1”这么一个变量中去取值的,因此我们在表现层返回的结果中动态数据所对应的变量名一定要是”ad1”。
下面我们来实现首页轮播图展示这个功能。首先我们来编写Service层的代码,在taotao-content-interface工程的ContentService接口中添加一个方法,如下图所示。
接着我们去taotao-content-service工程的ContentServiceImpl实现类中去实现这个方法,如下图所示。
然后,我们来编写表现层的代码。由于前台工程taotao-portal-web需要使用taotao-content-interface工程,那么就在pom.xml文件当中添加如下依赖。
<dependency> <groupId>com.taotao</groupId> <artifactId>taotao-content-interface</artifactId> <version>0.0.1-SNAPSHOT</version></dependency>
为了大家方便复制,现将该pom.xml文件的内容贴出来。
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>com.taotao</groupId> <artifactId>taotao-content</artifactId> <version>0.0.1-SNAPSHOT</version> </parent> <artifactId>taotao-content-service</artifactId> <packaging>war</packaging> <dependencies> <dependency> <groupId>com.taotao</groupId> <artifactId>taotao-manager-dao</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> <dependency> <groupId>com.taotao</groupId> <artifactId>taotao-content-interface</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jms</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> </dependency> <!-- dubbo相关 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>dubbo</artifactId> <!-- 排除依赖 --> <exclusions> <exclusion> <groupId>org.springframework</groupId> <artifactId>spring</artifactId> </exclusion> <exclusion> <groupId>org.jboss.netty</groupId> <artifactId>netty</artifactId> </exclusion> </exclusions> </dependency> <!-- zookeeper的客户端,你要连接zookeeper,需要把以下两个jar包加进来 --> <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId>zookeeper</artifactId> </dependency> <dependency> <groupId>com.github.sgroschupf</groupId> <artifactId>zkclient</artifactId> </dependency> </dependencies></project>
下面我们来看下后台需要返回的数据格式是什么,如下所示,可以看到用到的字段有”srcB”、”height”、”alt”、”width”、”src”、”widthB”、”href”、”heightB”八个。这些字段与数据库表中的字段有不一致的地方,通常处理的方式是建一个pojo类来专门接收从数据库表中查询到的数据及自定义的配置然后转换成json格式的字符串。
[ { "srcB": "http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg", "height": 240, "alt": "", "width": 670, "src": "http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg", "widthB": 550, "href": "http://sale.jd.com/act/e0FMkuDhJz35CNt.html?cpdad=1DLSUE", "heightB": 240 }, { "srcB": "http://image.taotao.com/images/2015/03/03/2015030304353109508500.jpg", "height": 240, "alt": "", "width": 670, "src": "http://image.taotao.com/images/2015/03/03/2015030304353109508500.jpg", "widthB": 550, "href": "http://sale.jd.com/act/UMJaAPD2VIXkZn.html?cpdad=1DLSUE", "heightB": 240 } ]
那么我们下面便来新建一个taotao.taotao.portal.pojo包,并在该包下新建一个Ad1Node类,如下图所示。
AD1Node类的代码如下,这里由于该类只是在这个前台工程使用,不参与网络传输,因此可以不实现Serializable接口。
public class Ad1Node { private String srcB; private Integer height; private String alt; private Integer width; private String src; private Integer widthB; private String href; private Integer heightB; public String getSrcB() { return srcB; } public void setSrcB(String srcB) { this.srcB = srcB; } public Integer getHeight() { return height; } public void setHeight(Integer height) { this.height = height; } public String getAlt() { return alt; } public void setAlt(String alt) { this.alt = alt; } public Integer getWidth() { return width; } public void setWidth(Integer width) { this.width = width; } public String getSrc() { return src; } public void setSrc(String src) { this.src = src; } public Integer getWidthB() { return widthB; } public void setWidthB(Integer widthB) { this.widthB = widthB; } public String getHref() { return href; } public void setHref(String href) { this.href = href; } public Integer getHeightB() { return heightB; } public void setHeightB(Integer heightB) { this.heightB = heightB; }}
下面我们在taotao-portal-web工程中引用dubbo发布的ContentService服务,即要向springmvc.xml配置文件中添加如下配置:
<dubbo:reference interface="com.taotao.content.service.ContentService" id="contentService" />
下面我们就去实现Controller层的代码,IndexController类的代码需要修改为:
/** * 商城首页展示处理 * <p>Title: IndexController</p> * <p>Description: </p> * <p>Company: www.itcast.cn</p> * @version 1.0 */@Controllerpublic class IndexController { @Value("${AD1_CONTENT_CID}") private Long AD1_CONTENT_CID; @Value("${AD1_WIDTH}") private Integer AD1_WIDTH; @Value("${AD1_WIDTH_B}") private Integer AD1_WIDTH_B; @Value("${AD1_HEIGHT}") private Integer AD1_HEIGHT; @Value("${AD1_HEIGHT_B}") private Integer AD1_HEIGHT_B; @Autowired private ContentService contentService; @RequestMapping("/index") public String showIndex(Model model) { // 取内容分类id,需要从属性文件中取 // 根据内容分类id查询内容列表 List<TbContent> contentList = contentService.getContentList(AD1_CONTENT_CID); List<Ad1Node> ad1NodeList = new ArrayList<Ad1Node>(); for (TbContent tbContent : contentList) { Ad1Node node = new Ad1Node(); node.setAlt(tbContent.getSubTitle()); node.setHref(tbContent.getUrl()); node.setSrc(tbContent.getPic()); node.setSrcB(tbContent.getPic2()); node.setHeight(AD1_HEIGHT); node.setHeightB(AD1_HEIGHT_B); node.setWidth(AD1_WIDTH); node.setWidthB(AD1_WIDTH_B); ad1NodeList.add(node); } // 将List集合转成json字符串 String json = JsonUtils.objectToJson(ad1NodeList); model.addAttribute("ad1", json); return "index"; }}
可以看到IndexController类中有很多变量都是从配置文件中去获取的,配置文件(resource.properties)的内容如下:
# 首页大广告位的内容分类idAD1_CONTENT_CID=89AD1_WIDTH=670AD1_WIDTH_B=550AD1_HEIGHT=240AD1_HEIGHT_B=240
好了,代码写完后,我们重新打包taotao-content工程,打包完之后重启taotao-content工程,然后启动taotao-portal-web工程。如下图所示,可以看到下面4个数字图标,只是没有图片,这是因为数据库表中的图片地址不正确而已。我们可以删掉原来的数据,再重新向tb_content表中添加几条数据。
重新添加的数据如下图所示。
下面再到首页去观察,如下图所示,发现轮播图已经好了。
- 淘淘商城系列——首页轮播图展示
- 淘淘商城系列——首页跳转到搜索页面
- 淘淘商城系列——展示后台管理页面
- 淘淘商城系列——实现商品详情页面展示
- 淘淘商城系列——展示购物车商品列表
- 淘淘商城系列——MyBatis分页插件(PageHelper)的使用以及商品列表展示
- 淘淘商城系列——搭建商品详情页面展示工程
- 淘淘商城系列——商品详情页面展示添加缓存
- 淘淘商城系列——单点登录之注册页面与登录页面的展示
- 淘淘商城系列——利用拦截器实现登录功能及订单确认页面展示
- 淘淘商城系列——内容管理
- 淘淘商城系列——初始SolrCloud
- 淘淘商城系列——freemarker入门
- 淘淘商城系列——freemarker语法
- 淘淘商城系列——SSO系统分析
- 淘淘商城系列——生成订单
- 淘淘商城--前台首页商品类目js展示
- 淘淘商城系列(四)后台商品列表展示
- 深入浅出理解视频编码H264结构
- Q21_按之字形顺序打印二叉树
- 【数据压缩】JPEG编解码
- 归并排序
- WebAPI与传统的WebService有哪些不同
- 淘淘商城系列——首页轮播图展示
- 电脑(Linux/Windows)使用SSH远程登录安卓(Android)手机实现无线传输和管理文件(图文详解)
- lintcde80 中位数
- ionic3正式发布(ionic2升级到ionic3)
- 精通Dubbo——Dubbo支持的协议的详解
- SURF特征提取算法原文翻译与理解(上)
- 工业物联网的实施有哪些关键要素?
- 进程池&线程池原理及应用
- Spring框架中的单例Beans是线程安全的么