黑马程序员技术交流社区

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

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

2.3 广告管理
2.3.1 广告图片上传
pinyougou-shop-web 的以下资源拷贝到 pinyougou-manager-web
1UploadController.java
2uploadService.js
3application.properties
4fdfs_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]}}








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