A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 谷粒姐姐 于 2018-9-4 11:50 编辑

3.1 后端代码
3.1.1 服务接口层
在 pinyougou-content-interface 工程 ContentService 接口增加方法定义
[AppleScript] 纯文本查看 复制代码
/**

*根据广告类型 ID 查询列表

*@param  key

*@return

*/

public  List<TbContent>  findByCategoryId(Long  categoryId);
3.1.1 服务实现层
在 pinyougou-content-service 工程 ContentServiceImpl 类增加方法
[AppleScript] 纯文本查看 复制代码
@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
[AppleScript] 纯文本查看 复制代码
@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
[AppleScript] 纯文本查看 复制代码
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
[AppleScript] 纯文本查看 复制代码
// 广 告 控 制 层 ( 运 营 商 后 台 ) 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
[AppleScript] 纯文本查看 复制代码
<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 上添加指令
1536032963(1).jpg
2)修改首页轮播图
[AppleScript] 纯文本查看 复制代码
<!--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>
启动        http://localhost:9103/index.html        效果
图片4.png

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马