JavaWeb之网页登陆&增加操作

小阿飞_

已于 2022-03-28 22:19:46 修改

阅读量1.7k

点赞数 9

分类专栏： Web 文章标签： java html5 后端

于 2022-03-28 20:54:04 首次发布

本文链接：https://blog.csdn.net/yifei_345678/article/details/123802617

版权

Web 专栏收录该内容

30 篇文章 3 订阅

订阅专栏

开发web项目必不可少的功能：登陆(表单的提交)，增加网页内容，想学的🐒🐒们就来看叭

渴求知识的目光：~如猫求鱼~

我使用了几个界面来演示我要讲的内容，先简单地介绍一下🙂

用到的界面有😊：

❀登陆界面和处理登陆的界面❀

❀增加界面和处理增加的界面❀

一，网页登陆

在开发web项目过程中，少不了用户的登陆，即表单的提交。登陆界面和处理登陆的后台要进行联动，再加上界面的跳转，数据库的连接，才能保证登陆功能的实现。

界面的跳转，数据库的连接相关代码见文章：JavaWeb之页面跳转&数据库连接_小阿飞_的博客-CSDN博客

这里要对页面跳转的知识进行补充：

1，跳转时路径的写法

例如：

1，a.jsp 跳转到同级路径下的a.jsp (localhost:8080/web04/a.jsp)

2，../a.jsp 跳转到上一级(../)路径下的a.jsp (localhost:8080/a.jsp)

3，/a.jsp 根目录的a.jsp (localhost:8080/a.jsp)，根目录就是localhost:8080

2，登陆功能

登陆功能的详细代码：

Oracle数据库建表：

create table user_01
(
    uname varchar2(20) not null,
    upwd varchar2(20) not null
);
insert into user_01 values('aa','123');
commit;

登陆界面代码：

<%@ 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 name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/web_04/bootstrap-3.3.7-dist/css/bootstrap.css">
    <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 name="yh" type="text" class="form-control" id="username" placeholder="请输入您的用户名">
        </div>
        <div class="form-group">
            <input name="mm" type="password" class="form-control" id="password" placeholder="请输入您的密码">
        </div>
        <div class="btn-group">
            <button type="submit" class="btn btn-primary">登录</button>
<button type="button" class="btn btn-danger" onclick='location=href="regiest.html"'>没有账号?</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>

处理登陆界面功能的代码：

<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@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"%>
<%
	//4步骤时：
	request.setCharacterEncoding("UTF-8");//防止值乱码
	//获取请求的值
	//request.getParameter("放前端login界面的值name");
	String yh=request.getParameter("yh");
	String mm=request.getParameter("mm");
	//4.将这两个值赋值给执行对象
	//连接数据库：
	//1.加载驱动
	//OracleDriver 导入长的那个！！！
	Class.forName("oracle.jdbc.driver.OracleDriver");
	//2.定义连接字符串
	String URL="jdbc:oracle:thin:@localhost:1521:orcl";
	//3.获得连接
	Connection con=DriverManager.getConnection(URL,"scott","xyf123");
	//4.获得执行对象（将用户输入的数据与数据库进行比对,能在数据库中找到结果就跳转到主界面）
PreparedStatement ps=con.prepareStatement("select * from user_01 where uname=? and upwd=?");
	ps.setString(1, yh);
	ps.setString(2, mm);
	//5.获得结果集
	ResultSet rs=ps.executeQuery();
	//6.遍历结果集 
	if(rs.next()){
		//登陆成功跳转到主界面
		//转发，服务器行为
		//运行路径 在根目录localhost:8089之后加上/news/index.jsp
		request.getRequestDispatcher("/news/index.jsp").forward(request, response);
	}else{		
		//重定向 客户端行为，根目录:localhost:8089
		//登陆失败就跳转到登陆界面
		//1，a.jsp  跳转到同级路径下的a.jsp (localhost:8080/web04/a.jsp)
		response.sendRedirect("login.jsp");
	}
	//7.关闭连接
	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 name="viewport" content="width=device-width, initial-scale=1">
    <!-- /web_04:根目录下的当前项目 -->
    <link rel="stylesheet" href="/web_04/bootstrap-3.3.7-dist/css/bootstrap.css">
    <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;
        }
        input,
        select,
        textarea,
        .panel-heading {
            border: none !important;
            border-radius: 0px !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="/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 name="title" class="form-control" maxlength="50" required placeholder="标题控制在30个字之内哦~~~">
            <div class="panel-heading">新闻类别</div>
            <select name="topic" class=" form-control">
           <!-- topic的1是字符串类型的1 -->
                <option value="1">军事1</option>
                <option value="1">军事2</option>
                <option value="1">军事3</option>
                <option value="1">军事4</option>
                <option value="1">军事5</option>
                <option value="1">军事6</option>
            </select>
            <div class="panel-heading">新闻作者</div>
            <!-- 给输入框添加name属性,方便后台doAdd拿值 -->
            <input name="author" class="form-control" maxlength="10" required placeholder="名字控制在10个字之内哦~~~">
            <div class="panel-heading">发布时间</div>
            <input name="publisher" type="date" class="form-control">
            <div class="panel-heading">新闻内容</div>
            <textarea name="content" class="form-control" rows="10" required placeholder="🙅‍达咩~~~~这是必填的"></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.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");
	//新闻的添加，添加到数据库中
	//a，连接数据库
	//1.加载驱动
	//OracleDriver
	Class.forName("oracle.jdbc.OracleDriver");
	//2.定义连接字符串
	String URL="jdbc:oracle:thin:@localhost:1521:orcl";
	//3.获得连接
	Connection con=DriverManager.getConnection(URL,"scott","xyf123");
	//4.获得执行对象
	// 主键不能不填
	// 主键没有自增的选项（触发器+序列可以完成自增）
	//获得执行对象【数据插入之前，先把主键查询出来】:
	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++;//避免主键重复
	//插入新闻的操作
	PreparedStatement ps1=con.prepareStatement("insert into t_news(news_id, news_title, news_topic, news_author, news_publisher, news_content) values(?,?,?,?,?,?)");
	//赋值
	ps1.setInt(1, id);//第一列是id
	ps1.setString(2, title);
	ps1.setInt(3, Integer.parseInt(topic));//int
	ps1.setString(4, author);
	ps1.setString(5, publisher);
	ps1.setString(6, content);
	//System.out.print(id+"+"+title+"+"+topic);
	//System.out.print(author+"+"+publisher+"+"+content);看有没有没有拿到值的属性
	//执行结果
	int n=ps1.executeUpdate();//增，删，改查询结果是int
	if(n>0){
		//页面跳转路径如果写错会报404错误
		out.print("<script>alert('增加成功');location.href='index.jsp'</script>");
	}else{
		out.print("<script>alert('增加失败');location.href='index.jsp'</script>");
	}
	//资源的关闭
	if(con!=null&&!con.isClosed()){
		con.close();
	}
	if(ps!=null){
		ps.close();
	}
	if(rs!=null){
		rs.close();
	}
%>

运行如下：

当在增加界面输入要增加的内容后，点击增加按钮就会跳转到主界面了

事业的成功，也在于再坚持一下的努力之中，盲目急躁是不足取的，共勉🙂

小阿飞_

关注

9
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb之网页登陆&增加操作

开发web项目必不可少的功能：登陆(表单的提交)，增加网页内容，想学的🐒🐒们就来看叭渴求知识的目光：~如猫求鱼~这里我使用了几个界面来演示我要讲的内容，先简单地介绍一下🙂用到的界面有😊：❀登陆界面和处理登陆的界面❀❀增加界面和处理增加的界面❀❀主界面❀网页登陆在开发web项目过程中，少不了用户的登陆，即表单的提交主界面功能登陆功能网页上的增加操作增加功能...
复制链接

扫一扫