美文网首页
五、分层实现新闻列表展示

五、分层实现新闻列表展示

作者: lifeline张 | 来源:发表于2018-07-13 17:47 被阅读0次

一、需求

问题:完善新闻显示页面,创建课工场新闻系统后台的新闻列表页面,将数据库中所有新闻信息在该页面显示。
分析:我们之前拿新闻都是在console显示,现在想把这些新闻在前台页面显示。思路就是将新闻数据封装成新闻对象(JavaBean),将新闻对象放进一个集合,把集合给浏览器界面。

二、实例

具体操作步骤如下:
1、修改NewsService,NewsDao
2、完善素材页面newsDetailList.jsp
3、使用<%for%>循环显示新闻内容
4、控制新闻内容隔行变色

2.1修改代码

修改NewsDao代码(主要将获取所有新闻的方法的返回值变为List):

package cn.kgc.dao;

import java.util.List;

import cn.kgc.pojo.News;
import cn.kgc.pojo.NewsCategory;

public interface NewsDao {
    // 增加新闻信息
    public void addNews(News news);
    // 删除特定新闻
    public void deleteNews(News news);
    // 修改特定新闻的标题
    public void updateNews(News news);
    // 查询全部新闻信息
    public List<News> getAllNews();
    // 查询特定的新闻id、标题
    public void getNewsByTitle(News news);
    
    // 通过数据源获取连接,然后进行数据库操作来查询新闻
    public void getAllNewsByDS();
    
    // 查询某一类型新闻的数目
    public int getNumOfNewsCategory(NewsCategory nc);
}

修改NewsDaoImpl代码:

// 查询全部新闻信息
    public List<News> getAllNews(){
        String sql = "SELECT * FROM news_detail";
        Object[] params = {};
        ResultSet rs = this.executeSQL(sql,params);
        List<News> newsList = new ArrayList<News>();
        try {
            while(rs.next()){
                int id = rs.getInt("id");
                int categoryId = rs.getInt("categoryId");
                String newsTitle = rs.getString("title");
                String summary = rs.getString("summary");
                String content = rs.getString("content");
                String author = rs.getString("author");
                Timestamp createDate = rs.getTimestamp("createDate");
                News news = new News();
                news.setId(id);
                news.setCategoryId(categoryId);
                news.setTitle(newsTitle);
                news.setSummary(summary);
                news.setContent(content);
                news.setAuthor(author);
                news.setCreateDate(createDate);
                newsList.add(news);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        this.closeSource();
        return newsList;
    }

创建NewsService

package cn.kgc.Service;

import java.util.List;

import cn.kgc.pojo.News;

public interface NewsService {

    public List<News> getAllNews();
}

创建NewsService实体类:

package cn.kgc.Service.implement;

import java.util.List;

import cn.kgc.Service.NewsService;
import cn.kgc.dao.NewsDao;
import cn.kgc.dao.implement.NewsDaoImpl;
import cn.kgc.pojo.News;

public class NewsServiceImpl implements NewsService{
    private NewsDao newsdao;
    
    public NewsServiceImpl(){
        newsdao = new NewsDaoImpl();
    }
    
    public List<News> getAllNews() {
        return newsdao.getAllNews();
    }

}

2.2完善页面素材

<%@page import="cn.kgc.pojo.News"%>
<%@page import="java.util.List"%>
<%@page import="cn.kgc.Service.implement.NewsServiceImpl"%>
<%@page import="cn.kgc.Service.NewsService"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<jsp:useBean id="newsService" class="cn.kgc.Service.implement.NewsServiceImpl"></jsp:useBean>
<%--动态包含无法使用,页面报错,newsService无法使用 <jsp:include page="../common/common.jsp" /> --%>
<%-- <%@include file="../common/common.jsp" %> --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
<style type="text/css">
<!--

-->
</style>
<script>
    function addNews(){
        window.location="newsDetailCreateSimple.jsp";
    }
</script>
</head>

<body>

<!--主体-->
    <div class="main-content-right">
        <!--即时新闻-->
        <div class="main-text-box">
            <div class="main-text-box-tbg">
                <div class="main-text-box-bbg">
                    <form name ="searchForm" id="searchForm" action="/news/jsp/admin/newsDetailList.jsp" method="post">
                      <div>
                        新闻分类:
                            <select name="categoryId">
                                <option value="0">全部</option>
                                
                                    <option value='1' >国内</option>
                                
                                    <option value='2' >国际</option>
                                
                                    <option value='3' >娱乐</option>
                                
                                    <option value='4' >军事</option>
                                
                                    <option value='5' >财经</option>
                                
                                    <option value='6' >天气</option>
                                
                            </select>
                        新闻标题<input type="text" name="title" id="title" value=''/>
                            <button type="submit" class="page-btn">GO</button>
                            <button type="button" onclick="addNews();" class="page-btn">增加</button>
                            <input type="hidden" name="currentPageNo" value="1"/>
                            <input type="hidden" name="pageSize" value="10"/>
                            <input type="hidden" name="totalPageCount" value="2"/>
            </div>
            </form>
            <table cellpadding="1" cellspacing="1" class="admin-list">
                <thead >
                    <tr class="admin-list-head">
                        <th>新闻标题</th>
                        <th>作者</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <%
                        List<News> newsList = newsService.getAllNews();
                        int i= 0;
                        for(News news:newsList){
                            i++;
                     %>
                    <tr <%if(i%2==0){ %>class="admin-list-td-h2"<%} %>>
                        <td><a href='newsDetailView.jsp?id=<%=news.getId()%>'><%=news.getTitle() %></a></td>
                        <td><%=news.getAuthor() %></td>
                        <td><%=news.getCreateDate() %></td>
                        <td><a href='adminNewsCreate.jsp?id=2'>修改</a>
                            <a href="javascript:if(confirm('确认是否删除此新闻?')) location='adminNewsDel.jsp?id=2'">删除</a>
                        </td>
                    </tr> 
                    <%} %>
                </tbody>
            </table>
           <div class="page-bar">
            <ul class="page-num-ul clearfix">
                <li>共7条记录&nbsp;&nbsp; 1/2页</li>
                <a href="javascript:page_nav(document.forms[0],2);">下一页</a>
                <a href="javascript:page_nav(document.forms[0],2);">最后一页</a>&nbsp;&nbsp;
            </ul>
         <span class="page-go-form"><label>跳转至</label>
         <input type="text" name="inputPage" id="inputPage" class="page-key" />页
         <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
        </span>
        </div> 
        </div>
       </div>
   </div>
   </div>
</body></html>

相关文章

  • 五、分层实现新闻列表展示

    一、需求 问题:完善新闻显示页面,创建课工场新闻系统后台的新闻列表页面,将数据库中所有新闻信息在该页面显示。分析:...

  • 2019-02-28第3次 列表

    第3次 列表 知识点 会使用有序列表实现数据展示 会使用无序列表实现数据展示【重点】 会使用定义列表实现数据展示【...

  • Instance_NewsListOnDifferenceScr

    主题:新闻展示(平板/手机) 明确思路 当打开手机模拟器时:出现新闻列表,列表只展示标题,点击后可以进入展示完整新...

  • 第三次课 列表

    知识点 1.会使用有序列表实现数据展示 2.会使用无序列表实现数据展示【重点】 3.会使用定义列表实现数据展示【重...

  • 2018-06-21 项目2:实现UICollectionVie

    一.项目需求 二.实现列表 本次列表展示参考博客为ios - 用UICollectionView实现瀑布流详解具体...

  • 列表的使用

    实验三列表的使用 任务一、新闻列表的实现 创建页面3-1用列表实现一个新闻显示版块,要求利用列表方法,适当运用字体...

  • 列表的使用

    实验三列表的使用 任务一、新闻列表的实现 创建页面3-1用列表实现一个新闻显示版块,要求利用列表方法,适当运用字体...

  • 基于UIScrollView 实现的画轴异步分层动画

    项目介绍:一个基于UIScrollView 实现的画轴异步分层动画展示界面,界面中有异步分层动画、关键帧动画、粒子...

  • Vue项目实战应用

    介绍: 这里主要使用vue框架实现列表展示与修改功能。页面效果: 项目目录: 前端绑定代码:列表展示部分: 修改遮...

  • Flutter 之新闻详情页一——加载本地动态网页

    现在的新闻阅读界面一般都包含两部分,新闻文章内容和用户评论列表。内容一般都是HTML富文本数据,以便实现丰富的展示...

网友评论

      本文标题:五、分层实现新闻列表展示

      本文链接:https://www.haomeiwen.com/subject/nksspftx.html