JSP实现登录功能(页面带样式)

简介: JSP实现登录功能(页面带样式)

功能要求

1、完成两个页面

2、第一个登陆页面login. jsp

3、第二个用户管理页面useManage. jsp

4、有登录功能(能进行用户名密码的校验,用户名若为自己的学号密码为班级号,允许登录,否则不显示用户数据列表),有退出功能。


0.png

1.文件建立

2.png


2.BootStrap和jQuery引入

Bootstrap4.6.1下载网址

jQuery3.6.1下载网址

下载完成后如下图引入


3.png


3.login.jsp编写


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.6.1-dist/css/bootstrap.css"/>
</head>
<body>
<div style="align-content: center; width: 400px; height: 250px;text-align: center;margin:200px 500px;">
<form action="useManage.jsp" method="post">
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">姓名:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="uname">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">密码:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" name="upwd">
        </div>
    </div>
    <button class="btn btn-primary" style="align-content: center">登录</button>
</form>
</div>
</body>
</html>
<script type="text/javascript" src="bootstrap-4.6.1-dist/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.6.1-dist/js/bootstrap.js"></script>

4.useManage.jsp编写

为了方便测试,此处账号和密码设为了 admin和123456。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.6.1-dist/css/bootstrap.css"/>
</head>
<body>
<div style="width: 1000px;height: 600px;margin: 100px 250px">
<div >
<span style="margin: 150px;font-size: 20px">用户管理</span>
<span style="font-size: 20px">登录人:<% out.println("admin");%></span>
 <a href="login.jsp"><button class="btn btn-primary" style="float: right;margin:0px 200px">退出</button></a>
<span style="color:red;font-size:12px">${msg}</span>
</div>
<%
    String username = request.getParameter("uname");
    String password = request.getParameter("upwd");
    if (username.equals("admin") && password.equals("123456")) {
%>
<table class="table">
    <thead class="thead-light">
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">性别</th>
        <th scope="col">联系方式</th>
        <th scope="col">地址</th>
        <th scope="col">邮箱</th>
        <th scope="col">QQ</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">admin</th>
        <td>男</td>
        <td>11012121212</td>
        <td>北京通州市</td>
        <td>1019528265@qq.com</td>
        <td>1019528265</td>
    </tr>
    </tbody>
</table>
<%
} else {
%>
    <div style="margin: 50px 350px">
        <span style="font-size: 25px;">用户名或密码错误!</span>
    </div>
<%
    }
%>
</div>
</body>
</html>
<script type="text/javascript" src="bootstrap-4.6.1-dist/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.6.1-dist/js/bootstrap.js"></script>

5.测试

1. 登录页面login:


4.png


2. 用户名密码正确,useManage页面截图:

5.png

3. 用户名密码错误,useManage页面截图:

6.png



相关文章
|
2月前
|
自然语言处理 Java 数据库连接
掌握JSP页面编程:动态生成Web内容
【4月更文挑战第3天】Java Server Pages (JSP) 是一种用于创建动态Web内容的Java技术,它结合HTML并允许在页面中嵌入Java代码。JSP支持代码片段、表达式语言(EL)和JSTL标签库,简化动态内容生成。当服务器接收到请求时,执行JSP中的Java代码并将结果嵌入HTML返回给客户端。示例展示了如何显示当前日期和时间。JSP可与Servlet、JavaBeans、数据库等结合,用于构建功能丰富的交互式Web应用。
掌握JSP页面编程:动态生成Web内容
|
2月前
银行营业网点管理系统——修改的页面(updateBreaches.jsp)
银行营业网点管理系统——修改的页面(updateBreaches.jsp)
|
2月前
|
前端开发 Java
java通过commons-fileupload实现多张图片的上传(jsp页面)
java通过commons-fileupload实现多张图片的上传(jsp页面)
|
1月前
|
Java
JSP 教程 之 JSP 页面重定向 2
JSP页面重定向使用`response.sendRedirect()`或设置状态码和`Location`头来实现。简单示例展示如何将用户重定向至百度首页。保存代码到PageRedirecting.jsp,访问即生效。
18 3
|
1月前
|
Java
JSP 教程 之 JSP 页面重定向 1
JSP教程讲解了如何进行页面重定向,主要使用response对象的sendRedirect()方法,例如:`response.sendRedirect(&quot;http://www.baidu.com&quot;)`。此外,也可结合setStatus()和setHeader()方法实现相同功能,如:设置状态码为临时移动(SC_MOVED_TEMPORARILY)并设定Location头为指定URL,以引导浏览器访问新位置。
21 2
|
1月前
|
Java
杨校老师课堂之Html页面快速转为jsp页面之工具类【简直太简单好用】
杨校老师课堂之Html页面快速转为jsp页面之工具类【简直太简单好用】
17 0
|
1月前
|
SQL druid Java
javaweb案例实训之基于jsp和servlet的用户管理开发[增删改查及登录注销]
javaweb案例实训之基于jsp和servlet的用户管理开发[增删改查及登录注销]
19 0
|
1月前
|
SQL 数据可视化 数据库
基于jsp+servlet的javaweb实现最基本的用户注册登陆注销功能
基于jsp+servlet的javaweb实现最基本的用户注册登陆注销功能
13 0
|
2月前
|
存储 Java 应用服务中间件
JSP实现简易的聊天功能(Session机制)
这是一个使用JSP实现的简易聊天功能,基于Session机制和服务器端全局应用空间Application。用户通过login.jsp登录,信息存储在Session中。container.jsp展示聊天界面,包括用户列表、聊天内容和输入框,同时处理发送、清空和刷新等操作。view.jsp动态显示聊天历史,根据用户颜色选择改变消息显示。多用户间通过切换浏览器模拟聊天。网址格式为:http://localhost:8080/项目名/...。如果仅本机可访问,可能因不在同一局域网,需确保所有设备在同一网络并使用本机IP替代localhost。
20 3
|
29天前
|
自然语言处理 前端开发 Java
Servlet与JSP:Java Web开发的基石技术详解
【6月更文挑战第23天】Java Web的Servlet与JSP是动态网页的核心。Servlet是服务器端的Java应用,处理HTTP请求并响应;JSP则是结合HTML与Java代码的页面,用于动态内容生成。Servlet通过生命周期方法如`init()`、`service()`和`destroy()`工作,而JSP在执行时编译成Servlet。两者在MVC架构中分工,Servlet处理逻辑,JSP展示数据。尽管有Spring MVC等框架,Servlet和JSP仍是理解Web开发基础的关键。