七十二块纱布1. 项目背景与需求分析
在线教育已经成为现代教育体系中不可或缺的一部分，而移动端学习平台的需求更是呈现爆发式增长。作为一名长期从事教育类应用开发的工程师，我深刻感受到传统作业提交方式的痛点：学生需要通过电脑登录网页、上传文件，教师则需要手动下载批改，整个过程效率低下且容易出错。
基于Android Studio开发的在线学习作业提交平台，正是为了解决这些痛点而生。它结合了SpringBoot后端的高效稳定、Vue3前端的灵活交互以及Android原生应用的便捷性，打造了一个完整的移动学习解决方案。这个平台需要实现的核心功能包括：
- 学生端：课程查看、作业下载、在线提交（支持多种文件格式）、成绩查询
- 教师端：班级管理、作业发布、在线批改、成绩统计
- 通用功能：消息通知、文件预览、多端同步
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术栈选型与架构设计
2.1 后端技术选型：SpringBoot的五大优势
为什么选择SpringBoot作为后端框架？经过多个项目的实践验证，我发现它有以下几个不可替代的优势：
- 自动配置：通过@SpringBootApplication注解即可完成大部分基础配置，避免了传统Spring项目中繁琐的XML配置
- 内嵌服务器：内置Tomcat/Jetty，无需额外部署WAR包
- Starter依赖：简化Maven/Gradle配置，如
spring-boot-starter-web就包含了Web开发所需的所有基础依赖 - Actuator监控：提供生产级监控端点，方便后期运维
- 丰富的生态：与MyBatis、Redis、RabbitMQ等主流中间件无缝集成
典型的后端依赖配置示例（pom.xml）：
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-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>2.0.23</version>
</dependency>
<!-- 文件处理相关依赖 -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.11.0</version>
</dependency>
</dependencies>
2.2 前端技术选型：Vue3的组合式API革命
Vue3相较于Vue2的最大改进在于引入了组合式API（Composition API），这使得我们的前端代码组织更加灵活。特别是在处理复杂业务逻辑时，组合式API展现出明显优势：
- 逻辑复用：通过自定义Hook可以轻松复用业务逻辑
- 更好的TypeScript支持：完整的类型推断，减少运行时错误
- 性能提升：基于Proxy的响应式系统，减少不必要的渲染
一个典型的作业列表组件实现：
javascript复制<script setup>
import { ref, onMounted } from 'vue'
import { getHomeworkList } from '@/api/homework'
const homeworkList = ref([])
const loading = ref(false)
onMounted(async () => {
loading.value = true
try {
homeworkList.value = await getHomeworkList()
} finally {
loading.value = false
}
})
</script>
<template>
<div v-if="loading">加载中...</div>
<ul v-else>
<li v-for="item in homeworkList" :key="item.id">
{{ item.title }} - 截止时间: {{ item.deadline }}
</li>
</ul>
</template>
2.3 移动端技术选型：Android原生开发的优势
虽然跨平台框架如Flutter、React Native日渐流行，但对于教育类应用，我们仍然选择Android原生开发，主要基于以下考虑：
- 性能要求：作业提交涉及文件上传、预览等操作，原生应用性能更优
- 系统集成：可以更好地利用Android系统的文件选择器、后台服务等特性
- 稳定性：教育应用对稳定性要求极高，原生开发减少了跨平台带来的兼容性问题
3. 核心功能实现细节
3.1 文件上传与存储方案
作业提交平台最核心的功能就是文件上传。我们设计了分块上传机制来应对大文件上传问题：
java复制@RestController
@RequestMapping("/api/upload")
public class FileUploadController {
@PostMapping("/chunk")
public ResponseEntity<String> uploadChunk(
@RequestParam("file") MultipartFile file,
@RequestParam("chunkNumber") int chunkNumber,
@RequestParam("totalChunks") int totalChunks,
@RequestParam("identifier") String identifier) {
// 1. 创建临时目录存储分块
String tempDir = "uploads/temp/" + identifier;
File dir = new File(tempDir);
if (!dir.exists()) dir.mkdirs();
// 2. 保存当前分块
String chunkFilename = chunkNumber + ".part";
file.transferTo(new File(dir, chunkFilename));
// 3. 检查是否所有分块都已上传
if (dir.listFiles().length == totalChunks) {
mergeFiles(dir, identifier);
return ResponseEntity.ok("上传完成");
}
return ResponseEntity.ok("分块上传成功");
}
private void mergeFiles(File dir, String identifier) {
// 合并分块逻辑...
}
}
文件存储我们采用混合方案：
- 小文件（<10MB）：直接存入数据库（Base64编码）
- 大文件：存储到文件系统，数据库中只保存路径
- 重要文件：同时备份到阿里云OSS
3.2 实时消息通知实现
使用WebSocket实现作业提交后的实时通知：
java复制@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws")
.setAllowedOrigins("*")
.withSockJS();
}
}
@Controller
public class NotificationController {
@MessageMapping("/notify")
@SendTo("/topic/updates")
public Notification sendNotification(Notification notification) {
return notification;
}
}
前端连接代码：
javascript复制import { ref, onMounted } from 'vue'
import { Client } from '@stomp/stompjs'
const notifications = ref([])
onMounted(() => {
const client = new Client({
brokerURL: 'ws://your-server/ws',
onConnect: () => {
client.subscribe('/topic/updates', message => {
notifications.value.push(JSON.parse(message.body))
})
}
})
client.activate()
})
3.3 作业批改功能实现
教师端批改界面需要支持多种批注方式，我们使用Canvas实现了类似PDF批注的功能：
java复制// 后端批改接口
@PostMapping("/correct")
public ResponseEntity<Homework> correctHomework(
@RequestBody CorrectRequest request) {
Homework homework = homeworkService.findById(request.getHomeworkId());
homework.setScore(request.getScore());
homework.setComments(request.getComments());
homework.setStatus(HomeworkStatus.CORRECTED);
// 保存批改痕迹图片
if (request.getMarkupImage() != null) {
String path = fileService.saveMarkupImage(
request.getHomeworkId(),
request.getMarkupImage());
homework.setMarkupPath(path);
}
return ResponseEntity.ok(homeworkRepository.save(homework));
}
4. 安卓端关键实现
4.1 文件选择与上传
Android端需要处理各种文件类型的选择与上传：
kotlin复制class FileUploader(context: Context) {
private val client = OkHttpClient()
suspend fun uploadFile(uri: Uri): Result<String> = withContext(Dispatchers.IO) {
try {
val fileDescriptor = context.contentResolver.openFileDescriptor(uri, "r")
val inputStream = FileInputStream(fileDescriptor?.fileDescriptor)
val requestBody = MultipartBody.Builder()
.setType(MultipartBody.FORM)
.addFormDataPart(
"file",
getFileName(context, uri),
inputStream.readBytes().toRequestBody()
)
.build()
val request = Request.Builder()
.url("${BASE_URL}/api/upload")
.post(requestBody)
.build()
val response = client.newCall(request).execute()
if (response.isSuccessful) {
Result.success(response.body?.string() ?: "")
} else {
Result.failure(Exception("Upload failed"))
}
} catch (e: Exception) {
Result.failure(e)
}
}
private fun getFileName(context: Context, uri: Uri): String {
// 从URI解析文件名逻辑...
}
}
4.2 后台同步服务
为了保证在网络不稳定的情况下也能完成作业提交，我们实现了后台同步服务：
kotlin复制class SyncService : Service() {
private val binder = LocalBinder()
private val job = SupervisorJob()
private val scope = CoroutineScope(Dispatchers.IO + job)
inner class LocalBinder : Binder() {
fun getService() = this@SyncService
}
override fun onBind(intent: Intent?) = binder
fun syncPendingSubmissions() {
scope.launch {
val pending = submissionDao.getPending()
pending.forEach { submission ->
try {
val result = fileUploader.uploadFile(submission.fileUri)
if (result.isSuccess) {
submissionDao.markAsSynced(submission.id)
}
} catch (e: Exception) {
Log.e("SyncService", "Failed to sync ${submission.id}", e)
}
}
}
}
override fun onDestroy() {
job.cancel()
super.onDestroy()
}
}
5. 性能优化实践
5.1 前端性能优化
- 组件懒加载：使用Vue3的defineAsyncComponent实现路由懒加载
javascript复制const HomeworkList = defineAsyncComponent(() =>
import('./views/HomeworkList.vue')
)
- 虚拟滚动：对于长列表使用vue-virtual-scroller
html复制<RecycleScroller
class="scroller"
:items="homeworkList"
:item-size="56"
key-field="id"
>
<template v-slot="{ item }">
<HomeworkItem :item="item" />
</template>
</RecycleScroller>
5.2 后端缓存策略
使用Spring Cache抽象层实现多级缓存：
java复制@Configuration
@EnableCaching
public class CacheConfig {
@Bean
public CacheManager cacheManager() {
CaffeineCacheManager cacheManager = new CaffeineCacheManager();
cacheManager.setCaffeine(Caffeine.newBuilder()
.initialCapacity(100)
.maximumSize(1000)
.expireAfterWrite(10, TimeUnit.MINUTES)
.recordStats());
return cacheManager;
}
}
@Service
public class HomeworkService {
@Cacheable(value = "homeworks", key = "#id")
public Homework findById(Long id) {
// 数据库查询逻辑
}
@CacheEvict(value = "homeworks", key = "#homework.id")
public Homework update(Homework homework) {
// 更新逻辑
}
}
5.3 安卓端优化
- 图片压缩：使用Glide加载图片时自动压缩
kotlin复制Glide.with(context)
.load(imageUrl)
.override(800, 600)
.format(DecodeFormat.PREFER_RGB_565)
.into(imageView)
- 数据库优化：使用Room时添加索引
kotlin复制@Entity(
tableName = "submissions",
indices = [Index(value = ["studentId", "status"])]
)
data class Submission(
@PrimaryKey val id: String,
val studentId: String,
val status: String,
// 其他字段...
)
6. 安全防护措施
6.1 接口安全
- JWT认证：Spring Security整合JWT
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilterBefore(jwtFilter(), UsernamePasswordAuthenticationFilter.class);
return http.build();
}
@Bean
public JwtFilter jwtFilter() {
return new JwtFilter();
}
}
- 参数校验：使用Hibernate Validator
java复制@PostMapping("/submit")
public ResponseEntity<?> submitHomework(
@Valid @RequestBody SubmitRequest request) {
// 处理逻辑
}
public class SubmitRequest {
@NotNull
private Long homeworkId;
@NotBlank
@Size(max = 1000)
private String comments;
// getters/setters
}
6.2 安卓端安全
- 网络通信安全：配置网络安全策略
xml复制<network-security-config>
<domain-config cleartextTrafficPermitted="false">
<domain includeSubdomains="true">your-domain.com</domain>
</domain-config>
</network-security-config>
- 数据存储加密：使用AndroidKeyStore加密敏感数据
kotlin复制private fun encryptData(data: String): String {
val cipher = Cipher.getInstance("AES/GCM/NoPadding")
val key = getOrCreateKey()
cipher.init(Cipher.ENCRYPT_MODE, key)
val iv = cipher.iv
val encrypted = cipher.doFinal(data.toByteArray())
return Base64.encodeToString(iv + encrypted, Base64.DEFAULT)
}
private fun getOrCreateKey(): SecretKey {
val keyStore = KeyStore.getInstance("AndroidKeyStore").apply {
load(null)
}
if (!keyStore.containsAlias("my_key_alias")) {
val keyGenerator = KeyGenerator.getInstance(
KeyProperties.KEY_ALGORITHM_AES,
"AndroidKeyStore"
)
val keySpec = KeyGenParameterSpec.Builder(
"my_key_alias",
KeyProperties.PURPOSE_ENCRYPT or KeyProperties.PURPOSE_DECRYPT
).apply {
setBlockModes(KeyProperties.BLOCK_MODE_GCM)
setEncryptionPaddings(KeyProperties.ENCRYPTION_PADDING_NONE)
setRandomizedEncryptionRequired(true)
}.build()
keyGenerator.init(keySpec)
keyGenerator.generateKey()
}
return (keyStore.getEntry("my_key_alias", null) as KeyStore.SecretKeyEntry).secretKey
}
7. 测试与部署
7.1 测试策略
- 单元测试：使用JUnit5 + Mockito
java复制@ExtendWith(MockitoExtension.class)
class HomeworkServiceTest {
@Mock
private HomeworkRepository homeworkRepository;
@InjectMocks
private HomeworkService homeworkService;
@Test
void shouldReturnHomeworkWhenExists() {
Homework expected = new Homework();
when(homeworkRepository.findById(1L)).thenReturn(Optional.of(expected));
Homework actual = homeworkService.findById(1L);
assertEquals(expected, actual);
}
}
- UI测试：使用Espresso
kotlin复制@RunWith(AndroidJUnit4::class)
class SubmissionActivityTest {
@get:Rule
val activityRule = ActivityScenarioRule(SubmissionActivity::class.java)
@Test
fun shouldShowErrorWhenFileNotSelected() {
onView(withId(R.id.submit_button)).perform(click())
onView(withText("请选择要提交的文件"))
.check(matches(isDisplayed()))
}
}
7.2 部署方案
我们采用Docker容器化部署方案：
dockerfile复制# 后端Dockerfile
FROM openjdk:17-jdk-slim
WORKDIR /app
COPY target/online-learning-0.0.1-SNAPSHOT.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]
前端部署使用Nginx：
nginx复制server {
listen 80;
server_name your-domain.com;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
安卓应用发布流程：
- 生成签名APK/AAB
- 上传到Google Play Console
- 配置发布渠道（内部测试/公开测试/正式发布）
- 设置分阶段发布（推荐）
8. 项目总结与经验分享
在开发这个在线学习作业提交平台的过程中，我积累了一些宝贵的经验：
-
文件处理方面：
- 安卓端文件选择要兼容各种文件管理器返回的URI
- 后端要做好文件类型校验，防止上传恶意文件
- 对于大文件，一定要实现断点续传功能
-
性能优化方面：
- 列表数据一定要分页查询
- 安卓端数据库操作要放在子线程
- 频繁更新的数据不要缓存太久
-
异常处理方面：
- 网络请求要有重试机制
- 做好错误边界处理，避免应用崩溃
- 记录详细的日志方便排查问题
一个特别容易忽视的问题是Android 10+的文件访问权限处理。在AndroidManifest.xml中需要添加：
xml复制<application
android:requestLegacyExternalStorage="true"
...>
此外，Vue3和SpringBoot的版本兼容性也需要注意。我们项目中使用的版本组合是：
- SpringBoot 2.7.x
- Vue3 3.2.x
- Android API 31
这个组合经过长期验证，稳定性最好。