代码已上传至GitHub
下载地址:https://github.com/ylw-github/pingyougou.git
版本:2646456bff33de6ccecb9a598b156fecef78abed

需要实现广告类型表和广告表的增删改查

准备工作

1.构建工程

(1)pinyougou-content-interface

引入依赖 pinyougou-pojo
创建包 com.pinyougou.content.service

(2)pinyougou-content-service (WAR)

为 pinyougou-content-service 工程添加 web.xml
创建包 com.pinyougou.content.service.impl
添加 spring 相关配置文件
36分布式电商项目 - 运营商后台(广告管理)_# 分布式电商
applicationContext-service.xml
36分布式电商项目 - 运营商后台(广告管理)_# 分布式电商_02
注意:我们目前有两个服务工程,当两个工程同时启动时会发生端口冲突,因为连接dubbox 注册中心的端口默认是 20880。所以我们需要配置一下 pinyougou-content-service 工程的 dubbox 端口。

(3)pinyougou-manager-web 工程引入依赖pinyougou-content-interface

其它代码的拷入 …

广告管理

1.广告分类管理

修改content.html

<input type="checkbox" ng-model="entity.status" ng-true-value="1" ng-false-value="0">

修改 contentController.js

$scope.status=["无效","有效"];

修改 content.html 的列表

{{status[entity.status]}}

2.广告图片上传

将 pinyougou-shop-web 的以下资源拷贝到 pinyougou-manager-web

(1)UploadController.java
(2)uploadService.js
(3)application.properties
(4)fdfs_client.conf

在 pinyougou-manager-web 的 springmvc.xml 中添加配置

<!-- 配置多媒体解析器 -->
<bean id="multipartResolver"
	class="org.springframework.web.multipart.commons.CommonsMultipartResolver"<property name="defaultEncoding" value="UTF-8"></property>
	<!-- 设定文件上传的最大值 5MB,5*1024*1024 -->
	<property name="maxUploadSize" value="5242880">	</property>
</bean>

在 contentController.js 引入 uploadService

//控制层
app.controller('contentController' ,function($scope,$controller ,contentService,up
loadService){

在 content.html 引入 JS

<script type="text/javascript" src="../js/service/uploadService.js"> </script>

在 contentController.js 编写代码

//上传广告图
$scope.uploadFile=function(){
uploadService.uploadFile().success(
	function(response){
	if(response.success){
		$scope.entity.pic=response.message;
	}else{
		alert("上传失败!");
	}
	}
).error(
		function(){
			alert("上传出错!");
		}
	);
}

修改 content.html 实现上传功能

<tr> 
	<td>图片</td>
	 <td>
		 <input type="file" id="file">
		 <button ng-click="uploadFile()">上传</button> 
		 <img alt="" src="{{entity.pic}}" height="100px" width="200px">
	 </td>
</tr>

列表中显示图片

<img alt="" src="{{entity.pic}}" height="50px" width="100px">

3.广告类目选择

将 contentCategoryService 引入 contentController

在 content.html 引入 contentCategoryService.js

在 contentController.js 中添加代码

//加载广告分类列表
$scope.findContentCategoryList=function(){
	contentCategoryService.findAll().success(
		function(response){
			$scope.contentCategoryList=response;
		}
	);
}

在 content.html 初始化调用此方法

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="contentController" ng-init="findContentCategoryList()">

将广告分类改为下拉列表

<select class="form-control" ng-model="entity.categoryId" ng-options="item.id as item.name for item in contentCategoryList"></select>