36分布式电商项目 - 运营商后台(广告管理)

简介: 36分布式电商项目 - 运营商后台(广告管理)

代码已上传至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>


目录
相关文章
|
4月前
|
Java 调度 Maven
【分布式任务调度平台 XXL-JOB 急速入门】从零开始将 XXL-JOB 接入到自己的项目(下)
【分布式任务调度平台 XXL-JOB 急速入门】从零开始将 XXL-JOB 接入到自己的项目(下)
117 0
|
1月前
|
SpringCloudAlibaba Java 持续交付
【构建一套Spring Cloud项目的大概步骤】&【Springcloud Alibaba微服务分布式架构学习资料】
【构建一套Spring Cloud项目的大概步骤】&【Springcloud Alibaba微服务分布式架构学习资料】
156 0
|
4月前
|
SQL 负载均衡 监控
【分布式任务调度平台 XXL-JOB 急速入门】从零开始将 XXL-JOB 接入到自己的项目(上)
【分布式任务调度平台 XXL-JOB 急速入门】从零开始将 XXL-JOB 接入到自己的项目
100 0
|
1月前
|
安全 区块链 UED
带你读《自主管理身份:分布式数字身份和可验证凭证》精品文章合集
带你读《自主管理身份:分布式数字身份和可验证凭证》精品文章合集
|
2月前
|
存储 NoSQL 文件存储
C++ 哈希表企业级项目运用---淘宝分布式文件系统
C++ 哈希表企业级项目运用---淘宝分布式文件系统
|
3月前
|
网络协议 Devops 大数据
【分布式】大型互联网项目特点
【1月更文挑战第25天】【分布式】大型互联网项目特点
|
3月前
|
存储 缓存 监控
【分布式】大型互联网项目架构目标
【1月更文挑战第25天】【分布式】大型互联网项目架构目标
|
3月前
|
Java API
分布式锁【分布式锁概述、业务介绍、创建SpringBoot项目】(一)-全面详解(学习总结---从入门到深化)
分布式锁【分布式锁概述、业务介绍、创建SpringBoot项目】(一)-全面详解(学习总结---从入门到深化)
21 0
|
4月前
|
编译器 定位技术 开发工具
分布式版本控制系统Git的下载、安装与使用其复制GitHub项目代码的方法
分布式版本控制系统Git的下载、安装与使用其复制GitHub项目代码的方法
|
4月前
|
消息中间件 Java 关系型数据库
【Spring Boot+Kafka+Mysql+HBase】实现分布式优惠券后台应用系统(附源码)
【Spring Boot+Kafka+Mysql+HBase】实现分布式优惠券后台应用系统(附源码)
92 2

热门文章

最新文章