功能要求

1、完成两个页面
2、第一个登陆页面login. jsp
3、第二个用户管理页面useManage. jsp
4、有登录功能(能进行用户名密码的校验，用户名若为自己的学号密码为班级号，允许登录，否则不显示用户数据列表)，有退出功能。

1.文件建立

2.BootStrap和jQuery引入

Bootstrap4.6.1下载网址

jQuery3.6.1下载网址

下载完成后如下图引入

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：

2. 用户名密码正确，useManage页面截图：

3. 用户名密码错误，useManage页面截图：

JSP实现登录功能（页面带样式）相关推荐

微信小程序云开发实现收藏及收藏页面(带样式布局)
第三个版本修改,应该没问题了没找到完整的教程,自己琢磨着做了一个一开始尝试用缓存数组做,但是一直搞不定取消收藏时删除对应的缓存数组数据,于是放弃. 又采用了数据库的方法,但是因为我收藏的不同表太多 ...
Java Web应用小案例：实现登录功能
文章目录一.采用纯JSP实现登录功能 1.创建Web项目LoginDemo 2.在web目录下创建login.jsp页面
Vue3+Element-PIus 登录功能业务流程设计五
1 登录业务流程 1.1登录业务流程 ① 在登录页面输入用户名和密码 ② 调用后台接口进行验证 ③ 通过验证之后,根据后台的响应状态跳转到项目主页 1.2登录业务的相关技术点 ① http 是无状态的 ...
servlet实现简单登录功能-基于测试驱动开发TDD
今天学习了测试驱动开发(TDD)模式,用这个方法写一个简单的前端登录功能(基于servlet&Jsp的登录功能-三层架构实现) 不知道测试驱动开发,可以点这个: https://blog.cs ...
day17--途牛旅游项目-登录功能V2
day17–途牛旅游项目-登录功能V2 学习目标 (1)改进登录 (2)注册功能 MySessionUtils改进 (1) A依赖B,移除B,A报错,耦合 public static <T> ...
JSP实现登录删除添加星座等（带样式）
功能要求 1.完成两个页面 2.第一个登陆页面login. jsp 3.第二个用户管理页面useManage. jsp 4.有登录功能(能进行用户名密码的校验,用户名若为自己的学号密码为班级号,允许登 ...
jsp oracle 登录页面,Oracle数据库之ORACLE+Myeclipse+jsp实现简单登录功能
本文主要向大家介绍了Oracle数据库之ORACLE+Myeclipse+jsp实现简单登录功能,通过具体的内容向大家展现,希望对大家学习Oracle数据库有所帮助. Oracle数据库表的建立: c ...
JSP小项目，会员管理系统之实现登录功能
1.上学期,在学期结束之际,学校安排实训,做了一个小小的JSP会员管理系统,今天,来介绍一下会员管理系统中的登录模块,此系统是使用JSP和Servlet技术,在加上JavaBean来实现的,是一个MV ...
基于Jquery实现登录功能的前端页面
本篇文章讲解如何用jquery完成登录功能的前端页面展示 html部分: <div class="name"><label>用户名:</label&g ...

JSP实现登录功能（页面带样式）

功能要求

1.文件建立

2.BootStrap和jQuery引入

Bootstrap4.6.1下载网址

jQuery3.6.1下载网址

下载完成后如下图引入

3.login.jsp编写

4.useManage.jsp编写

5.测试

1. 登录页面login：

2. 用户名密码正确，useManage页面截图：

3. 用户名密码错误，useManage页面截图：

JSP实现登录功能（页面带样式）相关推荐

最新文章

热门文章