• 完成后台管理系统功能(十三)Cms系统内容的增删改查以及大广告位的展示


    1.Cms系统内容的增删改查

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <div class="easyui-panel" title="Nested Panel" data-options="'100%',minHeight:500,noheader:true,border:false" style="padding:10px;">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',split:false" style="250px;padding:5px">
                <ul id="contentCategoryTree" class="easyui-tree" data-options="url:'/content/category/list',animate: true,method : 'GET'">
                </ul>
            </div>
            <div data-options="region:'center'" style="padding:5px">
                <table class="easyui-datagrid" id="contentList" data-options="toolbar:contentListToolbar,singleSelect:false,collapsible:
    true,pagination:true,method:'get',pageSize:20,url:'/content/query/list',queryParams:{categoryId:0}"> <thead> <tr> <th data-options="field:'id',30">ID</th> <th data-options="field:'title',120">内容标题</th> <th data-options="field:'subTitle',100">内容子标题</th> <th data-options="field:'titleDesc',120">内容描述</th> <!-- <th data-options="field:'content',120">内容描述</th> --> <th data-options="field:'url',60,align:'center',formatter:JINGXI.formatUrl">内容连接</th> <th data-options="field:'pic',50,align:'center',formatter:JINGXI.formatUrl">图片</th> <th data-options="field:'pic2',50,align:'center',formatter:JINGXI.formatUrl">图片2</th> <th data-options="field:'created',130,align:'center',formatter:JINGXI.formatDateTime">创建日期</th> <th data-options="field:'updated',130,align:'center',formatter:JINGXI.formatDateTime">更新日期</th> </tr> </thead> </table> </div> </div> </div> <script type="text/javascript"> $(function(){ var tree = $("#contentCategoryTree"); var datagrid = $("#contentList"); tree.tree({ onClick : function(node){ if(tree.tree("isLeaf",node.target)){ datagrid.datagrid('reload', { categoryId :node.id }); } } }); }); var contentListToolbar = [{ text:'新增', iconCls:'icon-add', handler:function(){ var node = $("#contentCategoryTree").tree("getSelected"); if(!node || !$("#contentCategoryTree").tree("isLeaf",node.target)){ $.messager.alert('提示','新增内容必须选择一个内容分类!'); return ; } TT.createWindow({ url : "/content-add" }); } },{ text:'编辑', iconCls:'icon-edit', handler:function(){ var ids = TT.getSelectionsIds("#contentList"); if(ids.length == 0){ $.messager.alert('提示','必须选择一个内容才能编辑!'); return ; } if(ids.indexOf(',') > 0){ $.messager.alert('提示','只能选择一个内容!'); return ; } TT.createWindow({ url : "/content-edit", onLoad : function(){ var data = $("#contentList").datagrid("getSelections")[0]; $("#contentEditForm").form("load",data); // 实现图片 if(data.pic){ $("#contentEditForm [name=pic]").after("<a href='"+data.pic+"' target='_blank'><img src='"+data.pic+"' width='80' height='50'/></a>"); } if(data.pic2){ $("#contentEditForm [name=pic2]").after("<a href='"+data.pic2+"' target='_blank'><img src='"+data.pic2+"' width='80' height='50'/></a>"); } /* alert(data.content); */ contentEditEditor.html(data.content); } }); } },{ text:'删除', iconCls:'icon-cancel', handler:function(){ var ids = TT.getSelectionsIds("#contentList"); if(ids.length == 0){ $.messager.alert('提示','未选中商品!'); return ; } $.messager.confirm('确认','确定删除ID为 '+ids+' 的内容吗?',function(r){ if (r){ var params = {"ids":ids}; $.post("/content/delete",params, function(data){ if(data.status == 200){ $.messager.alert('提示','删除内容成功!',undefined,function(){ $("#contentList").datagrid("reload"); }); } }); } }); } }]; </script>

    1.1 dao层

    单表查询,引用mybatis的方向工程

    1.2 service层

    @Service
    public class ContentServiceImpl implements ContentService {
    
        @Autowired
        private TbContentMapper tbContentMapper;
        
        @Override
        public EasyUIDataGridResult getContentList(int page, int rows, long categoryId) {
            TbContentExample example=new TbContentExample();
            PageHelper.startPage(page, rows);
            Criteria critria=example.createCriteria();
            critria.andCategoryIdEqualTo(categoryId);
            List<TbContent> list=tbContentMapper.selectByExampleWithBLOBs(example);
            EasyUIDataGridResult result=new EasyUIDataGridResult();
            result.setRows(list);
            //取记录的总条数
            PageInfo<TbContent> pageInfo =new PageInfo<>(list);
            result.setTotal(pageInfo.getTotal());
            return result;
            
        }
    
        @Override
        public JingXiResult createContent(TbContent tbContent) {
            JingXiResult result=new JingXiResult();
            tbContent.setCreated(new Date());
            tbContent.setUpdated(new Date());
            int i=tbContentMapper.insert(tbContent);
            /*if(i == 1){
                try{
                    HttpClientUtil.doGet("http://localhost:8082/rest" + "/cache/sync/content/89" +
                            tbContent.getCategoryId());
                }catch(Exception e){
                    e.printStackTrace();
                }
                return JingXiResult.ok();
            }*/
            return result;
        }
    
        @Override
        public JingXiResult editContent(TbContent tbcontent) {
            JingXiResult result=new JingXiResult();
            long id=tbcontent.getId();
            tbcontent.setUpdated(new Date());
            int i=tbContentMapper.updateByPrimaryKey(tbcontent);
            if(i == 1){
                return JingXiResult.ok();
            }
            return result;
        }
    
        @Override
        public JingXiResult deleteContent(String ids) {
            String a[] =ids.split(",");
            for(int i=0;i<a.length;i++){
                tbContentMapper.deleteByPrimaryKey(Long.parseLong(ids));
                }
            return JingXiResult.ok();
        }
    
    }

    1.3 controller层

    @Controller
    public class ContentController {
    
        @Autowired
        private ContentService contentService;
        
        @RequestMapping("/content/query/list")
        @ResponseBody
        public EasyUIDataGridResult showlist(int page,int rows,long categoryId){
            EasyUIDataGridResult result=contentService.getContentList(page, rows, categoryId);
            return result;
        }
        
        @RequestMapping("/content/save")
        @ResponseBody
        public JingXiResult create(TbContent tbContent){
            JingXiResult result=contentService.createContent(tbContent);
            return result;
        }
        
        @RequestMapping("/rest/content/edit")
        @ResponseBody
        public JingXiResult edit(TbContent tbContent){
            /*System.out.println(tbContent.getTitle()+"."
                        +tbContent.getId()+"."+tbContent.getCategoryId()+"."+tbContent.getContent());*/
            JingXiResult result=contentService.editContent(tbContent);
            return result;
        }
        
        @RequestMapping("/content/delete")
        @ResponseBody
        public JingXiResult delete(String ids){
            JingXiResult result=contentService.deleteContent(ids);
            return result;
        }
    }

     2. 大广告位的展示

    2.1 跨域问题的解决

    在jingxi-portal页面要调用jingxi-rest中的服务。

    方案一:jsonp 跨域请求 

    需要当首页加载完毕后,大广告位就应该显示。没有触发事件。不是太合适。

    优点:不需要二次请求,页面直接加载内容数据。减少门户系统的压力。

    缺点:需要延迟加载。不利于 seo 优化。

     方案二:使用httpclient实现

    优点:有利于 seo 优化。可以在 jingxi-portal 中对数据进行加工。缺点:系统直接需要调用服务查询内容信息,多了一次 http 请求。

    系统直接服务的调用,需要使用 httpclient 来实现。jingxi-portal 和 jingxi-rest 是在同一个局域网内部。速度非常快,调用时间可以忽略不计。

    展示首页内容功能,使用方案二实现。

    2.2 httpclient的使用

    2.2.1 什么是 httpclient?

    HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的、

    最新的、功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 HTTP 协议最新的版本和建议。

    2.2.2  httpclient的使用?

    添加依赖需要把 httpclient 的 jar 包添加到工程中,只需要在工程中添加 httpclient 的依赖。

    2.2.3 Httpclient 封装成工具类

    其他项目也可能会用到 httpclient,所以把工具类放到 jingxi-common 中。

    package com.jingxi.common.util;
    
    import java.io.IOException;
    import java.net.URI;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    import org.apache.http.NameValuePair;
    import org.apache.http.client.entity.UrlEncodedFormEntity;
    import org.apache.http.client.methods.CloseableHttpResponse;
    import org.apache.http.client.methods.HttpGet;
    import org.apache.http.client.methods.HttpPost;
    import org.apache.http.client.utils.URIBuilder;
    import org.apache.http.entity.ContentType;
    import org.apache.http.entity.StringEntity;
    import org.apache.http.impl.client.CloseableHttpClient;
    import org.apache.http.impl.client.HttpClients;
    import org.apache.http.message.BasicNameValuePair;
    import org.apache.http.util.EntityUtils;
    
    public class HttpClientUtil {
    
        public static String doGet(String url, Map<String, String> param) {
    
            // 创建Httpclient对象
            CloseableHttpClient httpclient = HttpClients.createDefault();
    
            String resultString = "";
            CloseableHttpResponse response = null;
            try {
                // 创建uri
                URIBuilder builder = new URIBuilder(url);
                if (param != null) {
                    for (String key : param.keySet()) {
                        builder.addParameter(key, param.get(key));
                    }
                }
                URI uri = builder.build();
    
                // 创建http GET请求
                HttpGet httpGet = new HttpGet(uri);
    
                // 执行请求
                response = httpclient.execute(httpGet);
                // 判断返回状态是否为200
                if (response.getStatusLine().getStatusCode() == 200) {
                    resultString = EntityUtils.toString(response.getEntity(), "UTF-8");
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if (response != null) {
                        response.close();
                    }
                    httpclient.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            return resultString;
        }
    
        public static String doGet(String url) {
            return doGet(url, null);
        }
    
        public static String doPost(String url, Map<String, String> param) {
            // 创建Httpclient对象
            CloseableHttpClient httpClient = HttpClients.createDefault();
            CloseableHttpResponse response = null;
            String resultString = "";
            try {
                // 创建Http Post请求
                HttpPost httpPost = new HttpPost(url);
                // 创建参数列表
                if (param != null) {
                    List<NameValuePair> paramList = new ArrayList<>();
                    for (String key : param.keySet()) {
                        paramList.add(new BasicNameValuePair(key, param.get(key)));
                    }
                    // 模拟表单
                    UrlEncodedFormEntity entity = new UrlEncodedFormEntity(paramList);
                    httpPost.setEntity(entity);
                }
                // 执行http请求
                response = httpClient.execute(httpPost);
                resultString = EntityUtils.toString(response.getEntity(), "utf-8");
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    response.close();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
    
            return resultString;
        }
    
        public static String doPost(String url) {
            return doPost(url, null);
        }
        
        public static String doPostJson(String url, String json) {
            // 创建Httpclient对象
            CloseableHttpClient httpClient = HttpClients.createDefault();
            CloseableHttpResponse response = null;
            String resultString = "";
            try {
                // 创建Http Post请求
                HttpPost httpPost = new HttpPost(url);
                // 创建请求内容
                StringEntity entity = new StringEntity(json, ContentType.APPLICATION_JSON);
                httpPost.setEntity(entity);
                // 执行http请求
                response = httpClient.execute(httpPost);
                resultString = EntityUtils.toString(response.getEntity(), "utf-8");
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    response.close();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
    
            return resultString;
        }
    }

    3. jingxi-rest服务的发布

    需求分析:根据内容的分类 id 查询内容列表,从 tb_content 表中查询,服务是一个 restFul 形式的服务,使用 http 协议传递 json 格式的数据。

    3.1 Dao 层:

    从 tb_content 表中查询,根据内容分类 id 查询,使用逆向工程生成的代码。

    3.2 service层:

    @Service 
    public class ContentServiceImpl implements ContentService { 
     
         @Autowired 
         private TbContentMapper contentMapper; 
         @Override 
         public List<TbContent> getContentList(long contentCid) { 
              //根据内容分类 id 查询内容列表 
              TbContentExample example = new TbContentExample();           
          Criteria criteria = example.createCriteria();
          criteria.andCategoryIdEqualTo(contentCid);
    //执行查询 List<TbContent> list = contentMapper.selectByExample(example); return list; } }

    3.3 controller层

    @Controller
    public class ContentController {
    
        @Autowired
        private ContentService contentService;
        
        @RequestMapping("/content/list/{contentCategoryId}")
        @ResponseBody
        public JingXiResult getContentList(@PathVariable Long contentCategoryId){
            
            try{
                List<TbContent> list=contentService.getContentList(contentCategoryId);
                return JingXiResult.ok(list);
                
            }catch(Exception e){
                e.printStackTrace();
                return JingXiResult.build(500,ExceptionUtil.getStackTrace(e));
            }
            
        }

     4 在jingxi-portal调用jingxi-rest服务

    4.1 在jingxi-protal中添加属性文件

     4.2 Service 层:

    根据内容分类 id 查询分类的内容列表,需要使用 httpclient 调用 jingxi-rest 的服务得到一个 json 字符串,把内容列表转换成 jsp 页面要求的 json 格式。返回一个 json 字符串。

     

    @Service 
    public class ContentServiceImpl implements ContentService { 
     
         @Value("${REST_BASE_URL}")      
       private String REST_BASE_URL;
       @Value("${REST_INDEX_AD_URL}")
    private String REST_INDEX_AD_URL; @Override public String getContentList() { //调用服务层的服务 String result = HttpClientUtil.doGet(REST_BASE_URL + REST_INDEX_AD_URL); //把字符串转换成TaotaoResult try { JingXiResult jingXiResult = JingXiResult.formatToList(result, TbContent.class); //取内容列表 List<TbContent> list = (List<TbContent>) jingXiResult.getData(); List<Map> resultList = new ArrayList<>(); //创建一个jsp页码要求的pojo列表
          for (TbContent tbContent : list) {
    Map map = new HashMap<>(); map.put("src", tbContent.getPic());
       map.put("height", 240); map.put("width", 670);        map.put("srcB", tbContent.getPic2());
    map.put("widthB", 550);
    map.put("heightB", 240);
    map.put("href", tbContent.getUrl());
    map.put("alt", tbContent.getSubTitle());
    resultList.add(map); }
    return JsonUtils.objectToJson(resultList); } catch (Exception e) { e.printStackTrace(); } return null; } }

    4.3 Controller 层:

    展示首页返回一个逻辑视图,需要把首页大广告位的 json 数据传递给 jsp。

    效果:

  • 相关阅读:
    CSS3弹性盒布局方式
    Vue知识点(面试常见点)
    h5新增加的存储方法
    前端常用插件
    Git 及 GitHub 使用
    Express 框架
    angular.js 教程 -- 实例讲解
    Windows右键添加VSCode启动
    Windows平台SSH登录Linux并使用图形化界面
    10_Linux yum命令
  • 原文地址:https://www.cnblogs.com/mumudechengzhang/p/7702427.html
Copyright © 2020-2023  润新知