淘淘商城專案 第四天總結

小飛俠之科比發表於2018-04-07

1.   課程計劃

第四天:

1、前臺系統搭建

2、商城首頁展示

3、Cms系統的實現

a)        內容分類管理

b)       內容管理

4、前臺內容動態展示

 

2.   商城首頁展示


系統架構:


頁面位置:



2.1. 工程搭建

可以參考taotao-manager-web工程搭建

2.2. 功能分析

請求的url:/index

Web.xml中的歡迎頁配置:

http://localhost:8082/index.html

引數:沒有

返回值:String 邏輯檢視




@Controller
public class IndexController {

	@RequestMapping("/index")
	public String showIndex() {
		return "index";
	}
}

3.   首頁動態展示分析

內容資訊要從資料庫中獲得

3.1. 動態展示分析

1、內容需要進行分類

2、分類下有子分類,需要動態管理。

3、分類下有內容列表

4、單點的內容資訊

a)        有圖片

b)       有連結

c)        有標題

d)       有價格

e)        包含大文字型別,可以作為公告

 

需要一個內容分類表和一個內容表。內容分類和內容表是一對多的關係。

內容分類表,需要儲存樹形結構的資料。

內容分類表:tb_content_category

內容表:tb_content

 

需要有後臺來維護內容資訊。Cms系統。




需要建立一個內容服務系統。可以參考taotao-manager建立。

Taotao-content:聚合工程打包方式pom

|--taotao-content-interfacejar

|--taotao-content-Service  war


4.   內容服務系統建立

 

4.1. Taotao-content


4.1.1.   Pom檔案



<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>com.taotao</groupId>
		<artifactId>taotao-parent</artifactId>
		<version>0.0.1-SNAPSHOT</version>
	</parent>
	<groupId>com.taotao</groupId>
	<artifactId>taotao-content</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>pom</packaging>
	<dependencies>
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-common</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
	</dependencies>
	<!-- 配置tomcat外掛 -->
	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<configuration>
					<port>8083</port>
					<path>/</path>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>


4.2. taotao-content-interface

4.2.1.   Pom檔案



<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>com.taotao</groupId>
		<artifactId>taotao-content</artifactId>
		<version>0.0.1-SNAPSHOT</version>
	</parent>
	<artifactId>taotao-content-interface</artifactId>
	<dependencies>
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-manager-pojo</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
	</dependencies>
</project>

4.3. taotao-content-service

4.3.1.   Pom檔案



<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>com.taotao</groupId>
		<artifactId>taotao-content</artifactId>
		<version>0.0.1-SNAPSHOT</version>
	</parent>
	<artifactId>taotao-content-service</artifactId>
	<packaging>war</packaging>
	<dependencies>
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-manager-dao</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-content-interface</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<!-- spring的依賴 -->
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aspects</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jms</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context-support</artifactId>
		</dependency>
		<!-- dubbo相關 -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>dubbo</artifactId>
			<!-- 排除依賴 -->
			<exclusions>
				<exclusion>
					<groupId>org.springframework</groupId>
					<artifactId>spring</artifactId>
				</exclusion>
				<exclusion>
					<groupId>org.jboss.netty</groupId>
					<artifactId>netty</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.apache.zookeeper</groupId>
			<artifactId>zookeeper</artifactId>
		</dependency>
		<dependency>
			<groupId>com.github.sgroschupf</groupId>
			<artifactId>zkclient</artifactId>
		</dependency>
	</dependencies>
</project>

4.4. 框架整合

參考taotao-manager


5.   Cms系統實現

5.1. 內容分類管理

5.1.1.   展示內容分類


功能分析

請求的url:/content/category/list

請求的引數:id,當前節點的id。第一次請求是沒有引數,需要給預設值“0”

響應資料:List<EasyUITreeNode>(@ResponseBody)

Json資料。

[{id:1,text:節點名稱,state:open(closed)},

{id:2,text:節點名稱2,state:open(closed)},

{id:3,text:節點名稱3,state:open(closed)}]

業務邏輯:

1、取查詢引數id,parentId

2、根據parentId查詢tb_content_category,查詢子節點列表。

3、得到List<TbContentCategory>

4、把列表轉換成List<EasyUITreeNode>

 

Dao層

使用逆向工程


Service

引數:longparentId

返回值:List<EasyUITreeNode>



@Service
public class ContentCategoryServiceImpl implements ContentCategoryService {

	@Autowired
	private TbContentCategoryMapper contentCategoryMapper;
	
	@Override
	public List<EasyUITreeNode> getContentCategoryList(long parentId) {
		// 1、取查詢引數id,parentId
		// 2、根據parentId查詢tb_content_category,查詢子節點列表。
		TbContentCategoryExample example = new TbContentCategoryExample();
		//設定查詢條件
		Criteria criteria = example.createCriteria();
		criteria.andParentIdEqualTo(parentId);
		//執行查詢
		// 3、得到List<TbContentCategory>
		List<TbContentCategory> list = contentCategoryMapper.selectByExample(example);
		// 4、把列表轉換成List<EasyUITreeNode>ub
		List<EasyUITreeNode> resultList = new ArrayList<>();
		for (TbContentCategory tbContentCategory : list) {
			EasyUITreeNode node = new EasyUITreeNode();
			node.setId(tbContentCategory.getId());
			node.setText(tbContentCategory.getName());
			node.setState(tbContentCategory.getIsParent()?"closed":"open");
			//新增到列表
			resultList.add(node);
		}
		return resultList;
	}

}

1.1.1.1.1       釋出服務

表現層

1.1.1.1.2       引用服務

Taotao-manager-web

依賴taotao-content-interface模組



1.1.1.1.3       Controller


@Controller
@RequestMapping("/content/category")
public class ContentCategoryController {

	@Autowired
	private ContentCategoryService contentCategoryService;
	
	@RequestMapping("/list")
	@ResponseBody
	public List<EasyUITreeNode> getContentCatList(
			@RequestParam(value="id", defaultValue="0") Long parentId) {
		
		List<EasyUITreeNode> list = contentCategoryService.getContentCategoryList(parentId);
		return list;
	}
}

5.1.1.   新增節點

功能分析


請求的url:/content/category/create

請求的引數:

Long parentId

String name

響應的結果:

json資料,TaotaoResult,其中包含一個物件,物件有id屬性,新生產的內容分類id

業務邏輯:

1、接收兩個引數:parentId、name

2、向tb_content_category表中插入資料。

a)        建立一個TbContentCategory物件

b)       補全TbContentCategory物件的屬性

c)        向tb_content_category表中插入資料

3、判斷父節點的isparent是否為true,不是true需要改為true。

4、需要主鍵返回。

5、返回TaotaoResult,其中包裝TbContentCategory物件

 

Dao層

可以使用逆向工程。

需要新增主鍵返回:


注意:修改完程式碼後,需要向本地倉庫安裝taotao-manager-dao

Service層

引數:parentId、name

返回值:返回TaotaoResult,其中包裝TbContentCategory物件



@Override
	public TaotaoResult addContentCategory(long parentId, String name) {
		// 1、接收兩個引數:parentId、name
		// 2、向tb_content_category表中插入資料。
		// a)建立一個TbContentCategory物件
		TbContentCategory tbContentCategory = new TbContentCategory();
		// b)補全TbContentCategory物件的屬性
		tbContentCategory.setIsParent(false);
		tbContentCategory.setName(name);
		tbContentCategory.setParentId(parentId);
		//排列序號,表示同級類目的展現次序,如數值相等則按名稱次序排列。取值範圍:大於零的整數
		tbContentCategory.setSortOrder(1);
		//狀態。可選值:1(正常),2(刪除)
		tbContentCategory.setStatus(1);
		tbContentCategory.setCreated(new Date());
		tbContentCategory.setUpdated(new Date());
		// c)向tb_content_category表中插入資料
		contentCategoryMapper.insert(tbContentCategory);
		// 3、判斷父節點的isparent是否為true,不是true需要改為true。
		TbContentCategory parentNode = contentCategoryMapper.selectByPrimaryKey(parentId);
		if (!parentNode.getIsParent()) {
			parentNode.setIsParent(true);
			//更新父節點
			contentCategoryMapper.updateByPrimaryKey(parentNode);
		}
		// 4、需要主鍵返回。
		// 5、返回TaotaoResult,其中包裝TbContentCategory物件
		return TaotaoResult.ok(tbContentCategory);
	}

釋出服務。


表現層

請求的url:/content/category/create

請求的引數:

Long parentId

String name

響應的結果:

json資料,TaotaoResult



@RequestMapping("/create")
	@ResponseBody
	public TaotaoResult createCategory(Long parentId, String name) {
		TaotaoResult result = contentCategoryService.addContentCategory(parentId, name);
		return result;
	}

5.1.3.   內容分類重新命名、刪除

重新命名

請求的url:/content/category/update

引數:id,當前節點id。name,重新命名後的名稱。

業務邏輯:根據id更新記錄。

返回值:返回TaotaoResult.ok()

 

作業。

刪除節點


請求的url:/content/category/delete/

引數:id,當前節點的id。

響應的資料:json。TaotaoResult。

業務邏輯:

1、根據id刪除記錄。

2、判斷父節點下是否還有子節點,如果沒有需要把父節點的isparent改為false

3、如果刪除的是父節點,子節點要級聯刪除。

兩種解決方案:

1)如果判斷是父節點不允許刪除。

2)遞迴刪除。

作業。

 

5.1. 內容管理

5.2.1.   功能點分析

1、內容列表查詢(作業)

2、新增內容

3、編輯內容(作業)

4、刪除內容(作業)

5.2.1.   內容列表查詢

請求的url:/content/query/list

引數:categoryId 分類id

響應的資料:json資料

{total:查詢結果總數量,rows[{id:1,title:aaa,subtitle:bb,...}]}

EasyUIDataGridResult


描述商品資料List<TbContent>

查詢的表:tb_content

業務邏輯:

根據內容分類id查詢內容列表。要進行分頁處理。

 

5.2.3.   新增內容

功能分析




提交表單請求的url:/content/save

引數:表單的資料。使用pojo接收TbContent

返回值:TaotaoResult(json資料)

業務邏輯:

1、把TbContent物件屬性補全。

2、向tb_content表中插入資料。

3、返回TaotaoResult

 

Dao

逆向工程

 

Service

引數:TbContent

返回值:TaotaoResult



@Service
public class ContentServiceImpl implements ContentService {

	@Autowired
	private TbContentMapper contentMapper;
	
	@Override
	public TaotaoResult addContent(TbContent content) {
		//補全屬性
		content.setCreated(new Date());
		content.setUpdated(new Date());
		//插入資料
		contentMapper.insert(content);
		return TaotaoResult.ok();
	}

}

釋出服務

引用服務

Toatao-manager-web工程中引用。

Controller

提交表單請求的url:/content/save

引數:表單的資料。使用pojo接收TbContent

返回值:TaotaoResult(json資料)




@Controller
public class ContentController {

	@Autowired
	private ContentService contentService;
	
	@RequestMapping("/content/save")
	@ResponseBody
	public TaotaoResult addContent(TbContent content) {
		TaotaoResult result = contentService.addContent(content);
		return result;
	}
}

6.   首頁輪播圖展示

Taotao-portal-web工程中,動態展示內容資訊。

 

6.1. 功能分析

只需要動態生成一個json資料,輪播圖就可以動態展示:




Json資料格式:

[
    {
        "srcB": "http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg",
        "height": 240,
        "alt": "",
        "width": 670,
        "src": "http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg",
        "widthB": 550,
        "href": "http://sale.jd.com/act/e0FMkuDhJz35CNt.html?cpdad=1DLSUE",
        "heightB": 240
}
]

從tb_content表中取資料,根據內容分類id查詢列表。內容分類id固定,需要配置在屬性檔案中。

List<TbContent>

圖片的width、height配置在屬性檔案中。

Alt屬性從title中取。

Src->pic

srcB->pic2

Href->url

 

需要建立一個pojo轉換成頁面需要的json資料格式。

public class Ad1Node {

	private String srcB;
	private String height;
	private String alt;
	private String width;
	private String src;
	private String widthB;
	private String href;
	private String heightB;
}

6.1. Dao層

從tb_content表中取資料,根據內容分類id查詢列表。

可以使用逆向工程

 

6.3. Service層

引數:longcategoryId

返回值:List<TbContent>


@Override
	public List<TbContent> getContentList(long cid) {
		//根據cid查詢內容列表
		TbContentExample example = new TbContentExample();
		//設定查詢條件
		Criteria criteria = example.createCriteria();
		criteria.andCategoryIdEqualTo(cid);
		//執行查詢
		List<TbContent> list = contentMapper.selectByExample(example);
		return list;
	}

6.3.1.   釋出服務



6.4. 表現層

Taotao-portal-web中實現。

6.4.1.   引用服務

6.4.1.   Controller

在首頁展示之前,對資料進行處理,然後展示首頁,需要在IndexController中實現。

@Controller
public class IndexController {

	@Autowired
	private ContentService contentService;
	
	@Value("${AD1_CID}")
	private Long AD1_CID;
	@Value("${AD1_HEIGHT}")
	private Integer AD1_HEIGHT;
	@Value("${AD1_WIDTH}")
	private Integer AD1_WIDTH;
	@Value("${AD1_HEIGHT_B}")
	private Integer AD1_HEIGHT_B;
	@Value("${AD1_WIDTH_B}")
	private Integer AD1_WIDTH_B;
	
	@RequestMapping("/index")
	public String showIndex(Model model) {
		//取輪播圖的內容資訊
		List<TbContent> contentList = contentService.getContentList(AD1_CID);
		//轉換成Ad1NodeList
		List<Ad1Node> ad1List = new ArrayList<>();
		for (TbContent tbContent : contentList) {
			Ad1Node node = new Ad1Node();
			node.setAlt(tbContent.getTitle());
			node.setHeight(AD1_HEIGHT);
			node.setHeightB(AD1_HEIGHT_B);
			node.setWidth(AD1_WIDTH);
			node.setWidthB(AD1_WIDTH_B);
			node.setHref(tbContent.getUrl());
			node.setSrc(tbContent.getPic());
			node.setSrcB(tbContent.getPic2());
			//新增到列表
			ad1List.add(node);
		}
		//把資料傳遞給頁面。
		model.addAttribute("ad1", JsonUtils.objectToJson(ad1List));
		
		return "index";
	}
}



相關文章