基于SpringBoot+Vue+小程序+Android的智慧校园电子班牌系统源码示例

构建智慧校园电子班牌系统：基于SpringBoot+Vue+小程序+Android的完整解决方案

一、系统概述

智慧校园电子班牌系统是一套打通教室、学生、家长和学校管理者的综合性信息平台。系统以电子班牌为前端展示终端，配合教师端Web管理后台、学生/家长微信小程序，实现课表查询、考勤签到、通知发布、班级风采展示、家校互动等功能。后端采用Java SpringBoot框架，前端使用Vue.js，移动端小程序原生开发，电子班牌基于Android（Java）原生开发，真正做到多端统一、数据实时同步。

二、系统架构

复制代码

┌─────────────────────────────────────────────────┐
│                  电子班牌 (Android Java)          │
│              课表展示 / 人脸考勤 / 通知滚动         │
└────────────────────┬────────────────────────────┘
                     │ HTTP/WebSocket
┌────────────────────┴────────────────────────────┐
│           后端服务 (SpringBoot + MyBatis)         │
│     RESTful API / JWT鉴权 / 数据同步 / 消息推送    │
└────────┬───────────────────────────┬────────────┘
          │                           │
┌─────────┴─────────┐       ┌─────────┴─────────┐
│  Web管理端 (Vue)   │       │  小程序 (原生)     │
│ 班级/用户/课表管理  │       │ 通知/考勤/请假     │
└───────────────────┘       └───────────────────┘

三、后端核心实现 (SpringBoot)

1. 项目依赖 (pom.xml 关键部分)

复制代码

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.3</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.1</version>
    </dependency>
</dependencies>

2. 实体类示例 -- 课表信息

复制代码

@Data
@TableName("schedule")
public class Schedule {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String className;   // 班级名称
    private Integer weekday;    // 星期几 (1-7)
    private Integer period;     // 第几节课
    private String courseName;
    private String teacher;
    private String classroom;
    private Date createTime;
}

3. 控制器 -- 班牌数据接口

复制代码

@RestController
@RequestMapping("/api/board")
public class BoardController {

    @Autowired
    private ScheduleService scheduleService;
    @Autowired
    private NoticeService noticeService;

    // 获取指定班级今日课表
    @GetMapping("/todaySchedule")
    public Result getTodaySchedule(@RequestParam String className) {
        int todayWeekday = LocalDate.now().getDayOfWeek().getValue();
        List<Schedule> list = scheduleService.lambdaQuery()
                .eq(Schedule::getClassName, className)
                .eq(Schedule::getWeekday, todayWeekday)
                .orderByAsc(Schedule::getPeriod)
                .list();
        return Result.success(list);
    }

    // 获取最新3条通知
    @GetMapping("/latestNotices")
    public Result getLatestNotices(@RequestParam String className) {
        List<Notice> notices = noticeService.lambdaQuery()
                .eq(Notice::getTargetClass, className)
                .orderByDesc(Notice::getCreateTime)
                .last("limit 3")
                .list();
        return Result.success(notices);
    }
}

4. WebSocket 实现实时推送（通知到达时主动刷新班牌）

复制代码

@Component
@ServerEndpoint("/ws/board/{classId}")
public class WebSocketServer {

    private static ConcurrentHashMap<String, Session> sessionMap = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session, @PathParam("classId") String classId) {
        sessionMap.put(classId, session);
    }

    // 推送消息到指定班级班牌
    public static void pushNotice(String classId, String message) {
        Session session = sessionMap.get(classId);
        if (session != null && session.isOpen()) {
            session.getAsyncRemote().sendText(message);
        }
    }
}

四、电子班牌端 (Android Java)

电子班牌运行在教室门口的安卓设备上，主要功能：展示课表、倒计时、天气、滚动通知、考勤打卡。

1. 网络请求封装 (Retrofit + Gson)

复制代码

// ApiService.java
public interface ApiService {
    @GET("/api/board/todaySchedule")
    Call<List<Schedule>> getTodaySchedule(@Query("className") String className);

    @GET("/api/board/latestNotices")
    Call<List<Notice>> getLatestNotices(@Query("className") String className);
}

// RetrofitClient.java
public class RetrofitClient {
    private static final String BASE_URL = "http://your-server-ip:8080/";
    private static Retrofit retrofit = new Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build();
    public static ApiService getApiService() {
        return retrofit.create(ApiService.class);
    }
}

2. 课表展示Activity核心代码

复制代码

public class ScheduleActivity extends AppCompatActivity {
    private TextView tvClassName;
    private GridLayout gridSchedule;
    private String className = "高一(1)班";  // 实际应从配置或扫码获取

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_schedule);
        tvClassName = findViewById(R.id.tv_class_name);
        gridSchedule = findViewById(R.id.grid_schedule);
        tvClassName.setText(className);
        loadSchedule();
    }

    private void loadSchedule() {
        Call<List<Schedule>> call = RetrofitClient.getApiService().getTodaySchedule(className);
        call.enqueue(new Callback<List<Schedule>>() {
            @Override
            public void onResponse(Call<List<Schedule>> call, Response<List<Schedule>> response) {
                if (response.isSuccessful() && response.body() != null) {
                    displaySchedule(response.body());
                }
            }
            @Override
            public void onFailure(Call<List<Schedule>> call, Throwable t) {
                Toast.makeText(ScheduleActivity.this, "网络错误", Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void displaySchedule(List<Schedule> schedules) {
        // 清空gridLayout，动态添加课程卡片
        for (Schedule s : schedules) {
            TextView courseView = new TextView(this);
            courseView.setText(s.getCourseName() + "\n" + s.getTeacher() + "@" + s.getClassroom());
            courseView.setGravity(Gravity.CENTER);
            courseView.setBackgroundResource(R.drawable.course_bg);
            courseView.setPadding(16,16,16,16);
            gridSchedule.addView(courseView);
        }
    }
}

3. WebSocket 客户端实时接收通知

复制代码

// 在Application或主Activity中初始化
WebSocketConnect();

private void WebSocketConnect() {
    String wsUrl = "ws://your-server-ip:8080/ws/board/class_101";
    OkHttpClient client = new OkHttpClient();
    Request request = new Request.Builder().url(wsUrl).build();
    WebSocket ws = client.newWebSocket(request, new WebSocketListener() {
        @Override
        public void onMessage(@NotNull WebSocket webSocket, @NotNull String text) {
            runOnUiThread(() -> {
                // 收到新通知，刷新界面
                Toast.makeText(ScheduleActivity.this, "新通知:" + text, Toast.LENGTH_SHORT).show();
                loadLatestNotices();
            });
        }
    });
}

五、前端管理端 (Vue3 + Element Plus)

教师或管理员通过Web端管理班级信息、发布通知、导入课表。

1. 课表管理页面示例

复制代码

<template>
  <div>
    <el-table :data="scheduleList" border>
      <el-table-column prop="weekday" label="星期"></el-table-column>
      <el-table-column prop="period" label="节次"></el-table-column>
      <el-table-column prop="courseName" label="课程"></el-table-column>
      <el-table-column prop="teacher" label="教师"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="editSchedule(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

const scheduleList = ref([])

const loadSchedules = async () => {
  const res = await axios.get('/api/schedule/list', { params: { className: '高一(1)班' } })
  scheduleList.value = res.data.data
}

onMounted(() => {
  loadSchedules()
})
</script>

六、微信小程序端（原生开发）

学生/家长通过小程序查看通知、课表、考勤记录、提交请假申请。

1. 获取课表（小程序JS）

复制代码

// pages/schedule/schedule.js
Page({
  data: {
    scheduleList: []
  },
  onLoad() {
    this.loadSchedule()
  },
  loadSchedule() {
    wx.request({
      url: 'https://your-domain/api/board/todaySchedule',
      data: { className: '高一(1)班' },
      success: (res) => {
        if (res.data.code === 200) {
          this.setData({ scheduleList: res.data.data })
        }
      }
    })
  }
})

2. 小程序页面展示

复制代码

<!-- schedule.wxml -->
<view class="container">
  <block wx:for="{{scheduleList}}" wx:key="index">
    <view class="course-card">
      <text>{{item.period}}节</text>
      <text>{{item.courseName}}</text>
      <text>{{item.teacher}}</text>
    </view>
  </block>
</view>

七、数据库表设计（MySQL关键表）

复制代码

-- 班级表
CREATE TABLE `class` (
  `id` int NOT NULL AUTO_INCREMENT,
  `class_name` varchar(50) NOT NULL,
  `grade` varchar(20),
  PRIMARY KEY (`id`)
);

-- 课表
CREATE TABLE `schedule` (
  `id` int NOT NULL AUTO_INCREMENT,
  `class_name` varchar(50),
  `weekday` tinyint,
  `period` tinyint,
  `course_name` varchar(100),
  `teacher` varchar(50),
  `classroom` varchar(50),
  PRIMARY KEY (`id`)
);

-- 通知表
CREATE TABLE `notice` (
  `id` int NOT NULL AUTO_INCREMENT,
  `title` varchar(200),
  `content` text,
  `target_class` varchar(50),
  `create_time` datetime,
  PRIMARY KEY (`id`)
);

八、系统部署与运行

后端：打包为jar包 java -jar smart-campus.jar，确保MySQL和Redis已启动。
Web前端 ：npm run build 后放置Nginx。
电子班牌：Android Studio编译APK，安装到平板或一体机，配置服务器地址。
小程序：微信开发者工具上传，配置合法域名。

九、总结

本智慧校园电子班牌系统利用SpringBoot高效开发后端API，Vue提供便捷的管理界面，小程序满足移动端需求，Android原生程序保证班牌端稳定流畅。多端采用统一数据接口和WebSocket实时推送，实现了课表同步、通知即时到达、考勤记录互通等智慧校园核心功能。开发者可根据此架构快速扩展如人脸识别考勤、家校聊天、行为评价等模块。

源码结构参考：

复制代码

smart-campus/
├── backend/          # SpringBoot 项目
├── web-admin/        # Vue 管理端
├── miniprogram/      # 微信小程序
└── android-board/    # 电子班牌Android源码

以上代码示例均经过精简，实际项目中需完善异常处理、权限校验、数据缓存等细节。

等细节。