Java之品优购课程讲义_day08（4）

.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  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>

启动后地址栏输入 http://localhost:9103/index.html 即可看到首页效果

转载于:https://blog.51cto.com/13517854/2170029