vue3学生成绩管理系统页面

### 使用Vue3创建学生成绩管理系统页面

#### 创建Vue3项目
为了使用Vue3构建学生成绩管理系统，首先需要安装Node.js环境以及Vue CLI工具。之后可以初始化一个新的Vue3项目。

npm install -g @vue/cli
vue create student-management-system
cd student-management-system

在创建过程中可以选择默认配置或是手动选择特性，在这里推荐选择`Manually select features`并勾选Vuex用于状态管理，Router用于路由导航等功能[^1]。

#### 安装依赖库
进入项目文件夹后，还需要安装一些必要的依赖包：

npm install axios vue-router vuex pinia

这些依赖分别用来发送HTTP请求、设置路由规则、管理和存储全局的状态数据等[^2]。

#### 配置路由
编辑`src/router/index.js`定义不同页面组件对应的路径映射关系：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  // 添加更多路由...
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

#### 设计首页布局
打开`src/views/Home.vue`编写HTML结构和样式代码展示欢迎界面或主要功能入口链接列表等内容[^3]。

<template>
  <div class="container">
    <h1>学生成绩管理系统</h1>
    <!-- 可以在此处添加其他子模块的跳转按钮 -->
  </div>
</template>

<script setup></script>

<style scoped>
.container {
  text-align: center;
}
</style>

#### 构建成绩查询表单
新建一个名为`ScoreQueryForm.vue`的组件负责接收用户输入的学生编号或其他条件参数，并调用API接口获取对应的成绩记录显示出来。

<!-- src/components/ScoreQueryForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    学号：<input v-model.trim="studentId" type="text"/>
    <button type="submit">查询</button>
    
    <ul v-if="scores.length > 0">
      <li v-for="(score, index) in scores" :key="index">{{ score }}</li>
    </ul>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

let studentId = ref('');
let scores = ref([]);

async function handleSubmit() {
  try {
    const response = await axios.get(`/api/scores/${studentId.value}`);
    scores.value = response.data;  
  } catch (error) {
    console.error(error);
  }
}
</script>

此部分展示了如何利用Vue3中的组合式API(`setup`)语法糖简化逻辑处理过程；同时也引入了Axios发起异步网络请求来模拟实际场景下的服务器交互行为[^4]。