实验六 Web前端综合应用

7dcac6528821

 关注

阅读 55

2022-04-01

实验目的及要求：

  1. 综合应用html、css完成页面布局
  2. 结合jQuery、Ajax实现数据请求与提交
  3. 了解web程序的发布

实验内容：

  1. 应用CSS或你所学习的前端UI美化实验5所完成的应用程序。
  2. 借助web服务器发布步骤1所完成的程序。Tomacat、Apache、nginx、IIS等任一种方式均可。

效果展示：

主页面

主题选择

更换过后的主题

代码：

index.html:

<!DOCTYPE html>
<html lang="en">

<!--developer:Barincy_Liang-->

<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>Student Manager</title>

    <!-- JavaScript jQuery -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="javascript/main.js"></script>


    <!-- Local stylecss -->
    <link rel="stylesheet" href="css/style.css">

    <!-- unicons -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">



    <!-- <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script> -->
</head>
<!--developer:Barincy_Liang-->
<body>
    <div class="main">
        <div class="head">
            <div class="page_title">
                <div class="head_title">
                    <h1>学生信息管理系统 Student Information Manage System</h1>
                </div>

                <div class="head_title_1">
                    <h2>SOUTHWEST PEROLEUM UNIVERSITY</h2>
                </div>
            </div>

            <div class="body">
                <div class="body_menu">
                    <div class="body_menu_li">
                        <ul>
                            <li>
                                <i class="uil uil-estate"></i>
                                <span>主页</span>
                            </li>
                            <li>
                                <i class="uil uil-search"></i>
                                <span>搜索</span>
                            </li>
                            <li>
                                <i class="uil uil-apps"></i>
                                <span>设置</span>
                            </li>
                            <li>
                                <div onclick="showThemeDisplay()">
                                    <i class="uil uil-heart"></i>
                                    <span>主题</span>
                                </div>
                                <div class="theme_body">
                                    <div name="color_box" class="color_box" value="0" onclick="changeThemeColor(this)"></div>
                                    <div name="color_box" class="color_box" value="62" onclick="changeThemeColor(this)"></div>
                                    <div name="color_box" class="color_box" value="165" onclick="changeThemeColor(this)"></div>
                                    <div name="color_box" class="color_box" value="233" onclick="changeThemeColor(this)"></div>
                                    <div name="color_box" class="color_box" value="205" onclick="changeThemeColor(this)"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
				<!--developer:Barincy_Liang-->
                <div class="body_table">
                    <div class="body_table_table">
                        <div class="body_table_head">
                            <div>
                                <h3>学生信息 Student Informations</h3>
                            </div>
                            <div class="body_table_version">
                                version:1.0 developer:Barincy_Liang
                            </div>
                        </div>
                        <div class="body_input">
                            <div class="input">
                                <label for="">学号：</label>
                                <input type="text" id="stuNo" placeholder="请输入学生学号">
                            </div>
                            <div class="input">
                                <label for="">姓名：</label>
                                <input type="text" id="stuName" placeholder="请输入学生姓名">
                            </div>
                            <div class="input">
                                <label for="">专业：</label>
                                <input type="text" id="stuMajor" placeholder="请输入学生专业">
                            </div>
                            <div id="submit" onclick="stuSubmit()" class="submitDiv">
                                <i class="uil uil-save submit"></i>
                                <span>保存</span>
                            </div>
                        </div>
                        <div class="body_table_table_table">
                            <div class="table_div">
                                <table id="stuTable">
                                    <thead class="table_information_title">
                                        <tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>专业</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


<!--developer:Barincy_Liang-->
</html>

css/style.css:

/* ================ Developer:Barincy_Liang ===================== */
/* ================ Google Fonts ===================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=ZCOOL+XiaoWei&display=swap');

/* ================= Variables CSS =================== */

:root {
    --header-height: 3rem;

    /* ======Colors ======== */
    /* Change your favorite color */
    --hue-color: 205;   /* 0, 62, 165, 233, 205*/

    /* HSL Color mode */
    --first-color: hsl(var(--hue-color), 69%, 61%);
    --first-color-second: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 57%, 53%);
    --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
    --title-color: hsl(var(--hue-color), 89%, 18%);
    --text-color: hsl(var(--hue-color), 99%, 27%);
    --text-color-light: hsl(var(--hue-color), 39%, 68%);
    --input-color: hsl(var(--hue-color), 70%, 96%);
    --body-color: hsl(var(--hue-color), 40%, 90%);
    --container-color: #FFF;

    /* ======Font and Typography =======*/
    /* ================ Developer:Barincy_Liang ===================== */
    --body-font: 'Noto Sans SC', sans-serif;
    ;

    /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px, ... */
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: 1.2rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /* =====Font Weight===== */
    --font-medium: 500;
    --font-semi-bold: 700;

    /* =======Margenes Bottom ===========*/
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;

    /* ===========z index ======================*/
    /* ================ Developer:Barincy_Liang ===================== */
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 100;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}


body {
    min-width: 1900px;
    box-sizing: border-box;
    margin: 0 0 var(--header-height) 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
}
/* ================ Developer:Barincy_Liang ===================== */

h1,
h2,
h3,
h4 {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============REUSABLE CSS CLASSES ====================*/
/* ================ Developer:Barincy_Liang ===================== */
.main {
    width: 103rem;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    bottom: 0;
}

.head {
    margin-left: auto;
    margin-right: auto;
    top: 1rem;
    left: 0;
    right: 0;
    bottom: 0;
}

.page_title {
    display: flex;
}

.head_title {
    margin-right: var(--mb-1-5);
    padding: .7rem;
    height: 3.7rem;
    width: 65rem;
    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}

.head_title_1 {
    font-size: 1.13rem;
    text-align: center;
    margin-right: var(--mb-0-5);
    padding: .7rem;
    height: 3.7rem;
    width: 32.3rem;
    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}

.head_title_1 h2 {
    margin-top: .5rem;
}


.body {
    height: 51.8rem;
    display: flex;
    margin-top: var(--mb-2);
}

.body_menu {
    padding: var(--mb-0-75);
    width: 6rem;
    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
    margin-right: var(--mb-1-5);
}

.body_menu_li {
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);
}

.body_menu_li ul li {
    margin-top: 1.5rem;
    text-align: center;
    line-height: 3rem;
    height: 3rem;
    box-shadow: inset 0rem 0rem .3rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}

.body_table {
    width: 91.16rem;
    padding: var(--mb-0-75);
    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}

.body_input {
    vertical-align: middle;
    position: absolute;
    height: 5.2rem;
    width: 52rem;
    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}


.body_input .input {
    padding-left: .5rem;
    padding-right: .1rem;
    margin-top: 1.4rem;
    vertical-align: middle;
    float: left;
    margin-left: var(--mb-1-5);
    float: left;
    height: var(--mb-2-5);
    margin-right: .5rem;
    box-shadow: inset 0rem 0rem .5rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}

.body_input .input label {
    vertical-align: middle;
    float: left;
    height: 5.2rem;
    line-height: 2.7rem;
}

.body_input .input input {
    vertical-align: middle;
    height: 5.2rem;
    width: 9rem;
    float: left;
    font-size: var(--normal-font-size);
    outline: none;
    background-color: transparent;
    border: 0;
    height: 2.7rem;
    color: var(--text-color);
}

.body_input .input input::-webkit-input-placeholder {
    color: var(--text-color-light);
}

.body_input .submitDiv {
    float: right;
    margin-right: 2rem;
    margin-top: 1.7rem;
    font-size: var(--h3-font-size);
    font-weight: var(--font-semi-bold);
}


.body_table_head {
    height: 3.7rem;
    float: right;
    width: 21rem;
    margin-bottom: var(--mb-1-5);
    padding: var(--mb-0-75);
    padding-right: 1.5rem;
    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}

.body_table_head h3 {
    float: right;

}

.body_table_version {
    float: right;
    font-size: .9rem;
    font-weight: 400;
    color: var(--text-color-light);
}

.body_table_table {
    padding: var(--mb-1-5);
    box-shadow: inset 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
    height: 46.95rem;
}

.body_table_table_table {
    padding: var(--mb-1-5);
    margin-top: 6rem;
    height: 38rem;
    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
}

.table_div {
    overflow-y: auto;
    height: 100%;
}

.table_div::-webkit-scrollbar {
    width: 6px;
    height: 100%;
}

.table_div::-webkit-scrollbar-thumb {
    width: var(--mb-0-25);
    height: 40px;
    background-color: var(--text-color-light);
    border-radius: .5rem;
}

.table_div::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0);
}

.table_information_title th {
    background-color: var(--body-color);
    position: sticky;
    top: 0;
}

.table_div table {
    margin: auto;
    border-spacing: 0;
    text-align: left;
}

.table_div table tr {
    color: var(--title-color);
    height: 3.3rem;
    font-size: var(--h1-font-size);
}


.table_div table tr td {
    height: 3.3rem;
    color: var(--text-color);
    font-size: var(--normal-font-size);
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    border-bottom: 1px #dddddd solid;
}

.table_div table tr[name='tablebody']:hover td {
    color: var(--text-color-light);
}

.table_div table tr[name='tablebody']:hover td button {
    color: var(--text-color-light);
}

.table_div table tr[name='tablebody']:hover td span {
    color: var(--text-color-light);
}

.table_div table tr td div {
    overflow: auto;
    word-break: normal;
    word-break: normal;
}

.table_div table tr td:nth-child(1) div {
    width: 20rem;
}

.table_div table tr td:nth-child(2) div {
    width: 16rem;
}

.table_div table tr td:nth-child(3) div {
    width: 30rem;
}

.table_div table tr td span {
    font-size: var(--normal-font-size);
    line-height: 20px;
}

.table_div table tr td button {
    font-size: var(--normal-font-size);
    color: var(--text-color);
    height: 5vh;
    background-color: transparent;
    outline: none;
    border: 0;
}

.theme_body {
    display: none;
    height: 15.5rem;
}
.theme_body .color_box {
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--mb-0-75);
    border-radius: var(--mb-0-75);
    box-shadow: 0 0 var(--mb-0-25) rgba(0, 0, 0, 0.2);
}

javascript/main.js

// var deleteId = null;


//get stuinformation from database
function getData() {
    $.get("http://120.46.143.125:8080/stu/list",
        function (data, textStatus, jqXHR) {

            var stuList = data.data;        //从后端get的数据里面拿到信息列表。

            // 列表为空时添加测填充数据，方便还未写插入的同学写删除部分。

            // if (Object.keys(stuList).length == 0) {
            //     var stuNo = '空表格数据填充';            //初始化填充数据样式
            //     var stuName = '空表格数据填充';
            //     var stuMajor = '空表格数据填充';
            //     $.post("http://120.46.143.125:8080/stu/insertStu", { stuNo: stuNo, stuName: stuName, stuMajor: stuMajor },
            //         function (data) {
            //             deleteId = data.data;
            //             if (data.msg == '成功') {
            //                 $("tr[name = 'tablebody']").remove();
            //                 $.get("http://120.46.143.125:8080/stu/list",
            //                     function (data, textStatus, jqXHR) {
            //                         var stuList = data.data;
            //                         for (var v in stuList) {
            //                             var newRow = "<tr name = 'tablebody'> <td><div>" + stuList[v].stuNo + "</div></td> <td><div>" + stuList[v].stuName + "</div></td> <td><div>" + stuList[v].stuMajor + "</div></td> <td><div><button name = 'update' onclick = 'updateByStuId(this)' value = '" + stuList[v].stuId + "'>修改</button><span> | </span><button name = 'delete' onclick = 'deleteByStuId(this)' value = '" + stuList[v].stuId + "'>删除</button></div></td></tr>"
            //                             $("tr:last").after(newRow);
            //                         }
            //                     }
            //                 );
            //                 $("input").val("");
            //             }
            //         }
            //     )

            // // 列表不为空时删除填充数据，由于为经过优化，对后端服务器压力比较大，并且对自身实验没任何作用所以属下，也懒得优化。

            // }else {
            //     $.ajax({
            //         type: "POST",
            //         url: 'http://120.46.143.125:8080/stu/deleteStu/' + deleteId,
            //         success: function (response) {
            //         }
            //     });
            // }
            $("tr[name = 'tablebody']").remove();       //remove all tr which named tablebody

            //foreach the stuList
            for (var v in stuList) {

                //if the stuList[v] have any information is null or empty then delete it from database.
                if (stuList[v].stuNo == '' || stuList[v].stuNo == null || stuList[v].stuName == '' || stuList[v].stuName == null || stuList[v].stuMajor == '' || stuList[v].stuMajor == null) {
                    $.ajax({
                        type: "POST",
                        url: 'http://120.46.143.125:8080/stu/deleteStu/' + stuList[v].stuId,
                        success: function (response) {
                            console.log("delete");
                        }
                    });
                } else { //if the information is not null add it into table

                    //add data in a loop,note that i store the id of each student in the div of the modification and deletion tags to facilitate the deletion and update functions
                    var newRow = "<tr name = 'tablebody'> <td><div>" + stuList[v].stuNo + "</div></td> <td><div>" + stuList[v].stuName + "</div></td> <td><div>" + stuList[v].stuMajor + "</div></td> <td><div><button name = 'update' onclick = 'updateByStuId(this)' value = '" + stuList[v].stuId + "'>修改</button><span> | </span><button name = 'delete' onclick = 'deleteByStuId(this)' value = '" + stuList[v].stuId + "'>删除</button></div></td></tr>"
                    $("tr:last").after(newRow);
                }
            }
        }
    );
}

//add information to database
function addStuData (stuNo, stuName, stuMajor) {
    var data = '';
    $.post("http://120.46.143.125:8080/stu/insertStu", { stuNo: stuNo, stuName: stuName, stuMajor: stuMajor },
        function (data) {
            console.log(data.data);
            if (data.msg == '成功') {
                $("tr[name = 'tablebody']").remove();
                $.get("http://120.46.143.125:8080/stu/list",
                    function (data, textStatus, jqXHR) {
                        var stuList = data.data;
                        for (var v in stuList) {
                            var newRow = "<tr name = 'tablebody'> <td><div>" + stuList[v].stuNo + "</div></td> <td><div>" + stuList[v].stuName + "</div></td> <td><div>" + stuList[v].stuMajor + "</div></td> <td><div><button name = 'update' onclick = 'updateByStuId(this)' value = '" + stuList[v].stuId + "'>修改</button><span> | </span><button name = 'delete' onclick = 'deleteByStuId(this)' value = '" + stuList[v].stuId + "'>删除</button></div></td></tr>"
                            $("tr:last").after(newRow);
                        }
                    }
                );
            }
        }
    );
    return data;
}

//delete stu by stuId
function deleteByStuId(e) {
    var stuid = e.value;
    $.ajax({
        type: "POST",
        url: 'http://120.46.143.125:8080/stu/deleteStu/' + stuid,
        success: function (response) {
            $(e).parent().parent().parent().remove();
        }
    });

}

//update student information by stuId
function stuUpdate(stuId) {
    //get the new stu information
    var stuNo = $("#stuNo").val();
    var stuName = $("#stuName").val();
    var stuMajor = $("#stuMajor").val();

    //post new data to update database data
    $.post("http://120.46.143.125:8080/stu/updateStu", { stuId: stuId, stuNo: stuNo, stuName: stuName, stuMajor: stuMajor },
        function (data) {
            if (data.msg == '成功') {   //if update database success,update the table's information
                $("tr[name = 'tablebody']").remove();   //detele old table's tr
                $.get("http://120.46.143.125:8080/stu/list",
                    function (data, textStatus, jqXHR) {
                        var stuList = data.data;
                        for (var v in stuList) {
                            var newRow = "<tr name = 'tablebody'> <td><div>" + stuList[v].stuNo + "</div></td> <td><div>" + stuList[v].stuName + "</div></td> <td><div>" + stuList[v].stuMajor + "</div></td> <td><div><button name = 'update' onclick = 'updateByStuId(this)' value = '" + stuList[v].stuId + "'>修改</button><span> | </span><button name = 'delete' onclick = 'deleteByStuId(this)' value = '" + stuList[v].stuId + "'>删除</button></div></td></tr>"
                            $("tr:last").after(newRow);
                        }
                    }
                );
                $("input").val("");
            }
        }
    );
    $("#submit").attr("onclick", "stuSubmit()");
}

//add data when the page is rendered
$(document).ready(function () {
    getData();  //function getData() :add tr

    //get box information of theme boxes
    var boxArray = $("div[name = 'color_box']");

    //Render the background color by the value of the color div's value
    $.each(boxArray, function (indexInArray, valueOfElement) {
        var color = valueOfElement.getAttribute("value");
        var colorStyle = 'background-color: hsl(' + color + ',40%, 90%)';
        valueOfElement.setAttribute('style', colorStyle);
    });

    //every 1000ms refersh the table'data
    setInterval('getData()', '1000');
});

//add data after clicking submit button
function stuSubmit() {

    //get stu's data from input boxes
    var stuNo = $("#stuNo").val();
    var stuName = $("#stuName").val();
    var stuMajor = $("#stuMajor").val();

    var data = addStuData (stuNo, stuName, stuMajor);
    if(data.msg == '成功'){
        $("input").val("");
    }
}

//get old student information from the table
function updateByStuId(e) {
    var stuid = e.value;    //Get the value of stuid from the value of the modified tag
    var stuNo = $(e).parent().parent().parent("tr").children().eq(0).text();        //get the old stu information in table
    var stuName = $(e).parent().parent().parent("tr").children().eq(1).text();
    var stuMajor = $(e).parent().parent().parent("tr").children().eq(2).text();
    // console.log(stuNo);      //Check if the acquisition is successful
    // console.log(stuName);
    // console.log(stuMajor);
    $("#stuNo").val(stuNo);     //populate the value into the input box
    $("#stuName").val(stuName);
    $("#stuMajor").val(stuMajor);
    $("#submit").attr("onclick", "stuUpdate(" + stuid + ")");
}


//show and hide the theme selection div
function showThemeDisplay() {
    if ($("div[class = 'theme_body']").css("display") === 'none') {
        $("div[class = 'theme_body']").css("display", "block");
    }
    else if ($("div[class = 'theme_body']").css("display") === 'block') {
        $("div[class = 'theme_body']").css("display", "none");
    }

};

//change the page's background-color
function changeThemeColor(e) {
    var color = e.getAttribute("value");
    document.documentElement.style.setProperty('--hue-color', color);
    showThemeDisplay();
}

相关推荐

综合实验(六)

慕犹清 45 0 0

Web前端小实验

程序员伟杰 19 0 0

综合实验——高级网络应用检测

江南北 77 0 0

【RHCE】综合实验0710综合实验

_鱼与渔_ 39 0 0

Rocky基础之LAMP综合应用实验

王栩的文字 193 0 0

web前端-HTML常用标签-综合案例

钎探穗 18 0 0

实验30：ACL综合实验

小桥流水2016 62 0 0

MGRE综合实验

追梦人的自留地 83 0 0

OSPF 综合实验

七公子706 58 0 0

综合实验(四)

ZSACH 44 0 0

精彩评论（0）

0 0 举报