油气资源行业信息门户网站总结

作者: 艾剪疏 | 来源:发表于2018-08-21 16:16 被阅读8次

1 系统公共部分功能总结
2 首页部分总结
3 后台管理系统

主要是将之前做的项目涉及的功能过一遍，把握大概的脉络，不求甚解。重点是总结整体功能和使用的技术，做到心中有数。

1 系统公共部分功能总结

1.1 项目的架构

image.png

1.2 功能结构图

image.png

1.3 重要类图

新闻类图

热词类图

1.4 Hibernate

（1）Hibernate分页；

public List<All_data> getFirstNewsDao() {
        final String hql = "from All_data order by pubTime desc";
        @SuppressWarnings("unchecked")
        List<All_data> pagingList = hibernateTemplate.executeFind(new HibernateCallback(){
            public Object doInHibernate(Session session)
                    throws HibernateException, SQLException {
                List<Temp_News> list = session.createQuery(hql)
                        .setFirstResult(0)  
                        .setMaxResults(1)  
                        .list();                     
                return list; 
            }
        });
        return pagingList;
    }

（2）bulkUpdate、find、createQuery、executeFind、execute

1.5 Struts2

（1）配置Struts.xml，使用通配符实现根据方法名称跳转相应页面

<package name="news" extends="struts-default,json-default">
        <action name="*_News$*" class="com.oilgasInfo.web.action.NewsAction"
            method="{2}">
            <result name="success" type="json">
                <param name="root">result</param>
            </result>
            <result name="backPage" type="redirect">
                /jsp/background/{1}.jsp
            </result>
        </action>
    </package>

前台请求时，传入Home_News$showNewsAction，即通过Struts.xml文件进入showNewsAction，执行成功后返回Home.jsp

function twoModelone(tag) {
    $.ajax({
        url :'Home_News$showNewsAction?tag=' + tag,
        type : 'post',
        dataType : 'json',
        success : function(data){
            var newsJson = eval(data);
            var length = newsJson.length;
        .......
}

1.6 Spring的使用

（1）使用Spring整合SSH框架

（2）使用Spring的注解，简化开发

1.7 POI操作

项目POI操作总结

1.8 Lucene和Solr

1.9 Servlet 和JSP

（1）Servlet的Filter拦截器

public class SessionFilter implements Filter {
    public void doFilter(ServletRequest arg0, ServletResponse arg1,
            FilterChain arg2) throws IOException, ServletException {
      .......
    }
}

<!-- 界面拦截器对应com.oilgasInfo.web.util -->
    <filter>
        <filter-name>SessionFilter</filter-name>
        <filter-class>com.oilgasInfo.web.util.SessionFilter</filter-class>
        <init-param>
            <param-name>loginStrings</param-name><!-- 对登录页面不进行过滤 -->
            <param-value>/OilGasInfo_Web/jsp/front/Login.jsp</param-value>
        </init-param>
        <init-param>
            <param-name>redirectPath</param-name><!-- 未通过跳转到登录界面 -->
            <param-value>/OilGasInfo_Web/jsp/front/Home.jsp</param-value>
        </init-param>
        <init-param>
            <param-name>includeStrings</param-name><!-- 未通过跳转到登录界面 -->
            <param-value>.jsp</param-value>
        </init-param>
    </filter>

1.91JQuery和Ajax基本用法

2 前台部分总结

2.1 Home页面的加载模式

(1) 首先将页面骨架部分的div写入，使用Bootstrap的流式布局进行分块。类似下面这样：
用oneModelOneHTML占位，根据后台取回的内容动态填充。

<div class="container-fluid">
            <div style="background-color:#fff;">
                <div class="row-fluid" style="border:1px solid #02356e;">
                    <div class="span8">
                        <div class="row-fluid" style="padding-right:10px;">
                            <div class="span12" style="padding:0 0 15px 5px;">
                                <div id="oneModelOneHTML"></div>
                            </div>
                        </div>
                  </div>
          </div> 
</div>

js动态取出后台数据

function oneModelOneHTML(){
    var name = "油气要闻";
    var param = 11;
    $.ajax({
        url : 'Home_image$getImageByIdAction?module='+1,
        type : 'post',
        success : function(data) {  
            var jsonData = eval(data);
            if(jsonData.length){
                $("#oneModelOneHTML div").remove(); 
                var html = '<div class="oneModelOne" style="margin-top:5px"> <span style="margin-right:10px;width:33px;height:46px;">'
                    +'— '
                    +'<img style="vertical-align:middle"; src="../../resource/front/image/model01_logo.png" />'
                    + name
                    +' ————————'
                    +'</span>'
                    +'<a href="moreNews.jsp?tableId='
                    + param
                    +'"class="FLW_more" target="_blank">'
                    +'更多&gt;&gt;</a></div>'
                    +'<div class="row-fluid"><div class="span6">'
                    +'<a href="moreNews.jsp?tableId='
                    + param
                    +'" target="_blank">'
                    +'<img src="'
                    + jsonData[0].url
                    + '" alt="加载图片不存在" style="max-width:320px;max-height:180px" class="link_img"/></a></div>'
                    +'<div class="span6"><div id="oneModelOne"></div></div></div></div>';
            }
            $('#oneModelOneHTML').append(html);
        },
        error : function(request){
        }
    });
}

重复该操作，即可将页面的骨架画出。
下一步就是给页面填充数据了

function twoModelone(tag) {
    $.ajax({
        url :'Home_News$showNewsAction?tag=' + tag,
        type : 'post',
        dataType : 'json',
        success : function(data){
            var newsJson = eval(data);
            var length = newsJson.length;
            if (newsJson.length > 0) {
                $("#twoModelOne ul").remove();
                var html = "<ul >";
                for ( var i = 0; i < length; i++) {
                    var news = newsJson[i];
                    html += '<li class="span6list"><a style="display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" href="newsDetails.jsp?newsId='
                        + news[0].id
                        + '&moduleId='
                        + news[0].module
                        + '"target = "_blank">'
                        + news[0].title
                        + '</a></li>';
                }
                html += "</ul>";
                $('#twoModelOne').append(html);
            } else {
                $("#twoModelOne ul").remove();
            }
        }
    });
}

整个过程如图所示，第一次静态，后两次是动态。所有模块动通过Ajax异步加载的方式完成。

image.png

2.2 页面新闻列表展示

（1）获取当前页（前台传入），每页新闻数（前台传入），总新闻数（根据tag查询），生成SQL，使用Hibernate在查询相应内容。

public List<List<All_data>> getNewsDao(final int tag,final PageInfo pageInfo,boolean flag){
final int begin = (pageInfo.getPage()-1)*pageInfo.getLimit();
            final String hql1 = "from Temp_News t where t.tableId = ? order by visible desc,pubTime desc,id desc";
            String hql2 = "from All_data a where a.id=? and a.module=?";
            List<All_data> newsRes = null;
            List<Temp_News> pagingList = hibernateTemplate.executeFind(new HibernateCallback(){
                public Object doInHibernate(Session session)
                        throws HibernateException, SQLException {
                    List<Temp_News> list = session.createQuery(hql1)
                            .setParameter(0, tag)
                            .setFirstResult(begin)  
                            .setMaxResults(pageInfo.getLimit())  
                            .list();                     
                    return list; 
                }
            });
}

(2) 将返回数据拼接成JSON字符串

            int curPage = Integer.valueOf(page);
            //获取分页信息
            pageInfo.setPage(curPage);
            pageInfo.setTotalCount(getTotalPageSizeAction(Integer.valueOf(tag)));
            //查询
            List<List<All_data>> news = newsService.getNewsService(tag,pageInfo,false);
            String strNavHtml = pagingUtil.getPageInfo(15, curPage,pageInfo.getTotalCount());
            JSONArray json = JSONArray.fromObject(news);
            String jsonResult = "{\"navhtml\": \"" + strNavHtml + "\",\"data\": " + json.toString() + "}";
            this.result = jsonResult.toString();

(3)前台取出数据展示

2.3 Echart的使用：wordCloud，line等图

（1）JSP写好占位符
（2）项目中配置Echart，数据部分等待输入

function painOilPriceChart(oilData) {
    require.config({
        paths: {
            echarts: '../../plugins/front/js/echart/dist'
        }
    });
    require(  
            [  
             'echarts',  
             'echarts/chart/line'
             ],
              ........
              myChart.setOption(option);
    );
}

（3）获取数据，填充Echart图表；

2.5 内容详情页面--菜单栏

动态写入，根据mId展示不同模块样式

image.png

function generateMenu(mId) {
    if (mId==11||mId == 12||mId== 101|| mId== 102|| mId==103) {
        $("#menuList div").remove();
        var html = '<div class="subNavBox" >'
            + '<div class="subNav currentDd currentDt subNavCenter">'
            +  '热点新闻'
            + '</div><ul class="navContent" style="display:block">'
            + '<li><a href="moreNews.jsp?tag='
            +  11
            + '">'
            + '油气要闻'
            ......
}

2.6 内容详情页面--分页功能

(1) 获取当前页（前台传入），每页新闻数（前台传入），总新闻数（根据tag查询），传入后台的功能类pagingUtil中，pagingUtil会根据这三个参数，生成前台需要的HTML标签返回。

public String getPageInfo(int pageSize, int currentPage, int totalCount){
        pageSize = pageSize == 0 ? 15 : pageSize;
        int totalPages = Math.max((totalCount + pageSize - 1) / pageSize, 1); //总页数
        StringBuilder output = new StringBuilder();

        if (totalPages > 1)
        {
            //首页处理
            output.append("*<a class='a1' href='javascript:;' page='" + 1 +"'>首页</a>");
            //上一页处理
            if (currentPage == 1)
            {
                output.append("<a class='a1' title='当前为第1页' style='display:none'>上一页</a> ");
            }
                ...........
        ｝
｝

并将内容和分页内容共同返回给前台

String strNavHtml = pagingUtil.getPageInfo(15, curPage,pageInfo.getTotalCount());
JSONArray json = JSONArray.fromObject(news);
String jsonResult = "{\"navhtml\": \"" + strNavHtml + "\",\"data\": " + json.toString() + "}";
this.result = jsonResult.toString();

(2) 前台展示

3 后台管理系统

3.1 菜单栏和右侧内容页面的联动

(1) 引入左侧菜单栏的js，js中定义好需要展示的菜单栏的样式，以及需要跳转页面所需的参数。并通过js调用后台方法，获得数据。

<jsp:include page="leftMenu.jsp"></jsp:include>

JSP页面

<ul>
  <li><a href="model.jsp?tableId=101&pageIndex=1"> <span
      class="sidebar-nav-item-icon fa fa-code-fork"></span> 可燃冰
  </a></li>
  <li><a href="model.jsp?tableId=102&pageIndex=1"> <span
      class="sidebar-nav-item-icon fa fa-code-fork"></span>
      一带一路 </a></li>
  <li><a href="model.jsp?tableId=103&pageIndex=1"> <span
      class="sidebar-nav-item-icon fa fa-code-fork"></span>
      两会与能源 </a></li>
</ul>
...........

(2)通过Struts的配置文件，确定文件的返回jsp，即model.jsp

<package name="news" extends="struts-default,json-default">
        <action name="*_News$*" class="com.oilgasInfo.web.action.NewsAction"
            method="{2}">
            <result name="success" type="json">
                <param name="root">result</param>
            </result>
            <result name="backPage" type="redirect">
                /jsp/background/{1}.jsp
            </result>
        </action>
    </package>

(3)渲染model.jsp页面

3.2 过滤器控制用户登陆

(1) 在web.xml中配置Fliter过滤器

<!-- 界面拦截器对应com.oilgasInfo.web.util -->
    <filter>
        <filter-name>SessionFilter</filter-name>
        <filter-class>com.oilgasInfo.web.util.SessionFilter</filter-class>
        <init-param>
            <param-name>loginStrings</param-name><!-- 对登录页面不进行过滤 -->
            <param-value>/OilGasInfo_Web/jsp/front/Login.jsp</param-value>
        </init-param>
        <init-param>
            <param-name>redirectPath</param-name><!-- 未通过跳转到登录界面 -->
            <param-value>/OilGasInfo_Web/jsp/front/Home.jsp</param-value>
        </init-param>
        <init-param>
            <param-name>includeStrings</param-name><!-- 未通过跳转到登录界面 -->
            <param-value>.jsp</param-value>
        </init-param>
    </filter>

（2）实现Fliter接口，对URL进行判断，确定跳转的页面

public class SessionFilter implements Filter {
          public void doFilter(ServletRequest arg0, ServletResponse arg1,
            FilterChain arg2) throws IOException, ServletException {
            // 判断，跳转对应页面
            }
}

3.3 Ztree首页管理

(1)Ztree的API，常用方法都在里面
http://www.treejs.cn/v3/api.php
(2)使用layui的弹出层工具，控制弹出层内容

image.png
(3) 录入新的关键词，并通过Lucene建立索引，实现新闻分类。

3.4 图片管理，上传图片展示到前台

(1) 先将图片上传到Tomcat服务器上，并将图片地址存储到数据库中。
(2) 当用户使用设置至前台功能时，将其设置的模块module写入到数据库中；

image.png

(3)在主页加载时，先根据module在上面表中把图片取出来展示即可；

image.png

3.5 一周热点和工作动态参考生成

将某个新闻模块的数据导入到一周热点或工作动态的表里
使用POI将文档按照某种格式写出（一周热点、工作动态参考）

3.6 大事记详情和大事记参考

上移、下移、置顶
（1）数据表中添加updown字段，用以标识该功能。取数据的时候根据updown desc来取。
image.png

from WeeklyFocus weeklyFocus order by updown desc

（2）以上移为例，主要是3个sql语句
第一个，找到该数据；
第二个，上移，则需要找到比当前新闻的updown大，但是最临近的一条，所以order by w.updown需要asc来排序，最后就是update就好

final String hql1 = " from WeeklyFocus w where w.id = ?";
final String hql2 = " from WeeklyFocus w where w.updown > ? order by w.updown";
final String hql3 = " from WeeklyFocus w where w.updown < ? order by w.updown desc";

第三个可以在置顶或者下移的时候用，意思都一样。

自定义采集链接、根据某个关键词采集
主要是使用Webcollector中所带的功能，需要的参数是Webcollector该功能需要的参数。

3.7 热词模块

热词模块功能总结

3.8 分页功能

分页功能总结

END

油气资源行业信息门户网站总结

1 系统公共部分功能总结

1.1 项目的架构

1.2 功能结构图

1.3 重要类图

1.4 Hibernate

（1）Hibernate分页；

（2）bulkUpdate、find、createQuery、executeFind、execute

1.5 Struts2

（1）配置Struts.xml，使用通配符实现根据方法名称跳转相应页面

1.6 Spring的使用

（1）使用Spring整合SSH框架

（2）使用Spring的注解，简化开发

1.7 POI操作

1.8 Lucene和Solr

1.9 Servlet 和JSP

（1）Servlet的Filter拦截器

1.91JQuery和Ajax基本用法

2 前台部分总结

2.1 Home页面的加载模式

2.2 页面新闻列表展示

2.3 Echart的使用：wordCloud，line等图

2.5 内容详情页面--菜单栏

2.6 内容详情页面--分页功能

3 后台管理系统

3.1 菜单栏和右侧内容页面的联动

3.2 过滤器控制用户登陆

3.3 Ztree首页管理

3.4 图片管理，上传图片展示到前台

3.5 一周热点和工作动态参考生成

3.6 大事记详情和大事记参考

3.7 热词模块

3.8 分页功能

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读