功能要求

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. CodeQL使用流程

    前言 好久没用CodeQL了,看了自己之前写的文章发现竟然没有做过相关记录 然后就不知道怎么用了hhh 使用流程 0x1 生成数据库 我们拿到一套源码,首先需要使用CodeQL生成数据库 执行命令: ...

  2. mac下安装YII

    新换了台电脑,一个mac,特蛋疼的各种环境安装.两个多小时,总算把开发环境配好了. XAMPP就不用说了,phpstorm(javaEE 6.0),navicat for mysql ,一堆的注册码, ...

  3. 奇技淫巧玄妙无穷| M1 mac os(苹果/AppleSilicon)系统的基本操作和设置

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_191 最近有个朋友跟我说,说他新入职了一家公司,公司还不错,给他配了一台Mac,但是呢他以前一直在Windows环境下开发,对Ma ...

  4. 企业级数据治理工作怎么开展？Datahub这样做

    大数据发展到今天,扮演了越来越重要的作用.数据可以为各种组织和企业提供关键决策的支持,也可以通过数据分析帮助发现更多的有价值的东西,如商机.风险等等. 在数据治理工作开展的时候,往往会有一个专门负责数 ...

  5. How to code like a pro in 2022 and avoid If-Else

    在浏览文章的时候发现了一篇叙述有关if-else语句的文章,这篇文章作者是Thai Tran,他原文是用英语写的,然后看着文章浅显易懂,便尝试翻译成汉语.如有不妥还望指出. 原文链接:https:// ...

  6. 开源深度思考 - In Community We Trust

    作者 | 黄东旭,PingCAP 联合创始人&CTO 出品 | CSDN(ID:CSDNnews) 业界一直流传着黄东旭的传说:小学三年级开始写代码,四五年级学习C语言,初中毕业时,已经能够用 ...

  7. DolphinScheduler 源码剖析之 Master 容错处理流程

    点击上方蓝字关注 Apache DolphinScheduler Apache DolphinScheduler(incubating),简称"DS", 中文名 "海豚调 ...

  8. 《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(12)-Fiddler设置IOS手机抓包，你知多少？？？

    1.简介 Fiddler不但能截获各种浏览器发出的 HTTP 请求,也可以截获各种智能手机发出的HTTP/ HTTPS 请求. Fiddler 能捕获Android 和 Windows Phone 等 ...

  9. Java学习--基础

    java学习 基础 Java三大版本 javase 标准版 占领桌面端(基础) javame 移动版 嵌入式开发.占领手机端 javaee 企业版 占领服务器端 Java的特性和优势 跨平台.可移植性 ...

  10. Redis 12 持久化

    参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本 本文章基于 Redis 6.2.6 概述 Redi ...