Web 前端开发综合实战

通过所学前端内容，基于前面后端开发课程中实现的学生管理系统后台接口，将接口中的数据，使用前端页面进行展示。

实现思路

uml diagram

实现步骤

分析接口

首页列表接口: /list
- 请求方式： GET
- 返回数据： JSON

添加接口: /add
- 请求方式： POST
- 请求体参数：name, age, gender
- 返回数据： JSON

修改接口: /change/sid
- 请求方式： POST
- 请求体参数：name, age, gender
- 返回数据： JSON

回显数据接口: /changeData/sid
- 请求方式： GET
- 返回数据： JSON

删除接口: /delete/sid
- 请求方式： GET
- 返回数据： JSON

页面开发

首页列表页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            /* border: 1px solid #000; */
            height: 800px;
            width: 1200px;
            margin: 0 auto;
        }
        .title h1{
            width: 1200px;
            height: 100px;
            color: red;
            text-align: center;
            line-height: 100px;
            /* border: 1px solid #000; */
        }
        .op{
            width: 1200px;
            height: 50px;
            line-height: 50px;
            /* border: 1px solid #000; */
        }
        .add{
            width: 100px;
            /* border: 1px solid #000; */
            text-align: center;
        }
        .content{
            width: 1200px;
            height: 500px;
            /* border: 1px solid #000; */
            margin-top: 10px;
        }
        .data{
            width: 1200px;
            border: 1px solid #000;
            text-align: center;
        }
        tr, th, td{
            border: 1px solid #000;
        }
        a{
            text-decoration: none;
        }
    </style>

    <script src="./static/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 发起一个请求去获取表格中的数据
            $.get("/list", function(data){
                var html_str = "";
                html_str += "<tr>"
                html_str += "    <th>编号</th>"
                html_str += "    <th>姓名</th>"
                html_str += "    <th>年龄</th>"
                html_str += "    <th>性别</th>"
                html_str += "    <th>操作</th>"
                html_str += "</tr>"

                for(var i=0;i<data.length;i++){
                    var obj = data[i];
                    html_str += "<tr>"
                    html_str += "    <td>" + obj.sid + "</td>"
                    html_str += "    <td>" + obj.name + "</td>"
                    html_str += "    <td>" + obj.age + "</td>"
                    html_str += "    <td>" + obj.gender + "</td>"
                    html_str += "    <td><a href='/change/" + obj.sid + "'>修改</a> | <a href='/delete/" + obj.sid + "'>删除</a></td>"
                    html_str += "</tr>"
                }
                $(".data").html(html_str)
            })
        });
    </script>
</head>
<body>

    <div class="main">
        <!-- 标题 -->
        <div class="title">
            <h1>学生管理系统</h1>
        </div>
        <!-- 功能条 -->
        <div class="op">
            <div class="add">
                <a href="/add">添加学生</a>
            </div>
        </div>
        <!-- 主体内容 -->
        <div class="content">
            <table class="data">

            </table>
        </div>
    </div>
</body>
</html>

添加页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 1200px;
            height: 800px;
            margin: 30px auto;
            border: 1px solid #000;
        }
        .title{
            text-align: center;
            color: red;
            border: 1px solid #000;
        }
        .content{
            width: 1200px;
            text-align: center;
        }
        .content div{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="title">
            <h1>添加学生</h1>
        </div>
        <div class="content">
           <form action="/add" method="post">
                <div>姓名: <input type="text" name="name" id=""></div>
                <div>年龄: <input type="text" name="age" id=""></div>
                <div>性别: <input type="text" name="gender" id=""></div>
                <div></div><input type="reset" value="重置">   <input type="submit" value="添加"></div>
           </form>
        </div>
    </div>
</body>
</html>

修改页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 1200px;
            height: 800px;
            margin: 30px auto;
            border: 1px solid #000;
        }
        .title{
            text-align: center;
            color: red;
            border: 1px solid #000;
        }
        .content{
            width: 1200px;
            text-align: center;
        }
        .content div{
            margin-top: 20px;
        }
    </style>

    <script src="./static/jquery-1.12.4.min.js"></script>


    <script>
        $(function(){
            var sid = document.location.href;
            var index = sid.lastIndexOf("/") + 1
            sid = sid.substring(index)

            // 设置form表单提交的地址
            $("form").prop({action:"/change/" + sid})

            // 请求回显数据
            $.get("/changeData/" + sid, function(data){
                $("[name='name']").val(data.name);
                $("[name='age']").val(data.age);
                $("[name='gender']").val(data.gender);
            })

        });
    </script>
</head>
<body>
    <div class="main">
        <div class="title">
            <h1>修改学生</h1>
        </div>
        <div class="content">
           <form action="" method="post">
                <div>姓名: <input type="text" name="name" id=""></div>
                <div>年龄: <input type="text" name="age" id=""></div>
                <div>性别: <input type="text" name="gender" id=""></div>
                <div></div><input type="reset" value="重置">   <input type="submit" value="修改"></div>
           </form>
        </div>
    </div>
</body>
</html>

总结

前端页面通过接口地址与后端接口进行交互
在页面中发起请求时，根据接口要求传入相应的参数或数据
页面中根据接口返回响应数据格式将响应数据展示到页面中