Javaweb新闻管理系统02

一麟yl

已于 2022-04-06 23:40:06 修改

阅读量1.3k

点赞数 4

文章标签： java eclipse

于 2022-03-31 21:20:13 首次发布

本文链接：https://blog.csdn.net/m0_67376124/article/details/123880694

版权

数据库的更新(oracle)

一，主页(index)

二，阅读界面(read)

三，修改(update&doUpdate)

四，删除新闻(doDelete)

数据库的更新(oracle)

--新闻表
create table t_news(
    news_id number primary key ,--新闻ID
    news_title varchar2(255) not null,--新闻标题
    news_topic number not null,--新闻类型
    news_author varchar2(255) not null,--新闻作者
    news_publisher varchar2(255) not null,--新闻发布时间
    news_content long not null,--新闻内容
    news_cover varchar2(255),--新闻评论
    news_count number default 0,--新闻数量
    news_comment number default 0--新闻评论数量
);
--新闻主题表
CREATE TABLE T_TOPIC(
       TOPIC_ID NUMBER PRIMARY KEY ,--主题编号
       TOPIC_NAME VARCHAR2(20) NOT NULL--主题名称
)
select * from t_topic;
INSERT INTO t_Topic （TOPIC_ID,TOPIC_NAME）
     select 1,'国际性新闻' from dual union
     select 2,'国内性新闻' from dual union
     select 3,'地方性新闻' from dual union
     select 4,'典型新闻' from dual union
     select 5,'综合新闻' from dual union
     select 6,'文教新闻' from dual union
     select 7,'搞笑新闻' from dual 
  commit--注意：在插入数据之后一定要执行这条语句,进行提交,否则会处于缓冲状态

tip：一个表格中是不允许超过一个字段为loog类型的

一，主页(index)

代码如下：

<%@page import="java.nio.charset.StandardCharsets"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ 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="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css">
<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: 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="${pageContext.request.contextPath}/news/add.jsp">新闻发布</a></li>
						<li class="divider"></li>
						<li><a
							href="${pageContext.request.contextPath}/news/show.jsp">类别管理</a></li>
					</ul></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a><%=request.getParameter("name")%>></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 class="form-inline" style="margin: 0px auto 20px;">
		<div class="form-group" style="display: block; text-align: center;">
			<div class="input-group">
				<div class="input-group-addon">新闻标题</div>
				<input type="text" class="form-control" placeholder="请在此输入搜索的关键字">
				<span class="input-group-btn">
					<button type="submit" class="btn btn-primary">搜索🔍</button>
				</span>
			</div>
		</div>
	</form>

	<div class="container">
		<ul class="list-group">
			<%
			//点击表单后应该在页面上携带newname用来充当查询的关键字
			String newName = request.getParameter("newName");
			if (newName == null) {
				newName = "";//进行查询所有
			}
			//拿值的时候会发现出现乱码的情况，这个时候可以将数据先变成字节的形式再变成字符的形式(破碎重组)
			
			newName = new String(newName.getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);
			//OracleDriver
			//加载驱动
			Class.forName("oracle.jdbc.driver.OracleDriver");
			//连接字符串
			String URL = "jdbc:oracle:thin:@localhost:1521:orcl";
			//获得连接
			Connection con = DriverManager.getConnection(URL, "scott", "sa123");
			//查询所有的新闻数据
			PreparedStatement ps = con.prepareStatement("select * from t_news where news_title like ?");
			ps.setString(1, "%" + newName + "%");
			//得到结果集
			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><%=rs.getInt(9)%></code></span>
					<span class="glyphicon glyphicon-time"><code><%=rs.getString(5)%></code></span>
				</p>
			</li>
			<%
			}
			//资源的关闭
			if (con != null && !con.isClosed()) {
			con.close();
			}
			if (ps != null) {
			ps.close();
			}
			if (rs != null) {
			rs.close();
			}
			%>
		</ul>
	</div>
	<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>

注意：

我们之前的项目都是用的类似于web04/news/index.jsp的这种路径，这种路径是绝对路径。

像我们主页的代码就用到了$(pageContext.request.contextPath),这里我来解释一下这串代码是什么意思？

$(pageContext.request.contextPath)是jsp获得绝对路径的方法，等价于

<%=request.contextPath%>,也就是取出部署的应用程序或者是当前项目的名称。

比如说我的项目名称是web04，

在浏览器输入为：http://localhost:8080/web04/index.jsp

使用$(pageContext.request.contextPath)会得到web05

二，阅读界面(read)

<%@ 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><%=request.getParameter("name")%></a></li>
				<li><a href="${pageContext.request.contextPath}/login.jsp">退出<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");//从主页获取新闻编号
	//根据新闻id去数据库做查询操作
	//oracledriver
	//加载驱动
	Class.forName("oracle.jdbc.driver.OracleDriver");
	//定义连接字符串
	String url = "jdbc:oracle:thin:@localhost:1521:orcl";
	//获得连接
	Connection con = DriverManager.getConnection(url, "scott", "sa123");
	//查询所有新闻数据
	PreparedStatement ps = con.prepareStatement("select * from T_NEWS where NEWS_ID=?");
	//设置占位符
	ps.setInt(1, Integer.parseInt(newId));
	//获得结果集
	ResultSet rs = ps.executeQuery();
	//定义初始值
	String title = "";
	int count = 0;
	String author = "";
	String publisher = "";
	String content = "";
	if (rs.next()) {
		title = rs.getString(2);
		publisher = rs.getString(5);
		author = rs.getString(4);
		content = rs.getString(6);
		count = rs.getInt(8) + 1;//指的是当前自己也阅读了一次
	}
	//已经阅读过了->修改阅读次数
	ps = con.prepareStatement("update t_news set news_count=news_count+1 where news_id=?");
	ps.setInt(1, Integer.parseInt(newId));
	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"><%=author%></span></span> <span
				class="glyphicon glyphicon-eye-open"><span
					class="label label-default"><%=count%></span></span> <span
				class="glyphicon glyphicon-time"><span
					class="label label-info"><%=publisher%></span></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/doDelete.jsp?newId=<%=newId%>" class="btn btn-danger" type="button">删除</a>
			</div>
			<div class="btn-group">
				<a href="${pageContext.request.contextPath}/news/update.jsp?newId=<%=newId%>" class="btn btn-info" type="button">修改</a>
			</div>
		</div>
	</div>

	<div class="container" style="background: rgba(239, 231, 231, 0.9); border-radius: 10px; margin-top: 10px;">
		<%
		ps = con.prepareStatement("select * from t_comment where comment_from=?");
		ps.setInt(1, Integer.parseInt(newId));
		rs = ps.executeQuery();
		while (rs.next()) {
		%>
		<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;">
					<samp><%=rs.getString(5)%></samp>
					<!-- 显示评论的内容 -->
				</p>
				<p class="text-right">
					<span class="glyphicon glyphicon-time"><span class="label label-info"><%=rs.getString(3) %></span></span>
				</p>
				<a href="${pageContext.request.contextPath}/news/doDelPl.jsp?newId=<%=newId%>&&id=<%=rs.getInt(1)%>"></a>
			</div>
			<%
			}
			%>

			<form action="doAddPl.jsp" 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 name="author" class="form-control" placeholder="用户名称" required type="text">
				</div>
				<div class="form-group">
					<label for="email">content</label> <input name="content" class="form-control" placeholder="评论内容" required type="text">
				</div>
				<button class="btn btn-default" type="submit">发布评论</button>
			</form>

			<div style="height: 50px;"></div>
</body>
</html>

效果图：

三，修改(update&doUpdate)

修改的界面(update)

<%@ 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>一麟</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查询需要修改的新闻
    // http://localhost:8080/web04/news/upd.jsp?newId=4
    //获得新闻的id
    String newId = request.getParameter("newId");
    //根据id去数据库做查询操作
    //加载驱动
    Class.forName("oracle.jdbc.driver.OracleDriver");
    //定义连接字符串
    String URL = "jdbc:oracle:thin:@localhost:1521:orcl";
    //获得连接
    Connection con = DriverManager.getConnection(URL, "scott", "sa123");
    //查询所有的新闻数据
    PreparedStatement ps = con.prepareStatement("select * from T_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="";
    if(rs.next()){
        title=rs.getString(2);//新闻标题
        publisher=rs.getString(5);//新闻发布时间
        author=rs.getString(4);//新闻作者
        content=rs.getString(6);//新闻内容
        topic=rs.getInt(3);//新闻类型
    }
%>
<form action="doUpdate.jsp" class="container" method="post">
    <div class="panel panel-info">
        <input type="hidden" value="<%=newId%>" name="newId">
        <div class="panel-heading">新闻标题</div>
        <input value="<%=title%>" class="form-control" name="title" maxlength="50" placeholder="标题控制在30个字之内哦~~~" required>
        <div class="panel-heading">新闻类别</div>
        <select class=" form-control" name="topic">
            <%
                //查询对应的类型信息
                ps=con.prepareStatement("select * from t_topic");
                rs=ps.executeQuery();
                while(rs.next()){//循环遍历新闻类型选项
            %>
            <!-- 使用三元运算进行新闻判断 -->
            <option <%=topic==rs.getInt(1)?"selected":""%> value="<%=rs.getInt(1)%>"><%=rs.getString(2)%></option>
            <%
                }
            %>
        </select>
        <div class="panel-heading">新闻作者</div>
        <input value="<%=author%>" class="form-control" name="author" maxlength="10" placeholder="名字控制在10个字之内哦~~~" required>
        <div class="panel-heading">发布时间</div>
        <input value="<%=publisher%>" class="form-control" name="publisher" required type="date">
        <div class="panel-heading">新闻内容</div>
        <textarea class="form-control" name="content" placeholder="内容不能为空哦~~" required rows="10">
            <%=content%>
        </textarea>
        <div class="panel-footer">
            <button class="btn btn-primary">修改</button>
            <button class="btn btn-danger" >取消</button>
        </div>
    </div>
</form>
</body>
</html>

效果图：

修改处理

代码如下：

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

<%
/**
*处理修改新闻
*/
%>
<%
    request.setCharacterEncoding("utf-8");
    //获取到新闻的所有信息
    String newId = request.getParameter("newId");
    String author = request.getParameter("author");
    String publisher = request.getParameter("publisher");
    String content = request.getParameter("content");
    String topic = request.getParameter("topic");
    String title = request.getParameter("title");
    //根据id去数据库做修改
    //加载驱动
    Class.forName("oracle.jdbc.driver.OracleDriver");
    //定义连接字符串
    String url = "jdbc:oracle:thin:@localhost:1521:orcl";
    //获得连接
    Connection con = DriverManager.getConnection(url, "scott", "sa123");
    //查询所有的新闻数据
    PreparedStatement ps = con.prepareStatement("update T_NEWS set NEWS_TITLE=?,NEWS_AUTHOR=?,NEWS_TOPIC=?,NEWS_CONTENT=?,NEWS_PUBLISHER=? where NEWS_ID=?");
    //设置占位符
    ps.setString(1,title);
    ps.setString(2,author);
    ps.setInt(3,Integer.parseInt(topic));
    ps.setString(4,content);
    ps.setString(5,publisher);
    ps.setInt(6,Integer.parseInt(newId));
    //执行并获得结果 (i指的是受影响的行数)
    int i = ps.executeUpdate();
    if(i>0){ //修改成功
        out.print("<script>alert('修改成功');location.href='index.jsp'</script>");//注意:一定要写在script标签中
    }else{ //修改失败
        out.print("<script>alert('修改失败');history.go(-1)</script>");//使用history.go()可以进行页面跳转,此处是返回上一页
    }
  //资源的关闭
    if (con != null && !con.isClosed()) {
    	con.close();
    }
    if (ps != null) {
    	ps.close();
    }
   
%>

四，删除新闻(doDelete)

代码如下：

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

<%
/**
*处理删除新闻
*/
%>

<%
//获得新闻的id
String newId = request.getParameter("newId");

//根据id去数据库做删除操作

//加载驱动
Class.forName("oracle.jdbc.driver.OracleDriver");
//定义连接字符串
String url = "jdbc:oracle:thin:@localhost:1521:orcl";
//获得连接
Connection con = DriverManager.getConnection(url, "scott", "sa123");
//查询所有的新闻数据
PreparedStatement ps = con.prepareStatement("delete from T_NEWS where NEWS_ID=?");
//占位符的设置
ps.setInt(1, Integer.parseInt(newId));
//执行并获得结果 【收到影响的行数】
int i = ps.executeUpdate();
if (i > 0) { //删除成功
	out.print("<script>alert('删除成功');location.href='index.jsp'</script>");
} else { //删除失败
	out.print("<script>alert('删除失败');history.go(-1)</script>");
}
//资源的关闭
if (con != null && !con.isClosed()) {
	con.close();
}
if (ps != null) {
	ps.close();
}

%>

下期将进一步完善新闻管理系统的项目功能，大家敬请期待！