【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙

2023-06-12 77

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

RDS MySQL Serverless 基础系列，0.5-2RCU 50GB

云数据库 RDS MySQL，集群系列 2核4GB

RDS MySQL Serverless 高可用系列，价值2615元额度，1个月

简介： 虽然Cookie和Session都是暂时存在的，不久就会被删掉，但是我们要退出登录的时候，就不能等待其自然消除了~

2.2 前端设计

这个页面几乎照搬登录页面，只是增加了一些元素罢了~

用的css也直接用logIn.css和common.css

不包含js代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" href="logIn.css" />
    <style>
      #i {
        transition: all 0.618s;
        opacity: 61.8%;
      }
      #i:hover {
        opacity: 100%;
      }
    </style>
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <img
        src="https://img1.baidu.com/it/u=4205447136,2730860147&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"
        alt="未登录"
      />
      <div class="title">未登录</div>
      <div class="space"></div>
      <a href="login.html" onclick="remove()">登录</a>
    </div>
    <!-- 登录页面 -->
    <div class="login-Container">
      <div class="dialog">
        <h3>注册</h3>
        <form
          target="_blank"
          action="reg"
          method="POST"
          enctype="multipart/form-data"
        >
          <div id="fileImage">
            <input id="i" type="button" value="请上传头像" onclick="judge();" />
            <input type="file" name="file" style="display: none" />
            <div id="conf">
              <input
                type="submit"
                value="确认"
                id="co"
                onclick="alert(
                '如果你需要上传头像，则需要注意以下几点\n' +
                  '1. 点击右侧的确认按钮后，此用户名将无法更改头像！\n' +
                  '2. 用户名应为英文字符，否则虽然注册成功但是头像无法与您进行匹配！\n' +
                  '3. 若用户名已被注册过或者已绑定头像，则无法正常注册！\n' + 
                  '4. 只有填写用户名后才能上传图片，只有上传了图片才能点击确认，否则会出错\n'
              );"
              />
            </div>
          </div>
          <div class="row">
            <label for="username">用户名</label>
            <input type="text" id="username" name="name" />
          </div>
        </form>
        <div class="row">
          <label for="password">密码</label>
          <input type="password" id="password" onclick="getImage()" />
        </div>
        <div class="r">
          <input type="submit" id="submit" value="注册" onclick="reg()" />
        </div>
      </div>
    </div>
  </body>
</html>

改动1：头像触摸变化

改动2：头像和按钮

form包住了头像和用户名输入框

在确认的时候做一些提示~

改动3：对新增元素进行css修饰

#fileImage {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
}
#conf {
    display: flex;
    justify-content: center;
    align-items: center;
}
#co {
    width: 100px;
    height: 50px;
    color: rgba(255, 255, 255, 0.618);
    font-weight: 900;
    background-color: rgb(251, 114, 153);
    line-height: 50px;
    text-align: center;
    border-radius: 30px;
    border: none;
    transition: all 0.618s;
}
#co:hover {
    background-color: rgb(101, 94, 252);
    color: rgba(0, 0, 0, 0.618);
}
#i {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-image: url(https://img1.baidu.com/it/u=4205447136,2730860147&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: rgba(251, 114, 153, 0.5) 2px solid;
}

改动4：对其他元素进行微调（不演示）

2.2.1 form提交文件

由于上传文件按钮的样式难以更改，所以我们这里改为一下这种方式

用点击button代替点击上传文件按钮，并且让上传文件按钮消失

后面搭配一段代码即可

提交form的post请求按钮：

2.2.2 js代码

上传头像要在输入用户名后才能进行（judge函数的非空校验）

function judge() {
    var name = jQuery("#username");
    var password = jQuery("#password");
    if (name.val().trim() == "") {
        alert("请输入名字");
        name.focus();
        return;
    } else {
        javascript: $("input[name='file']").click();
        jQuery("#i").val("");
    }
}

确认按钮为form的方式去提交请求的，所以跟js无关~

点击密码框，显示头像

function getImage() {
    var name = jQuery("#username");
    var password = jQuery("#password");
    if (name.val().trim() == "") {
        alert("请输入名字！");
        name.focus();
        return;
    }
    var keyValue = {
        name: name.val(),
        password: password.val(),
    };
    jQuery.ajax({
        type: "post",
        url: "image",
        contentType: "application/json; charset=utf8",
        data: JSON.stringify(keyValue),
        success: function (body) {
            if (body != "No") {
                jQuery("#i").css("background-image", "url(" + body + ")");
                jQuery("#i").val("");
            } else {
                jQuery("#i").css(
                    "background-image",
                    "url(https://img1.baidu.com/it/u=4205447136,2730860147&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300)"
                );
                jQuery("#i").val("头像");
            }
        },
    });
}

提交注册

function reg() {
    var name = jQuery("#username");
    var password = jQuery("#password");
    if (name.val().trim() == "") {
        alert("清输入名字！");
        name.focus();
        return;
    }
    if (password.val().trim() == "") {
        alert("清输入密码！");
        password.focus();
        return;
    }
    var keyValue = {
        name: name.val(),
        password: password.val(),
    };
    jQuery.ajax({
        type: "post",
        url: "save",
        contentType: "application/json; charset=utf8",
        data: JSON.stringify(keyValue),
        success: function (body) {
            if (body == "No") {
                alert("用户存在");
                name.val("");
                password.val("");
                name.focus();
                jQuery("#i").css(
                    "background-image",
                    "url(https://img1.baidu.com/it/u=4205447136,2730860147&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300)"
                );
            } else {
                alert("注册成功");
                window.location.href = "login.html";
            }
        },
    });
}

2.2.3 补充：登录页头像显示

原理一致~

3. 登录页面提供注册与忘记密码按钮

源码直接在码云看就行了~

3.1 注册按钮

简单的跳转~

3.2 忘记密码

忘记密码特别简单，就是直接在数据库里拿到密码，然后返回给输入框~

function toGetPassword() {
    var name = jQuery("#username");
    var password = jQuery("#password");
    if (name.val().trim() == "") {
        alert("请输入是谁！");
        name.focus();
        return;
    }
    var keyValue = {
        name: name.val(),
        password: password.val(),
    };
    jQuery.ajax({
        type: "POST",
        url: "remind",
        contentType: "application/json; charset=utf8",
        data: JSON.stringify(keyValue),
        success: function (body) {
            if (body != "No") {
                jQuery("#password").val(body);
            } else {
                alert("不存在这个用户！");
            }
        },
    });
}

后端中(新的servlet类 Remind)：

@WebServlet("/remind")
public class Remind extends HttpServlet {
    ObjectMapper objectMapper = new ObjectMapper();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        User user = objectMapper.readValue(req.getInputStream(), User.class);
        resp.setContentType("text/html; charset=utf8");
        String name = user.name;
        DataSource dataSource = new MysqlDataSource();
        ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/Loves?characterEncoding=utf8&useSSL=false");
        ((MysqlDataSource)dataSource).setUser("root");
        ((MysqlDataSource)dataSource).setPassword("mmsszsd666");//这是俺的微信号，欢迎添加，相互学习！
        try {
            Connection connection = dataSource.getConnection();
            String sql = "select * from users where name = '" + name + "';";
            PreparedStatement preparedStatement = connection.prepareStatement(sql);
            ResultSet set = preparedStatement.executeQuery();
            if(set.next()) {
                resp.getWriter().write(set.getString("password"));
            }else {
                resp.getWriter().write("No");
            }
            set.close();
            preparedStatement.close();
            connection.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

4. 测试

登录与退出登录测试：

注册测试：

重复注册测试：

【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙

2.2 前端设计

2.2.1 form提交文件

2.2.2 js代码

2.2.3 补充：登录页头像显示

3. 登录页面提供注册与忘记密码按钮

3.1 注册按钮

3.2 忘记密码

4. 测试

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【JavaEE】使Cookie与Session失效-Servlet上传文件操作-优化表白墙

2.2 前端设计

2.2.1 form提交文件

2.2.2 js代码

2.2.3 补充：登录页头像显示

3. 登录页面提供注册与忘记密码按钮

3.1 注册按钮

3.2 忘记密码

4. 测试

热门文章

最新文章

相关课程

相关电子书