JavaWeb软件开发 课程考察标准 考核的知识内容: (1)HTML、CSS、JavaScript Vue3 ElementPlus (2)JDBC数据库访问技术 (3)JavaBean组件 (4)MVC模式(spring boot) (5)分页实现 考核标准: 1、能够访问数据库,实现对数据的增删改查。系统结构设计合理,功能完备,系统运行稳定(需要学生演示答辩)(50分)。 2、能应用到所有的技术点(需要学生演示答辩)(20分) 3、提交课程设计文档,要求设计文档的结构合理、内容充实,文档要包含系统需求分析、系统设计、系统实现及实现代码、测试。(30分)
vue-tlias-management
是一个基于 Vue 3 和 Vite 构建的学生信息管理系统。该系统借助 Element Plus 组件库搭建了美观且易用的用户界面,结合 ECharts 实现数据可视化统计,使用 Pinia 进行状态管理,为学校或教育机构提供了全面的学生与教职工信息管理功能。
项目展示图(结尾处看获取方式)
项目展示图(结尾处看获取方式)
vue-tlias-management/
├── .eslintrc.cjs # ESLint 配置文件
├── .gitignore # Git 忽略文件配置
├── .prettierrc.json # Prettier 配置文件
├── .vscode/ # VS Code 配置目录
│ └── extensions.json
├── README.md # 项目说明文档
├── index.html # 项目入口 HTML 文件
├── package.json # 项目依赖和脚本配置
├── public/ # 静态资源目录
│ └── favicon.ico
├── src/ # 源代码目录
│ ├── App.vue # 根组件
│ ├── api/ # API 请求封装目录
│ │ ├── clazz.js
│ │ ├── dept.js
│ │ ├── emp.js
│ │ ├── login.js
│ │ ├── report.js
│ │ └── stu.js
│ ├── assets/ # 静态资源目录
│ │ ├── bg1.jpg
│ │ ├── index.png
│ │ └── main.css
│ ├── components/ # 公共组件目录
│ ├── main.js # 项目入口文件
│ ├── router/ # 路由配置目录
│ │ └── index.js
│ ├── stores/ # 状态管理目录
│ │ ├── counter.js
│ │ └── user.js
│ ├── utils/ # 工具函数目录
│ │ └── request.js
│ └── views/ # 页面视图目录
│ ├── clazz/
│ ├── dept/
│ ├── emp/
│ ├── index/
│ ├── layout/
│ ├── log/
│ ├── login/
│ ├── report/
│ └── stu/
├── vite.config.js # Vite 配置文件
└── 学生管理系统.ico # 项目图标
在 src/views/layout/index.vue
中定义了系统的整体布局,包含左侧菜单和主展示区域。左侧菜单提供了首页、班级学生管理、系统信息管理和数据统计管理等功能入口。
<!-- ... existing code ... -->
<el-menu router>
<!-- 首页菜单 -->
<el-menu-item index="/index">
<el-icon><Promotion /></el-icon> 首页
</el-menu-item>
<!-- 班级管理菜单 -->
<el-sub-menu index="/manage">
<template #title>
<el-icon><Menu /></el-icon> 班级学生管理
</template>
<el-menu-item index="/clazz">
<el-icon><HomeFilled /></el-icon>班级管理
</el-menu-item>
<el-menu-item index="/stu">
<el-icon><UserFilled /></el-icon>学生管理
</el-menu-item>
</el-sub-menu>
<!-- 系统信息管理 -->
<el-sub-menu index="/system">
<template #title>
<el-icon><Tools /></el-icon>系统信息管理
</template>
<el-menu-item index="/dept">
<el-icon><HelpFilled /></el-icon>院系管理
</el-menu-item>
<el-menu-item index="/emp">
<el-icon><Avatar /></el-icon>教职工管理
</el-menu-item>
</el-sub-menu>
<!-- 数据统计管理 -->
<el-sub-menu index="/">
<template #title>
<el-icon><Histogram /></el-icon>数据统计管理
</template>
<el-menu-item index="/empReport">
<el-icon><InfoFilled /></el-icon>教职工信息统计
</el-menu-item>
<el-menu-item index="/stuReport">
<el-icon><Share /></el-icon>学生信息统计
</el-menu-item>
</el-sub-menu>
</el-menu>
<!-- ... existing code ... -->
在 src/views/emp/index.vue
和 src/views/stu/
目录下实现了学生和教职工信息的增删改查功能。通过调用 @/api/emp
和 @/api/stu
中的接口与后端进行数据交互。
<!-- ... existing code ... -->
<script setup>
import { ref, watch, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryPageApi, addApi, queryInfoApi, updateApi, deleteApi } from '@/api/emp'
const searchEmp = ref({
name: '',
gender: '',
date: [],
begin: '',
end: ''
})
// 查询员工
const search = async () => {
const result = await queryPageApi(searchEmp.value.name, searchEmp.value.gender, searchEmp.value.begin, searchEmp.value.end, currentPage.value, pageSize.value)
// 处理查询结果
}
onMounted(async () => {
search()
})
</script>
<!-- ... existing code ... -->
在 src/views/report/
目录下使用 ECharts 实现了学生和教职工信息的统计与可视化。例如,在 src/views/report/emp/index.vue
中展示了教职工的性别比例和职位分布。
<!-- ... existing code ... -->
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts/core'
import { PieChart, BarChart } from 'echarts/charts'
import { getEmpGenderData, getEmpJobData } from '@/api/report'
// 初始化性别饼图
const initGenderChart = (data) => {
const chart = echarts.init(genderChartRef.value)
const option = {
title: {
text: '教职工性别比例',
left: 'center'
},
// 其他图表配置
}
chart.setOption(option)
}
onMounted(async () => {
const genderData = await getEmpGenderData()
initGenderChart(genderData)
})
</script>
<!-- ... existing code ... -->
npm install
npm run dev
npm run build
npm run lint
src/utils/request.js
中进行配置。