黑马程序员技术交流社区

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

作者: 我是楠楠 时间: 2020-6-2 14:59
标题: 【郑州校区】品优购电商系统开发第 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]}}

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

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