Skip to content

Day5-Web前端开发

Web 开发实战-学生管理系统前端开发

简介

  • Web 开发实战-学生管理系统前端开发

知识模块

  • 前端开发 L1

知识点

  • HTML
  • CSS
  • 模板技术

受众

  • 初级测试开发工程师
  • 初级 Python 开发工程师

实战要求

  • 首页面 index.html - 通过模板技术、将所有信息以表格形式显示到 index.html 文件中,每条学生信息后对应有 修改删除 操作,并在首页中包含 添加新学生 按钮
  • 添加页面 -- 当点击首页中的 添加学生 按钮时,页面跳转到 add.html 页面,显示学生信息除 ID 之外的所有信息输入框,并以 POST 方式提交
  • 修改页面 -- 在点击学生修改功能时,跳转到 change.html 页面,显示学生信息除 ID 之外的所有信息输入框,并在输入框内显示被修改学生原始信息,以 POST 方式提交
  • 适当通过 CSS 样式美化页面

实现代码

首页面 - index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .docker{
            width:800px;
            margin:100px auto;
        }
        table{
            width:800px;
        }
        td{
            text-align:center;
        }
    </style>
</head>
<body>

    <div class="docker">
        <div class="add">
           <a href="/stu/add">新增</a>
        </div>
        <table border="1">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
          {% for s in students %}
          <tr>
              <td>{{s.sid}}</td>
              <td>{{s.name}}</td>
              <td>{{s.age}}</td>
              <td>{{s.gender}}</td>
              <td>{{s.address}}</td>
              <td>
                  <a href="/stu/change/{{s.sid}}">修改</a>
                  <a href="/stu/del/{{s.sid}}">删除</a>
              </td>
          </tr>
          {% endfor %}
        </table>
    </div>
</body>
</html>

添加页面 - add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Student</title>
    <style>
        .container{
            width:300px;
            height:200px;
            margin:200px auto;
        }
        .item{
            margin-bottom:20px;
        }
    </style>
</head>
<body>
      <div class="container">
         <form action="/stu/add" method="post">
            <div class="item">
                <label>姓名:</label>
                <input type="text" placeholder="请输入姓名" name="name">
            </div>
            <div class="item">
                <label>年龄:</label>
                <input type="text" placeholder="请输入年龄" name="age">
            </div>
            <div class="item">
                <label>性别:</label>
                <input type="text" placeholder="请输入性别" name="gender">
            </div>
            <div class="item">
                <label>地址:</label>
                <input type="text" placeholder="请输入地址" name="address">
            </div>
            <div class="item">
                <button type="submit">添加</button>
            </div>
        </form>
      </div>
</body>
</html>

修改页面 - change.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Student</title>
    <style>
        .container{
            width:300px;
            height:200px;
            margin:200px auto;
        }

        .item{
            margin-bottom:20px;
        }
    </style>
</head>
<body>
      <div class="container">
         <form action="/stu/change/{{stu.sid}}" method="post">
            <div class="item">
                <label>姓名:</label>
                <input type="text" placeholder="请输入姓名" name="name" value="{{stu.name}}">
            </div>
            <div class="item">
                <label>年龄:</label>
                <input type="text" placeholder="请输入年龄" name="age" value="{{stu.age}}">
            </div>
            <div class="item">
                <label>性别:</label>
                <input type="text" placeholder="请输入性别" name="gender" value="{{stu.gender}}">
            </div>
            <div class="item">
                <label>地址:</label>
                <input type="text" placeholder="请输入地址" name="address" value="{{stu.address}}">
            </div>
            <div class="item">
                <button type="submit">修改</button>
            </div>
        </form>
      </div>
</body>
</html>

总结

  • 此部分内容主要基于前端 Flask 开发的后端接口实现前端页面的展示
  • 实现过程通过 HTML、CSS 结合 Flask 模板技术完成页面展示
  • 代码只实现了基础展示功能,可根据所学内容对页面进行美化