JavaWeb的登录与新闻增加

目录

一、页面登录跳转

1.跳转的写法以及跳转的路径

2.前提工作

 3.登录跳转功能的写法

·登录界面

 ·登录处理界面

·首页

二、新闻的增加

1.新闻增加界面

2.新闻增加处理界面 

3.数据库 

储存用户的数据库

储存新闻的数据库


一、页面登录跳转

1.跳转的写法以及跳转的路径

跳转的时候的路径 (localhot:8080/web-04/)
     a.jsp  跳转到当前(同级)路径下的a.jsp  (localhot:8080/web-04/a.jsp)
     ../a.jsp  跳转到上一级路径下的a.jsp  (localhot:8080/a.jsp)
     /a.jsp  跳转到根目录的a.jsp  (localhot:8080/a.jsp)

2.前提工作

在写功能之前,我们得先把jar包导入以及界面美化包导入

导入jar包的方法可查看小编的上一篇博客,有详细的讲解

JavaWeb的页面跳转和JDBC_筱X的博客-CSDN博客连接数据库,界面的登录验证以及界面跳转https://blog.csdn.net/weixin_67235801/article/details/123800438美化包需要自己去下载,将美化包导入到webapp文件底下

 3.登录跳转功能的写法

·登录界面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="/web-04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/web-04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="/web-04/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        * {
            outline: none !important;
        }

        html,
        body {
            background: #1abe9c;
        }

        form {
            width: 300px;
            background: #ebeff2;
            box-shadow: 0px 0px 50px rgba(0, 0, 0, .5);
            border-radius: 5px;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .btn-group {
            width: 100%;
        }

        .btn-group button {
            width: 50%;
        }
    </style>
</head>
<body>
<form action="doLogin.jsp" method="post" id="myForm">
    <h3 class="text-center">欢迎使用🐖币新闻管理</h3>
    <div class="form-group">
        <input class="form-control" id="username" name="yh" placeholder="请输入您的邮箱" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" id="password" name="mm" placeholder="请输入您的密码" type="password">
    </div>
    <div class="btn-group">
        <button class="btn btn-primary" type="submit">登录</button>
        <button class="btn btn-danger" onclick='location=href="regiest.html"' type="button">没有账号?</button>
    </div>
</form>
<script>

	$("#myForm").submit(()=>{
		if($("#username").val().length==0){
			alert("用户名不能不填")
			return false //不提交的
		}
		if($("#password").val().length==0){
			alert("密码不能不填")
			return false //不提交的
		}
		return true
	})

</script>
</body>
</html>

💞界面展示

 ·登录处理界面

<%@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"%>
<%
	request.setCharacterEncoding("utf-8");	

	String yh=request.getParameter("yh");
	String mm=request.getParameter("mm");

	//加载驱动
	Class.forName("oracle.jdbc.driver.OracleDriver");
	
	//定义连接字符串
	String url="jdbc:oracle:thin:@localhost:1521:orcl";
	
	//获得连接
	Connection con=DriverManager.getConnection(url,"scott","zkingedu");
	
	//获得执行对象
	PreparedStatement ps=con.prepareStatement("select * from t_user where user_name=? and user_pwd=?");
	ps.setString(1, yh);
	ps.setString(2, mm);
	
	//获得结果集
	ResultSet rs=ps.executeQuery();
	
	//判断结果集
	if(rs.next()){
		//转发
		request.getRequestDispatcher("/news/index.jsp").forward(request, response);
	}else{
		//重定向
		response.sendRedirect("/web-04/login.jsp");
	}
	
	//关闭资源
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}

%>

·首页

<%@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 content="width=device-width, initial-scale=1" name="viewport">
    <link href="/web-04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/web-04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="/web-04/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="/web-04/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("yh") %></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 class="form-control" placeholder="请在此输入搜索的关键字" type="text">
            <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit">搜索🔍</button>
                </span>
        </div>
    </div>
</form>

<div class="container">
    <ul class="list-group">
        <li class="list-group-item">
            <h4 class="list-group-item-heading">
                <a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委:昨日新增确诊病例29例,其中本土病例2例">
                    国家卫健委:昨日新增确诊病例29例,其中本土病例2例
                </a>
            </h4>
            <p class="list-group-item-text text-right">
                <span class="glyphicon glyphicon-user"><code>XXX</code></span>
                <span class="glyphicon glyphicon-eye-open"><code>110</code></span>
                <span class="glyphicon glyphicon-tag"><code>110</code></span>
                <span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
            </p>
        </li>
        <li class="list-group-item">
            <h4 class="list-group-item-heading">
                <a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委:昨日新增确诊病例29例,其中本土病例2例">
                    国家卫健委:昨日新增确诊病例29例,其中本土病例2例
                </a>
            </h4>
            <p class="list-group-item-text text-right">
                <span class="glyphicon glyphicon-user"><code>XXX</code></span>
                <span class="glyphicon glyphicon-eye-open"><code>110</code></span>
                <span class="glyphicon glyphicon-tag"><code>110</code></span>
                <span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
            </p>
        </li>
        <li class="list-group-item">
            <h4 class="list-group-item-heading">
                <a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委:昨日新增确诊病例29例,其中本土病例2例">
                    国家卫健委:昨日新增确诊病例29例,其中本土病例2例
                </a>
            </h4>
            <p class="list-group-item-text text-right">
                <span class="glyphicon glyphicon-user"><code>XXX</code></span>
                <span class="glyphicon glyphicon-eye-open"><code>110</code></span>
                <span class="glyphicon glyphicon-tag"><code>110</code></span>
                <span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
            </p>
        </li>
        <li class="list-group-item">
            <h4 class="list-group-item-heading">
                <a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委:昨日新增确诊病例29例,其中本土病例2例">
                    国家卫健委:昨日新增确诊病例29例,其中本土病例2例
                </a>
            </h4>
            <p class="list-group-item-text text-right">
                <span class="glyphicon glyphicon-user"><code>XXX</code></span>
                <span class="glyphicon glyphicon-eye-open"><code>110</code></span>
                <span class="glyphicon glyphicon-tag"><code>110</code></span>
                <span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
            </p>
        </li>
        <li class="list-group-item">
            <h4 class="list-group-item-heading">
                <a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委:昨日新增确诊病例29例,其中本土病例2例">
                    国家卫健委:昨日新增确诊病例29例,其中本土病例2例
                </a>
            </h4>
            <p class="list-group-item-text text-right">
                <span class="glyphicon glyphicon-user"><code>XXX</code></span>
                <span class="glyphicon glyphicon-eye-open"><code>110</code></span>
                <span class="glyphicon glyphicon-tag"><code>110</code></span>
                <span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
            </p>
        </li>
    </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>

💞界面展示

这就是我们登录成功后跳转的页面

二、新闻的增加

点击新闻管理,新闻发布,进入新闻增加界面。 

1.新闻增加界面

<%@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 content="width=device-width, initial-scale=1" name="viewport">
    <link href="/web-04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/web-04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="/web-04/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="/web-04/news/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="#">新闻发布</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("yh") %></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="doAdd.jsp" class="container">
    <div class="panel panel-info">
        <div class="panel-heading">新闻标题</div>
        <input class="form-control" name="title" maxlength="50" placeholder="标题控制在30个字之内哦~~~" required>
        <div class="panel-heading">新闻类别</div>
        <select class=" form-control" name="topic">
            <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>
        <div class="panel-heading">新闻作者</div>
        <input class="form-control" name="author" maxlength="10" placeholder="名字控制在10个字之内哦~~~" required>
        <div class="panel-heading">发布时间</div>
        <input class="form-control" name="publisher" required type="date">
        <div class="panel-heading">新闻内容</div>
        <textarea class="form-control" name="content" placeholder="🙅‍达咩~~~~这是必填的" required rows="10"></textarea>
        <div class="panel-footer">
            <button class="btn btn-primary">增加</button>
            <button class="btn btn-danger">取消</button>
        </div>
    </div>
</form>

</body>
</html>

💞界面展示

2.新闻增加处理界面 

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	
	//接收新闻的数据
	//新闻标题
	String title=request.getParameter("title");
	
	//新闻类别
	String topic=request.getParameter("topic");
	
	//新闻作者
	String author=request.getParameter("author");
	
	//发布时间
	String publisher=request.getParameter("publisher");
	
	//新闻内容
	String content=request.getParameter("content");
	
	//---------------------------------------------------
	
	//新闻的添加
	
	//加载驱动
	Class.forName("oracle.jdbc.driver.OracleDriver");
	
	//定义连接字符串
	String url="jdbc:oracle:thin:@localhost:1521:orcl";
	
	//获得连接
	Connection con=DriverManager.getConnection(url,"scott","zkingedu");
	
	//获得执行对象【数据插入之前,先把主键查询出来】
	PreparedStatement ps=con.prepareStatement("select nvl(max(news_id),0) from t_news");
	ResultSet rs=ps.executeQuery();
	int id=0;
	if(rs.next()){
		id=rs.getInt(1); //查询出来的最大id
	}
	//在最大id的自身加一
	id++; // 避免主键重复
	
	//插入新闻的操作
	ps=con.prepareStatement("insert into t_news(news_id,news_title,news_topic,news_author,news_publisher,news_content) values(?,?,?,?,?,?)");
	//赋值
	ps.setInt(1, id);
	ps.setString(2, title);
	ps.setInt(3, Integer.parseInt(topic));
	ps.setString(4, author);
	ps.setString(5, publisher);
	ps.setString(6, content);
	
	//执行结果
	int n= ps.executeUpdate();
	if(n>0){
		out.print("<script>alert('增加成功');location.href='/web-04/news/index.jsp'</script>");
	}else{
		out.print("<script>alert('增加失败');location.href='/web-04/news/index.jsp'</script>");
	}

	//关闭资源
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}
	
%>

3.数据库 

储存用户的数据库

create table t_user(
       user_name varchar2(20) not null,
       user_pwd varchar2(20) not null
);
insert into t_user(user_name,user_pwd) values('root','root123');
select * from t_user;
commit --一定要提交

储存新闻的数据库

create table t_news(
    news_id number primary key ,
    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
);

今天的内容就讲解到这啦,小编下次再给大家分享更多的知识

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javaweb增加新闻信息可以分为以下几个步骤: 1. 创建数据库表:首先需要在数据库中创建一个表格来存储新闻的信息。表格的字段可以包括新闻的标题、内容、作者、发布时间、浏览量等。 2. 设计前端页面:创建一个用于添加新闻信息的前端页面,可以使用HTML、CSS和JavaScript等技术来设计页面布局和交互效果。在页面上添加输入框和按钮等元素,方便用户输入需要添加的新闻标题、内容等。 3. 创建后端处理程序:使用Java编写后端处理程序,通过接收前端页面传递过来的数据,将数据存储到数据库中。可以使用JDBC连接数据库,并编写SQL语句执行插入操作。 4. 前后端数据传递:通过前端的HTTP请求,将用户输入的新闻信息发送给后端程序。可以使用AJAX技术来异步提交表单数据,或者使用表单的提交按钮来发送数据。 5. 数据验证和处理:在后端程序中对接收到的数据进行合法性验证和处理。例如,可以检查新闻标题是否为空,新闻内容是否过长等情况。如果数据验证不通过,可以返回错误信息给前端页面。 6. 数据库插入操作:在后端程序中使用JDBC连接数据库,并将接收到的数据插入到指定的表格中。可以使用预编译的SQL语句来执行插入操作,防止SQL注入攻击。 7. 返回结果给前端:在后端程序中,将插入操作的结果返回给前端页面。可以使用JSON格式来返回处理结果,例如返回成功或失败的消息。 通过以上步骤,我们可以在Javaweb中成功实现增加新闻信息的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值