Vue实现学生信息管理页面

一. 实验目的

1.掌握HTML基础知识的应用;

2.掌握Vue基本架构的应用;

3.掌握内容渲染指令的使用;

4.掌握事件绑定指令的使用;

5.掌握列表渲染指令的使用;

6.掌握双向数据绑定指令的使用;

7.实现一个学生信息管理页面。

二. 实验步骤(及实验数据)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>学生信息管理页面</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
      }

      h3 {
        text-align: center;
        margin: 20px 0px;
        font-size: 36px;
      }

      .inputInfo {
        width: 800px;
        margin: 0px auto;
        margin-bottom: 18px;
      }

      .inputInfo input[type="text"],
      .inputInfo input[type="number"] {
        width: 700px;
        height: 32px;
        border-radius: 4px;
        padding-left: 6px;
      }

      .inputInfo input[type="radio"] {
        margin-right: 6px;
        margin-left: 6px;
      }

      .inputInfo select {
        width: 100px;
        height: 32px;
        border-radius: 4px;
      }

      .btnStyle {
        display: block;
        padding: 6px 12px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        color: white;
        border: 1px solid transparent;
        border-radius: 8px;
        margin: 0px auto;
        margin-bottom: 20px;
      }

      .createBtn {
        background-color: #d9534f;
        border-color: #d43f3a;
      }

      .optionBtn {
        width: 800px;
        margin: 0px auto;
      }

      .optionBtn>button {
        display: inline-block;
        margin-left: 10px;
      }

      .averageBtn,
      .sortBtn {
        background-color: #E5E5E5;
        border-color: #E5E5E5;
        color: #333;
        margin: 20px auto;
      }

      .studentList {
        width: 800px;
        margin: 0px auto;
        border-collapse: collapse;
      }

      .studentList thead tr td {
        background-color: #6495ED;
      }

      .studentList thead tr td>a {
        font-size: 24px;
        text-decoration: none;
        color: #333;
      }

      .studentList td {
        height: 60px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 24px;
      }

      .deleteBtn {
        background-color: #428bca;
        border-color: #357ebd;
        margin: 0px auto;
      }

      .searchBtn {
        background-color: #5bc0de;
        border-color: #46b8da;
        height: 20px;
        margin: 0px 10px;
        font-size: 14px;
      }

      .searchInfo {
        width: 800px;
        height: 50px;
        margin: 0px auto;
        line-height: 50px;
        font-size: 24px;
      }

      .searchInfo>input {
        height: 28px;
        border-radius: 4px;
        padding-left: 6px;
      }

      .searchInfo>button {
        height: 34px;
        font-size: 20px;
        line-height: 20px;
        display: inline-block;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>学生信息录入系统</h3>
      <!-- 学生信息输入表单 -->
      <div class="inputInfo">
        <label for="studentName">姓名:</label>
        <input type="text" id="studentName" v-model="StudentNewMessage.stuName" placeholder="请输入学生的姓名......" />
      </div>
      <div class="inputInfo">
        <label for="studentID">学号:</label>
        <input type="text" id="studentID" v-model="StudentNewMessage.stuID" placeholder="请输入学生的学号......"/>
      </div>
      <div class="inputInfo">
        <label for="studentAge">年龄:</label>
        <input type="number" id="studentAge" v-model.number="StudentNewMessage.age" placeholder="请输入学生的年龄......"/>
      </div>
      <div class="inputInfo">
        <span>性别:</span>
        <input type="radio" value="男生" name="gender" id="boy" v-model="StudentNewMessage.gender" />
        <label for="boy">男生</label>
        <input type="radio" value="女生" name="gender" id="girl" v-model="StudentNewMessage.gender"/>
        <label for="girl">女生</label>
      </div>
      <div class="inputInfo">
        <span>地址:</span>
        <select v-model="StudentNewMessage.address">
          <option value="请选择">请选择</option>
          <option value="四川省">四川省</option>
          <option value="山东省">山东省</option>
          <option value="海南省">海南省</option>
          <option value="湖南省">湖南省</option>
        </select>
      </div>
      <button class="btnStyle createBtn" @click="insertStuMessage()">创建学生信息</button>

      <hr />
      <!-- 学生信息列表 -->
      <h3>学生信息列表</h3>
      <div class="optionBtn">
      </div>
      <table class="studentList">
        <thead>
          <tr>
            <td>姓名</td>
            <td>学号</td>
<!--            // javascript:void(0) 用于阻止a标签的默认行为 阻止跳转-->
            <td><a href="javascript:void(0)" @click="StuAgeEstimate()">年龄↑</a></td>
            <td>性别</td>
            <td>地址</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in students" :key="item.stuID">
            <td>{{item.stuName}}</td>
            <td>{{item.stuID}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.address}}</td>
            <td>
              <button class="btnStyle deleteBtn" @click="deleteStuMessage(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="searchInfo">
        按姓名搜索:<input type="text" v-model="StuNameSearch" />
        <button class="btnStyle searchBtn" @click="StuSearch()">搜索</button>
      </div>
    </div>
    <!-- 以下是Vue.js框架练习代码,请补充 -->
    <script>
      var app=Vue.createApp({
        data(){
          return {
            students: [{
              stuName: '张三',
              stuID: 10,
              age: 20,
              gender: '男生',
              address: '四川省'
            },
              {
                stuName: '李四',
                stuID: 11,
                age: 18,
                gender: '男生',
                address: '海南省'
              },
              {
                stuName: '王五',
                stuID: 12,
                age: 19,
                gender: '女生',
                address: '山东省'
              }
            ],
            StudentNewMessage:{
              stuName: '',
              stuID: '',
              age:0,
              gender: '',
              address: ''
            },//存储新添加的学生信息
          }
        },
        methods: {
          // 添加学生信息
          insertStuMessage() {
            // 判断学生信息是否填写完整
            // !== 用于判断两个值是否不相等  === 用于判断两个值是否相等
            if (this.StudentNewMessage.stuName === '') {
              alert('学生姓名不能为空!');
              return;
            } else if (this.StudentNewMessage.stuID === '') {
              alert('学生学号不能为空!');
              return;
            } else if (this.StudentNewMessage.age === '' || this.StudentNewMessage.age <= 10) {
              alert('学生年龄不能小于10岁!');
              return;
            } else if (this.StudentNewMessage.gender === '') {
              alert('学生性别不能为空!');
              return;
            } else if (this.StudentNewMessage.address === '请选择' || this.StudentNewMessage.address === '') {
              alert('学生未选择地址!');
              return;
            } else {
              //将新添加的学生信息添加到students数组中
              this.students.push(this.StudentNewMessage);
              this.StudentNewMessage = {};
            }
          },
          // 按年龄排序
          StuAgeEstimate() {
            this.students.sort((a, b) => {
              return a.age - b.age;
            })
          },
          // 删除学生信息
          deleteStuMessage(index){
            this.students.splice(index,1);
          },
            // 按姓名搜索
            StuSearch() {
              // 判断是否输入了学生姓名
              if (this.StuNameSearch === '') {
                alert('请输入学生姓名!');
                return;
              } else {
                // 遍历students数组,查找是否有符合条件的学生
                for (let i = 0; i < this.students.length; i++) {
                  if (this.students[i].stuName === this.StuNameSearch) {
                    // 将符合条件的学生信息存储到一个新数组中
                    let stuSearch = [];
                    stuSearch.push(this.students[i]);
                    // 将符合条件的学生信息替换students数组
                    this.students = stuSearch;
                    return;
                  }
                }
                // 如果遍历完students数组后,没有符合条件的学生,则提示没有该学生
                alert('没有该学生!');
              }
            }
        }
      }).mount("#app");
    </script>
  </body>
</html>

实验效果

详情见:https://www.mingorfang.top/post/329dd7a6.html

Logo

前往低代码交流专区

更多推荐