【周末】前端开发实战

前端开发实战

直播前准备

专题课	阶段	章节	录播地址
前端开发-HTML/CSS/JavaScript	L1	Web 讲解	录播地址
前端开发-HTML/CSS/JavaScript	L1	HTML 讲解
前端开发-HTML/CSS/JavaScript	L1	CSS 讲解

课程目标

了解常见 HTML 标签及属性
了解常用 CSS 属性
了解常用 JavaScript 语法
了解 jQuery 常见用法

知识点总览

点击查看：前端开发基础知识点梳理

需求说明

开发 Web 版学生管理系统的前端页面，包含首页、添加学生页面和修改学生页面
提供学生列表，添加，修改，删除功能的相关接口

实战思路

uml diagram

分析接口

学生信息列表接口

请求地址: /list
请求方式：GET
响应数据：JSON

[
  {
    "age": 24,
    "gender": "male",
    "name": "Tony",
    "sid": 1
  },
  {
    "age": 26,
    "gender": "female",
    "name": "Alice",
    "sid": 2
  },
  ...
]

响应参数说明

参数	类型	说明
sid	int	学生 ID
name	string	姓名
age	int	年龄
gender	string	性别

添加学生信息接口

请求地址: /add
请求方式： POST
请求体参数：表单格式

请求参数说明

参数	类型	说明
name	string	姓名
age	int	年龄
gender	string	性别

返回数据：首页路由

修改学生信息接口

请求地址: /change/<sid>

参数	类型	说明
sid	int	学生 ID

请求方式： POST
请求体参数：表单格式

请求参数说明

参数	类型	说明
name	string	姓名
age	int	年龄
gender	string	性别

返回数据：首页路由

获取修改学生回显信息接口

请求地址: /changeData/<sid>

参数	类型	说明
sid	int	学生 ID

请求方式： GET
返回数据： JSON

{
  "sid": 1,
  "name": "Tony",
  "age": 24,
  "gender": "male"
}

响应参数说明

参数	类型	说明
sid	int	学生 ID
name	string	姓名
age	int	年龄
gender	string	性别

删除学生信息接口

请求地址: /delete/<sid>

参数	类型	说明
sid	int	学生 ID

请求方式：GET
返回数据：首页路由

页面开发

前端页面开发推荐工具：vscode

vscode 下载地址
安装 vscode 插件：open in browser

首页列表页面

搭建首页框架

<!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>学生管理系统</title>
</head>
<body>
  <div class="main">
    <!-- 标题 -->
    <div class="title">
      <h1>学生管理系统</h1>
    </div>
    <!-- 功能条 -->
    <div class="op">
      <div class="left">
        <a href="/add">添加学生</a>
      </div>
      <div class="right">预留功能区域</div>
    </div>
    <!-- 主体内容 -->
    <div class="content">
      <table class="data">

      </table>
    </div>
  </div>
</body>
</html>
<script type="text/javascript"></script>

完成首页布局

<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>学生管理系统</title>

  <style>
    .main {
      width: 1200px;
      height: 800px;
      margin: 0 auto;
    }
    .title{
      color: red;
      text-align: center;
    }
    .op {
      height: 50px;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      padding: 0 30px;
    }
    .op .left a {
      text-decoration: none;
    }
  </style>
</head>

完成表格编写

<body>
  <div class="main">
    <!-- 标题 -->
    <div class="title">
      <h1>学生管理系统</h1>
    </div>
    <!-- 功能条 -->
    <div class="op">
      <div class="left">
        <a href="/add">添加学生</a>
      </div>
      <div class="right">预留功能区域</div>
    </div>
    <!-- 主体内容 -->
    <div class="content">
      <table class="data">
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr>
          <td>1</td>
          <td>Tom</td>
          <td>28</td>
          <td>male</td>
          <td>修改 | 删除</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Lily</td>
          <td>18</td>
          <td>female</td>
          <td>修改 | 删除</td>
        </tr>
      </table>
    </div>
  </div>
</body>
</html>

完成表格布局

  <style>
    .content {
      height: 500px;
      margin-top: 20px;
    }
    .data {
      width: 1200px;
      text-align: center;
      border-collapse: collapse;
    }
    tr, th, td {
      border: 1px solid #000;
    }
  </style>
</head>

向学生列表接口发起请求，并通过字符串拼接完成表格 html 的拼接和设置。

<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>学生管理系统</title>
  <script src="../static/jquery-1.9.js"></script>
  <script>
    // 向学生列表接口发起一个请求，获取全部学生数据
    $.get("http://127.0.0.1:5050/list", function(data){
      console.log(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>";
      // 循环取出每行数据，拼接到 html_str 中
      for(var i=0; i<data.length; i++){
        // 通过索引取出每次循环的学生信息，是对象形式
        stu = data[i]
        // 把取出的学生对象拼接到 html_str 中
        html_str += "<tr>";
        html_str += "  <td>1</td>";
        html_str += "  <td>Tom</td>";
        html_str += "  <td>28</td>";
        html_str += "  <td>male</td>";
        html_str += "  <td>修改 | 删除</td>";
        html_str += "</tr>";
      }
      // 把拼接好的 html_str 设置到 class 属性为 data 的表格元素中
      $(".data").html(html_str);
    })
 </script>
</head>

从接口获取的真实数据。

<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>学生管理系统</title>
  <script src="../static/jquery-1.9.js"></script>
  <script>
    // 向学生列表接口发起一个请求，获取全部学生数据
    $.get("http://127.0.0.1:5050/list", function(data){
      console.log(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>";
      // 循环取出每行数据，拼接到 html_str 中
      for(var i=0; i<data.length; i++){
        // 通过索引取出每次循环的学生信息，是对象形式
        var stu = data[i]
        // 获取学生 id
        var stu_id = stu.sid
        // 把取出的学生对象拼接到 html_str 中
        html_str += "<tr>";
        html_str += "  <td>" + stu_id + "</td>";
        html_str += "  <td>" + stu.name + "</td>";
        html_str += "  <td>" + stu.age + "</td>";
        html_str += "  <td>" + stu.gender + "</td>";
        html_str += "  <td><a href='/change/" + stu_id + "'>修改</a> | <a href='/delete/" + stu_id + "'>删除</a></td>";
        html_str += "</tr>";
      }
      // 把拼接好的 html_str 设置到 class 属性为 data 的表格元素中
      $(".data").html(html_str);
    })
 </script>
</head>

设置 js 脚本在页面加载完毕后执行。

<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>学生管理系统</title>

  <style>

  </style>
  <script src="../static/jquery-1.9.js"></script>
  <script>
    // 等页面加载完毕之后再执行脚本
    $(function(){
        // 向学生列表接口发起一个请求，获取全部学生数据
        $.get("http://127.0.0.1:5050/list", function(data){
            console.log(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>";
            // 循环取出每行数据，拼接到 html_str 中
            for(var i=0; i<data.length; i++){
                // 通过索引取出每次循环的学生信息，是对象形式
                var stu = data[i]
                // 获取学生 id
                var stu_id = stu.sid
                // 把取出的学生对象拼接到 html_str 中
                html_str += "<tr>";
                html_str += "  <td>" + stu_id + "</td>";
                html_str += "  <td>" + stu.name + "</td>";
                html_str += "  <td>" + stu.age + "</td>";
                html_str += "  <td>" + stu.gender + "</td>";
                html_str += "  <td><a href='/change/" + stu_id + "'>修改</a> | <a href='/delete/" + stu_id + "'>删除</a></td>";
                html_str += "</tr>";
            }
            // 把拼接好的 html_str 设置到 class 属性为 data 的表格元素中
            $(".data").html(html_str);
        });
    });
 </script>
</head>

完整代码：

<!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>学生管理系统</title>

  <style>
    .main {
      /* 设置 class 属性为 main 的元素 */
      width: 1200px;
      height: 800px;
      margin: 0 auto;
    }
    .title{
      /* 设置页面标题，class 属性为 title 元素下 h1 标签 */
      color: red;
      text-align: center;
    }
    .op {
      /* 设置功能条 */
      height: 50px;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      padding: 0 30px;
    }
    .op .left a {
      text-decoration: none;
    }
    .content {
      height: 500px;
      margin-top: 20px;
    }
    .data {
      width: 1200px;
      text-align: center;
      border-collapse: collapse;
    }
    tr, th, td {
      /* 设置表格边框 */
      border: 1px solid #000;
    }
  </style>
  <script src="../static/jquery-1.9.js"></script>
  <script>
    // 等页面加载完毕之后再执行脚本
    $(function(){
        // 向学生列表接口发起一个请求，获取全部学生数据
        $.get("http://127.0.0.1:5050/list", function(data){
            console.log(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>";
            // 循环取出每行数据，拼接到 html_str 中
            for(var i=0; i<data.length; i++){
                // 通过索引取出每次循环的学生信息，是对象形式
                var stu = data[i]
                // 获取学生 id
                var stu_id = stu.sid
                // 把取出的学生对象拼接到 html_str 中
                html_str += "<tr>";
                html_str += "  <td>" + stu_id + "</td>";
                html_str += "  <td>" + stu.name + "</td>";
                html_str += "  <td>" + stu.age + "</td>";
                html_str += "  <td>" + stu.gender + "</td>";
                html_str += "  <td><a href='/change/" + stu_id + "'>修改</a> | <a href='/delete/" + stu_id + "'>删除</a></td>";
                html_str += "</tr>";
            }
            // 把拼接好的 html_str 设置到 class 属性为 data 的表格元素中
            $(".data").html(html_str);
        });
    });
 </script>
</head>
<body>
  <div class="main">
    <!-- 标题 -->
    <div class="title">
      <h1>学生管理系统</h1>
    </div>
    <!-- 功能条 -->
    <div class="op">
      <div class="left">
        <a href="/add">添加学生</a>
      </div>
      <div class="right">预留功能区域</div>
    </div>
    <!-- 主体内容 -->
    <div class="content">
      <table class="data">

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

添加页面

因为主框架与标题的设置与主页一致，所以可以把公用的的 css 样式单独创建 main.css 文件，放到 static 目录中，直接在其他页面引用即可。

.main {
  /* 设置 class 属性为 main 的元素 */
  width: 1200px;
  height: 800px;
  margin: 0 auto;
}
.title{
  /* 设置页面标题，class 属性为 title 元素下 h1 标签 */
  color: red;
  text-align: center;
  border: 1px solid #000;
}

完成 css 样式的引入。

<!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>学生管理系统</title>
    <link rel="stylesheet" href="../static/main.css">
</head>
<body>
  <div class="main">
    <!-- 标题 -->
    <div class="title">
      <h1>添加学生</h1>
    </div>
  </div>
</body>
</html>

完成表单的添加，和表单格式请求的提交。

<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="name"></div>
           <div>年龄: <input type="text" name="age" id="age"></div>
           <div>性别: <input type="text" name="gender" id="gender"></div>
           <div></div><input type="reset" value="重置">   <input type="submit" value="添加"></div>
      </form>
   </div>
  </div>
</body>

设置表单样式

<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>学生管理系统</title>
    <link rel="stylesheet" href="../static/main.css">
    <style>
      .content {
        text-align: center;
      }
      .content div {
        margin-top: 20px;
      }
    </style>
</head>

完整代码：

<!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>学生管理系统</title>
    <link rel="stylesheet" href="../static/main.css">
    <style>
      .content {
        text-align: center;
      }
      .content div {
        margin-top: 20px;
      }
    </style>
</head>
<body>
  <div class="main">
    <!-- 标题 -->
    <div class="title">
      <h1>添加学生</h1>
    </div>
    <!-- 导航按钮 -->
    <div class="op">
      <a href="/">首页</a>
    </div>
    <!-- 信息输入表单 -->
    <div class="content">
      <form action="/add" method="post">
           <div>姓名: <input type="text" name="name" id="name"></div>
           <div>年龄: <input type="text" name="age" id="age"></div>
           <div>性别: <input type="text" name="gender" id="gender"></div>
           <div><input type="reset" value="重置">   <input type="submit" value="添加"></div>
      </form>
   </div>
  </div>
</body>
</html>

修改页面

修改页面与添加页面的元素基本一致，可以复制内容到 change.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>学生管理系统</title>
    <link rel="stylesheet" href="../static/main.css">
    <style>
      .content {
        text-align: center;
      }
      .content div {
        margin-top: 20px;
      }
    </style>
</head>
<body>
  <div class="main">
    <!-- 标题 -->
    <div class="title">
      <h1>修改学生信息</h1>
    </div>
    <div class="op">
      <a href="/">首页</a>
    </div>
    <!-- 信息输入表单 -->
    <div class="content">
      <form action="/add" method="post">
           <div>姓名: <input type="text" name="name" id="name"></div>
           <div>年龄: <input type="text" name="age" id="age"></div>
           <div>性别: <input type="text" name="gender" id="gender"></div>
           <div><input type="reset" value="重置">   <input type="submit" value="修改"></div>
      </form>
   </div>
  </div>
</body>
</html>

修改表单请求地址为修改接口。

<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>学生管理系统</title>
    <link rel="stylesheet" href="../static/main.css">
    <style>
      .content {
        text-align: center;
      }
      .content div {
        margin-top: 20px;
      }
    </style>
    <script src="../static/jquery-1.9.js"></script>
    <script>
        // 文档加载完毕后执行脚本
        $(function(){
            // 从 url 中获取携带的 sid
            var doc_url = location.href
            var index = doc_url.lastIndexOf("/") + 1
            var sid = doc_url.substring(index)
            // 设置 form 表单提交地址
            $("form").prop({action: "/change/" + sid})
        })
    </script>
</head>

完成数据回显。

<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>学生管理系统</title>
    <link rel="stylesheet" href="../static/main.css">
    <style>

    </style>
    <script src="../static/jquery-1.9.js"></script>
    <script>
        // 文档加载完毕后执行脚本
        $(function(){
            // 查询 sid 对应的学生信息
            var doc_url = location.href;
            var index = doc_url.lastIndexOf("/") + 1;
            var sid = doc_url.substring(index);
            // 设置 form 表单提交地址
            $("form").prop({action: "/change/" + sid});
            // 获取回显数据
            $.get("/changeData/" + sid, function(data){
                console.log(data);
                $("#name").val(data.name);
                $("#age").val(data.age);
                $("#gender").val(data.gender);
            });
        })
    </script>
</head>

完整代码：

<!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>学生管理系统</title>
    <link rel="stylesheet" href="../static/main.css">
    <style>
      .content {
        text-align: center;
      }
      .content div {
        margin-top: 20px;
      }
    </style>
    <script src="../static/jquery-1.9.js"></script>
    <script>
        // 文档加载完毕后执行脚本
        $(function(){
            // 查询 sid 对应的学生信息
            var doc_url = location.href;
            var index = doc_url.lastIndexOf("/") + 1;
            var sid = doc_url.substring(index);
            // 设置 form 表单提交地址
            $("form").prop({action: "/change/" + sid});
            // 获取回显数据
            $.get("/changeData/" + sid, function(data){
                console.log(data);
                $("#name").val(data.name);
                $("#age").val(data.age);
                $("#gender").val(data.gender);
            });
        })
    </script>
</head>
<body>
  <div class="main">
    <!-- 标题 -->
    <div class="title">
      <h1>修改学生信息</h1>
    </div>
    <div class="op">
      <a href="/">首页</a>
    </div>
    <!-- 信息输入表单 -->
    <div class="content">
      <form action="/add" method="post">
           <div>姓名: <input type="text" name="name" id="name"></div>
           <div>年龄: <input type="text" name="age" id="age"></div>
           <div>性别: <input type="text" name="gender" id="gender"></div>
           <div><input type="reset" value="重置">   <input type="submit" value="修改"></div>
      </form>
   </div>
  </div>
</body>
</html>

总结

掌握常用的后端框架的基本安装与配置。
掌握路由的定义与使用。
掌握接口请求数据。
掌握接口响应信息。
掌握前后端分离下，如何解决跨域问题。