首頁的大廣告

JS效果：
1、 點擊下面的序號選擇查詢哪個廣告
2、 自動切換
3、 點擊圖片查詢具體的頁面

以上是由前端團隊來開發。

數據結構

說明：必須提供6條數據，才能顯示效果。

如何實現？
方案一：
1、 在后臺系統中創建一張表，存儲大廣告位的廣告數據
2、 在后臺系統中對該表進行CRUD
3、 后臺系統對外提供接口服務
4、 前臺系統調用后臺系統的提供的接口服務，即可獲取到數據
5、 前臺系統獲取到數據后，封裝成前端所需要的數據結構，功能即可實現

方案二：
1、 將首頁顯示的廣告都抽象的看作是內容
2、 在后臺系統中創建一張內容表
3、 創建一個內容分類表用于區分內容的分類
4、 后臺系統對內容表以及分類表進行CRUD
5、 對外提供接口服務
6、 前端系統通過接口獲取數據，進行封裝，即可實現

內容管理系統（CMS）

內容分類管理

內容分類表

內容表

應該有的字段：
1、 圖片
2、 連接
3、 標題
4、 子標題

表結構中字段是否添加索引判斷依據是什么？ – 字段是否是查詢條件或者是排序條件。

是否將所有的字段都添加索引，來加快查詢？ – 不行的

1、 索引會占用存儲空間，索引越多，使用的存儲空間越多
2、 插入數據，存儲索引也會消耗時間，索引越多，插入數據的速度越慢

實現

創建pojo

package com.taotao.manage.pojo;import javax.persistence.Column; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table;@Table(name = "tb_content") public class Content extends BasePojo {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;@Column(name = "category_id")private Long categoryId;private String title;@Column(name = "sub_title")private String subTitle;@Column(name = "title_desc")private String titleDesc;private String url;private String pic;private String pic2;private String content;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public Long getCategoryId() {return categoryId;}public void setCategoryId(Long categoryId) {this.categoryId = categoryId;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getSubTitle() {return subTitle;}public void setSubTitle(String subTitle) {this.subTitle = subTitle;}public String getTitleDesc() {return titleDesc;}public void setTitleDesc(String titleDesc) {this.titleDesc = titleDesc;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public String getPic() {return pic;}public void setPic(String pic) {this.pic = pic;}public String getPic2() {return pic2;}public void setPic2(String pic2) {this.pic2 = pic2;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}} package com.taotao.manage.pojo;import javax.persistence.Column; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table;@Table(name = "tb_content_category") public class ContentCategory extends BasePojo {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;@Column(name = "parent_id")private Long parentId;private String name;private Integer status;@Column(name = "sort_order")private Integer sortOrder;@Column(name = "is_parent")private Boolean isParent;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public Long getParentId() {return parentId;}public void setParentId(Long parentId) {this.parentId = parentId;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getStatus() {return status;}public void setStatus(Integer status) {this.status = status;}public Integer getSortOrder() {return sortOrder;}public void setSortOrder(Integer sortOrder) {this.sortOrder = sortOrder;}public Boolean getIsParent() {return isParent;}public void setIsParent(Boolean isParent) {this.isParent = isParent;}// 擴展字段，用于EasyUI中tree結構public String getText() {return getName();}public String getState() {return getIsParent() ? "closed" : "open";}}

創建mapper

package com.taotao.manage.mapper;import com.github.abel533.mapper.Mapper; import com.taotao.manage.pojo.Content;public interface ContentMapper extends Mapper<Content> {} package com.taotao.manage.mapper;import com.github.abel533.mapper.Mapper; import com.taotao.manage.pojo.ContentCategory;public interface ContentCategoryMapper extends Mapper<ContentCategory> {}

創建service

創建controller

內容分類管理

創建根節點：

分類列表查詢

package com.taotao.manage.controller;import java.util.List;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam;import com.taotao.manage.pojo.ContentCategory; import com.taotao.manage.service.ContentCategoryService;@RequestMapping("content/category") @Controller public class ContentCategoryController {@Autowiredprivate ContentCategoryService contentCategoryService;/*** 根據父節點id查詢內容分類列表* * @param pid* @return*/@RequestMapping(method = RequestMethod.GET)public ResponseEntity<List<ContentCategory>> queryListByParentId(@RequestParam(value = "id", defaultValue = "0") Long pid) {try {ContentCategory record = new ContentCategory();record.setParentId(pid);List<ContentCategory> list = this.contentCategoryService.queryListByWhere(record);if (null == list || list.isEmpty()) {return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);}return ResponseEntity.ok(list);} catch (Exception e) {e.printStackTrace();}return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);} }

效果：

節點的右鍵菜單

定義菜單：

右鍵觸發菜單顯示:

具體的菜單事件：

新增事件

JS實現：

按下回車，編輯完成事件：

后臺實現：
Controller：

/*** 新增節點* * @param contentCategory* @return*/@RequestMapping(method = RequestMethod.POST)public ResponseEntity<ContentCategory> saveContentCategory(ContentCategory contentCategory) {try {this.contentCategoryService.saveContentCategory(contentCategory);return ResponseEntity.status(HttpStatus.CREATED).body(contentCategory);} catch (Exception e) {e.printStackTrace();}return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);}

Service：

public void saveContentCategory(ContentCategory contentCategory) {contentCategory.setId(null);contentCategory.setIsParent(false);contentCategory.setSortOrder(1);contentCategory.setStatus(1);super.save(contentCategory);// 判斷該節點的父節點的isParent是否為true，不是，需要修改為trueContentCategory parent = super.queryById(contentCategory.getParentId());if (!parent.getIsParent()) {parent.setIsParent(true);super.update(parent);}}

測試：

重命名

JS實現：

后端實現：

/*** 重命名* * @param id* @param name* @return*/@RequestMapping(method = RequestMethod.PUT)public ResponseEntity<Void> rename(@RequestParam("id") Long id, @RequestParam("name") String name) {try {ContentCategory category = new ContentCategory();category.setId(id);category.setName(name);this.contentCategoryService.updateSelective(category);return ResponseEntity.status(HttpStatus.NO_CONTENT).build();} catch (Exception e) {e.printStackTrace();}return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}

測試：

刪除

JS實現：

過濾器：

后端實現：
Controller：

/*** 刪除節點，包含它的所有子節點都被刪除* * @param contentCategory* @return*/@RequestMapping(method = RequestMethod.DELETE)public ResponseEntity<Void> delete(ContentCategory contentCategory) {try {this.contentCategoryService.deleteAll(contentCategory);return ResponseEntity.status(HttpStatus.NO_CONTENT).build();} catch (Exception e) {e.printStackTrace();}return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}

Service：

public void deleteAll(ContentCategory contentCategory) {List<Object> ids = new ArrayList<Object>();ids.add(contentCategory.getId());// 遞歸查找該節點下的所有子節點idthis.findAllSubNode(ids, contentCategory.getId());//批量刪除super.deleteByIds(ContentCategory.class, "id",ids);// 判斷該節點是否還有兄弟節點，如果沒有，修改父節點的isParent為falseContentCategory record = new ContentCategory();record.setParentId(contentCategory.getParentId());List<ContentCategory> list = super.queryListByWhere(record);if (null == list || list.isEmpty()) {ContentCategory parent = new ContentCategory();parent.setId(contentCategory.getParentId());parent.setIsParent(false);super.updateSelective(parent);}}private void findAllSubNode(List<Object> ids, Long pid) {ContentCategory record = new ContentCategory();record.setParentId(pid);List<ContentCategory> list = super.queryListByWhere(record);for (ContentCategory contentCategory : list) {ids.add(contentCategory.getId());// 判斷該節點是否為父節點，如果是，繼續調用該方法查找子節點if (contentCategory.getIsParent()) {// 開始遞歸findAllSubNode(ids, contentCategory.getId());}}}

測試：

內容管理

選擇內容分類加載數據

新增內容

校驗，必須選中內容分類才能創建內容數據：

新增內容頁面：

點擊提交事件

后端實現

@RequestMapping("content") @Controller public class ContentController {@Autowiredprivate ContentService contentService;/*** 新增內容* * @param content* @return*/@RequestMapping(method = RequestMethod.POST)public ResponseEntity<Void> saveContent(Content content) {try {content.setId(null);this.contentService.save(content);return ResponseEntity.status(HttpStatus.CREATED).build();} catch (Exception e) {e.printStackTrace();}return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}}

測試：

查詢內容列表

JS實現

Controller實現

/*** 根據內容分類id查詢分類列表* * @param categoryId* @param page* @param rows* @return*/@RequestMapping(method = RequestMethod.GET)public ResponseEntity<EasyUIResult> queryListByCategoryId(@RequestParam("categoryId") Long categoryId,@RequestParam(value = "page", defaultValue = "1") Integer page,@RequestParam(value = "rows", defaultValue = "10") Integer rows) {try {EasyUIResult easyUIResult = this.contentService.queryListByCategoryId(categoryId, page, rows);return ResponseEntity.ok(easyUIResult);} catch (Exception e) {e.printStackTrace();}return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);}

Service

package com.taotao.manage.service;import java.util.List;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service;import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.taotao.common.bean.EasyUIResult; import com.taotao.manage.mapper.ContentMapper; import com.taotao.manage.pojo.Content;@Service public class ContentService extends BaseService<Content> {@Autowiredprivate ContentMapper contentMapper;public EasyUIResult queryListByCategoryId(Long categoryId, Integer page, Integer rows) {PageHelper.startPage(page, rows);List<Content> list = this.contentMapper.queryContentList(categoryId);PageInfo<Content> pageInfo = new PageInfo<Content>(list);return new EasyUIResult(pageInfo.getTotal(), pageInfo.getList());} }

Mapper

package com.taotao.manage.mapper;import java.util.List;import com.github.abel533.mapper.Mapper; import com.taotao.manage.pojo.Content;public interface ContentMapper extends Mapper<Content> {/*** 根據categoryId查詢內容列表，并且按照更新時間倒序排序* * @return*/public List<Content> queryContentList(Long categoryId);}

Mapper.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.taotao.manage.mapper.ContentMapper"><select id="queryContentList" resultType="Content">SELECT * FROM tb_content WHERE category_id = #{categoryId} ORDER BY updated DESC</select></mapper>

在Spring和Mybatis的整合文件中讀取Mapper.xml

測試：

總結

以上是生活随笔為你收集整理的【SSM分布式架构电商项目-14】后台CMS内容管理系统管理前台首页广告的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。