品優購項目記錄:day08

今日目標:

(1)瞭解網站前臺的頁面以及廣告相關表結構

(2)完成運營商廣告類型管理和廣告管理

(3)完成前臺工程廣告輪播圖的展示

(4)使用 SpringDataRedis 操作 Redis 緩存

(5)使用SpringDataRedis 實現廣告的緩存

 

目錄

1、運營商後臺-廣告類型管理和廣告管理

1.1 廣告管理圖片上傳功能

1.2 內容類目ID下拉選擇

1.3 狀態字段修改爲複選框選擇

2、網站首頁-廣告展示

2.1 後端

2.2 前端

2.3 引入緩存


 

1、運營商後臺-廣告類型管理和廣告管理

準備工作:搭建服務層工程(pinyougou-content-interface 以及 pinyougou-content-service),參考sellergoods服務層進行搭建。

 

 

1.1 廣告管理圖片上傳功能

(1)將shop-web中的圖片上傳相關JS、控制層類以及配置文件複製到manager-web中

 

(2)在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>

(3)前端:在manager-web的goodsController.js中注入uploadService服務,並在頁面中引入uploadService.js文件

 

(4)前端:在manager-web的在goodsController.js中新增方法

    // 上傳文件
    $scope.uploadFile = function () {
        uploadService.uploadFile().success(
            function (rtn) {
                if (rtn.success) {
                    $scope.image_entity.url = rtn.message;
                } else {
                    alert(rtn.message);
                }
            }
        );
    }

(5)前端:頁面修改綁定變量部分

 

 

1.2 內容類目ID下拉選擇

(1)前端:在manager-web的contentController.js中注入contentCategory服務,並在頁面引入selece2相關資contentCategoryService.js文件

 

(2)前端:在manager-web的contentController.js中添加方法

    $scope.findContentCategoryList=function(){
        contentCategoryService.findAll().success(
            function(response){
                $scope.contentCategoryList=response;
            }
        );
    }

 

(3)前端:在manager-web的content.html的內容分類ID處引入下拉框,並綁定變量

 

1.3 狀態字段修改爲複選框選擇

(1)前端:修改頁面

 

 

 

2、網站首頁-廣告展示

準備工作:搭建前臺頁面工程(pinyougou-portal-web),此工程爲網站前臺的入口,參照其它war模塊編寫配置文件。不需要添加SpringSecurity框架

 

2.1 後端

(1) 服務層接口(content-interface),新增方法

	/**
	 * 按廣告分類ID查詢廣告
	 *
	 * @param categoryId
	 * @return java.util.List<com.pinyougou.pojo.TbContent>
	 */
	List<TbContent> findByCategoryId(Long categoryId);

 

(2) 服務層實現(content-service),新增實現

	@Override
	public List<TbContent> findByCategoryId(Long categoryId) {
		// 封裝查詢條件
		TbContentExample example = new TbContentExample();
		example.createCriteria().andCategoryIdEqualTo(categoryId).
				andStatusEqualTo(TbContent.STATUS_YES);
		// 排序
		example.setOrderByClause("sort_order");
		// 執行查詢
		return contentMapper.selectByExample(example);
	}

 

(3) 控制層(portal-web),新增類ContentController

package com.pinyougou.portal.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.pinyougou.content.service.ContentService;
import com.pinyougou.pojo.TbContent;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * 首頁廣告控制層
 * Author xushuai
 * Description
 */
@RestController
@RequestMapping("/content")
public class ContentController {

    @Reference
    private ContentService contentService;


    /**
     * 獲取廣告內容
     *
     * @param categoryId 廣告分類ID
     * @return java.util.List<com.pinyougou.pojo.TbContent>
     */
    @RequestMapping("/findByCategoryId")
    public List<TbContent> findByCategoryId(Long categoryId) {
        return contentService.findByCategoryId(categoryId);
    }
}

 

2.2 前端

(1)創建contentService.js,新增方法

app.service('contentService',function ($http) {

    // 獲取指定廣告類型的廣告
    this.findByCategoryId = function (categoryId) {
        return $http.get('content/findByCategoryId.do?category=' + categoryId);
    }
})

 

(2)創建contentController.js,新增方法

app.controller('contentController',function ($scope,contentService) {

    // 所有廣告的列表
    $scope.contentList = [];
    // 查詢指定廣告分類的廣告
    $scope.findByCategoryId = function (categoryId) {
        contentService.findByCategoryId(categoryId).success(
            function (rtn) {
                // 將categoryId作爲下標,將返回結果存入廣告列表
                $scope.contentList[categoryId] = rtn;
            }
        );
    }
});

(3)在portal-web中的index.html引入相關js文件和css文件,並編寫基本的指令

(4)頁面綁定變量,循環展示廣告

 

 

2.3 引入緩存

由於首頁一般訪問壓力較大,爲了考慮高併發,我們引入redis緩存

(1)在common工程中引入redis和spring data redis的依賴

 	 <!-- 緩存 -->
	<dependency> 
		  <groupId>redis.clients</groupId> 
		  <artifactId>jedis</artifactId> 
	</dependency> 
	<dependency> 
		  <groupId>org.springframework.data</groupId> 
		  <artifactId>spring-data-redis</artifactId> 
	</dependency>	

 

(2)後端:修改content-service中的findByCategoryId的實現

    @Override
    public List<TbContent> findByCategoryId(Long categoryId) {
        // 先從redis中查詢數據
        List<TbContent> contentList = (List<TbContent>) redisTemplate.boundHashOps("content").get(categoryId);
        if (contentList == null) {// 緩存中沒有數據
            // 封裝查詢條件
            TbContentExample example = new TbContentExample();
            example.createCriteria().andCategoryIdEqualTo(categoryId).
                    andStatusEqualTo(TbContent.STATUS_YES);
            // 排序
            example.setOrderByClause("sort_order");
            // 執行查詢
            contentList = contentMapper.selectByExample(example);
            // 將查詢到的數據存入緩存
            redisTemplate.boundHashOps("content").put(categoryId, contentList);
        }
        return contentList;
    }

 

(3)後端:修改content-service中的add、delete、update的實現,完成修改數據時同步更新緩存

    /**
     * 增加
     */
    @Override
    public void add(TbContent content) {
        contentMapper.insert(content);
        // 更新緩存
        redisTemplate.boundHashOps("content").delete(content.getCategoryId());
    }

    /**
     * 修改
     */
    @Override
    public void update(TbContent content) {
        // 刪除修改前的分類ID對應的緩存數據
        Long categoryId = contentMapper.selectByPrimaryKey(content.getId()).getCategoryId();
        redisTemplate.boundHashOps("content").delete(categoryId);

        // 執行修改
        contentMapper.updateByPrimaryKey(content);

        // 判斷是否修改了廣告分類
        if (categoryId.longValue() != content.getCategoryId().longValue()) {
            // 更新修改後的對應的分類ID的緩存數據
            redisTemplate.boundHashOps("content").delete(content.getCategoryId());
        }
    }

    /**
     * 批量刪除
     */
    @Override
    public void delete(Long[] ids) {
        for (Long id : ids) {
            // 更新緩存
            Long categoryId = contentMapper.selectByPrimaryKey(id).getCategoryId();//廣告分類ID
            redisTemplate.boundHashOps("content").delete(categoryId);
            // 執行刪除
            contentMapper.deleteByPrimaryKey(id);
        }
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章