JavaWeb.04.登录&新闻增加

清晨喂

于 2022-04-07 20:54:37 发布

阅读量575

点赞数 2

文章标签： web

本文链接：https://blog.csdn.net/m0_63772104/article/details/124025436

版权

今天我们来讲一讲登陆和新闻增加功能
首先,我们要实现登陆功能，就要把HTML文件改成JSP文件，不要直接改它后缀，因为直接改后缀会乱码，所以建议新建一个JSP文件，然后把HTML文件的内容复制过来，当然，记得保留下面面这一串代码，其他的都删除掉然后咱贴过来就行了
在这里插入图片描述
在这里在强调一个问题，也是我经常忘记的一件事，一定要记得导入jar包，并且一定是要把他放在如图位置，也就是lib文件的里面

当然，这还没有完全实现登陆功能，还需要把数据库连接上，我在这里使用的是oracle，首先在数据库创建好储存数据的表，存好数据，然后就可以开始连接数据库了
下面讲一讲连接数据库的步骤:
1.加载驱动
2.定义连接字符串
3.获得连接
4.获得执行对象
5.获得结果集
6.判断结果
7.资源关闭
代码:

//加载驱动
	Class.forName("oracle.jdbc.driver.OracleDriver");
	//定义连接字符串
	String url="jdbc:oracle:thin:@localhost:1521:orcl";
	//获得连接
	Connection con=DriverManager.getConnection(url, "scott", "123");
	//获得执行对象
	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()){
		//localhost:8080/web04/news/index.jsp(项目的根目录)	 因为转发是在服务器里完成
		request.getRequestDispatcher("/news/index.jsp").forward(request, response);
	}else{
		//重定向		重定向是客户端行为
		/**
			(localhost: 8080/web04/)跳转的时候：
			a.jsp		跳转到当前(同级)路径下的a.jsp (localhost:8080/web04/a.jsp)
			../a.jsp	跳转到上一级下的a.jsp(localhost:8080/a.jsp)
			/a.jsp		根目录的a.jsp(localhost:8080/a.jsp)
		**/
		response.sendRedirect("login.jsp");
	}
	//资源的关闭
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}

数据库完成后我们就可一开始完善页面了
直接附上代码
登陆页面:login

<%@ 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="/web04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/web04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="/web04/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("用户名不能为null")
			return false //不提交的
		}
		if($("#password").val().length==0){
			alert("密码不能为null")
			return false //不提交的
		}
		return true
	})
 
</script>
</body>
</html>

登陆的操作页面:dologin

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@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", "123");
	//获得执行对象
	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()){
		//localhost:8080/web04/news/index.jsp(项目的根目录)	 因为转发是在服务器里完成
		request.getRequestDispatcher("/news/index.jsp").forward(request, response);
	}else{
		//重定向		重定向是客户端行为
		/**
			(localhost: 8080/web04/)跳转的时候：
			a.jsp		跳转到当前(同级)路径下的a.jsp (localhost:8080/web04/a.jsp)
			../a.jsp	跳转到上一级下的a.jsp(localhost:8080/a.jsp)
			/a.jsp		根目录的a.jsp(localhost:8080/a.jsp)
		**/
		response.sendRedirect("login.jsp");
	}
	//资源的关闭
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}
%>

首页:iindex

<%@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="/web04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/web04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="/web04/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="/web04/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>毛泽东</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>毛泽东</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>毛泽东</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>毛泽东</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>毛泽东</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>

然后再编写增加功能，同样直接附上代码
添加页面:add

<%@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="/web04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/web04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
    <script src="/web04/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="/web04/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>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>
 
<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>

操作添加的页面:doAdd

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
 
	request.setCharacterEncoding("utf-8");
	//接收新闻的数据
	String title=request.getParameter("title");
	String author=request.getParameter("author");
	String publisher=request.getParameter("publisher");
	String topic=request.getParameter("topic");
	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","123");
	
	// 主键不能不填
	// 主键没有自增的选项（触发器+序列）
	//获得执行对象【数据插入之前，先把主键查询出来】
	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++; //为什么加一 【避免主键的重复】
	
	//插入新闻的操作
	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='/web04/news/index.jsp'</script>");
	}else{
		out.print("<script>alert('增加失败');location.href='/web04/news/index.jsp'</script>");
	}
	//资源的关闭
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}
%>

今天的分享就到这了，喜欢的可以点个关注哟，下期见

清晨喂

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb.04.登录&新闻增加

今天我们来讲一讲登陆和新闻增加功能首先,我们要实现登陆功能，就要把HTML文件改成JSP文件，不要直接改它后缀，因为直接改后缀会乱码，所以建议新建一个JSP文件，然后把HTML文件的内容复制过来，当然，记得保留下面面这一串代码，其他的都删除掉然后咱贴过来就行了在这里在强调一个问题，也是我经常忘记的一件事，一定要记得导入jar包，并且一定是要把他放在如图位置，也就是lib文件的里面当然，这还没有完全实现登陆功能，还需要把数据库连接上，我在这里使用的是oracle，首先在数据库创建好储存数据的表，存好
复制链接

扫一扫