当前位置：主页 > 查看内容

任务卡_06-JavaWEB_Servlet【简单美观的动态登录页面功能设计，

发布时间：2021-07-12 00:00| 有位朋友查看

简介：目录一动态登录功能 1任务概述 2任务过程 3参考代码 3.1 配置说明 3.2 设置数据库 3.3 编写代码 3.4 运行效果一动态登录功能 1任务概述任意一个项目或 APP必不可少的就是登录模块用户登录成功或失败跳转到不同结果页面现在刘磊接到组长分配的任务需要给……

一，动态登录功能

1，任务概述

任意一个项目或 APP，必不可少的就是登录模块，用户登录成功或失败，跳转到不同结果页面，现在刘磊接到组长分配的任务，需要给项目添加一个登录模块，要求贴切真实网站需求，页面有表单验证，后台连接数据库真实判断，跳转到不同页面给用户提示

2，任务过程

Servlet 创建?
Servlet 的配置?
Servlet 的访问?
Servlet 中添加业务逻辑代码(连接数据库)

3，参考代码

3.1 配置说明

1，创建web项目，配置lib和classes

可以参考这里@ &再见萤火虫&【06-JavaWEB_环境搭建——五，idea配置tomcat】

2，初始页面地址及Application context设置

在我的IDE中，创建好web项目后，进入edit Configuration，会发现Server中的URL和Deployment中的Application context中默认的都是【项目名_war_exploded】

个人习惯改成下面的样子，这样程序一运行就能转到登录页面，手动向地址栏输入地址时，只需要将login.html替换掉即可

3，配置mysql-connector? jar包（这个需要自己找一下，也可以查找最下面的QQ群，文件夹中有需要的常用jar包）

3.2 设置数据库

在demo（自定义名称）数据库中创建users（自定义名称）表

3.3 编写代码

项目结构如下：

1，前端页面

页面样式主要参考@Albert Yang【html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面】，页面设计属实惊艳*★,°*:.☆(￣▽￣)/$:*.°★* 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link href="css/MyLogin.css" rel="stylesheet" type="text/css">
</head>
<body>

    <section>
        <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登录框 -->
            <div class="container">
                <div class="form">
                    <h2>登录</h2>
                    <form action="loginRequest" method="post">
                        <div class="inputBox">
                            <input name="username" type="text" placeholder="账户" required autofocus>
                        </div>

                        <div class="inputBox">
                            <input name="password" type="password" placeholder="密码" required>
                        </div>

                        <div class="inputBox">
                            <input type="submit" value="登录">
                        </div>

                        <p class="forget">忘记密码?<a href="#">点击这里</a></p>
                        <p class="forget">没有账户?<a href="#">注册</a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>


</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>success</title>
</head>
<body>
    <h1>登陆成功！</h1>
</body>
</html>

fail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fail</title>
</head>
<body>
    <h1>登陆失败</h1>
</body>
</html>

MyLogin.css

/* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 使用flex布局，让内容垂直和水平居中 */

section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

/* 背景颜色 */

section .color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}

section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}

section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}

.box {
    position: relative;
}

/* 背景圆样式 */

.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转
    calc() 函数用于动态计算长度值
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
    animation: animate 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--x) * -1s);
}

/* 背景圆动画 */

@keyframes animate {
    0%, 100%{
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}

.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}

.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}

.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}

.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}

/* 登录框样式 */

.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}

/* 登录标题样式 */

.form h2 {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}

/* 登录标题的下划线样式 */

.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}

.form h2:hover:before {
    width: 53px;
}

.form .inputBox {
    width: 100%;
    margin-top: 20px;
}

/* 输入框样式 */

.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form .inputBox input::placeholder {
    color: #fff;
}

/* 登录按钮样式 */

.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 100px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}

.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}

.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

2，数据库交互逻辑

UserDao.java

package web;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class UserDao {
    public boolean checkLogin(String username, String password) {
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/你的数据库名称?useUnicode=true&characterEncoding=utf-8", "你的账号", "你的账号密码");
            // 使用预编译防止SQL注入
            PreparedStatement state = connection.prepareStatement("select * from users where username=? and password=?");
            state.setString(1, username);
            state.setString(2, password);
            ResultSet rs = state.executeQuery();
            return rs.next();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return false;
    }
}

3，servlet设计（使用注解方式配置）

LoginServlet.java

package web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/loginRequest")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置post编码格式，否则解析数据会乱码，报错
        req.setCharacterEncoding("UTF-8");
        // 这里的参数要和login.html中input标签的name属性匹配
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("username: " + username);
        System.out.println("password: " + password);
        UserDao dao = new UserDao();
        if(dao.checkLogin(username, password)) {
            // 重定向方式
            resp.sendRedirect("success.html");
        } else {
            // 转发方式
            req.getRequestDispatcher("/fail.html").forward(req, resp);
        }
    }
}

3.4 运行效果

章节汇总在这里（づ￣3￣）づ╭?～@&再见萤火虫&【06-JavaWEB】

对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

；原文链接：https://blog.csdn.net/qq_41528502/article/details/115676972
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：SQL Server 数据库实验课第七周——授权：授予与收回 下一篇：没有了

随机推荐

kubernetes 安装新版metrics-server

由于晚上的文档是有些旧所以我踩坑写了个新的内容不是特别详细,但是足够将pod跑...
XML 轻松学习手册(比较不错)第1/3页

我想就我个人学习过程的心得和经验，写一篇比较全面的介绍文章。首先有两点是需...
学MySQL，这篇万字总结，真的够用了

这篇文章将从查询缓存，索引，优化器，explain，redo 日志，undo 日志，事务隔离...
RegExp 随笔 JavaScript RegExp 对象

概述 RegExp 的构造函数创建了一个正则表达式对象，用模式来匹配文本。有关正则...
JSP 中Hibernate实现映射枚举类型

JSP 中Hibernate实现映射枚举类型问题： Java BO类Gender是枚举类型，想在数据...
Flutter渲染之Widget、Element、RenderOb

一、Flutter架构众所周知，Flutter是由Google推出的开源的高性能跨平台框架，一...
js实现扫雷源代码

经过一段时间学习，对javascript有了一个初步的了解自己制作了一个扫雷，源代码+...
谷歌胜诉！10年Java版权案终结

长达十年的甲骨文诉谷歌安卓系统 Java 源代码侵权案终于尘埃落定美国最高法院本...
Golang 1.16中Module机制更新

最近，Golang发布了一个新版本1.16。版本引入了很多新功能，其中在模块方面的改...
浅谈ASP数据库下载漏洞

作为脚本漏洞的头号杀手锏——数据库下载漏洞，现在已经被越来越多的人所熟知。...

任务卡_06-JavaWEB_Servlet【简单美观的动态登录页面功能设计，

一，动态登录功能

1，任务概述

2，任务过程

3，参考代码

3.1 配置说明

3.2 设置数据库

3.3 编写代码

3.4 运行效果

推荐图文

使用webpack5从0到1搭建一个react项目的实现步骤

2021年的第一个小目标：软考高级

.NET C#支付宝条码支付接口详解

正则表达式u修饰符(支持UTF-16编码)

C++二叉搜索树转换成双向循环链表（双指针或数组）

一口气搞懂MySQL索引所有知识点

随机推荐

kubernetes 安装新版metrics-server

XML 轻松学习手册(比较不错)第1/3页

学MySQL，这篇万字总结，真的够用了

RegExp 随笔 JavaScript RegExp 对象

JSP 中Hibernate实现映射枚举类型

Flutter渲染之Widget、Element、RenderOb

js实现扫雷源代码

谷歌胜诉！10年Java版权案终结

Golang 1.16中Module机制更新

浅谈ASP数据库下载漏洞

关于我们