web考试 Jquery2

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

qq_ouyang

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

阅读量29

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_58433429/article/details/130327569

版权

add.html

<!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>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            height: 700px;
            display: flex;
            /* background-color: antiquewhite; */
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        #add{
            width: 700px;
            height: 700px;
            border: 1px solid black;
            background-color: antiquewhite;
            text-align: center;
        }
        #add div{
            margin: 25px 90px;
        }
        #add div:nth-child(1){
            font-size: 30px;
        }
        span{
            margin-right: 30px;
            width: 100px;
            display: inline-block;
            text-align: right;
        }
        input{
            height: 25px;
            font-size: 20px;
        }
        button{
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            text-align: center;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="add">
        <div>
            添加学生信息
        </div>
        <div>
            <span>stuno:</span><input type="text" id="stuno">
        </div>
        <div>
            <span>stuname:</span><input type="text" id="stuname">
        </div>
        <div>
            <span>stumajor:</span><input type="text" id="stumajor">
        </div>
        <div>
            <span>stugender:</span><input type="text" id="stugender">
        </div>
        <div>
            <span>stugrade:</span><input type="text" id="stugrade">
        </div>
        <div>
            <span>stuphone:</span><input type="text" id="stuphone">
        </div>
        <div>
            <span>stuaddess:</span><input type="text" id="stuaddess">
        </div>
        <div>
            <span>stunative:</span><input type="text" id="stunative">
        </div>
        <div>
            <button id="submit">添加</button>
        </div>
        <div>
            <button id="back">退回</button>
        </div>
    </div>
    <script>
        $("#submit").click(function(){
            var stuno=$("#stuno").val();
            var stuname=$("#stuname").val();
            var stumajor=$("#stumajor").val();
            var stugender=$("#stugender").val();
            var stugrade=$("#stugrade").val();
            var stuphone=$("#stuphone").val();
            var stuaddess=$("#stuaddess").val();
            var stunative=$("#stunative").val();

            var token = localStorage.getItem('token')

            $.ajax({
                type:"post",
                
                data:JSON.stringify({stuno,stuname,stumajor,stugender,stugrade,stuphone,stuaddess,stunative}),
                url:"http://114.67.241.121:8088/stu/add",
                contentType: "application/json; charset=utf-8",
                headers:{
                    "Authorization":token
                },
                success:function(res){
                    console.log(res);
                    alert("添加成功！")
                    location.href='table.html'
                },
                error:function(res){
                    console.log(res)
                }
            })
        })
        $("#back").click(function(){
            location.href="table.html"
        })
    </script>
</body>
</html>

edit.html

<!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>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            height: 700px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        #add{
            width: 700px;
            height: 700px;
            border: 1px solid black;
            background-color: antiquewhite;
            text-align: center;
        }
        #add div{
            margin: 25px 90px;
        }
        #add div:nth-child(1){
            font-size: 30px;
        }
        span{
            width: 100px;
            display: inline-block;
            text-align: right;
            margin-right: 30px;
        }
        input{
            font-size: 20px;
            height: 25px;
        }
        button{
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            text-align: center;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="add">
        <div>
            修改学生信息
        </div>
        <div>
            <span>stuid:</span><input type="text" id="stuid">
        </div>
        <div>
            <span>stuno:</span><input type="text" id="stuno">
        </div>
        <div>
            <span>stuname:</span><input type="text" id="stuname">
        </div>
        <div>
            <span>stumajor:</span><input type="text" id="stumajor">
        </div>
        <div>
            <span>stugender:</span><input type="text" id="stugender">
        </div>
        <div>
            <span>stugrade:</span><input type="text" id="stugrade">
        </div>
        <div>
            <span>stuphone:</span><input type="text" id="stuphone">
        </div>
        <div>
            <span>stuaddess:</span><input type="text" id="stuaddess">
        </div>
        <div>
            <span>stunative:</span><input type="text" id="stunative">
        </div>
        <div>
            <button id="submit">修改</button>
        </div>
        <div>
            <button id="back">退回</button>
        </div>
    </div>
    <script>
        function loading(){
            $("#stuid").val(localStorage.getItem("stuid"))
            $("#stuno").val(localStorage.getItem("stuno"))
            $("#stuname").val(localStorage.getItem("stuname"))
            $("#stumajor").val(localStorage.getItem("stumajor"))
            $("#stugender").val(localStorage.getItem("stugender"))
            $("#stugrade").val(localStorage.getItem("stugrade"))
            $("#stuphone").val(localStorage.getItem("stuphone"))
            $("#stuaddess").val(localStorage.getItem("stuaddess"))
            $("#stunative").val(localStorage.getItem("stunative"))
        }
        $(document).ready(function(){
            loading()
        })
        $("#submit").click(function(){
            var stuid=$("#stuid").val();
            var stuno=$("#stuno").val();
            var stuname=$("#stuname").val();
            var stumajor=$("#stumajor").val();
            var stugender=$("#stugender").val();
            var stugrade=$("#stugrade").val();
            var stuphone=$("#stuphone").val();
            var stuaddess=$("#stuaddess").val();
            var stunative=$("#stunative").val();

            var token = localStorage.getItem('token')

            $.ajax({
                type:"post",
                
                data:JSON.stringify({stuid,stuno,stuname,stumajor,stugender,stugrade,stuphone,stuaddess,stunative}),
                url:"http://114.67.241.121:8088/stu/edit",
                contentType: "application/json; charset=utf-8",
                headers:{
                    "Authorization":token
                },
                success:function(res){
                    console.log(res);
                    alert("修改成功！")
                    location.href='table.html'
                },
                error:function(res){
                    console.log(res)
                }
            })
        })
        $("#back").click(function(){
            location.href="table.html"
        })
    </script>
</body>
</html>

firstpage.html

<!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>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            height: 700px;
            
        }
        #box{
            display: flex;
            width: 600px;
            height: 500px;
            background-color: aqua;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 100px auto;
        }
        #box1{
            display: flex;
            width: 400px;
            height: 100px;
            background-color: rgb(0, 221, 255);
            justify-content: center;
            align-items: center;
        }
        span{
            font-size: 20px;
        }
        input:nth-child(1),:nth-child(2){
            height: 30px;
        }
        #submit{
            width: 100px;
            height: 30px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box1">
            <span>username:</span><input type="text" id="username">    
         </div>
        <div id="box1">  
            <span>password:</span><input type="text" id="password">
        </div>
        <div id="box1"> 
            <input type="button" value="登录" id="submit">
        </div>
    </div>
    
    <script>
        var token;
         $("#submit").click(function(){
            
        // var username=document.getElementById("#username").val();====>value
        // var password=document.getElementById("#password").val();
        
        var username=$("#username").val();
        var password=$("#password").val();
        console.log(username);
        console.log(password);
        $.ajax({
            type:"post",
            data:{username,password},
            url:"http://114.67.241.121:8088/user/login",
            success:function(res){
                console.log(res);
                // token=res.data.token;
                localStorage.setItem('token',res.data.token)
                location.href='table.html'
            },
            error:function(res){
                console.log(res)
            }
        })
        
    })
    </script>
</body>
</html>

table.html

<!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>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{

            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        table{
            width: 1500px;
            border-color: rgb(39, 221, 166);
        }

        table thead tr {
            height: 50px;
            color: white;
            background-image: linear-gradient(to right, red , yellow);
        }
        table tbody tr td{
            text-align: center;
            height: 40px;
        }
        table tbody tr:nth-child(2n){
            background-color: aliceblue;
        }
        table tbody tr:nth-child(2n+1){
            background-color: rgb(210, 229, 246);
        }

        input{
            width: 100px;
            height: 50px;
            margin: 20px auto;
            font-size: 20px;
            background-color: rgb(175, 243, 245);
            color: rgb(67, 95, 96);
            border-color: wheat;
        }
        #edit{
            width: 60px;
            height: 30px;
            background-color: rgb(255,237,0);
            color: rgb(113, 105, 105);
            margin-right: 20px;
            font-size: 10px;
            border-color: white;
        }
        #del{
            width: 60px;
            height: 30px;
            background-color: rgb(255,10,0);
            color: rgb(241, 235, 235);
            font-size: 10px;
            border-color: white;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="添加" id="add">
    </div>
    <div>
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <th width="5%">stuid</th>
                    <th width="10%">stuno</th>
                    <th width="10%">stuname</th>
                    <th width="10%">stumajor</th>
                    <th width="5%">stugender</th>
                    <th width="10%">stugrade</th>
                    <th width="10%">stuphone</th>
                    <th width="20%">stuaddess</th>
                    <th width="10%">stunative</th>
                    <th width="10%">操作</th>
                </tr>
            </thead>
            <tbody id="tobody">
                
            </tbody>
           
        </table>
    </div>
    <script>
        // 加载表格
        function table(){
            var token = localStorage.getItem('token')
            $.ajax({
                url:'http://114.67.241.121:8088/stu/list',
                type:"get",
                headers:{
                    'Authorization':token
                },
                data:{},
                success:function(res){
                    console.log(res)
                    var htmlcontent=""
                    for(var i=0;i<res.data.length;i++){
                        htmlcontent+="<tr>"
                        htmlcontent+="<td>"+res.data[i].stuid+"</td>"
                        htmlcontent+="<td>"+res.data[i].stuno+"</td>"
                        htmlcontent+="<td>"+res.data[i].stuname+"</td>"
                        htmlcontent+="<td>"+res.data[i].stumajor+"</td>"
                        htmlcontent+="<td>"+res.data[i].stugender+"</td>"
                        htmlcontent+="<td>"+res.data[i].stugrade+"</td>"
                        htmlcontent+="<td>"+res.data[i].stuphone+"</td>"
                        htmlcontent+="<td>"+res.data[i].stuaddess+"</td>"
                        htmlcontent+="<td>"+res.data[i].stunative+"</td>"
                        htmlcontent+="<td><button id='edit'>修改</button><button id='del'>删除</button></td>"
                        htmlcontent+="</tr>"
                    }
                    $("#tobody").html(htmlcontent)
                },
                error:function(res){
                    console.log(res)
                }
            })
        }
        $(document).ready(function(){
            table();
        })
        // 添加行
        $("#add").click(function(){
            location.href="add.html"
        })
        // 编辑行
        $(document).on("click", "#edit", function () {
            var stuid=$(this).parent().parent().find("*").eq(0).text()
            console.log(stuid)
            var stuno=$(this).parent().parent().find("*").eq(1).text()
            var stuname=$(this).parent().parent().find("*").eq(2).text()
            var stumajor=$(this).parent().parent().find("*").eq(3).text()
            var stugender=$(this).parent().parent().find("*").eq(4).text()
            var stugrade=$(this).parent().parent().find("*").eq(5).text()
            var stuphone=$(this).parent().parent().find("*").eq(6).text()
            var stuaddess=$(this).parent().parent().find("*").eq(7).text()
            var stunative=$(this).parent().parent().find("*").eq(8).text()
            localStorage.setItem("stuid",stuid)
            localStorage.setItem("stuno",stuno)
            localStorage.setItem("stuname",stuname)
            localStorage.setItem("stumajor",stumajor)
            localStorage.setItem("stugender",stugender)
            localStorage.setItem("stugrade",stugrade)
            localStorage.setItem("stuphone",stuphone)
            localStorage.setItem("stuaddess",stuaddess)
            localStorage.setItem("stunative",stunative)

            location.href="edit.html"


        }); 
        // 删除行
        $(document).on("click","#del",function(){
            var stuid=$(this).parent().parent().find("*").eq(0).text()
            var token = localStorage.getItem('token')     
            $.ajax({
                url:'http://114.67.241.121:8088/stu/del',
                data:{stuid},
                type:"Post",
                headers:{
                    'Authorization':token
                },
                success:function(res){
                    console.log(res)
                    table()
                },
                error:function(res){
                    console.log(res)
                }
            })
        })
    </script>
</body>
</html>