基于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源码

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

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

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

一、系统概述

二、系统架构

三、后端核心实现 (SpringBoot)

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

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

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

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

四、电子班牌端 (Android Java)

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

2. 课表展示Activity核心代码

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

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

1. 课表管理页面示例

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

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

2. 小程序页面展示

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

八、系统部署与运行

九、总结

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

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

一、系统概述

二、系统架构

三、后端核心实现 (SpringBoot)

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

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

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

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

四、电子班牌端 (Android Java)

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

2. 课表展示Activity核心代码

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

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

1. 课表管理页面示例

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

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

2. 小程序页面展示

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

八、系统部署与运行

九、总结

热门文章

最新文章

相关电子书