Webフロントエンド実験5

プログラミング 2023-08-19 01:34:50 訪問数: null

実験レポート
コース Web フロントエンドアプリケーション開発実験プロジェクト Jquery AJAX プログラミンググレード
プロフェッショナルクラスシリアルナンバー 講師
名 受講生番号 実験日
実験の目的と要件：
(1) Jquery AJAX の get メソッドリクエストを理解して習得する
(2) Jquery を理解して習得するAJAX (3)
vue axios のフロントエンドとバックエンドのデータ対話リクエストを理解して習得する

サーバーインターフェイステストアドレス:
http://114.67.241.121:8088/swagger-ui.html

インターフェースの説明:

「ユーザー管理」の「ユーザーログイン」をクリックし、「試してみる」

インターフェイス パラメータ ユーザー名:管理者パスワード:123456 を入力します。「実行」をクリックします

返された結果を表示します。トークンは現在のユーザーの ID トークンです。

ID トークンをコピーし、ページの右上隅にある [承認] をクリックして貼り付け、[承認] ボタンをクリックします。

「閉じる」をクリックしてポップアップを閉じます。
他のインターフェースをテストし、関連するパラメーターを入力し、「実行」をクリックして通常どおり実行します。

実験内容:
1. ログイン インターフェイスを設計し、アカウント番号とパスワード (テスト アカウント: 管理者パスワード: 123456) を入力し、ID 検証のためにサーバー API インターフェイスを呼び出します。ログインが成功すると、返された ID トークンが記録され、ログインが失敗すると、対応するフィードバック プロンプトが表示されます。
 インターフェースアドレス: http://114.67.241.121:8088/user/login
 リクエストメソッド: post
 インターフェースパラメーター

 データを返す

スクリーンショットを実行する

コード：

2. 正常にログインして学生管理インターフェイスに入り、API インターフェイスを呼び出してすべての学生情報を取得し、データをロードして表示するインターフェイスを設計します。
 インターフェイス アドレス: http://114.67.241.121:8088/stu/list
 リクエスト メソッド: get
 リクエスト ヘッダー:ヘッダー リクエスト ヘッダーには変数が含まれます:
認可ヘッダー リクエスト ヘッダーには変数値が含まれます: 成功したログインによって記録されたトークン ID 順序 ブランド インターフェイスパラメータ: なし 戻りデータリクエストヘッダーには、ログイン成功によって返されたトークンは含まれません。



現在ログインしているユーザーのトークン ID トークンがリクエスト ヘッダーに含まれます。

スクリーンショットを実行する

コード：

3. 「追加」ボタンをクリックして追加インターフェースに入り、関連情報の入力が完了したら、API インターフェースを呼び出してデータ情報を保存します。
 インターフェイス アドレス: http://114.67.241.121:8088/stu/add
 リクエスト メソッド: post
 リクエスト ヘッダー
リクエスト ヘッダーには変数が含まれます: 認可
ヘッダー リクエスト ヘッダーには変数値が含まれます: ログイン成功によって記録されたトークン ID トークン

 インターフェースパラメータ

 結果を返す

スクリーンショットを実行する

コード：

4. 「変更」ボタンをクリックして変更インターフェースに入り、現在の生徒情報を読み取り、変更したデータを入力して保存すると、データの更新が完了します。
 インターフェイス アドレス: http://114.67.241.121:8088/stu/edit
 リクエスト メソッド: post
 リクエスト ヘッダーリクエスト ヘッダー
には変数が含まれます: 認可
ヘッダー リクエスト ヘッダーには変数値が含まれます: ログイン成功によって記録されたトークン ID トークン

 インターフェースパラメータ

 結果を返す

スクリーンショットを実行する

コード：

5. 「削除」ボタンをクリックしてサーバーにデータインターフェースの削除を要求し、サーバーデータが正常に削除されると、テーブル内のデータ行が削除されます。
 インターフェイス アドレス: http://114.67.241.121:8088/stu/del
 リクエスト メソッド: Post
 リクエスト ヘッダーリクエスト
ヘッダーには変数が含まれます: 認可
ヘッダー リクエスト ヘッダーには変数値が含まれます: ログイン成功によって記録されたトークン ID トークン
 インターフェイス パラメーター

 結果を返す

スクリーンショットを実行する

コード：

この実験では jquery、ajax、bootstrap を使用し、プロジェクトのディレクトリ構造は次のとおりです:
ここに画像の説明を挿入
ログイン ページ:

<!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>01登录界面</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <style>
        .login {
    
    
            width: 600px;
            margin: 120px auto;
        }
    </style>

    <script>
        $(function () {
    
    
            // 登录
            login()

            function login() {
    
    
                $('#formLogin').on('submit', function (e) {
    
    
                    e.preventDefault()
                    const data = $(this).serialize()
                    $.ajax({
    
    
                        type: 'POST',
                        url: 'http://114.67.241.121:8088/user/login',
                        data: data,
                        success: function (reg) {
    
    
                            console.log(reg)
                            if (reg.code === 200) {
    
    
                                // console.log(reg.data.token)
                                location.href = './02学生管理界面.html'
                                localStorage.setItem('token', reg.data.token)
                                return reg.data.token//登录成功返回身份令牌

                            } else {
    
    
                                alert('登录失败！')
                                return null


                            }
                        }
                    })
                })
            }
        })


    </script>
</head>

<body>

    <div class="login">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">用户登录</h3>
            </div>
            <form class="panel-body" id="formLogin">
                <div class="input-group">
                    <div class="input-group-addon">账号</div>
                    <input type="text" class="form-control" name="username" placeholder="请输入账号">
                </div>
                <div class="input-group">
                    <div class="input-group-addon">密码</div>
                    <input type="password" class="form-control" name="password" placeholder="请输入密码">
                </div>
                <button type="submit" class="btn btn-primary">登录</button>

            </form>
        </div>
    </div>


</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>02学生管理界面</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <style>
        th,
        td {
    
    
            text-align: center;
        }
    </style>
    <script>
        $(function () {
    
    
            // 渲染页面
            getStuList()

            // 获取身份令牌
            const token = localStorage.getItem('token')


            // 点击添加学生(模态框这里用的有问题！！！)
            $('#btnAdd').on('click', function () {
    
    
                $('#myModalAdd').modal()
                //获取表单数据(新增学生信息data)
                $('#formAdd').on('submit', function (e) {
    
    
                    e.preventDefault()
                    // 还可以对用户的输入进行限制(不能为空等)
                    const data = {
    
    
                        stuaddess: $('#formAdd input[name=stuaddess]').val(),
                        stugender: $('#formAdd input[name=stugender]').val(),
                        stugrade: $('#formAdd input[name=stugrade]').val(),
                        stumajor: $('#formAdd input[name=stumajor]').val(),
                        stuname: $('#formAdd input[name=stuname]').val(),
                        stunative: $('#formAdd input[name=stunative]').val(),
                        stuno: $('#formAdd input[name=stuno]').val(),
                        stuphone: $('#formAdd input[name=stuphone]').val(),
                    }//data这时是JS对象
                    // 要转成JSON字符串
                    const t = JSON.stringify(data)
                    $.ajax({
    
    
                        type: 'POST',
                        url: 'http://114.67.241.121:8088/stu/add',
                        contentType: 'application/json',
                        headers: {
    
    
                            Authorization: token
                        },
                        data: t,//JSON格式
                        success: function (reg) {
    
    
                            if (reg.code === 200) {
    
    
                                console.log('添加成功！');
                            } else {
    
    
                                return alert('添加失败！')
                            }
                            // 重新渲染界面
                            getStuList()
                            // 表单清空
                            $('#formAdd')[0].reset()
                            $('#chadiao').click()
                        }
                    })
                })


            })
            $('#btnAddoff').on('click', function () {
    
    
                $('#formAdd')[0].reset()
                $('#myModalAdd #chadiao').click()
            })




            // 获取所有学生信息,渲染在页面上
            function getStuList() {
    
    
                const token = localStorage.getItem('token')
                $.ajax({
    
    
                    type: 'GET',
                    url: 'http://114.67.241.121:8088/stu/list',
                    // header请求头携带变量：Authorization???!!!
                    headers: {
    
    
                        'Authorization': token
                    },
                    data: {
    
    },
                    success: function (reg) {
    
    
                        // console.log(reg.data)
                        if (reg.code === 200) {
    
    //请求成功
                            // 先清空原来渲染的
                            $('tbody').empty()
                            $.each(reg.data, function (i, ele) {
    
    
                                // 再一一渲染在页面上
                                const tr = $(`
                            <tr>
                                <td>${
    
    ele.stuid}</td>
                                <td>${
    
    ele.stuno}</td>
                                <td>${
    
    ele.stuname}</td>
                                <td>${
    
    ele.stugender}</td>
                                <td>${
    
    ele.stugrade}</td>
                                <td>${
    
    ele.stumajor}</td>
                                <td>${
    
    ele.stuphone}</td>
                                <td>${
    
    ele.stuaddess}</td>
                                <td>${
    
    ele.stunative}</td>
                                <td><a href="javascript:;" data-idModify=${
    
    ele.stuid} id='modify'>修改</a></td>
                                <td><a href="javascript:;" data-id=${
    
    ele.stuid} id='move'>删除</a></td>
                            </tr>
                            `)
                                $('tbody').append(tr)
                            })
                        } else {
    
    
                            return alert('数据获取失败！')
                        }


                    }
                })
            }

            // 删除(删除完之后重新渲染)
            $('tbody').on('click', '#move', function () {
    
    
                const stuId = $(this).attr('data-id')
                $.ajax({
    
    
                    type: 'POST',
                    url: 'http://114.67.241.121:8088/stu/del?stuid=' + stuId,
                    contentType: 'application/json; charset=utf-8',
                    headers: {
    
    
                        Authorization: token
                    },
                    // data: stuId,
                    success: function (reg) {
    
    
                        if (reg.code === 200) {
    
    //删除成功
                            getStuList()
                        } else {
    
    
                            return alert('删除失败！')
                        }
                    }
                })

            })

            // 修改
            $('tbody').on('click', '#modify', function () {
    
    
                const stuId = $(this).attr('data-idModify')
                console.log(stuId);
                $('#myModalModify').modal()
                $('#formModify').on('submit', function (e) {
    
    
                    e.preventDefault()
                    // 还可以对用户的输入进行限制(不能为空等)
                    const data = {
    
    
                        stuaddess: $('#formModify input[name=stuaddess]').val(),
                        stugender: $('#formModify input[name=stugender]').val(),
                        stugrade: $('#formModify input[name=stugrade]').val(),
                        stumajor: $('#formModify input[name=stumajor]').val(),
                        stuname: $('#formModify input[name=stuname]').val(),
                        stunative: $('#formModify input[name=stunative]').val(),
                        stuno: $('#formModify input[name=stuno]').val(),
                        stuphone: $('#formModify input[name=stuphone]').val(),
                    }//data这时是JS对象
                    // 要转成JSON字符串
                    const t = JSON.stringify(data)
                    $.ajax({
    
    
                        type: 'POST',
                        url: 'http://114.67.241.121:8088/stu/edit',
                        contentType: 'application/json',
                        headers: {
    
    
                            Authorization: token
                        },
                        data: t,//JSON格式
                        success: function (reg) {
    
    
                            console.log(reg)
                            if (reg.code === 200) {
    
    
                                console.log('修改成功！');
                            } else {
    
    
                                return alert('修改失败！')
                            }
                            // 重新渲染界面
                            getStuList()
                            // 表单清空
                            $('#formModify')[0].reset()
                            $('#myModalModify #chadiao').click()
                        }
                    })
                })
            })

        })
    </script>
</head>

<body>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">学生管理</h3>
        </div>
        <div class="panel-body">
            <!-- 这里写个新增学生信息的模态框 -->
            <!-- 添加学生信息按钮 -->
            <button type="button" class="btn btn-success" id="btnAdd">添加</button>


            <!-- 这里是添加模态框 -->
            <div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <!-- 这里是模态框标题 -->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true" id="chadiao">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加学生信息</h4>
                        </div>
                        <!-- 这里是模态框内表单内容 -->
                        <div class="modal-body">
                            <form id="formAdd">
                                <div class="input-group">
                                    <div class="input-group-addon">学号</div>
                                    <input type="text" class="form-control" placeholder="请输入学号" name="stuno">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">姓名</div>
                                    <input type="text" class="form-control" placeholder="请输入姓名" name="stuname">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">性别</div>
                                    <input type="text" class="form-control" placeholder="请输入性别" name="stugender">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">年级</div>
                                    <input type="text" class="form-control" placeholder="请输入年级" name="stugrade">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">专业</div>
                                    <input type="text" class="form-control" placeholder="请输入专业" name="stumajor">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">联系电话</div>
                                    <input type="text" class="form-control" placeholder="请输入联系电话" name="stuphone">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">住址</div>
                                    <input type="text" class="form-control" placeholder="请输入住址" name="stuaddess">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">户籍</div>
                                    <input type="text" class="form-control" placeholder="请输入户籍" name="stunative">
                                </div>
                                <!-- 这里是表单内关闭/保存按钮 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" id="btnAddoff">关闭</button>
                                    <button type="submit" class="btn btn-primary" id="btnAddSave">保存</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 这里是修改模态框 -->
            <div class="modal fade" id="myModalModify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <!-- 这里是模态框标题 -->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true" id="chadiao">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">修改学生信息</h4>
                        </div>
                        <!-- 这里是模态框内表单内容 -->
                        <div class="modal-body">
                            <form id="formModify">
                                <div class="input-group">
                                    <div class="input-group-addon">学号</div>
                                    <input type="text" class="form-control" placeholder="请输入学号" name="stuno">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">姓名</div>
                                    <input type="text" class="form-control" placeholder="请输入姓名" name="stuname">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">性别</div>
                                    <input type="text" class="form-control" placeholder="请输入性别" name="stugender">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">年级</div>
                                    <input type="text" class="form-control" placeholder="请输入年级" name="stugrade">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">专业</div>
                                    <input type="text" class="form-control" placeholder="请输入专业" name="stumajor">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">联系电话</div>
                                    <input type="text" class="form-control" placeholder="请输入联系电话" name="stuphone">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">住址</div>
                                    <input type="text" class="form-control" placeholder="请输入住址" name="stuaddess">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">户籍</div>
                                    <input type="text" class="form-control" placeholder="请输入户籍" name="stunative">
                                </div>
                                <!-- 这里是表单内关闭/保存按钮 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" id="btnModifyoff">关闭</button>
                                    <button type="submit" class="btn btn-primary" id="btnModifySave">保存</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>


            <!-- 这里再来个查询的输入框，做过滤查询(可能要用到浮动) -->

            <!-- table -->
            <table class="table table-bordered table-hover table-responsive">
                <thead>
                    <tr class="active">
                        <th>id</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年级</th>
                        <th>专业</th>
                        <th>联系电话</th>
                        <th>住址</th>
                        <th>户籍</th>
                        <th colspan="2">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><a href="javascript:;">修改</a></td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr> -->
                </tbody>
            </table>
        </div>


    </div>



</body>

</html>

文档: http://doc.wuguokai.cn/s/xPq1iNw_v
http://chat4.wuguokai.cn
79783435
https://blog.csdn.net/u010436243/article/details/130155724

おすすめ

転載: blog.csdn.net/ailaohuyou211/article/details/130307332
おすすめ
ランキング
求1到10的阶乘相加值
除数無限のアルゴリズムので、
いいえ公共、オープンプラットフォームとマイクロチャネル公共プラットフォームを微信ありません
ログの形式でSQL出力
アンドリュースORMフレームワークの基本的な使用GreenDao
MySQL基础教程13——函数——流程控制函数
Go build构建包
LeetCode刷题——排序链表#148#Medium
Python difflib の使用
カール送信httpリクエスト
アーカイブ
もっと
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(0)

コードワールド

© 2018 codetd.com