.1 后端代码 3.1.1 服务接口层 在 pinyougou-content-interface 工程 ContentService 接口增加方法定义
/**
*根据广告类型 ID 查询列表
*@param key
*@return
*/
public List<TbContent> findByCategoryId(Long categoryId);
3.1.1 服务实现层 在 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.1.1 控制层
在 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.1 前端代码3.1.1 服务层 在 pinyougou-portal-web 工程创建 contentService.js
app.service("contentService",function($http){
//根据分类 ID 查询广告列表
this.findByCategoryId=function(categoryId){
return $http.get("content/findByCategoryId.do?categoryId="+categoryId);
}
});
3.1.1 控制层
在 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;
}
);
}
});
3.1.1 页面 （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 上添加指令
（2）修改首页轮播图
<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 rel="nofollow" href="{{item.url}}">
<img src="{{item.pic}}" />
</a>
</div>
</div>
<a rel="nofollow" href="#myCarousel" data-slide="prev" class="carousel-control left">
‹</a><a rel="nofollow" href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>
启动后地址栏输入 http://localhost:9103/index.html 即可看到首页效果
