12.4（1）

今天完成bs报告B/S结构用户界面设计（学生成绩管理系统）
信2305-3 程永耀 20233967

【实验编号】
10003809548j　　Web界面设计
【实验学时】
8学时
【实验环境】
所需硬件环境为微机；
所需软件环境为dreamweaver
【实验内容】
实验基本信息
时间：2025年12月2日
实验名称：B/S结构用户界面设计
实验内容：设计并实现学生成绩管理系统的完整用户界面，包括登录界面、主控制台、课程管理、用户管理、学生管理、成绩管理及数据统计模块。
1.登录界面
截图：

核心代码：

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3>学生成绩管理系统</h3>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
      </el-form-item>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: { username: '', password: '' },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },