37分布式电商项目 - 网站首页（广告展示）

最新推荐文章于 2020-08-18 21:47:40 发布

杨林伟

最新推荐文章于 2020-08-18 21:47:40 发布

阅读量466

点赞数 3

分类专栏： # 分布式电商

本文链接：https://blog.csdn.net/qq_20042935/article/details/95076905

版权

分布式电商专栏收录该内容

123 篇文章 14 订阅

订阅专栏

实现轮播广告图根据后台设置的广告列表动态产生

1.工程搭建

创建 war 模块 pinyougou-portal-web ，此工程为网站前台的入口，参照其它 war 模块编写配置文件。

2.前端代码

1.拷贝资源：资源文件夹中 “前台页面”目录下的 index.html 以及相关目录拷贝到pinyougou-portal-web

2.添加 angularJS 库

3.在 js 文件夹创建 base.js 和 base_pagination.js，创建 service 和 controller 文件夹

4.服务层
在 pinyougou-portal-web 工程创建 contentService.js

app.service("contentService",function($http){
//根据分类 ID 查询广告列表
	this.findByCategoryId=function(categoryId){
	return $http.get("content/findByCategoryId.do?categoryId="+categoryId);
	}
});

5.控制层
在 pinyougou-portal-web 创建 contentController.js

//广告控制层（运营商后台）
app.controller("contentController",function($scope,contentService){
	$scope.contentList=[];//广告集合
	$scope.findByCategoryId=function(categoryId){
		contentService.findByCategoryId(categoryId).success(
		function(response){
			$scope.contentList[categoryId]=response;
		}
		);
	}
});

6.页面
（1）修改 pinyougou-portal-web 工程的 index.html 引入 JS

<script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script>
<script type="text/javascript" src="js/base.js"> </script>
<script type="text/javascript" src="js/service/contentService.js"> </script>
<script type="text/javascript" src="js/controller/contentController.js"> </script>

在 body 上添加指令

<body ng-app="pinyougou" ng-controller="contentController"
ng-init="findByCategoryId(1)">

（2）修改首页轮播图

<!--banner 轮播-->
<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel 
slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="{{$index}}"
class="{{$index==0?'active':''}}" ng-repeat="item in contentList[1]" ></li>
</ol>
<div class="carousel-inner">
<div class="{{$index==0?'active':''}} item" ng-repeat="item in contentList[1]">
<a href="{{item.url}}">
<img src="{{item.pic}}" />
</a>
 </div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
‹</a><a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>

3.后端代码

1.服务接口层
在 pinyougou-content-interface 工程 ContentService 接口增加方法定义

/**
* 根据广告类型 ID 查询列表
* @param key
* @return
*/
public List<TbContent> findByCategoryId(Long categoryId);

2.服务实现层
在 pinyougou-content-service 工程 ContentServiceImpl 类增加方法

@Override
public List<TbContent> findByCategoryId(Long categoryId) {
	//根据广告分类 ID 查询广告列表
	TbContentExample contentExample=new TbContentExample();
	Criteria criteria2 = contentExample.createCriteria();
	criteria2.andCategoryIdEqualTo(categoryId);
	criteria2.andStatusEqualTo("1");//开启状态
	contentExample.setOrderByClause("sort_order");//排序
	return contentMapper.selectByExample(contentExample);
}

3.控制层
在 pinyougou-portal-web 创建控制器类ContentController

@RestController
@RequestMapping("/content")
public class ContentController {
	@Reference
	private ContentService contentService;
	/**
	* 根据广告分类 ID 查询广告列表
	* @param categoryId
	* @return
	*/
	@RequestMapping("/findByCategoryId")
	public List<TbContent> findByCategoryId(Long categoryId) {
		return contentService.findByCategoryId(categoryId);
	}
}

杨林伟

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
37分布式电商项目 - 网站首页（广告展示）

实现轮播广告图根据后台设置的广告列表动态产生1.工程搭建创建 war 模块 pinyougou-portal-web ，此工程为网站前台的入口，参照其它 war 模块编写配置文件。2.前端代码1.拷贝资源：资源文件夹中 “前台页面”目录下的 index.html 以及相关目录拷贝到pinyougou-portal-web2.添加 angularJS 库3.在 js 文件夹创建 base...
复制链接

扫一扫