您的位置: 首页  >  文章  >  学习淘淘商城第二十七课（内容管理）

学习淘淘商城第二十七课（内容管理）

分类: 文章 • 2024-01-24 17:15:59

上节课我们一起学习了内容分类管理，包括增加、修改、删除等操作。这节课我们一起学习下内容管理。

第一部分：查询内容列表

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

学习淘淘商城第二十七课（内容管理）

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

学习淘淘商城第二十七课（内容管理）

        我们看看content.jsp页面代码，如下图所示，可以看到上面那个div就是展示我们的内容分类列表的，发起的请求跟我们上节课所说的请求完全一样，因此这里不用我们做任何处理就已经可以使用了。下面的div就是页面的右部分，用来显示内容列表，页面加载的时候，会发起url:'/content/query/list',queryParams:{categoryId:0}这样的请求，这个内请求会去查询所有内容分类下的所有内容。内容列表的展示其实跟商品列表的展示及其相似，大家可以参考http://blog.****.net/u012453843/article/details/67644458这篇博客进行学习。不同的地方是内容列表要根据左边树形节点的Id的变化而变化。

学习淘淘商城第二十七课（内容管理）

          那么内容列表是如何跟左边的内容分类联系起来的呢？我们看下面的js代码，如下图所示，$(function(){});函数是在页面加载完之后触发执行的js代码，var tree = $("#contentCategoryTree");显然是获取内容分类树，var datagrid = $("#contentList");是获取内容列表，onClick : function(node){if(tree.tree("isLeaf",node.target)){datagrid.datagrid('reload', {categoryId :node.id});}}这段代码的意思是当我们点击左边内容分类树的某个节点时，会做下判断，判断是不是叶子节点，如果是叶子节点那么就给categoryId赋值为这个叶子节点的id并且会重新加载内容列表，也就意味着重新发起url:'/content/query/list'请求，只是这时的参数queryParams:中categoryId的值变成了单个叶子节点的id。

学习淘淘商城第二十七课（内容管理）

        搞清了内容列表的展示原理后，我们现在就实现内容列表的展示功能

        首先在taotao-content-interface工程新增一个接口类ContentService，在接口类中添加一个获取内容列表的接口（EasyUIDataGridResult getContentList(long categoryId,int page,int rows);），如下图所示。

学习淘淘商城第二十七课（内容管理）

      接着在taotao-content-service工程新建一个内容实现类ContentServiceImpl，并在该实现类中实现获取内容列表接口，如下图所示。

学习淘淘商城第二十七课（内容管理）

       实现类代码如下：

[html] view plain copy
  1. package com.taotao.content.service.impl;  
  2.   
  3. import java.util.List;  
  4.   
  5. import org.springframework.beans.factory.annotation.Autowired;  
  6. import org.springframework.stereotype.Service;  
  7.   
  8. import com.github.pagehelper.PageHelper;  
  9. import com.github.pagehelper.PageInfo;  
  10. import com.taotao.common.pojo.EasyUIDataGridResult;  
  11. import com.taotao.content.service.ContentService;  
  12. import com.taotao.mapper.TbContentMapper;  
  13. import com.taotao.pojo.TbContent;  
  14. import com.taotao.pojo.TbContentExample;  
  15. import com.taotao.pojo.TbContentExample.Criteria;  
  16.   
  17. @Service  
  18. public class ContentServiceImpl implements ContentService {  
  19.     @Autowired  
  20.     private TbContentMapper contentMapper;  
  21.   
  22.     @Override  
  23.     public EasyUIDataGridResult getContentList(long categoryId, int page, int rows) {  
  24.         //设置分页信息  
  25.         PageHelper.startPage(page, rows);  
  26.         //执行查询  
  27.         TbContentExample example = new TbContentExample();  
  28.         Criteria createCriteria = example.createCriteria();  
  29.         createCriteria.andCategoryIdEqualTo(categoryId);  
  30.         //获取查询结果  
  31.         List<TbContent> list = contentMapper.selectByExample(example);  
  32.         PageInfo<TbContent> pageInfo = new PageInfo<>(list);  
  33.         EasyUIDataGridResult result = new EasyUIDataGridResult();  
  34.         result.setRows(list);  
  35.         result.setTotal(pageInfo.getTotal());  
  36.         //返回结果  
  37.         return result;   
  38.     }  
  39.   
  40. }  
      下面到Controller层去调用服务层接口并返回结果给前台页面，如下图所示。

学习淘淘商城第二十七课（内容管理）

        Controller层代码如下：

[html] view plain copy
  1. package com.taotao.controller;  
  2.   
  3. import org.springframework.beans.factory.annotation.Autowired;  
  4. import org.springframework.stereotype.Controller;  
  5. import org.springframework.web.bind.annotation.RequestMapping;  
  6. import org.springframework.web.bind.annotation.ResponseBody;  
  7.   
  8. import com.taotao.common.pojo.EasyUIDataGridResult;  
  9. import com.taotao.content.service.ContentService;  
  10.   
  11. @Controller  
  12. public class ContentController {  
  13.       
  14.     @Autowired  
  15.     private ContentService contentSerive;  
  16.       
  17.     @RequestMapping("/content/query/list")  
  18.     @ResponseBody  
  19.     public EasyUIDataGridResult getContentList(Long categoryId,Integer page,Integer rows){  
  20.         EasyUIDataGridResult result = contentSerive.getContentList(categoryId, page, rows);  
  21.         return result;  
  22.     }  
  23. }  
      这还没完，因为我们还没有发布服务接口和引用接口，我们先在taotao-content-service工程发布dubbo服务，如下图所示。

学习淘淘商城第二十七课（内容管理）

      taotao-content-service工程的applicationContext-service.xml的代码如下：

[html] view plain copy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:context="http://www.springframework.org/schema/context"  
  4.     xmlns:p="http://www.springframework.org/schema/p"  
  5.     xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"  
  6.     xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"  
  7.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  8.     xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd  
  9.     http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd  
  10.     http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.2.xsd  
  11.     http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd  
  12.     http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.2.xsd">  
  13.       
  14.     <!-- 配置包扫描器，扫描所有带@Service注解的类 -->  
  15.     <context:component-scan base-package="com.taotao.content.service"/>  
  16.       
  17.     <!-- 发布dubbo服务 -->  
  18.     <!-- 提供方应用信息，用于计算依赖关系 -->  
  19.     <dubbo:application name="taotao-content" />  
  20.     <!-- 注册中心的地址 -->  
  21.     <dubbo:registry protocol="zookeeper" address="192.168.156.14:2181" />  
  22.     <!-- 用dubbo协议在20881端口暴露服务 -->  
  23.     <dubbo:protocol name="dubbo" port="20881" />  
  24.     <!-- 声明需要暴露的服务接口 -->  
  25.     <dubbo:service interface="com.taotao.content.service.ContentCategoryService" ref="contentCategoryServiceImpl" timeout="300000"/>  
  26.     <dubbo:service interface="com.taotao.content.service.ContentService" ref="contentServiceImpl" timeout="300000"/>  
  27. </beans>  
       下面我们到taotao-manager-web后台工程引用dubbo发布的内容服务

学习淘淘商城第二十七课（内容管理）

      springmvc.xml文件的内容如下：

[html] view plain copy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"  
  4.     xmlns:context="http://www.springframework.org/schema/context"  
  5.     xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"  
  6.     xmlns:mvc="http://www.springframework.org/schema/mvc"  
  7.     xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd  
  8.         http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd  
  9.         http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd  
  10.         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">  
  11.          
  12.     <!-- 加载配置文件 -->  
  13.     <context:property-placeholder location="classpath:resource/resource.properties"/>      
  14.     <!-- 配置注解驱动 -->  
  15.     <mvc:annotation-driven />  
  16.     <!-- 视图解析器 -->  
  17.     <bean  
  18.         class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
  19.         <property name="prefix" value="/WEB-INF/jsp/" />  
  20.         <property name="suffix" value=".jsp" />  
  21.     </bean>  
  22.     <!-- 配置包扫描器，扫描@Controller注解的类 -->  
  23.     <context:component-scan base-package="com.taotao.controller"/>  
  24.       
  25.     <!-- 配置资源映射 -->  
  26.     <mvc:resources location="/css/" mapping="/css/**"></mvc:resources>  
  27.     <mvc:resources location="/js/" mapping="/js/**"></mvc:resources>  
  28.       
  29.     <!-- 多媒体解析器 -->  
  30.     <!-- 配置文件上传解析器 -->  
  31.     <bean id="multipartResolver"  
  32.         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
  33.         <!-- 设定默认编码 -->  
  34.         <property name="defaultEncoding" value="UTF-8"></property>  
  35.         <!-- 设定文件上传的最大值5MB，5*1024*1024 -->  
  36.         <property name="maxUploadSize" value="5242880"></property>  
  37.     </bean>  
  38.       
  39.     <!-- 引用dubbo服务 -->  
  40.     <dubbo:application name="taotao-manager-web"/>  
  41.     <dubbo:registry protocol="zookeeper" address="192.168.156.14:2181"/>    
  42.     <dubbo:reference interface="com.taotao.service.ItemService" id="itemService" />  
  43.     <dubbo:reference interface="com.taotao.service.ItemCatService" id="itemCatService" />  
  44.     <dubbo:reference interface="com.taotao.content.service.ContentCategoryService" id="contentCategoryService" />  
  45.     <dubbo:reference interface="com.taotao.content.service.ContentService" id="contentService" />  
  46. </beans>  
       好，现在我们开始测试，对taotao-content工程进行重新打包，然后重启taotao-content工程和taotao-manager-web工程，重启后我们访问内容列表，如下图所示，发现可以正常访问了。

学习淘淘商城第二十七课（内容管理）
第二部分：添加内容

       我们还是从页面代码说起，添加内容是在content.jsp当中定义的，我们可以看到内容列表有"toolbar:contentListToolbar"这么一句代码，这句代码的意思是定义了工具栏，工具栏中有多个功能。

学习淘淘商城第二十七课（内容管理）           我们来看看工具栏代码，里面有新增、编辑、删除三个操作，我们先看新增内容，text指定我们看到的图标后面的文字，iconCls指定新增图标，handler:function()则是当我们点击"新增"按钮时触发的函数，var node = $("#contentCategoryTree").tree("getSelected");的意思是得到用户选中的内容分类节点。if(!node || !$("#contentCategoryTree").tree("isLeaf",node.target)){的意思是如果没有选中的不是节点或者该节点不是叶子节点，那么就弹出提示"新增内容必须选择一个内容分类!"。如果点击的是叶子节点的话，就会调用common.js当中定义的TT的createWindow方法初始化一个弹出框，弹出框中显示的页面是参数指定的url: "/content-add"，也就是content-add.jsp页面。

[html] view plain copy
  1. var contentListToolbar = [{  
  2.     text:'新增',  
  3.     iconCls:'icon-add',  
  4.     handler:function(){  
  5.         var node = $("#contentCategoryTree").tree("getSelected");  
  6.         if(!node || !$("#contentCategoryTree").tree("isLeaf",node.target)){  
  7.             $.messager.alert('提示','新增内容必须选择一个内容分类!');  
  8.             return ;  
  9.         }  
  10.         TT.createWindow({  
  11.             url : "/content-add"  
  12.         });   
  13.     }  
  14. },{  
  15.     text:'编辑',  
  16.     iconCls:'icon-edit',  
  17.     handler:function(){  
  18.         var ids = TT.getSelectionsIds("#contentList");  
  19.         if(ids.length == 0){  
  20.             $.messager.alert('提示','必须选择一个内容才能编辑!');  
  21.             return ;  
  22.         }  
  23.         if(ids.indexOf(',') > 0){  
  24.             $.messager.alert('提示','只能选择一个内容!');  
  25.             return ;  
  26.         }  
  27.         TT.createWindow({  
  28.             url : "/content-edit",  
  29.             onLoad : function(){  
  30.                 var data = $("#contentList").datagrid("getSelections")[0];  
  31.                 $("#contentEditForm").form("load",data);  
  32.                   
  33.                 // 实现图片  
  34.                 if(data.pic){  
  35.                     $("#contentEditForm [name=pic]").after("<a href='"+data.pic+"' target='_blank'><img src='"+data.pic+"' width='80' height='50'/></a>");      
  36.                 }  
  37.                 if(data.pic2){  
  38.                     $("#contentEditForm [name=pic2]").after("<a href='"+data.pic2+"' target='_blank'><img src='"+data.pic2+"' width='80' height='50'/></a>");                   
  39.                 }  
  40.                   
  41.                 contentEditEditor.html(data.content);  
  42.             }  
  43.         });       
  44.     }  
  45. },{  
  46.     text:'删除',  
  47.     iconCls:'icon-cancel',  
  48.     handler:function(){  
  49.         var ids = TT.getSelectionsIds("#contentList");  
  50.         if(ids.length == 0){  
  51.             $.messager.alert('提示','未选中商品!');  
  52.             return ;  
  53.         }  
  54.         $.messager.confirm('确认','确定删除ID为 '+ids+' 的内容吗？',function(r){  
  55.             if (r){  
  56.                 var params = {"ids":ids};  
  57.                 $.post("/content/delete",params, function(data){  
  58.                     if(data.status == 200){  
  59.                         $.messager.alert('提示','删除内容成功!',undefined,function(){  
  60.                             $("#contentList").datagrid("reload");  
  61.                         });  
  62.                     }  
  63.                 });  
  64.             }  
  65.         });  
  66.     }  
  67. }];  
     下面我们便来看下content-add.jsp页面，如下图所示，表格中的字段名称与我们的数据库中表的字段是一致的，这样我们便可以直接使用****生成的代码了。当页面加载完之后，会触发$(function()方法，contentAddEditor = TT.createEditor("#contentAddForm [name=content]");的意思是初始化一个富文本编辑器，TT.initOnePicUpload();的意思是初始化单张图片上传按钮，也就是说一次只能选择一张图片（因为我们的pic和pic2字段各自对应一张图片路径），$("#contentAddForm [name=categoryId]").val($("#contentCategoryTree").tree("getSelected").id);这行代码的意思是把用户选择的内容分类节点的id赋值给隐藏域<input type="hidden" name="categoryId"/>。这样我们在提交表单的时候便把内容分类也一并提交了。当我们点击提交的时候便触发submitForm : function ()方法，if(!$('#contentAddForm').form('validate')){的意思是如果表单输入的不合法那么会提示"表单还未填写完！"。contentAddEditor.sync();的意思是如果表单填写合法，那么富文本编辑器将与表单中的隐藏域字段进行内容同步。$.post("/content/save")的意思是发起url为/content/save的请求，$("#contentAddForm").serialize()将表单中的数据序列化为key-value形式的字符串，function(data)是指回调函数。if(data.status == 200){意思是如果返回的状态为200的话说明添加成功了，$("#contentList").datagrid("reload");意思是添加成功后，内容列表要进行重新加载。TT.closeCurrentWindow();的意思是关闭弹出窗口。clearForm : function(){是重置按钮触发的方法，$('#contentAddForm').form('reset');的意思是将刚才表单中输入的内容清空。

学习淘淘商城第二十七课（内容管理）
     分析了代码，下面我们来实现添加内容功能

     首先是在ContentService接口类添加一个接口TaotaoResult addContent(TbContent content);

     接着我们到ContentServiceImpl中去实现这个接口，如下图所示。

[html] view plain copy
  1. @Override  
  2.     public TaotaoResult addContent(TbContent content) {  
  3.         //补充属性  
  4.         content.setCreated(new Date());  
  5.         content.setUpdated(new Date());  
  6.         //添加  
  7.         contentMapper.insert(content);  
  8.         //返回结果  
  9.         return TaotaoResult.ok();  
  10.     }  
      由于ContentService服务我们已经在dubbo中发布过了，而且taotao-manager-web工程也引用了，下面我们需要做的便是实现Controller层，如下所示。

[html] view plain copy
  1. @RequestMapping("/content/save")  
  2.     @ResponseBody  
  3.     public TaotaoResult addContent(TbContent content){  
  4.         TaotaoResult result = contentSerive.addContent(content);  
  5.         return result;  
  6.     }  
      修改完之后，我们重新打包taotao-content工程，打包后重启taotao-content工程和taotao-manager-web工程，然后去添加一个内容，添加界面如下图所示。

学习淘淘商城第二十七课（内容管理）
      点击"提交"之后，我们便发现在小广告这个分类下的内容列表中便有了我们刚才添加的内容，如下图所示。

学习淘淘商城第二十七课（内容管理）
第三部分：修改和删除内容

       从content.jsp页面说起，当我们点击"编辑"按钮后会触发handler:function()这个方法，var ids = TT.getSelectionsIds("#contentList");的意思是获取内容列表的所有id的集合。if(ids.length == 0){$.messager.alert('提示','必须选择一个内容才能编辑!');return ;}的意思是如果没有选择任何内容便弹出警告。if(ids.indexOf(',') > 0){的意思是如果选择的内容多于一个的话也弹出警告。TT.createWindow({的意思是初始一个弹出窗口。url : "/content-edit"的意思是在弹出框中加载的是content-edit.jsp页面。onLoad : function()里面的内容都是初始化编辑界面的数据。

[html] view plain copy
  1. text:'编辑',  
  2.     iconCls:'icon-edit',  
  3.     handler:function(){  
  4.         var ids = TT.getSelectionsIds("#contentList");  
  5.         if(ids.length == 0){  
  6.             $.messager.alert('提示','必须选择一个内容才能编辑!');  
  7.             return ;  
  8.         }  
  9.         if(ids.indexOf(',') > 0){  
  10.             $.messager.alert('提示','只能选择一个内容!');  
  11.             return ;  
  12.         }  
  13.         TT.createWindow({  
  14.             url : "/content-edit",  
  15.             onLoad : function(){  
  16.                 var data = $("#contentList").datagrid("getSelections")[0];  
  17.                 $("#contentEditForm").form("load",data);  
  18.                   
  19.                 // 实现图片  
  20.                 if(data.pic){  
  21.                     $("#contentEditForm [name=pic]").after("<a href='"+data.pic+"' target='_blank'><img src='"+data.pic+"' width='80' height='50'/></a>");      
  22.                 }  
  23.                 if(data.pic2){  
  24.                     $("#contentEditForm [name=pic2]").after("<a href='"+data.pic2+"' target='_blank'><img src='"+data.pic2+"' width='80' height='50'/></a>");                   
  25.                 }  
  26.                   
  27.                 contentEditEditor.html(data.content);  
  28.             }  
  29.         });       

        我们再看看TT.createWindow，如下所示。这段js有个问题就是会让上面的TT.createWindow执行两遍，因此我们需要修改下上面TT.createWindow这段代码。

[html] view plain copy
  1. createWindow : function(params){  
  2.         $("<div>").css({padding:"5px"}).window({  
  3.             width : params.width?params.width:"80%",  
  4.             height : params.height?params.height:"80%",  
  5.             modal:true,  
  6.             title : params.title?params.title:" ",  
  7.             href : params.url,  
  8.             onClose : function(){  
  9.                 $(this).window("destroy");  
  10.             },  
  11.             onLoad : function(){  
  12.                 if(params.onLoad){  
  13.                     params.onLoad.call(this);  
  14.                 }  
  15.             }  
  16.         }).window("open");  
  17.     },  
       修改后的内如如下，使用了一个临时变量来记录调用次数，如果是第二次调用的话，则直接返回，不做下面的操作。另外修改的地方是添加一个get请求，根据ID去查询这条内容的全部信息。
[html] view plain copy
  1. var number = 0;  
  2.         TT.createWindow({  
  3.             url : "/content-edit",  
  4.             onLoad : function(){  
  5.                 number = number +1;  
  6.                 if(number == 2){  
  7.                     return;  
  8.                 }  
  9.                 var node = $("#contentList").datagrid("getSelections")[0];  
  10.                 var params = {"id":node.id};  
  11.                 $.get("/content/getContent",params, function(data){  
  12.                     if(data.status == 200){  
  13.                         debugger  
  14.                         node = data.data;  
  15.                         $("#contentEditForm").form("load",node);  
  16.                           
  17.                         // 实现图片  
  18.                         if(node.pic){  
  19.                             $("#contentEditForm [name=pic]").after("<a href='"+node.pic+"' target='_blank'><img src='"+node.pic+"' width='80' height='50'/></a>");      
  20.                         }  
  21.                         if(node.pic2){  
  22.                             $("#contentEditForm [name=pic2]").after("<a href='"+node.pic2+"' target='_blank'><img src='"+node.pic2+"' width='80' height='50'/></a>");                   
  23.                         }  
  24.                           
  25.                         contentEditEditor.html(node.content);  
  26.                     }  
  27.                 });  
  28.             }  
  29.         });       
        那么为何var node = $("#contentList").datagrid("getSelections")[0];这句代码就获取到了内容对象还要再通过id去获取内容对象呢？这是因为列表查询的时候就没有查询content字段，也就是富文本编辑框中的内容，我们可以点击编辑，就会发现富文本编辑框是空的，并没有我们添加内容时添加的内容。其实我们可以从获取列表的实现接口中

List<TbContent> list = contentMapper.selectByExample(example);这段代码去查找端倪，既然是调用的selectByExample这个方法，我们便去Mybatis的contentMapper.xml文件当中去看下sql语句。如下所示，可以看到要查询的字段在Base_Column_List当中。

[html] view plain copy
  1. <select id="selectByExample" resultMap="BaseResultMap" parameterType="com.taotao.pojo.TbContentExample" >  
  2.    select  
  3.    <if test="distinct" >  
  4.      distinct  
  5.    </if>  
  6.    <include refid="Base_Column_List" />  
  7.    from tb_content  
  8.    <if test="_parameter != null" >  
  9.      <include refid="Example_Where_Clause" />  
  10.    </if>  
  11.    <if test="orderByClause != null" >  
  12.      order by ${orderByClause}  
  13.    </if>  
  14.  </select>  
        我们再看看Base_Column_List当中的字段，发现并没有content字段，这么做的好处是我们在查询内容列表的时候由于并不需要显示内容，而内容可能是非常庞大的，如果把内容字段也一并查询出来的话，那么必定是很消耗性能。因此默认采取了不查询内容字段的方式进行查询。
[html] view plain copy
  1. <sql id="Base_Column_List" >  
  2.     id, category_id, title, sub_title, title_desc, url, pic, pic2, created, updated  
  3.   </sql>  
        内容字段所在的集合是Blob_Column_List，如下所示。

[html] view plain copy
  1. <sql id="Blob_Column_List" >  
  2.     content  
  3.   </sql>  
        我们最好是在要查询某一条内容的时候再去查询content这个字段，而我们的selectByPrimaryKey方法便查询了包括content字段在内的所有字段的内容。如下所示。
[html] view plain copy
  1. <select id="selectByPrimaryKey" resultMap="ResultMapWithBLOBs" parameterType="java.lang.Long" >  
  2.     select   
  3.     <include refid="Base_Column_List" />  
  4.     ,  
  5.     <include refid="Blob_Column_List" />  
  6.     from tb_content  
  7.     where id = #{id,jdbcType=BIGINT}  
  8.   </select>  
       也就是说，我们默认的内容列表中的每条记录都是没有content这个字段的内容的，因此我们需要在用户点击编辑按钮的时候根据内容ID去查询这个内容的所有信息，这也是为何在TT.createWindow当中添加$.get("/content/getContent",params, function(data){这么一个请求的原因。
       在taotao-content-interface当中添加//获取单个内容信息TaotaoResult getContent(long id);这么一个接口，在taotao-content-service当中添加这个接口的实现，如下所示。

[html] view plain copy
  1. @Override  
  2.     public TaotaoResult getContent(long id) {  
  3.         TbContent content = contentMapper.selectByPrimaryKey(id);  
  4.         return TaotaoResult.ok(content);  
  5.     }  
        接着就是到taotao-manager-web工程添加暴露的接口，如下所示。

[html] view plain copy
  1. @RequestMapping("/content/getContent")  
  2.     @ResponseBody  
  3.     public TaotaoResult getContent(Long id){  
  4.         TaotaoResult result = contentSerive.getContent(id);  
  5.         return result;  
  6.     }  

        然后我们看下content-edit.jsp页面，表格中的字段与数据库中Tbcontent表是一致的，下面的js代码跟内容添加很相似，页面加载完之后初始化富文本编辑器，并且设置成单图片上传。点提交后先检查表单的内容是否合法，如果不合法则弹出警告。如果合法，那么用富文本编辑器的数据会与表单中的字段值进行同步，然后发起url为/rest/content/edit的请求，将表单中的数据序列化为key-value形式的字符串。在回调函数中判断操作是否成功，如果操作成功那么重新加载内容列表然后关闭弹出窗口。

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">  
  3. <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>  
  4. <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>  
  5. <div style="padding:10px 10px 10px 10px">  
  6.     <form id="contentEditForm" class="itemForm" method="post">  
  7.         <input type="hidden" name="categoryId"/>  
  8.         <input type="hidden" name="id"/>  
  9.         <table cellpadding="5">  
  10.             <tr>  
  11.                 <td>内容标题:</td>  
  12.                 <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>  
  13.             </tr>  
  14.             <tr>  
  15.                 <td>内容子标题:</td>  
  16.                 <td><input class="easyui-textbox" type="text" name="subTitle" style="width: 280px;"></input></td>  
  17.             </tr>  
  18.             <tr>  
  19.                 <td>内容描述:</td>  
  20.                 <td><input class="easyui-textbox" name="titleDesc" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input>  
  21.                 </td>  
  22.             </tr>  
  23.              <tr>  
  24.                 <td>URL:</td>  
  25.                 <td><input class="easyui-textbox" type="text" name="url" style="width: 280px;"></input></td>  
  26.             </tr>  
  27.             <tr>  
  28.                 <td>图片:</td>  
  29.                 <td>  
  30.                     <input type="hidden" name="pic" />  
  31.                     <a href="javascript:void(0)" class="easyui-linkbutton onePicUpload">图片上传</a>  
  32.                 </td>  
  33.             </tr>  
  34.             <tr>  
  35.                 <td>图片2:</td>  
  36.                 <td>  
  37.                     <input type="hidden" name="pic2" />  
  38.                     <a href="javascript:void(0)" class="easyui-linkbutton onePicUpload">图片上传</a>  
  39.                 </td>  
  40.             </tr>  
  41.             <tr>  
  42.                 <td>内容:</td>  
  43.                 <td>  
  44.                     <textarea style="width:800px;height:300px;visibility:hidden;" name="content"></textarea>  
  45.                 </td>  
  46.             </tr>  
  47.         </table>  
  48.     </form>  
  49.     <div style="padding:5px">  
  50.         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="contentEditPage.submitForm()">提交</a>  
  51.         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="contentEditPage.clearForm()">重置</a>  
  52.     </div>  
  53. </div>  
  54. <script type="text/javascript">  
  55. var contentEditEditor ;  
  56. $(function(){  
  57.     contentEditEditor = TT.createEditor("#contentEditForm [name=content]");  
  58.     TT.initOnePicUpload();  
  59. });  
  60.   
  61. var contentEditPage = {  
  62.         submitForm : function(){  
  63.             if(!$('#contentEditForm').form('validate')){  
  64.                 $.messager.alert('提示','表单还未填写完成!');  
  65.                 return ;  
  66.             }  
  67.             contentEditEditor.sync();  
  68.               
  69.             $.post("/rest/content/edit",$("#contentEditForm").serialize(), function(data){  
  70.                 if(data.status == 200){  
  71.                     $.messager.alert('提示','修改内容成功!');  
  72.                     $("#contentList").datagrid("reload");  
  73.                     TT.closeCurrentWindow();  
  74.                 }  
  75.             });  
  76.         },  
  77.         clearForm : function(){  
  78.               
  79.         }  
  80. };  
  81.   
  82. </script>  
     至于删除的js就更容易理解了，这里就不啰嗦了。现在我们开始写修改和删除内容功能。

     先看接口，修改内容和删除内容如下。

[html] view plain copy
  1. package com.taotao.content.service;  
  2.   
  3. import com.taotao.common.pojo.EasyUIDataGridResult;  
  4. import com.taotao.common.pojo.TaotaoResult;  
  5. import com.taotao.pojo.TbContent;  
  6.   
  7. public interface ContentService {  
  8.     //获取内容列表  
  9.     EasyUIDataGridResult getContentList(long categoryId,int page,int rows);  
  10.     //添加内容  
  11.     TaotaoResult addContent(TbContent content);  
  12.     //修改内容  
  13.     TaotaoResult updateContent(TbContent content);  
  14.     //删除内容  
  15.     TaotaoResult deleteContent(String ids);  
  16.     //获取单个内容信息  
  17.     TaotaoResult getContent(long id);  
  18. }  

      接着看实现类

[html] view plain copy
  1. package com.taotao.content.service.impl;  
  2.   
  3. import java.util.Date;  
  4. import java.util.List;  
  5.   
  6. import org.springframework.beans.factory.annotation.Autowired;  
  7. import org.springframework.stereotype.Service;  
  8.   
  9. import com.github.pagehelper.PageHelper;  
  10. import com.github.pagehelper.PageInfo;  
  11. import com.taotao.common.pojo.EasyUIDataGridResult;  
  12. import com.taotao.common.pojo.TaotaoResult;  
  13. import com.taotao.content.service.ContentService;  
  14. import com.taotao.mapper.TbContentMapper;  
  15. import com.taotao.pojo.TbContent;  
  16. import com.taotao.pojo.TbContentExample;  
  17. import com.taotao.pojo.TbContentExample.Criteria;  
  18.   
  19. @Service  
  20. public class ContentServiceImpl implements ContentService {  
  21.     @Autowired  
  22.     private TbContentMapper contentMapper;  
  23.   
  24.     @Override  
  25.     public EasyUIDataGridResult getContentList(long categoryId, int page, int rows) {  
  26.         //设置分页信息  
  27.         PageHelper.startPage(page, rows);  
  28.         //执行查询  
  29.         TbContentExample example = new TbContentExample();  
  30.         Criteria createCriteria = example.createCriteria();  
  31.         createCriteria.andCategoryIdEqualTo(categoryId);  
  32.         //获取查询结果  
  33.         List<TbContent> list = contentMapper.selectByExample(example);  
  34.         PageInfo<TbContent> pageInfo = new PageInfo<>(list);  
  35.         EasyUIDataGridResult result = new EasyUIDataGridResult();  
  36.         result.setRows(list);  
  37.         result.setTotal(pageInfo.getTotal());  
  38.         //返回结果  
  39.         return result;   
  40.     }  
  41.   
  42.     @Override  
  43.     public TaotaoResult addContent(TbContent content) {  
  44.         //补充属性  
  45.         content.setCreated(new Date());  
  46.         content.setUpdated(new Date());  
  47.         //添加  
  48.         contentMapper.insert(content);  
  49.         //返回结果  
  50.         return TaotaoResult.ok();  
  51.     }  
  52.   
  53.     @Override  
  54.     public TaotaoResult updateContent(TbContent content) {  
  55.         // 填充属性  
  56.         content.setUpdated(new Date());  
  57.         //更新内容  
  58.         contentMapper.updateByPrimaryKey(content);  
  59.         //返回结果  
  60.         return TaotaoResult.ok();  
  61.     }  
  62.   
  63.     @Override  
  64.     public TaotaoResult deleteContent(String ids) {  
  65.         String[] idList = ids.split(",");  
  66.         for(String id : idList){  
  67.             //删除内容  
  68.             contentMapper.deleteByPrimaryKey(Long.valueOf(id));  
  69.         }  
  70.         //返回结果  
  71.         return TaotaoResult.ok();  
  72.     }  
  73.   
  74.     @Override  
  75.     public TaotaoResult getContent(long id) {  
  76.         TbContent content = contentMapper.selectByPrimaryKey(id);  
  77.         return TaotaoResult.ok(content);  
  78.     }  
  79.   
  80. }  
       下面我们再看下Controller层

[html] view plain copy
  1. package com.taotao.controller;  
  2.   
  3. import org.springframework.beans.factory.annotation.Autowired;  
  4. import org.springframework.stereotype.Controller;  
  5. import org.springframework.web.bind.annotation.RequestMapping;  
  6. import org.springframework.web.bind.annotation.ResponseBody;  
  7.   
  8. import com.taotao.common.pojo.EasyUIDataGridResult;  
  9. import com.taotao.common.pojo.TaotaoResult;  
  10. import com.taotao.content.service.ContentService;  
  11. import com.taotao.pojo.TbContent;  
  12.   
  13. @Controller  
  14. public class ContentController {  
  15.       
  16.     @Autowired  
  17.     private ContentService contentSerive;  
  18.       
  19.     @RequestMapping("/content/query/list")  
  20.     @ResponseBody  
  21.     public EasyUIDataGridResult getContentList(Long categoryId,Integer page,Integer rows){  
  22.         EasyUIDataGridResult result = contentSerive.getContentList(categoryId, page, rows);  
  23.         return result;  
  24.     }  
  25.       
  26.     @RequestMapping("/content/save")  
  27.     @ResponseBody  
  28.     public TaotaoResult addContent(TbContent content){  
  29.         TaotaoResult result = contentSerive.addContent(content);  
  30.         return result;  
  31.     }  
  32.       
  33.     @RequestMapping("/rest/content/edit")  
  34.     @ResponseBody  
  35.     public TaotaoResult updateContent(TbContent content){  
  36.         TaotaoResult result = contentSerive.updateContent(content);  
  37.         return result;  
  38.     }  
  39.       
  40.     @RequestMapping("/content/delete")  
  41.     @ResponseBody  
  42.     public TaotaoResult deleteContent(String ids){  
  43.         TaotaoResult result = contentSerive.deleteContent(ids);  
  44.         return result;  
  45.     }  
  46.       
  47.     @RequestMapping("/content/getContent")  
  48.     @ResponseBody  
  49.     public TaotaoResult getContent(Long id){  
  50.         TaotaoResult result = contentSerive.getContent(id);  
  51.         return result;  
  52.     }  
  53. }  
      做好以上工作后，我们重新打包taotao-content工程，然后重启taotao-content和taotao-manager-web工程。然后我们选择任何一个内容，点击"编辑"去查看富文本编辑框中的内容是否有值，如下图所示，发现没有问题了。

学习淘淘商城第二十七课（内容管理）










[html] view plain copy
  1.   





[html] view plain copy





  1.   




															

																					

								

									相关推荐