实验六 JSP内置对象

最新推荐文章于 2024-10-09 20:10:15 发布

m0_69670999

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量97

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_69670999/article/details/134000244

版权

文章介绍了如何设计一个简单的后台管理系统，包括用户登录验证功能，使用Java和JavaScript编写了测试1.jsp和other.jsp的示例代码，以及一个基于session实现的随机数猜数字小游戏guess.jsp的源码。

摘要由CSDN通过智能技术生成

2、设计一个简单的后台管理系统，用户通过登陆页面的合法验证后才能使用其他页面，否则访问这些页面是跳转回登陆页面。

1）要求设计用户类和用户账号的验证方法

2） “其他页面”可以编写任意内容，用户在未进行登陆验证时，该页面无法直接访问，直接访问该页面会导致跳转到登录页。

test1.jsp源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台管理系统</title>
    <style>
        label {
            cursor: pointer;
            display: inline-block;
            padding: 3px 6px;
            text-align: left;
            width: 150px;
            vertical-align: top;
            margin-left: 500px;
        }
    </style>
</head>
<body style="margin-top: 250px">
<h1 style="color: deeppink;margin-left: 680px">登录页面</h1>
<form action="other.jsp" method="post" onsubmit="return login()">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username" onblur="judeUsername()">
    <span id="usernameError" style="color: red"></span><br>

    <label for="password">用户密码：</label>
    <input type="text" name="password" id="password" onblur="judePassword()">
    <span id="passwordError" style="color: red"></span><br>

    <input type="submit" value="登录" style="margin-left: 700px;margin-top: 5px">
</form>


<script>
    let Usernameok;
    let Passwordok;

    class User {
        constructor(username, password) {
            this.username = username;
            this.password = password;
        }
    }

    const users = [
        new User("admin", "123456"),
        new User("an123", "123"),
        new User("an1234", "abc")
    ];

    function judeUsername() {
        let usernameInput = document.getElementById("username");
        let usernameError = document.getElementById("usernameError");

        if (usernameInput.value === "") {
            usernameError.textContent = "用户名不能为空";
            Usernameok = false
        } else if (usernameInput.value.length > 8) {
            usernameError.textContent = "用户名长度不能超过8个字符";
            Usernameok = false;
        } else {
            usernameError.textContent = "";
            Usernameok = true;
        }
    }

    function judePassword() {
        let passwordInput = document.getElementById("password");
        let passwordError = document.getElementById("passwordError");
        let reg = /^[0-9]+$/;

        if (passwordInput.value === "") {
            passwordError.textContent = "密码不能为空";
            Passwordok = false
        } else if (!reg.test(passwordInput.value)) {
            passwordError.textContent = "密码必须为纯数字";
            Passwordok = false;
        } else {
            passwordError.textContent = "";
            Passwordok = true;
        }
    }

    function login() {
        const usernameInput = document.getElementById("username").value;
        const passwordInput = document.getElementById("password").value;

        if (Passwordok && Usernameok) {
            for (const user of users) {
                if (usernameInput === user.username && passwordInput === user.password) {
                    alert("登录成功");
                    sessionStorage.setItem("loginStatus", "true");
                    return true;
                }
            }
            alert("用户名或密码不正确");
            return false;
        } else {
            alert("你的用户名或密码格式存在问题");
            return false;
        }
    }
</script>
</body>
</html>

other.jsp源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>后台管理系统</title>
</head>
<body>
<script>
    const value1 = sessionStorage.getItem("loginStatus");
    if (value1 !== "true") {
        window.location.href = "test1.jsp";
    }
</script>
<h1 style="color: deeppink;text-align: center;margin-top: 250px">未验证的用户进不入这里</h1>
</body>
</html>

效果图：

3、编写一个猜数字的小游戏。当用户访问页面c1.jsp时，服务器随机分配给用户一个1~100的整数（Math.Random可以在[0.0,1.0]范围内产生随机数），然后将这个证书存在用户的session对象中。

用户单击超链接“去猜这个数”，将转到页面guess.jsp。在该页面中，如果猜测数大于机器生成的数，显示“您猜大了”和这是第几次猜测；如果猜小了，显示“您猜小了”和这是第几次猜测；如果相等，显示“您猜对了”和这是第几次查册，同时下面显示一个超链接“重新获得随机数”，单击此链接返回c1.j页面重新开始猜数。

c1.jsp源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>猜数字小游戏</title>
</head>
<body>
<a href="guess.jsp" style="position: fixed; top: 280px;left: 620px;font-size: 35px;color: red">去猜这个数</a>
<script>
    let num = Math.floor(Math.random() * 100) + 1;
    sessionStorage.setItem("randomNum", num.toString());
</script>
</body>
</html>

guess.jsp源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字小游戏</title>
    <style>
        #i1 {
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            padding: 85px;
            margin-top: 150px;
            margin-left: 500px;
        }
    </style>
</head>
<body>
<div id="i1">
    <span>请输入您猜的数字：</span>
    <input type="text" id="text">
    <input type="button" value="猜" id="guess" min="1" max="100"><br>
    <span>您已经猜的次数：</span>
    <span id="count">0</span><br>
    结果：<span class="c1"></span><br>
    <br><input type="button" value="重新开始游戏" id="reBu">
</div>
</body>
<script>
    let text = document.querySelector("#text");//获取输入元素
    let count = document.querySelector("#count");//获取次数元素
    let result = document.querySelector(".c1");//获取结果元素
    let guessBu = document.querySelector("#guess");//获取“猜”按钮元素
    let reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
    let sum = 0;//猜的总次数

    const randomNumber = parseInt(sessionStorage.getItem("randomNum"));
    if (isNaN(randomNumber)) {
        window.location.href = "c1.jsp";
    }

    guessBu.onclick = function () { //给“猜”按钮绑定点击功能
        sum++;
        count.innerHTML = sum.toString();
        let userGuess = parseInt(text.value);//获取输入的数字
        if (userGuess > randomNumber) { //如果输入大于系统生成数字
            result.innerHTML = "很遗憾，您猜大了！";
            result.style.color = "red"; //调正颜色为红色
        } else if (userGuess < randomNumber) {//如果输入小于系统生成数字
            result.innerHTML = "很遗憾，您猜小了！";
            result.style.color = "red";
        } else {
            result.className = "c2";
            result.innerHTML = "恭喜您，您猜对了！";
            result.style.color = "green";//调整颜色为绿色
        }
    }
    reBu.onclick = function () {
        window.location.href = "c1.jsp";
    }
</script>
</html>

效果图：

m0_69670999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫