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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

【郑州校区】品优购电商系统开发第 8 章 三

3.网站首页-广告展示
3.1 需求分析
修改首页,当其轮播广告图根据后台设置的广告列表动态产生。
3.2 准备工作
3.2.1 工程搭建
创建 war 模块 pinyougou-portal-web ,此工程为网站前台的入口,参照其它 war 模块编写配置文件。不需要添加 SpringSecurity 框架

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


2)在 js 文件夹创建 base.js base_pagination.js ,创建 service controller 文件夹

3.3 后端代码
3.3.1 服务接口层
pinyougou-content-interface 工程 ContentService 接口增加方法定义
[AppleScript] 纯文本查看 复制代码
/**
* 根据广告类型 ID 查询列表
* @param key
* @return
*/
public List<TbContent> findByCategoryId(Long categoryId);



3.3.2 服务实现层
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.3.3 控制层
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.4 前端代码
3.4.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.4.2 控制层
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.4.3 页面
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 上添加指令
[AppleScript] 纯文本查看 复制代码
<body
ng-app="pinyougou"
ng-controller="contentController"
ng-init="findByCategoryId(1)">

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 即可看到首页效果



1 个回复

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