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

2023-06-12 49

版权

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

本文涉及的产品

云数据库 RDS MySQL Serverless，0.5-2RCU 50GB

云数据库 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. 测试

热门文章

最新文章

相关课程

相关电子书