实现轮播广告图根据后台设置的广告列表动态产生
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); } }
