首页 > 其他分享 >12.6

12.6

时间：2023-12-18 21:24:29浏览次数：25  
标签：username const border value 12.6 document data

index.html

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 20px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<body>
<div class="centered-form">
    <div class="bordered-form">
        <h1>用户登录</h1>
        <form id="login">
            <label for="username">用户名:</label><input type="text" id="username">
            <br>
            <label for="password">密码:</label><input type="password" id="password">
            <br>
            <label>职位:</label>
            <div id="loginUser">
                <label><input type="radio" name="loginUser" value="教师">教师</label>
                <label><input type="radio" name="loginUser" value="学生">学生</label>
                <label><input type="radio" name="loginUser" value="管理员">管理员</label>
            </div>
            <div class="centered-buttons">
                <button type="submit" style="display: block; margin: 0 auto;">登录</button>
                <br>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    document.getElementById("login").addEventListener("submit", function (event) {
        event.preventDefault();
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        const loginUser = document.querySelectorAll('input[name="loginUser"]');
        let l;

        loginUser.forEach(radio => {
            if (radio.checked) {
                l = radio.value;
            }
        });
        const url = `user/getByUser?username=${username}&password=${password}&position=${l}`;
        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data === 1) {
                    alert("登录成功");
                    if (l === '管理员') {
                        window.location.href = "ROOT/administrator.html?username=" + encodeURIComponent(username);
                    } else if (l === '学生') {
                        window.location.href = "STUDENT/student.html?username=" + encodeURIComponent(username);
                    } else if (l === '教师') {
                        window.location.href = "TEACHER/teacher.html?username=" + encodeURIComponent(username);
                    }
                } else {
                    alert("登录失败");
                    console.log(data);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
</html>
复制代码

ROOT/add1.html

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师信息添加</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 20px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<body>
<h1 style="text-align: center">添加信息</h1>
<div class="centered-form">
    <div class="bordered-form">
        <div class="form">
            <form id="addForm">
                <label for="username">请输入用户名</label>
                <input type="text" id="username" minlength="8" maxlength="8" required>
                <br>
                <label for="name">请输入姓名</label>
                <input type="text" id="name">
                <br>
                <label>性别:</label>
                <div id="sex">
                    <label><input type="radio" name="sex" value="男">男</label>
                    <label><input type="radio" name="sex" value="女">女</label>
                </div>
                <br>
                <label for="college">请输入所属学院</label>
                <input type="text" id="college">
                <br>
                <label>职位:</label>
                <div id="position">
                    <label><input type="radio" name="position" value="教授">教授</label>
                    <label><input type="radio" name="position" value="副教授">副教授</label>
                    <label><input type="radio" name="position" value="讲师">讲师</label>
                    <label><input type="radio" name="position" value="助教">助教</label>
                </div>
                <button type="submit" style="display: block; margin: 0 auto;">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('addForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const username = document.getElementById('username');
        const name = document.getElementById('name');
        const college = document.getElementById('college');
        const sex = document.querySelectorAll('input[name="sex"]');
        let s;
        sex.forEach(radio => {
            if (radio.checked) {
                s = radio.value;
            }
        });
        const position = document.querySelectorAll('input[name="position"]');
        let p;
        position.forEach(radio => {
            if (radio.checked) {
                p = radio.value;
            }
        });
        console.log(username.value + "   " + name.value + "   " + s + "  " + college.value + "  " + p);
        addUser(username.value, "教师");
        addTea(username.value, name.value, s, college.value, p);
    });
</script>
<script>
    function addUser(username, role) {
        const requestUrl = 'http://localhost:8080/user/addUser';
        console.log(role);
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    userName: username,
                    password: "123456",
                    position: role,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("已将登录信息添加到数据库");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function addTea(username, name, s, college, p) {
        const requestUrl = 'http://localhost:8080/user/addTea';
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    teacherID: username,
                    teacherName: name,
                    teacherSex: s,
                    teacherCollege: college,
                    position: p,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("添加角色成功");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>
复制代码

add2.html

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息添加</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 20px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<body>
<h1 style="text-align: center">添加信息</h1>
<div class="centered-form">
    <div class="bordered-form">
        <div class="form">
            <form id="addForm">
                <label for="username">请输入学号</label>
                <input type="text" id="username" minlength="8" maxlength="8" required>
                <br>
                <label for="name">请输入姓名</label>
                <input type="text" id="name">
                <br>
                <label>性别:</label>
                <div id="sex">
                    <label><input type="radio" name="sex" value="男">男</label>
                    <label><input type="radio" name="sex" value="女">女</label>
                </div>
                <br>
                <label for="college">请输入所属班级</label>
                <input type="text" id="college">
                <br>
                <label for="major">请输入所属专业</label>
                <input type="text" id="major">
                <button type="submit" style="display: block; margin: 0 auto;">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('addForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const username = document.getElementById('username');
        const name = document.getElementById('name');
        const sex = document.querySelectorAll('input[name="sex"]');
        let s;
        sex.forEach(radio => {
            if (radio.checked) {
                s = radio.value;
            }
        });
        const college = document.getElementById('college');
        const major = document.getElementById('major');
        console.log(username.value + "   " + name.value + "   " + s + "  " + college.value + "  " + major);
        addUser(username.value, "学生");
        addTea(username.value, name.value, s, college.value, major.value);
    });
</script>
<script>
    function addUser(username, role) {
        const requestUrl = 'http://localhost:8080/user/addUser';
        console.log(role);
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    userName: username,
                    password: "123456",
                    position: role,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("已将登录信息添加到数据库");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function addTea(username, name, s, college, major) {
        const requestUrl = 'http://localhost:8080/user/addStu';
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    studentID: username,
                    studentName: name,
                    studentSex: s,
                    studentClass: college,
                    studentMajor: major,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("添加角色成功");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>
复制代码

administrator.html

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员页面</title>
    <style>
        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">管理员系统</h1>
<script>
    // 获取URL中的用户名参数
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username);
</script>
<div class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <button id="add1">添加教师信息</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <button id="add2">增加学生信息</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    document.getElementById("add1").addEventListener("click", function () {
        window.location.href = "add1.html";
    });
    document.getElementById('add2').addEventListener('click', function () {
        window.location.href = "add2.html";
    });

</script>
</html>

标签：username,const,border,value,12.6,document,data
From： https://www.cnblogs.com/gjsgjs/p/17912307.html

相关文章

  • 12.6
    <%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>出差申请单</title></head&......
  • 12.6
    今天实现前端的登录以及管理员的页面index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>用户登录</title><style>button{display:block;ma......
  • 每日总结-23.12.6
    packagetupian;/*importjavax.swing.*;importjava.awt.*;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;importjava.io.File;importjava.io.FileInputStream;importjava.io.IOException;importjava.util.Base64;publicclassT......
  • 闲话12.6
    换了一个拉格兰头像。做了做化学生物的样卷，生物样卷91pts，化学样卷95pts，赢！物理明天再做......
  • 每日总结12.6
    百度图像增强与特效SDK实验今天在完成实验的过程中遇到了一个问题，通过调用接口生成的图片格式为base64格式需要转化为图片格式，下面为转码的部分类:packagecom.baidu.test;importjava.io.*;importjava.util.Base64;publicclassImageUtils{publicstaticbool......
  • 12.6每日总结
    今天进行了软件构造的实验二，实验二：百度图像增强与特效SDK实验（2023.12.6日完成）    任务一：下载配置百度图像增强与特效的Java相关库及环境（占10%）。    任务二：了解百度图像增强与特效相关功能并进行总结（占20%）。    任务三：完成图像增强GUI相关功能代码并测试调用，要求上......
  • 2023.12.6日报
    今天主要学习了设计模式的七大原则以下内容都为自己学习完后的总结和盲敲，也是测试一下自己到底记住了多少首先是单一职责原则，指的是某一个类的功能应该专一，而不应该多而杂什么意思呢，例如我们写一个javaweb，应该分不同的功能类，各司其职，例如有连接数据库的DBUtil、处理数据的Dao，......
  • 12.6
    实验二：百度图像增强与特效SDK实验一、实验要求任务一：下载配置百度图像增强与特效的Java相关库及环境（占10%）。任务二：了解百度图像增强与特效相关功能并进行总结（占20%）。任务三：完成图像增强GUI相关功能代码并测试调用，要求上传自己的模糊照片进行图像增强（占30%）。任务四：完成图像特......
  • 2023.12.6——每日总结
    学习所花时间（包括上课）：9h代码量（行）：0行博客量（篇）：1篇今天，上午学习，下午学习；我了解到的知识点：1.jfinal明日计划：学习......
  • 12.6 随笔：幼儿园关闭潮 && 现代社会的人
    1、临泉县关闭50所幼儿园首先想到是中国人口下降如此之快，然后又想到自己养老怎么办？后续看了马督公的视频才发现关了50所，其中有30多所是申请开办幼儿园后连收学生都没有收之后就注销了的；然后其他有部分是因为前一年考核不合格注销的，所以根据没有说的那么夸张。思考：（1）新闻有些假的......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99