黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 8 章三 [打印本页]

作者: 我是楠楠 时间: 2020-6-2 15:08
标题: 【郑州校区】品优购电商系统开发第 8 章三

【郑州校区】品优购电商系统开发第 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 即可看到首页效果

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2