上文我们一起实现了内容分类管理中所涉及的CRUD操作，同理，内容管理也会涉及到这些CRUD操作，而本文将会带你如何去实现内容管理。

内容列表查询

首先，我们先来看看内容管理后台页面，如下图所示，可以看到页面分为两部分，即分为左侧内容分类和右侧内容列表两个部分。

为什么内容管理页面左侧的内容分类树形列表直接就是好使的呢？其实我们看看代码就知道了，我们访问的入口是index.jsp页面，这个页面有内容管理模块，当我们点击内容管理时，就会去请求content.jsp页面。

我们再来看看content.jsp页面的内容，如下图所示，可以看到上面那个div就是展示我们的内容分类树形列表的，发起的请求与我们上文中为实现展示内容分类功能发起的请求完全一样，因此这里不用我们做任何处理就已经可以使用了。而下面的div就是内容管理后台页面的右边部分，用来显示内容列表，页面加载的时候，会发起url:'/content/query/list',queryParams:{categoryId:0}这样一个请求，这个请求会去查询某一内容分类下的所有内容。内容列表的展示其实跟商品列表的展示及其相似，大家可以参考我之前的《淘淘商城第21讲——MyBatis分页插件(PageHelper)的使用以及商品列表的展示》这篇博客进行学习，不同的地方是内容列表要根据左边树形节点的id的变化而变化。

那么内容列表又是如何跟左边的内容分类联系起来的呢？我们来看看下面的js代码，如下图所示。

搞清了内容列表的展示原理后，我们现在马上就来实现内容列表展示这个功能。

首先在taotao-content-interface工程中新增一个接口，例如ContentService.java，在该接口中声明一个获取内容列表的方法，如下图所示。

然后在taotao-content-service工程中新建以后接口的一个实现类，例如ContentServiceImpl.java，并在该实现类中实现获取内容列表的方法，如下图所示。

为了方便大家复制，现将以上实现类的代码贴出，如下所示。

package com.taotao.content.service.impl;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.pojo.EasyUIDataGridResult;
import com.taotao.content.service.ContentService;
import com.taotao.mapper.TbContentMapper;
import com.taotao.pojo.TbContent;
import com.taotao.pojo.TbContentExample;
import com.taotao.pojo.TbContentExample.Criteria;@Service
public class ContentServiceImpl implements ContentService {@Autowiredprivate TbContentMapper mapper;@Overridepublic EasyUIDataGridResult getContentList(Long categoryId, Integer page, Integer rows) {// 设置分页信息PageHelper.startPage(page, rows);TbContentExample example = new TbContentExample();Criteria criteria = example.createCriteria();criteria.andCategoryIdEqualTo(categoryId);// 执行查询并获取查询结果List<TbContent> list = mapper.selectByExample(example);PageInfo<TbContent> pageInfo = new PageInfo<TbContent>(list);EasyUIDataGridResult result = new EasyUIDataGridResult();result.setTotal((int) pageInfo.getTotal());result.setRows(list);// 返回结果return result;}}

下面我们来发布一下该服务的这个接口，即在taotao-content-service工程的spring目录下的applicationContext-service.xml配置文件中添加如下一行配置。

接着我们再来编写表现层的代码。但在写之前，我们需要在taotao-manager-web工程的springmvc.xml配置文件中添加对ContentService的引用，即要向springmvc.xml配置文件中添加如下一行配置。

现在我们到Controller层去调用服务层接口并返回结果给前台页面，如下图所示。

最后，我们开始进行测试，先对taotao-content工程进行重新打包，再重启taotao-content、taotao-content以及taotao-manager-web这三个工程，重启成功后我们访问内容列表，如下图所示，发现可以正常访问了。

新增内容

我们还得从页面代码说起，新增内容是在content.jsp页面当中定义的，我们可以看到内容列表中有toolbar:contentListToolbar这么一个玩意，其意思是定义了一个工具栏，并且工具栏中有多个功能菜单。

我们来看下该工具栏的代码，里面有新增、编辑以及删除三个功能菜单，如下图所示，这里我先对新增这一功能菜单作一下讲解。

下面我们便来看下content-add.jsp页面，表格中的字段名称与我们的数据库中表的字段是一致的，这样我们便可以直接使用逆向工程生成的代码了。

当以上content-add.jsp页面加载完毕之后，会处理$(function(){...}中的逻辑，下面我来详细分析一下其中的逻辑。

当我们点击提交超链接提交表单的时候，就会触发contentAddPage.submitForm()方法，下面我也来详细分析一下该方法中的代码。

分析完以上js代码之后，下面我们便来实现添加内容这个功能。首先，我们来编写service层的代码。在taotao-content-interface工程下的ContentService接口中声明一个新增内容的方法，如下图所示。

然后，我们来实现上面的接口，即在taotao-content-service工程下的ContentServiceImpl实现类中实现以上接口中的新增内容的方法，如下图所示。

如果你特别懒，甚至都不想手敲以上saveContent方法，那么为了你方便，下面我给出了该方法的具体代码，方便你直接复制。

@Override
public TaotaoResult saveContent(TbContent content) {// 1. 注入Mapper// 2. 补全其他的属性content.setCreated(new Date());content.setUpdated(new Date());// 3. 向内容表中插入数据mapper.insertSelective(content);return TaotaoResult.ok();
}

由于ContentService服务我们已经在Dubbo中发布过了，而且taotao-manager-web工程也引用了该Dubbo服务，于是下面我们需要做的便是实现Controller层中的代码，即在ContentController类中添加如下一个新增内容的方法。

在启动测试之前，我们需要先打包taotao-content工程到本地maven仓库中。由于新增内容这个功能涉及到了taotao-manager和taotao-content这两个服务以及taotao-manager-web后台管理系统，所以我们依次启动taotao-manager、taotao-content以及taotao-manager-web这三个工程，启动成功之后，然后去添加一个内容，添加界面如下图所示。

点击提交按钮后，我们可以发现tb_content表中便有了我们刚才添加的内容，如下图所示。

编辑内容

还是从content.jsp页面说起，当我们点击编辑功能菜单后会触发如下这个方法，下面我会详细分析一下该方法中的逻辑。

我们再来看看TT.createWindow这个方法，如下图所示。这里会有一个你很难轻易察觉到的一个问题，那就是下面这段js代码会让上面编辑功能菜单中的TT.createWindow方法执行两遍，因此我们需要修改下该方法中的代码。

编辑功能菜单中的TT.createWindow方法修改之后的代码如下图所示，可以看到我们使用了一个临时变量来记录调用次数，若是第二次调用的话，则直接返回，不做下面的操作。另外一个修改的地方是添加了一个get请求，根据id去查询这条内容的全部信息。

你有没有想过这样一个问题，var node = $("#contentList").datagrid("getSelections")[0];这句代码就能获取到内容对象，那为何还要再通过id去获取内容对象呢？这是因为列表查询的时候压根就没有查询表中content字段，也就是富文本编辑器中的内容，这样当我点击编辑菜单进行编辑内容时，就会发现富文本编辑器是空的，并没有我们添加内容时添加的内容。

其实，我们可以从获取内容列表的实现接口的以下一行代码中去查找端倪。

既然调用的是selectByExample这个方法，那么我们便去TbContentMapper.xml映射文件当中去查看下sql语句，如下图所示，我们可以看到要查询的字段在Base_Column_List当中。

我们再看看Base_Column_List当中的字段，发现并没有content字段，这么做的好处是我们在查询内容列表的时候由于并不需要显示内容，而内容又可能是非常庞大的，如果把内容字段也一并查询出来的话，那么必定是很消耗性能的。因此这儿默认采取了不查询内容字段的方式来进行查询内容列表。

仔细查看TbContentMapper.xml映射文件，可以发现内容字段所在的片段是Blob_Column_List，如下图所示。

我们最好是在即将要查询某一条内容的时候再去查询content这个字段，而selectByPrimaryKey方法便查询了包括content字段在内的所有字段的内容，如下图所示。

这也就是说，我们默认查询出的内容列表中的每条记录都是没有content这个字段的内容的，因此我们需要在用户点击编辑菜单的时候根据内容id去查询这条内容的所有信息，这也是为何在编辑功能菜单的TT.createWindow方法当中一个get请求的原因。

分析至此，接下来我们就要在taotao-content-interface工程的ContentService接口中声明一个根据id去查询这条内容的全部信息的方法，如下图所示。

然后，在taotao-content-service工程的实现类中实现以上接口中的根据id去查询这条内容的全部信息的方法，如下图所示。

接着，我们到Controller层去调用服务层接口并返回结果给前台页面，如下图所示。

紧接着，我们来看下content-edit.jsp页面，表格中的字段与数据库中tb_content表是一致的，其页面底部的js代码跟内容添加页面也很相似，意思大概是这样的：页面加载完毕之后初始化富文本编辑器，并且设置成单图片上传。点击提交按钮后先检查表单的内容是否合法，若不合法则弹出警告窗口；若合法，则富文本编辑器中的数据会与表单中的字段值进行同步。接着再发起url为/rest/content/edit的请求，顺便将表单中的数据序列化为key-value形式的字符串传递给后台，并在回调函数中判断编辑内容的操作是否成功，如果操作成功那么重新加载内容列表并关闭弹出窗口。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px"><form id="contentEditForm" class="itemForm" method="post"><input type="hidden" name="categoryId"/><input type="hidden" name="id"/><table cellpadding="5"><tr><td>内容标题:</td><td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td></tr><tr><td>内容子标题:</td><td><input class="easyui-textbox" type="text" name="subTitle" style="width: 280px;"></input></td></tr><tr><td>内容描述:</td><td><input class="easyui-textbox" name="titleDesc" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td></tr><tr><td>URL:</td><td><input class="easyui-textbox" type="text" name="url" style="width: 280px;"></input></td></tr><tr><td>图片:</td><td><input type="hidden" name="pic" /><a href="javascript:void(0)" class="easyui-linkbutton onePicUpload">图片上传</a></td></tr><tr><td>图片2:</td><td><input type="hidden" name="pic2" /><a href="javascript:void(0)" class="easyui-linkbutton onePicUpload">图片上传</a></td></tr><tr><td>内容:</td><td><textarea style="width:800px;height:300px;visibility:hidden;" name="content"></textarea></td></tr></table></form><div style="padding:5px"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="contentEditPage.submitForm()">提交</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="contentEditPage.clearForm()">重置</a></div>
</div>
<script type="text/javascript">
var contentEditEditor ;
$(function(){contentEditEditor = TT.createEditor("#contentEditForm [name=content]");TT.initOnePicUpload();
});var contentEditPage = {submitForm : function(){if(!$('#contentEditForm').form('validate')){$.messager.alert('提示','表单还未填写完成!');return ;}contentEditEditor.sync();$.post("/rest/content/edit",$("#contentEditForm").serialize(), function(data){if(data.status == 200){$.messager.alert('提示','修改内容成功!');$("#contentList").datagrid("reload");TT.closeCurrentWindow();}});},clearForm : function(){}
};</script>

先别急着往下写了，测试一把试试。在测试之前，我们得打包taotao-content工程到本地maven仓库中，然后再依次启动taotao-manager、taotao-content以及taotao-manager-web这三个工程，启动成功之后，选中某条你想要修改的内容之后再点击编辑菜单，这时你应该就能看到一个编辑这条内容的弹窗了，并且在该弹窗中你能看到这条内容的全部信息，包括content字段中的内容，如下图所示。

做好以上工作后，接下来我们开始真正实现编辑内容这一功能。首先，我们来编写service层的代码。在taotao-content-interface工程下的ContentService接口中声明一个编辑内容的方法，如下图所示。

然后，我们来实现上面的接口，即在taotao-content-service工程下的ContentServiceImpl实现类中实现以上接口中的编辑内容的方法，如下图所示。

接着，我们便来实现Controller层中的代码，即在ContentController类中添加如下一个编辑内容的方法。

最后，我们就要来测试一下了。我们重新打包taotao-content工程，再依次启动taotao-manager、taotao-content以及taotao-manager-web这三个工程，启动成功之后，选中某条你想要修改的内容之后再点击编辑菜单，这时你应该就能看到一个编辑这条内容的弹窗了，并且在该弹窗中你能看到这条内容的全部信息（包括content字段中的内容），编辑好这条内容之后，点击提交按钮即可完成该条内容的编辑。

你要是不信的话，可以查看一下数据库中tb_content表是不是真的有了那条修改后的内容了。

删除内容

当我们点击删除功能菜单后会运行以下js代码，这块的js代码还是比较容易理解的，所以这里我就不再作详细的解释了。

下面，我们来编码实现删除内容这一功能，这一功能实现起来就蛮简单了。

首先，我们来编写service层的代码。在taotao-content-interface工程下的ContentService接口中声明一个删除内容的方法，如下图所示。

然后，我们来实现上面的接口，即在taotao-content-service工程下的ContentServiceImpl实现类中实现以上接口中的删除内容的方法，如下图所示。

接着，我们便来实现Controller层中的代码，即在ContentController类中添加如下一个删除内容的方法。

最后，我们就要来测试一下了。我们重新打包taotao-content工程，再依次启动taotao-manager、taotao-content以及taotao-manager-web这三个工程，启动成功之后，选中某条你想要删除的内容之后再点击删除菜单，这时应该会弹出一个提示你是否真的要删除这条内容的窗口，如果你点击确定按钮，那么这条内容就会被删除了。同时，查看一下数据库中tb_content表，你会发现确实删除了一条内容了。

淘淘商城第34讲——内容管理相关推荐

淘淘商城第33讲——内容分类管理
通过上文的学习,我们已经搭建好了内容管理系统,本文我们就来学习一下如何进行内容分类的管理. 展示内容分类我们到后台管理页面看看关于内容管理的内容,如下图所示. 我们再来看下taotao-manage ...
一个淘淘商城项目送给你，愿你有一个灿烂的前程！
写在前面今天是2020年6月23日,星期二,天气晴.2020年已过一半,回想一下,这真是一个多灾多难的年份啊!可生活依然要继续,活着的人依然要继续前行.这是没道理的事情. 好了,回到主题,说说写这篇 ...
(转）淘淘商城系列——内容管理
http://blog.csdn.net/yerenyuan_pku/article/details/72845954 上文我们一起学习了内容分类管理,虽说实现了展示内容分类和新增节点这两个功能,但重 ...
(转）淘淘商城系列——CMS内容管理系统工程搭建
http://blog.csdn.net/yerenyuan_pku/article/details/72825801 淘淘商城系列--CMS内容管理系统工程搭建上文我们一起搭建了表现层中的商城门户 ...
淘淘商城第32讲——CMS内容管理系统的搭建
上文我们一起搭建了表现层中的商城门户系统,即taotao-portal-web工程,本文我将教大家如何搭建CMS内容管理系统.说到这里,那什么是内容管理系统呢? 要不你给我说说内容管理系统为什么需要 ...
淘淘商城第8讲——向SVN服务器提交代码
回顾一下之前所新建的SVN仓库在上一讲中,我们一起学习了如何来安装SVN服务器并且新建了一个名称为taotao-javaee的空的仓库,如下图所示. 从上图中我们可以清楚地看到taotao-java ...
淘淘商城第118讲——系统部署演示
部署分析首先说下淘淘商城这个项目在真实环境中部署的话需要多少台服务器. 如果你写完淘淘商城这个项目,那么你会发现该项目一共有12个工程,它们分别是: 本着高可用的原则,每个工程至少要对应有两台服务器 ...
淘淘商城第69讲——安装ActiveMQ
准备工作新建一台虚拟机首先,新建一台虚拟机,而且最好设置为固定IP地址,别跟我说你不知道怎么做,要是你真不晓得,那么可以参考我下面的两篇文章. Linux入门第三讲--VMware Worksta ...
淘淘商城第67讲——全局异常处理
我们知道在项目运行过程中肯定会出现一些问题,当出现异常的时候,我们一般往往是在Controller层中捕获并处理了,但这样做不利于我们统一管理.本文我们便来学习下全局异常处理器,让它来管理项目中所有的 ...
淘淘商城第111讲——订单系统服务层和表现层工程搭建
首先我们还是先看一眼淘淘商城的系统架构,如下图所示,可以看到订单系统是一个单独的模块,分服务层和表现层,服务层负责存储订单,表现层负责展示订单. 下面我们便要开始搭建工程了,可以先搭建订单系统的服务层 ...

淘淘商城第34讲——内容管理

内容列表查询

新增内容

编辑内容

删除内容

淘淘商城第34讲——内容管理相关推荐

最新文章

热门文章