淘淘商城專案 第四天總結
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";
}
}
相關文章
- 淘淘商城(6)
- 淘淘商城(2)
- 重構商城App專案——知識總結APP
- 淘淘商城問題-啟動maven專案,沒有出現Starting ProtocolHandler ["http-bio-8080"]MavenProtocolHTTP
- 【Vue專案總結】後臺管理專案總結Vue
- BBS專案專案總結
- 番茄專案總結
- Nuxt專案總結UX
- 今日專案總結
- Laravel 專案總結Laravel
- 摘要商城總結
- 第四天 專案衝刺
- 小程式實戰踩坑之B2B商城專案總結
- Vue + Canvas專案總結VueCanvas
- Vue專案常用總結Vue
- 爬蟲專案總結爬蟲
- 小程式專案-總結
- ReactNative 專案工作總結React
- Headline 專案總結中
- 小程式專案總結
- React-Native專案總結React
- 幾次外包專案總結
- vue個人小專案總結Vue
- OpenGL ES專案總結一
- vue專案問題總結Vue
- MySQL專案實戰總結MySql
- 團隊專案總結反思
- 日常專案經驗總結
- 商城專案--工程搭建
- 小米商城專案(JSP+Servlet專案)JSServlet
- 專案review步驟還有專案交接總結View
- 實習專案開發總結
- 《軟體專案經驗總結》
- 伺服器部署專案總結伺服器
- 專案管理PMP過關總結專案管理
- 一個React專案總結(toB)React
- vuejs專案效能優化總結VueJS優化
- Spring Boot+Mybatis專案總結Spring BootMyBatis