JavaWeb 完善新闻系统

客行.

已于 2022-04-27 09:58:49 修改

阅读量235

点赞数 5

文章标签： web html

于 2022-04-03 23:49:19 首次发布

本文链接：https://blog.csdn.net/m0_65725031/article/details/123946157

版权

我们这几天都在写新闻系统，从04我们一直在写我们的新闻系统，编写一些功能，今天的话就是完善我们的新闻系统。

一.标题模糊查询

平时大家逛一些购物软件或者百度，在输入框输入一个字时，下面就会出现只要带该字的东西，这个功能我们其实就是通过模糊查询来完成的。

<%@page import="java.nio.charset.StandardCharsets"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/JavaWeb05/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/JavaWeb05/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="/JavaWeb05/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        * {
            outline: none !important;
        }

        body,
        html {
            background: #7f8d90;
        }

        nav,
        .breadcrumb {
            border-radius: 0px !important;
            margin-bottom: 0px !important;
        }

        .breadcrumb {
            margin-bottom: 20px !important;
            background: #36485c;
            color: white;
        }

        li h4 {
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .breadcrumb .active {
            color: yellow;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-default hidden-sm hidden-xs">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html" style="font-size: 25px;">🐖</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown"> 新闻管理
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="/JavaWeb05/news/add.jsp">新闻发布</a></li>
                    <li class="divider"></li>
                    <li><a href="#">类别管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a><%=request.getParameter("username") %></a></li>
            <li><a href="#">退出<span class="glyphicon glyphicon-off"></span></a></li>
        </ul>
    </div>
</nav>

<ol class="breadcrumb">
    <li>您当前的位置是</li>
    <li>新闻发布系统</li>
    <li class="active">首页</li>
</ol>

<form action="${pageContext.request.contextPath}/news/index.jsp" class="form-inline" style="margin: 0px auto 20px; mothod="post";>
    <div class="form-group" style="display: block;text-align: center;">
        <div class="input-group">
            <div class="input-group-addon">新闻标题</div>
            <input name="newsName" type="text" class="form-control" placeholder="请在此输入搜索的关键字">
            <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary">搜索🔍</button>
                </span>
        </div>
    </div>
</form>

 <%
  
   String newsName=request.getParameter("newsName");
    //判断newsName
    //如果为null值，设置为空字符串
    if(newsName==null){
    	newsName="";
    }
    
   
    
 //创建一个新闻数据库，把数据库中的新闻数据，拿出来
  //获取驱动
    Class.forName("oracle.jdbc.driver.OracleDriver");
  //编写连接语句
    String url="jdbc:oracle:thin:@localhost:1521:orcl";
  //获得连接对象
  Connection con=DriverManager.getConnection(url,"scott","zking123");
  //编写数据库语句
   PreparedStatement ps=con.prepareStatement("select *from jw05_news where  news_title like ?");
   ps.setString(1,"%"+newsName+"%");
   ResultSet rs=ps.executeQuery();
  while(rs.next()){
%>
  <li class="list-group-item">
            <h4 class="list-group-item-heading">
                <a href="${pageContext.request.contextPath}/news/read.jsp?newId=<%=rs.getInt(1)%>" data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委：昨日新增确诊病例29例，其中本土病例2例">
                    <%=rs.getString(2)%>
                </a>
            </h4>
            <p class="list-group-item-text text-right">
                <span class="glyphicon glyphicon-user"><code><%=rs.getString(4)%></code></span>
                <span class="glyphicon glyphicon-eye-open"><code><%=rs.getInt(8)%></code></span>
                <span class="glyphicon glyphicon-tag"><code>1000</code></span>
                <span class="glyphicon glyphicon-time"><code><%=rs.getString(5)%></code></span>
            </p>
        </li>
        <%
        
            }
    
           
            if (!con.isClosed()) {
                con.close();
            }
            ps.close();
            rs.close();
        %>
    </ul>
<div class="container text-center">
    <ul class="pagination" style="margin: 20px auto;">
        <li>
            <a href="#"><span>&laquo;</span></a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#"><span>&raquo;</span></a>
        </li>
    </ul>
</div>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip({
            trigger: "hover"
        })
    })
</script>
</body>
</html>

二.完善阅读界面

1.将新闻表中的数据赋值给阅读界面

将新闻表中的数据拿出来，赋值到阅读界面上面。

2.阅读量的次数

当我们点击该新闻进去的时候，阅读量应该增加。

思路:

点击界面去阅读界面时，新闻首页的阅读量加1，阅读界面的阅读量哪里也要加1。
新闻的阅读量增加，其实也相当于在修改新闻表中，阅读量中的数据。

阅读界面和阅读量代码如下。

<%@page import="java.util.Date"%>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.Connection" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        * {
            outline: none !important;
        }

        body,
        html {
            background: #7f8d90;
        }

        nav,
        .breadcrumb {
            border-radius: 0 !important;
            margin-bottom: 0 !important;
        }

        .breadcrumb {
            margin-bottom: 20px !important;
            background: #36485c;
            color: white;
        }

        input,
        select,
        textarea,
        .panel-heading {
            border: none !important;
            border-radius: 0 !important;
        }

        .breadcrumb .active {
            color: yellow;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-default hidden-sm hidden-xs">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="${pageContext.request.contextPath}/news/index.jsp"
               style="font-size: 25px;">🐖</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    新闻管理
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">新闻发布</a></li>
                    <li class="divider"></li>
                    <li><a href="#">类别管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a>245@qq.com</a></li>
            <li><a href="#">退出<span class="glyphicon glyphicon-off"></span></a></li>
        </ul>
    </div>
</nav>

<ol class="breadcrumb">
    <li>您当前的位置是</li>
    <li>新闻发布系统</li>
    <li class="active">新闻阅读</li>
</ol>
<%
//拿到传过来的id
 String newId=request.getParameter("newId");
//1.获取驱动
 Class.forName("oracle.jdbc.driver.OracleDriver");
  //2.定义连接字符
  String url="jdbc:oracle:thin:@localhost:1521:orcl";
  //3.获得连接
  Connection con=DriverManager.getConnection(url,"scott","zking123");
  //4.获得执行对象
  PreparedStatement ps=con.prepareStatement("select *from jw05_news where news_id=? ");
  ps.setInt(1,Integer.parseInt(newId));
  ResultSet rs=ps.executeQuery();
  
  //定义需要的值
  String title="";
  int topic=0;
  String author="";
  String publisher="";
  String content="";
  int count=0;
  
  if(rs.next()){
	  title=rs.getString(2);
	  topic=rs.getInt(3);
	  author=rs.getString(4);
	  publisher=rs.getString(5);
	  content=rs.getString(6);
	  //阅读量
	  count=rs.getInt(8)+1;
  }
  //根据id修改
  ps=con.prepareStatement("update jw05_news  set news_count=news_count+1 where news_id=? ");
  ps.setInt(1, Integer.parseInt(newId));
  int i=ps.executeUpdate();
%>
<div class="container" style="background: rgba(239, 231, 231, 0.9);border-radius:10px;">
    <h1><%=title%></h1>
    <h3 class="text-right">
        <small>
            <span class="glyphicon glyphicon-user"><span class="label label-default"></span><%=author%></span>
            <span class="glyphicon glyphicon-eye-open"><span class="label label-default"></span><%=count%></span>
            <span class="glyphicon glyphicon-time"><span class="label label-info"></span>1000</span>
        </small>
    </h3>
    <samp><%=content%></samp>
    <div class="btn-group btn-group-justified" style="margin-bottom: 20px;">
        <div class="btn-group">
            <a href="${pageContext.request.contextPath}/news/doDel.jsp?newId=<%=newId%>" class="btn btn-danger" type="button">删除</a>
        </div>
        <div class="btn-group">
            <a href="${pageContext.request.contextPath}/news/upd.jsp?newId=<%=newId%>" class="btn btn-info" type="button">修改</a>
        </div>
    </div>
</div>

<% 
ps=con.prepareStatement("select * from jw05_comment where c_from=?");
ps.setInt(1, Integer.parseInt(newId));
rs=ps.executeQuery();
while(rs.next()){

%>

<div class="container" style="background: rgba(239, 231, 231, 0.9);border-radius:10px;margin-top: 10px;">
    <div class="panel panel-default" style="margin-top: 20px;">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-user"><span class="label label-success"><%=rs.getString(4)%></span></span>
            <p style="margin-top: 10px;text-indent: 2em;">
                <span><%=rs.getString(5)%></span>
            </p>
            <p class="text-right">
                <span class="glyphicon glyphicon-time"><span class="label label-info"><%=rs.getString(3) %></span></span>
            </p>
        </div>
    </div>
   
</div>
<%
System.out.print(rs);
}
%>

<form action="doAddpl.jsp" mothod="post" class="container" style="background: rgba(239, 231, 231, 0.9);border-radius:10px;margin-top: 10px;padding: 30px;">
   <input type="hidden" name="newId" value="<%=newId%>">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="plname" class="form-control" placeholder="用户名称" required type="text">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input id="email" name="pltext" class="form-control" placeholder="评论内容" required type="text">
    </div>
    <button class="btn btn-default" type="submit">发布评论</button>
      
</form>
<div style="height: 50px;"></div>
</body>
</html>

3.完成评论添加

我们在阅读界面下方可以发表评论。

思路：

先创建一张评论表，该评论表有id，和新闻的id，评论人，评论内容，评论时间
点击评论按钮以后，将评论增加进评论表中
和你点击进来阅读的新闻，该新闻的评论，显示在阅读界面中，所以评论表中有一列是新闻的id，我们点击新闻进入以后，根据新闻id去评论表中查询评论。

评论表中显示在阅读界面的代码


<% 
ps=con.prepareStatement("select * from jw05_comment where c_from=?");
ps.setInt(1, Integer.parseInt(newId));
rs=ps.executeQuery();
while(rs.next()){

%>

<div class="container" style="background: rgba(239, 231, 231, 0.9);border-radius:10px;margin-top: 10px;">
    <div class="panel panel-default" style="margin-top: 20px;">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-user"><span class="label label-success"><%=rs.getString(4)%></span></span>
            <p style="margin-top: 10px;text-indent: 2em;">
                <span><%=rs.getString(5)%></span>
            </p>
            <p class="text-right">
                <span class="glyphicon glyphicon-time"><span class="label label-info"><%=rs.getString(3) %></span></span>
            </p>
        </div>
    </div>
   
</div>
<%
System.out.print(rs);
}
%>

增加评论的代码

<%@page import="java.util.Date"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.PreparedStatement"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    
    <%
    
     //拿到传过来的id
    String newId=request.getParameter("newId");
    //拿到用户名称
    String plname=request.getParameter("plname");
    //评论的东西
    String pltext=request.getParameter("pltext");
    String date=new Date().toLocaleString();
    
     //1.获取驱动
     Class.forName("oracle.jdbc.driver.OracleDriver");
     //2.定义连接字符
     String url="jdbc:oracle:thin:@localhost:1521:orcl";
     //3.获得连接
     Connection con=DriverManager.getConnection(url,"scott","zking123");
     //4.获得执行对象
  
   PreparedStatement ps=con.prepareStatement("select nvl(max(c_id),0) from jw05_comment");
   int j=0;
   ResultSet rs=ps.executeQuery();
 
   if(rs.next()){
	   j=rs.getInt(1);
   }
   j++;
  
   ps=con.prepareStatement("insert into jw05_comment(c_id,c_from,c_date,c_author,c_comment) values(?,?,?,?,?)");
   ps.setInt(1, j);
   ps.setInt(2, Integer.parseInt(newId));
   ps.setString(3,date);
   ps.setString(4, plname);
   ps.setString(5, pltext);
   int a=ps.executeUpdate();
  //判断是否成功增加进去
  if(a>0){
	  out.print("<script>alert('增加成功');location.href='/JavaWeb06/news/read.jsp?newId="+newId+"'</script>");
	}else{ 
		out.print("<script>alert('增加失败');history.go(-1)</script>");
 }
  
   
%>

今天的学习到这里啦，大家结合前面两节课一起吧新闻系统完善。