Java 代码实现班级学生人数统计并使用 Vue3 绘制柱状图

以下代码展示了如何使用 Java 代码统计每个班级学生人数，并将结果存储在 Map 中，并利用 Vue3 和 axios 库从后端获取数据，并使用图表库绘制柱状图，直观地展示每个班级的学生数量。

Java 后端代码

import com.fasterxml.jackson.databind.ObjectMapper; // 添加 Jackson 库的依赖
import javax.servlet.http.HttpServletResponse;
import java.util.*;

public class TeamCountServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        Map<String, Integer> map = new HashMap<>();
        TeamManageService teamManageService = new TeamManageServiceimpl(); // 假设你已经定义了 TeamManageService 和 TeamManageServiceimpl
        ResultInfo resultInfo = new ResultInfo();
        List<Team> list = teamManageService.seachTeamName();

        for (int i = 0; i < list.size(); i++) {
            String className = list.get(i).getClassName();
            int studentCount = teamManageService.studentCount(className);
            map.put(className, studentCount);
        }

        System.out.println(map);

        if (map != null) {
            resultInfo.setFlag(true);
            resultInfo.setData(map);
            resultInfo.setMessage('查找成功');
        } else {
            resultInfo.setFlag(false);
            resultInfo.setData(map);
            resultInfo.setMessage('查找失败');
        }

        response.setContentType('application/json');
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), resultInfo);
    }
}

Vue3 前端代码

<template>
  <div>
    <h1>{{ data.message }}</h1>
    <div v-if='data.flag'>
      <ul>
        <li v-for='(count, className) in data.data' :key='className'>
          {{ className }}: {{ count }}
        </li>
      </ul>
      <bar-chart :data='data.data'></bar-chart>
    </div>
    <div v-else>
      <p>查找失败</p>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const data = ref({});

onMounted(() => {
  axios.get('your-api-endpoint')
    .then(response => {
      const result = response.data;
      data.value = result.data;
    })
    .catch(error => {
      console.error(error);
      data.value = {};
    });
});
</script>

<script>
import { BarChart } from 'your-chart-library'; // 替换成你使用的图表库

export default {
  components: {
    BarChart
  },
  props: {
    data: {
      type: Object,
      required: true
    }
  }
}
</script>

请注意，上述代码仅供参考，你需要根据你的具体情况进行调整。例如，你需要将 'your-api-endpoint' 替换为你的实际 API 地址，并根据你的图表库修改 'BarChart' 的导入语句和使用方式。

代码中的 Java 部分统计了每个班级的学生人数，并将结果存储在 Map 中。Vue3 部分使用 axios 从后端获取数据，并根据数据动态显示每个班级的学生人数和使用图表库绘制柱状图。