功能要求

1、完成两个页面

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

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

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

1.文件建立

2.BootStrap和jQuery引入

Bootstrap4.6.1下载网址

jQuery3.6.1下载网址

下载完成后如下图引入

3.login.jsp编写

<%@ page import="java.net.http.HttpResponse" %>

<%@ 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实现登录功能（页面带样式）的更多相关文章

  1. JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现

    1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...

  2. SSH入门开发（实现一个简单的登录功能）详解

    开头,首先想记录下一首诗,是今天拇指阅读看到的:很有感触,所以乐于分享: 那么,下面正式开始进入正题,搭建一个 SSH完整的项目: 首先,我们需要在WEB-ROOT下创建一个login.jsp(登录) ...

  3. Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页

    前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...

  4. JSP实现登录删除添加星座等（带样式）

    功能要求 1.完成两个页面 2.第一个登陆页面login. jsp 3.第二个用户管理页面useManage. jsp 4.有登录功能(能进行用户名密码的校验,用户名若为自己的学号密码为班级号,允许登 ...

  5. 基于IntelliJ IDEA开发工具搭建SSM框架并实现页面登录功能详细讲解二

    接: 接下来配置类 UserController package com.chatRotbot.controller; import com.chatRotbot.model.User; import ...

  6. JSP（forward动作）登录功能

    <%@ page language= "java" contentType="text/html;charset=UTF-8" %><html ...

  7. 快速体验 Laravel 自带的注册、登录功能

    快速体验 Laravel 自带的注册.登录功能 注册.登录经常是一件很伤脑筋的是,Laravel 提供了解决方案,可以直接使用它.试过之后,感觉真爽! 前提:本地已安装好了 PHP 运行环境.mysq ...

  8. 微信开放平台PC端扫码登录功能个人总结

    最近公司给我安排一个微信登录的功能,需求是这样的: 1.登录授权 点击二维码图标后,登录界面切换为如下样式(二维码),微信扫描二维码并授权,即可成功登录:    若当前账号未绑定微信账号,扫描后提示“ ...

  9. node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能

    第一章 建议学习时间8小时·分两次学习      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...

随机推荐

  1. 第十天python3 函数的销毁

    全局函数销毁 三种方式: 1.重新定义同名函数 2.del语句删除函数对象 3.程序结束时 局部函数销毁 三种方式: 1.重新在上级作用域定义同名函数: 2.del语句删除函数对象: 3.上级作用域销 ...

  2. IP地址和端口号

    IP地址 IP地址:指互联网协议地址(Internet Protocol Address),俗称IP.IP地址用来给一个网络中的计算机设备做唯一的编号.加入我们吧"个人电脑"比作一 ...

  3. php static 和self区别

    static(关键字) 类似于 self(关键字) , 但它指向的是被调用的类(Document) 而不是包含类(DomainObject) , static 和 self 的区别: <?php ...

  4. C# 从补码中获取有符号数的实际数值

    C# 从补码中获取有符号数的实际数值 原理 计算机存储数据时,默认是存储数据的补码.有符号的数粗存在符号位(最高位). 这里就会提到原码.反码.补码的概念. 原码:用符号位和数值表示带符号数,正数的符 ...

  5. 若依 | 点击顶部 tag 标签不自动刷新

    需求场景 之前:只要点击若依顶部的标签,页面都会自动刷新. 问题:A 页面有查询结果,切换到 B 页面查看信息,再切回 A 页面,则 A 页面的查询结果不会保留. 需求:点击标签,页面不自动刷新,或者 ...

  6. Word 的页眉、页脚、页码分别是什么？怎么设置？

    页眉:在 Word 文档中,每个页面的顶部区域为页眉.常用于显示文档的附加信息,可以插入时间.图形.公司微标.文档标题.文件名或作者姓名等. 页脚:页脚与页眉的作用相同,都可以作为显示文档的附加信息, ...

  7. spring接口多实现类，该依赖注入哪一个？

    一.问题的描述 在实际的系统应用开发中我经常会遇到这样的一类需求,相信大家在工作中也会经常遇到: 同一个系统在多个省份部署. 一个业务在北京是一种实现方式,是基于北京用户的需求. 同样的业务在上海是另 ...

  8. POJ3761 Bubble Sort （组合数学，构造）

    题面 Bubble sort is a simple sorting algorithm. It works by repeatedly stepping through the list to be ...

  9. 座位安排（欧拉回路，高斯消元，bitset）

    题面 由于旋转大师 F r e n c h \rm French French 的离去, A r e x t r e \rm Arextre Arextre 光荣地承担了给全班换座位的重任. 由于这是 ...

  10. NOI 2019 省选模拟赛 T1【JZOJ6082】 染色问题(color) （多项式，数论优化）

    题面 一根长为 n 的无色纸条,每个位置依次编号为 1,2,3,-,n ,m 次操作,第 i 次操作把纸条的一段区间 [l,r] (l <= r , l,r ∈ {1,2,3,-,n})涂成颜色 ...