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

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

2.3 广告管理
2.3.1 广告图片上传
将 pinyougou-shop-web 的以下资源拷贝到 pinyougou-manager-web
（1）UploadController.java
（2）uploadService.js
（3）application.properties
（4）fdfs_client.conf
在 pinyougou-manager-web 的 springmvc.xml 中添加配置

[AppleScript] 纯文本查看 复制代码

<!-- 配置多媒体解析器 -->
<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

[AppleScript] 纯文本查看 复制代码

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

在 content.html 引入 JS

[AppleScript] 纯文本查看 复制代码

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

在 contentController.js 编写代码

[AppleScript] 纯文本查看 复制代码

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

修改 content.html 实现上传功能

[AppleScript] 纯文本查看 复制代码

<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>

列表中显示图片

[AppleScript] 纯文本查看 复制代码

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

2.3.2 广告类目选择
将 contentCategoryService 引入 contentController
在 content.html 引入 contentCategoryService.js
在 contentController.js 中添加代码

[AppleScript] 纯文本查看 复制代码

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

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

[AppleScript] 纯文本查看 复制代码

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

将广告分类改为下拉列表

[AppleScript] 纯文本查看 复制代码

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

2.3.3 广告状态
修改 content.html

[AppleScript] 纯文本查看 复制代码

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

修改 contentController.js

[AppleScript] 纯文本查看 复制代码

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

修改 content.html 的列表

[AppleScript] 纯文本查看 复制代码

{{status[entity.status]}}

帐号		自动登录	找回密码
密码			加入黑马

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

1 个回复

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