web实验（5）

最新推荐文章于 2024-06-07 23:26:45 发布
最新推荐文章于 2024-06-07 23:26:45 发布
阅读量383 收藏 3
点赞数 2
分类专栏： web 文章标签： 前端 java 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65406049/article/details/130309960
版权

接口使用说明：

点开“用户管理”下“用户登录”，“try it out”

 

输入接口参数 username:admin   password:123456。点击execute

 

查看返回结果，token为当前用户的身份令牌

 

复制身份令牌，点击页面右上角的“Authorization”，粘贴后点击按钮“Authorize”

 

 

点击“Close”关闭弹窗。

测试其他接口，输入相关参数，点击“execute”即可正常运行。

 

实验内容：

1、设计登录界面，输入账号、密码（测试账号：admin 密码：123456）后调用服务端Api接口进行身份验证验证。登录成功记录所返回的身份令牌，登录失败给出相应反馈提示。

  • 接口地址：http:// 114.67.241.121:8088/user/login
  • 请求方式：post
  • 接口参数

 

  • 返回数据

登陆

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F2F4F7;
        }

        form {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border-radius: 24px;
            width: 600px;
            height: 350px;
        }

        .login {
            position: relative;
            left: 50%;
            transform: translate(-50%);
            width: 360px;
            height: 48px;
            font-size: 18px;
            background-color: rgba(39, 125, 255, 0.3);
            border-radius: 24px;
            margin-top: 40px;
        }

        .capital {
            width: 200px;
            height: 30px;
            font-size: 20px;
            text-indent: 3em;
            font-weight: bolder;
        }

        .box {
            padding: 68px 90px 51px;
            width: 540px;
        }

        #uname input{
            width: 100%;
            height: 48px;
            border: 1px solid #d4d6d9;
            font-size: 14px;
            border-radius: 24px;
            box-sizing: border-box;
            padding: 0 24px 0 54px;
        }

        #pw input {
            width: 100%;
            height: 48px;
            border: 1px solid #d4d6d9;
            font-size: 14px;
            border-radius: 24px;
            box-sizing: border-box;
            padding: 0 24px 0 54px;
        }

        div {
            margin: 15px;
        }
    </style>
</head>
<body>
    <form>
        <div class="capital">用户登录</div>
        <hr>
        <div id="uname">
            <input type="text" placeholder="请输入你的账号">
        </div>
        <div id="pw">
            <input type="password" placeholder="请输入密码">
        </div>
        <input type="button" value="登陆" class="login" id="btn">
    </form>

    <script src="./jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#btn').on('click', function() {
                let uname = $('#uname > input').val();
                let pw = $('#pw > input').val();

                $.post('http://114.67.241.121:8088/user/login', { username: uname, password: pw }, function (e) {
                    if (e.success) {
                        localStorage.setItem('token', e.data.token);
                        console.log(e);
                        location.href = './主界面.html';
                    } else {
                        alert('密码或账号错误。请重新输入');
                    }
                })
            })
        })
    </script>
</body>
</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>
    <style>
        div {
            position: absolute;
            left: 50%;
            top: 30%;
            transform: translate(-50%, -50%);
        }

        input {
            display: block;
            margin: 15px;
            width: 300px;
            height: 35px;
            border-radius: 24px;
            font-size: 18px;
        }

        h2 {
            text-indent: 115px;
        }
    </style>
</head>
<body>
    <div>
        <h2>功能界面</h2>
        <hr>
        <input type="button" name="" id="look" value="查看">
        <input type="button" name="" id="add" value="增加">
        <input type="button" name="" id="update" value="修改">
        <input type="button" name="" id="delete" value="删除">
    </div>

    <script src="./jquery.min.js"></script>

    <script>
        $('#look').on('click', function() {
            location.href = './显示学生信息.html';
        })

        $('#add').on('click', function () {
            location.href = './添加.html';
        })

        $('#update').on('click', function () {
            location.href = './修改.html';
        })

        $('#delete').on('click', function () {
            location.href = './删除.html';
        })
    </script>
</body>
</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>
    <style>
        div {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 500px;
        }

        table {
            border-collapse: collapse;
            text-align: center;
        }

        table tr th {
            height: 30px;
        }

        table caption {
            margin: 10px;
            font-weight: bolder;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div>
        <table border="1">
            <caption>学生信息</caption>
            <thead>
                <tr>
                    <th>stuid</th>
                    <th>stuno</th>
                    <th>stuname</th>
                    <th>stumajor</th>
                    <th>stugender</th>
                    <th>stugrade</th>
                    <th>stuphone</th>
                    <th>stuaddess</th>
                    <th>stunative</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script src="./jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            let token = localStorage.getItem('token');
            $.ajax({
                type: 'GET',
                url: 'http://114.67.241.121:8088/stu/list',
                headers: {
                    'Authorization': token,
                },
                success: function(e) {
                    console.log(e);
                    $(e.data).each(function(index, stu) {
                        let temp = $(`
                        <tr>
                            <td id='stuid'>${stu.stuid}</td>
                            <td id='stuno'>${stu.stuno}</td>
                            <td id='stuname'>${stu.stuname}</td>
                            <td id='stumajor'>${stu.stumajor}</td>
                            <td id='stugender'>${stu.stugender}</td>
                            <td id='stugrade'>${stu.stugrade}</td>
                            <td id='stuphone'>${stu.stuphone}</td>
                            <td id='stuaddess'>${stu.stuaddess}</td>
                            <td id='stunative'>${stu.stunative}</td>
                        </tr>`);

                        temp.appendTo('tbody');
                    })
                }
            })
        })
    </script>
</body>
</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>
    <style>
        .box {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            width: 330px;
        }

        .box div p {
            margin: 0px;
        }

        .box div input {
            margin: 0px;
            width: 300px;
            height: 20px;
            border-radius: 24px;
            padding: 0 10px 0;
        }

        .box div {
            width: 200px;
            height: 50px;
        }

        h1 {
            text-align: center;
        }

        #add {
            position: relative;
            left: 35%;
            margin-top: 10px;
            width: 100px;
            border-radius: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>增加学生</h1>
        <div>
            <p>stuid:</p>
            <input type="text" id="stuid">
        </div>
        <div>
            <p>stuno:</p> 
            <input type="text" id="stuno">
        </div>
        <div>
            <p>stuname:</p>
            <input type="text" id="stuname">
        </div>
        <div>
            <p>stumajor:</p>
            <input type="text" id="stumajor">
        </div>
        <div>
            <p>stugender:</p>
            <input type="text" id="stugender">
        </div>
        <div>
            <p>stugrade:</p> 
            <input type="text" id="stugrade">
        </div>
        <div>
            <p>stuphone:</p>
            <input type="text" id="stuphone">
        </div>
        <div>
            <p>stuaddess:</p> 
            <input type="text" id="stuaddess">
        </div>
        <div>
            <p>stunative:</p> 
            <input type="text" id="stunative">
        </div>
        <input type="button" value="添加" id="add">
    </div>

    <script src="./jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#add').on('click', function() {
                let token = localStorage.getItem('token');
                let stu = {
                    stuid: $('#stuid').val(),
                    stuname: $('#stuname').val(),
                    stuno: $('#stuno').val(),
                    stugender: $('#stugender').val(),
                    stumajor: $('#stumajor').val(),
                    stugrade: $('#stugrade').val(),
                    stuphone: $('#stuphone').val(),
                    stuaddess: $('#stuaddess').val(),
                    stunative: $('#stunative').val(),
                }

                $.ajax({
                    type: 'POST',
                    url: 'http://114.67.241.121:8088/stu/add',
                    headers: {
                        'Authorization': token,
                        'Content-Type': 'application/json',
                    },
                    data: JSON.stringify(
                        stu,
                    ),
                    success: function (e) {
                        console.log(e);
                        alert('添加成功');
                        location.href = './主界面.html';
                    }
                })
            })
        })
    </script>
</body>
</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>
    <style>
        div {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 500px;
        }
        table {
            border-collapse: collapse;
            text-align: center;
        }

        table tr th {
            height: 30px;
            text-align: center;
        }

        table caption {
            margin: 10px;
            font-weight: bolder;
            font-size: 20px;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <table border="1">
            <caption>学生信息</caption>
            <thead>
                <tr>
                    <th>stuid</th>
                    <th>stuno</th>
                    <th>stuname</th>
                    <th>stumajor</th>
                    <th>stugender</th>
                    <th>stugrade</th>
                    <th>stuphone</th>
                    <th>stuaddess</th>
                    <th>stunative</th>
                    <th>updata</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script src="./jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            let token = localStorage.getItem('token');
            console.log(token);
            $.ajax({
                type: 'GET',
                url: 'http://114.67.241.121:8088/stu/list',
                headers: {
                    'Authorization': token,
                },

                success: function(e) {

                    $(e.data).each(function(index, stu) {
                        let temp = $(`
                        <tr>
                            <td id='stuid'>${stu.stuid}</td>
                            <td id='stuno'>${stu.stuno}</td>
                            <td id='stuname'>${stu.stuname}</td>
                            <td id='stumajor'>${stu.stumajor}</td>
                            <td id='stugender'>${stu.stugender}</td>
                            <td id='stugrade'>${stu.stugrade}</td>
                            <td id='stuphone'>${stu.stuphone}</td>
                            <td id='stuaddess'>${stu.stuaddess}</td>
                            <td id='stunative'>${stu.stunative}</td>
                            <td id="updata"><a href="#">修改</a></td>
                        </tr>`);

                        temp.appendTo('tbody');
                    })

                    let updatas = document.querySelectorAll('#updata');

                    console.log(updatas);

                    for (let i = 0; i < updatas.length; i ++) {
                        updatas[i].addEventListener('click', function () {
                            sessionStorage.setItem('stuJson', JSON.stringify(e.data[i]));
                            location.href = './修改界面.html';
                        })
                    }
                }
            })
        })
    </script>
</body>
</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>
    <style>
        .box {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            width: 330px;
        }

        .box div p {
            margin: 0px;
        }

        .box div input {
            margin: 0px;
            width: 300px;
            height: 20px;
            border-radius: 24px;
            padding: 0 10px 0;
        }

        .box div {
            width: 200px;
            height: 50px;
        }

        h1 {
            text-align: center;
        }

        #updata {
            position: relative;
            left: 35%;
            margin-top: 10px;
            width: 100px;
            border-radius: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>修改学生</h1>
        <div>
            <p>stuid:</p>
            <input type="text" id="stuid">
        </div>
        <div>
            <p>stuno:</p>
            <input type="text" id="stuno">
        </div>
        <div>
            <p>stuname:</p>
            <input type="text" id="stuname">
        </div>
        <div>
            <p>stumajor:</p>
            <input type="text" id="stumajor">
        </div>
        <div>
            <p>stugender:</p>
            <input type="text" id="stugender">
        </div>
        <div>
            <p>stugrade:</p>
            <input type="text" id="stugrade">
        </div>
        <div>
            <p>stuphone:</p>
            <input type="text" id="stuphone">
        </div>
        <div>
            <p>stuaddess:</p>
            <input type="text" id="stuaddess">
        </div>
        <div>
            <p>stunative:</p>
            <input type="text" id="stunative">
        </div>
        <input type="button" value="修改" id="updata">
    </div>

    <script src="./jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var stu = JSON.parse(sessionStorage.getItem('stuJson'));

            $(function () {
                console.log(stu);
                $('#stuid').val(stu.stuid);
                $('#stuno').val(stu.stuno);
                $('#stuname').val(stu.stuname);
                $('#stugender').val(stu.stugender);
                $('#stumajor').val(stu.stumajor);
                $('#stuphone').val(stu.stuphone);
                $('#stuaddess').val(stu.stuaddess);
                $('#stunative').val(stu.stunative);
                $('#stugrade').val(stu.stugrade);
            });

            $('#updata').on('click', function () {
                let token = localStorage.getItem('token');
                let stu = {
                    stuid: $('#stuid').val(),
                    stuname: $('#stuname').val(),
                    stuno: $('#stuno').val(),
                    stugender: $('#stugender').val(),
                    stumajor: $('#stumajor').val(),
                    stugrade: $('#stugrade').val(),
                    stuphone: $('#stuphone').val(),
                    stuaddess: $('#stuaddess').val(),
                    stunative: $('#stunative').val(),
                }

                $.ajax({
                    type: 'POST',
                    url: 'http://114.67.241.121:8088/stu/edit',
                    headers: {
                        'Authorization': token,
                        'Content-Type': 'application/json',
                    },
                    data: JSON.stringify(
                        stu,
                    ),
                    success: function (e) {
                        console.log(e);
                        alert('修改成功');
                        location.href = './主界面.html';
                    }
                })
            })
        })
    </script>
</body>

</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>
    <style>
        div {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 500px;
        }

        table {
            border-collapse: collapse;
            text-align: center;
        }

        table tr th {
            width: 100px;
            height: 30px;
        }

        table caption {
            margin: 10px;
            font-size: 20px;
            font-weight: bolder;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div>
        <table border="1">
            <caption>学生信息</caption>
            <thead>
                <tr>
                    <th>stuid</th>
                    <th>stuno</th>
                    <th>stuname</th>
                    <th>stumajor</th>
                    <th>stugender</th>
                    <th>stugrade</th>
                    <th>stuphone</th>
                    <th>stuaddess</th>
                    <th>stunative</th>
                    <th>delete</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script src="./jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            let token = localStorage.getItem('token');
            $.ajax({
                type: 'GET',
                url: 'http://114.67.241.121:8088/stu/list',
                headers: {
                    'Authorization': token,
                },

                success: function (e) {
                    $(e.data).each(function (index, stu) {
                        let temp = $(`
                        <tr>
                            <td id='stuid'>${stu.stuid}</td>
                            <td id='stuno'>${stu.stuno}</td>
                            <td id='stuname'>${stu.stuname}</td>
                            <td id='stumajor'>${stu.stumajor}</td>
                            <td id='stugender'>${stu.stugender}</td>
                            <td id='stugrade'>${stu.stugrade}</td>
                            <td id='stuphone'>${stu.stuphone}</td>
                            <td id='stuaddess'>${stu.stuaddess}</td>
                            <td id='stunative'>${stu.stunative}</td>
                            <td id="delete"><a href="#">删除</a></td>
                        </tr>`);

                        temp.appendTo('tbody');
                    })

                    $('#delete').on('click', function() {
                        let id = $(this).parent().parent().find('#stuid').text();
                         $.ajax({
                            type: "POST",
                            url: 'http://114.67.241.121:8088/stu/del',
                            headers: {
                                'Authorization': token,
                            },
                            data: { 'stuid': id },
                            success: function (e) {
                                console.log(e);
                                $('#delete').parent().remove();
                                alert('删除成功');
                                location.href = './主界面.html';
                            }
                        });
                    })
                }
            })
        })
    </script>
</body>

</html>

想了半天也不知道取什么名字
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web实验5
p1534179877的博客
04-27 341
<style type="text/css"> body{margin: 0;} .div{ display: flex; flex-direction: column; align-items: center; width: 600px; top: 20px; position: absolute; left: calc(50% - 300px); } table{
web实验5JavaScript综合实验
12-07
web实验5JavaScript综合实验
python123题目——用户登录A
m0_62488776的博客
06-26 2690
类型：简单分支。
Python tkinter 制作一个经典的登录界面和点击事件
Python案例分享，B站视频教程：https://space.bilibili.com/523606542
09-03 2333
Tkinter 编写的程序，也称为 GUI 程序，GUI （Graphical User Interface）指的是“图形用户界面”，它是计算机图形学（CG）的一门分支，主要研究如何在计算机中表示图形，以及利用计算机进行图形的计算、处理和显示等相关工作。
[软件测试] 测试用例编写方法
Hang_Q的博客
11-13 294
测试用例编写方法：等价类划分法、边界值分析法，判定表法，场景法，错误推测法
Web 实验五
van_van_v的博客
04-27 1348
<!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&g...
Web实验五 数据库操作
linjiajun12123的博客
05-11 697
实验五 数据库操作 一、实验目的 1．掌握JSP中连接数据库的方法。 2．掌握在web页面上向数据库中添加、删除、修改数据。 二、实验要求 1．实现购物车。 2. 数据库在mysql、oracle、Sqlserver等关系型数据库中任选一种。 3. 给用户提供浏览界面 4.选中某个物品后，转到购买界面 5. 支付界面采用虚拟形式，填写支付金额来代替刷银行卡功...
实验五 Web项目开发
weixin_33888907的博客
01-04 195
【实验目的】 1.了解ASP.NET开发Web项目的过程及运行机制； 2.熟练掌握网站和Web服务的开发，并能够对Web服务进行调用； 【实验要求】 1．是一个ASP.NET技术开发的网站，内容自定义。 2．网站所有功能都由自定义的Web服务提供，服务功能自定义。 【实验步骤】（要求自己填写详细的实验步骤，设计思路和关键代码） 【实验体会及存在问题】（要求自己填写，感想、设计时碰到的...
Web前端设计实验5.doc
06-15
简单的登录注册验证，和简单的计算器。 1、掌握JavaScript的基本语法； 2、掌握JavaScript函数和事件处理； 3、掌握JavaScript对象编程。
web实验5山大
11-05
分析著名网站的页面布局、颜色方案、字体选择和导航、内容组织以及多媒体元素等的特点，从而培养学生的网站设计思想。
html5，web前端实验
12-22
表格的使用，新闻页面排版，div页面排版布局
山大计算机web选修实验五
10-28
山大计算机的童鞋们看看吧 绝对详细绝对不亏
Web实验报告.doc
11-28
Web实验报告.doc
java web 实验五 juqery实验
l20171222的博客
12-17 914
     实验要求：      编写一个注册信息填写界面，使用jQuery和JavaScript处理输出的信息，该页面能完成多种信息检查，并能利用jQuery发送Ajax请求。 使用的idea开发，下面是源码  JQueryRegister.jsp &lt;%-- Created by IntelliJ IDEA. User: 99631 Date: 2018/11/14 0...
web实验5 圣斗士网页
人生当苦无妨
08-20 1280
web实验5 圣斗士网页 实现效果 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZZY</title> <link rel="stylesheet" type="text/css" href="STYLE.css"> </head> <body> <div id="DEMO"> &lt
HTML、PHP实战：搭建一个网页登录页面。
m0_50818626的博客
05-21 7113
可以看到当我们输入用户名：zhangsan 密码：123456 时，后台的数据库能够查询到，所以登录成功。可以看到，当输入数据库中已经存在的用户时，会显示用户已经存在，并且在3秒之后会跳转回原来的页面。当注册成功时，可以看到数据库中新增了对应的用户名及密码。当用户注册时前后两次输入密码不一致时也会出现提示。而当用户名和密码不匹配时则登录失败。文件名：denglu.html。我这里用的是小皮一键搭建的。文件名：denglu.php。文件名：zhuce.html。文件名：zhuce.php。
$(选择器).on(‘click‘,‘要选择的元素‘,function(){})是属于jquery的语法
m0_49471668的博客
08-13 1047
<html> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script type="text/javascript" src="jquery-3.2.1.min.js"></sc..
前端性能优化：提升网站加载速度的终极指南
最新发布
喔的嘛呀的博客
06-07 720
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
java web实验小结
05-12
在 Java Web 实验中，我学习了如何使用 Java 编写 Web 应用程序。通过实验，我了解了 Servlet、JSP、JDBC 等技术，学会了基本的 Web 开发流程，包括前端页面的设计、后端逻辑的编写，以及数据库的连接与操作等。 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值