代码已上传至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 相关配置文件
applicationContext-service.xml
注意:我们目前有两个服务工程,当两个工程同时启动时会发生端口冲突,因为连接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>