“获课”: itxt.top/1824/

SpringBoot 在线协同办公小程序开发：全栈式项目实战

在数字化办公趋势下，企业对 “随时随地协同工作” 的需求日益迫切 —— 团队成员需要实时共享文档、同步任务进度、快速发起沟通，而传统办公软件的 “本地化、重客户端” 特性已难以满足灵活办公需求。在线协同办公小程序凭借 “轻量化、跨平台、即开即用” 的优势，成为企业数字化转型的重要工具。本文将以全栈开发视角，详解如何用 SpringBoot 搭建后端服务，结合前端技术（如 Vue、UniApp）开发在线协同办公小程序，覆盖从需求分析到部署上线的完整实战流程。

一、项目定位与核心需求：明确协同办公小程序的价值

（一）项目核心定位

本项目旨在开发一款 “轻量化、高协同、易扩展” 的在线协同办公小程序，解决企业团队 “沟通效率低、任务难跟踪、文档难共享” 的痛点，支持多终端（手机、平板、PC）访问，适配远程办公、跨部门协作等场景，核心用户群体包括中小企业团队、创业团队及远程办公小组。

（二）核心功能模块设计

结合协同办公的高频场景，将项目拆分为 6 大核心模块，覆盖 “沟通 - 任务 - 文档 - 数据” 全协同流程：

功能模块	核心需求场景	技术实现方向
团队管理模块	团队创建 / 解散、成员邀请 / 权限分配（如管理员、普通成员）、部门架构管理	SpringBoot 权限控制（Spring Security）、MySQL 存储团队 / 成员数据
即时沟通模块	单聊 / 群聊、消息已读回执、文件 / 图片发送、消息撤回 / 编辑	WebSocket 实时通信、Redis 缓存在线状态、MinIO 存储附件
任务管理模块	任务创建（标题 / 截止时间 / 负责人）、任务状态跟踪（待办 / 进行中 / 已完成）、任务提醒	SpringBoot 定时任务（Quartz）、MySQL+Redis 双存储（任务数据 + 缓存提醒）
文档协作模块	在线文档创建 / 编辑、版本历史回溯、多人实时协同编辑、文档权限控制	集成 OnlyOffice / 腾讯云文档 SDK、MySQL 存储文档元数据、Redis 实现协同锁
日程管理模块	个人 / 团队日程创建、日程冲突提醒、日程共享与同步	SpringBoot 日期处理（Joda-Time）、MySQL 存储日程数据、WebSocket 推送日程变更
数据统计模块	团队活跃度统计、任务完成率分析、成员工作效率报表	MyBatis-Plus 复杂查询、ECharts 前端可视化、POI 导出 Excel 报表

二、技术栈选型：全栈技术组合与优势

全栈开发的核心是 “前后端技术协同”，需兼顾后端的稳定性、前端的流畅性及跨平台兼容性，本项目技术栈选型如下：

（一）后端技术栈

技术 / 工具	作用与优势
SpringBoot 2.7.x	快速搭建后端服务，简化配置（如自动配置、starter 依赖），支持高效开发 RESTful API
Spring Security	实现用户认证（JWT 令牌）、权限控制（基于角色的 RBAC 模型），保障接口安全
MyBatis-Plus	封装 MyBatis，支持单表 CRUD 自动生成、复杂查询（Lambda 表达式），提升数据库操作效率
MySQL 8.0	存储结构化数据（如用户信息、任务数据、文档元数据），支持事务与索引优化
Redis 6.x	缓存高频访问数据（如用户在线状态、任务列表）、实现分布式锁（协同编辑）、消息队列
WebSocket	实现即时通信（消息推送、实时协同编辑），支持全双工通信，降低轮询开销
MinIO	轻量级对象存储，用于存储文档、图片、附件等非结构化数据，兼容 S3 协议
Quartz	定时任务调度，用于任务提醒、日程通知、数据统计定时生成

（二）前端技术栈

技术 / 工具	作用与优势
UniApp	一套代码多端部署（微信小程序、H5、App），适配协同办公的跨终端需求
Vue 3 + Vite	前端框架核心，Vue 3 的 Composition API 支持复杂组件逻辑，Vite 提升构建与热更新速度
Pinia	替代 Vuex 的状态管理工具，轻量高效，支持 TypeScript，管理全局状态（如用户信息）
uView UI	UniApp 生态的 UI 组件库，提供表单、列表、弹窗等高频组件，适配小程序样式
ECharts	数据可视化库，实现任务完成率、团队活跃度等报表的图表展示
Axios	封装 HTTP 请求，处理请求拦截（添加 JWT 令牌）、响应拦截（统一错误处理）
WebSocket 客户端	与后端 WebSocket 通信，实现消息实时接收、协同编辑状态同步

（三）部署与运维工具

工具	作用与优势
Docker + Docker Compose	容器化部署，统一开发与生产环境，简化服务编排（如 SpringBoot、MySQL、Redis）
Nginx	反向代理（分发前端静态资源、转发后端 API）、负载均衡（多实例部署时）
Jenkins	持续集成 / 持续部署（CI/CD），自动化构建、测试、部署流程，提升迭代效率

三、后端实战：SpringBoot 服务搭建与核心功能实现

后端开发的核心是 “稳定的 API 服务 + 高效的数据处理”，我们按 “基础架构→核心模块→接口设计” 的流程逐步实现。

（一）基础架构搭建：SpringBoot 项目初始化

1. 项目创建与依赖配置

使用 Spring Initializr 创建项目（或通过 IDEA 可视化创建），选择以下核心依赖：

Spring Web（开发 RESTful API）

Spring Security（权限控制）

MyBatis-Plus（数据库操作）

MySQL Driver（MySQL 连接）

Spring Data Redis（Redis 缓存）

WebSocket（实时通信）

Quartz（定时任务）

pom.xml核心依赖示例：

<dependencies>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-security</artifactId>

</dependency>

<groupId>io.jsonwebtoken</groupId>

</dependency>

<groupId>com.baomidou</groupId>

<artifactId>mybatis-plus-boot-starter</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-redis</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-websocket</artifactId>

</dependency>

<groupId>io.minio</groupId>

<artifactId>minio</artifactId>

</dependency>

</dependencies>

2. 核心配置文件（application.yml）

配置数据库、Redis、MinIO、WebSocket 等核心参数：

spring:

# 数据库配置

datasource:

driver-class-name: com.mysql.cj.jdbc.Driver

url: jdbc:mysql://localhost:3306/collab_office?useSSL=false&serverTimezone=UTC

username: root

password: 123456

# Redis配置

redis:

host: localhost

port: 6379

password:

database: 0

# WebSocket配置

websocket:

endpoint: /ws/message # WebSocket连接端点

# MyBatis-Plus配置

mybatis-plus:

mapper-locations: classpath:mapper/**/*.xml

type-aliases-package: com.collaboffice.entity

configuration:

map-underscore-to-camel-case: true # 下划线转驼峰

# MinIO配置

minio:

endpoint: http://localhost:9000

access-key: minioadmin

secret-key: minioadmin

bucket-name: collab-office

# 服务器端口

server:

port: 8080

3. 基础组件封装

JWT 工具类：实现令牌生成、解析、验证，用于用户认证：

@Component

public class JwtUtil {

@Value("${jwt.secret}")

private String secret;

@Value("${jwt.expire}")

private long expire;

// 生成JWT令牌

public String generateToken(String userId) {

Date now = new Date();

Date expireDate = new Date(now.getTime() + expire * 1000);

return Jwts.builder()

.setSubject(userId)

.setIssuedAt(now)

.setExpiration(expireDate)

.signWith(SignatureAlgorithm.HS256, secret)

.compact();

}

// 解析JWT令牌，获取用户ID

public String getUserIdFromToken(String token) {

Claims claims = Jwts.parser()

.setSigningKey(secret)

.parseClaimsJws(token)

.getBody();

return claims.getSubject();

}

// 验证令牌有效性

public boolean validateToken(String token) {

try {

Jwts.parser().setSigningKey(secret).parseClaimsJws(token);

return true;

} catch (Exception e) {

return false;

}

全局异常处理：统一处理 API 异常，返回标准化错误信息：

@RestControllerAdvice

public class GlobalExceptionHandler {

@ExceptionHandler(Exception.class)

public Result handleException(Exception e) {

log.error("系统异常：", e);

return Result.fail("系统异常，请稍后重试");

}

@ExceptionHandler(BusinessException.class)

public Result handleBusinessException(BusinessException e) {

log.error("业务异常：{}", e.getMessage());

return Result.fail(e.getMessage());

}

（二）核心模块实现：以 “任务管理” 和 “即时沟通” 为例

1. 任务管理模块：实现任务创建、跟踪与提醒

数据模型（Entity）：

@Data

@TableName("task")

public class Task {

@TableId(type = IdType.AUTO)

private Long id;

private String title; // 任务标题

private String content; // 任务内容

private Long creatorId; // 创建者ID

private Long assigneeId; // 负责人ID

private Integer status; // 状态：0-待办，1-进行中，2-已完成

private Date deadline; // 截止时间

private Date createTime; // 创建时间

private Date updateTime; // 更新时间

}

Service 层：业务逻辑实现：

@Service

public class TaskService extends ServiceImpl<TaskMapper, Task> {

@Autowired

private TaskMapper taskMapper;

@Autowired

private RedisTemplate<String, Object> redisTemplate;

@Autowired

private QuartzManager quartzManager;

// 创建任务

public void createTask(Task task) {

// 1. 保存任务到数据库

task.setCreateTime(new Date());

task.setStatus(0); // 初始状态：待办

save(task);

// 2. 添加任务提醒（提前1小时提醒）

if (task.getDeadline() != null) {

Date remindTime = new Date(task.getDeadline().getTime() - 3600 * 1000);

quartzManager.addTaskRemindJob(task.getId(), remindTime, task.getAssigneeId());

}

// 3. 缓存任务列表（负责人的任务列表）

String cacheKey = "task:assignee:" + task.getAssigneeId();

redisTemplate.opsForList().leftPush(cacheKey, task);

}

// 更新任务状态

public void updateTaskStatus(Long taskId, Integer status) {

Task task = getById(taskId);

if (task == null) {

throw new BusinessException("任务不存在");

}

task.setStatus(status);

task.setUpdateTime(new Date());

updateById(task);

// 更新缓存

String cacheKey = "task:assignee:" + task.getAssigneeId();

redisTemplate.delete(cacheKey);

}

Controller 层：API 接口：

@RestController

@RequestMapping("/api/task")

public class TaskController {

@Autowired

private TaskService taskService;

// 创建任务

@PostMapping("/create")

@PreAuthorize("isAuthenticated()") // 登录才能访问

public Result createTask(@RequestBody Task task, @AuthenticationPrincipal UserDetails user) {

Long creatorId = Long.parseLong(user.getUsername());

task.setCreatorId(creatorId);

taskService.createTask(task);

return Result.success("任务创建成功");

}

// 获取负责人的任务列表

@GetMapping("/list")

@PreAuthorize("isAuthenticated()")

public Result getTaskList(@RequestParam Long assigneeId) {

List<Task> taskList = taskService.getTaskListByAssignee(assigneeId);

return Result.success(taskList);

}

2. 即时沟通模块：基于 WebSocket 实现消息实时推送

WebSocket 配置：

@Configuration

@EnableWebSocket

public class WebSocketConfig implements WebSocketConfigurer {

@Override

public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {

// 注册WebSocket处理器，允许跨域

registry.addHandler(new MessageWebSocketHandler(), "/ws/message")

.setAllowedOrigins("*");

}

WebSocket 处理器：处理消息发送与接收：

public class MessageWebSocketHandler extends TextWebSocketHandler {

// 存储用户ID与WebSocketSession的映射

private static final Map<Long, WebSocketSession> USER_SESSION_MAP = new ConcurrentHashMap<>();

// 连接建立时触发

@Override

public void afterConnectionEstablished(WebSocketSession session) throws Exception {

// 从请求参数中获取用户ID（实际项目需从JWT令牌解析）

Long userId = Long.parseLong(session.getUri().getQuery().split("=")[1]);

USER_SESSION_MAP.put(userId, session);

log.info("用户{}建立WebSocket连接", userId);

}

// 接收客户端消息

@Override

protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {

// 解析消息（JSON格式：{fromUserId, toUserId, content, type}）

JSONObject msgJson = JSON.parseObject(message.getPayload());

Long fromUserId = msgJson.getLong("fromUserId");

Long toUserId = msgJson.getLong("toUserId");

String content = msgJson.getString("content");

// 1. 保存消息到数据库（省略）

// 2. 推送消息给接收方

WebSocketSession toSession = USER_SESSION_MAP.get(toUserId);

if (toSession != null && toSession.isOpen()) {

String response = JSON.toJSONString(Result.success("收到消息", content));

toSession.sendMessage(new TextMessage(response));

} else {

// 接收方不在线，存入离线消息（省略）

}

// 连接关闭时触发

@Override

public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {

// 移除用户会话

USER_SESSION_MAP.entrySet().removeIf(entry -> entry.getValue().equals(session));

log.info("WebSocket连接关闭");

}

四、前端实战：UniApp 小程序开发与前后端联调

前端开发的核心是 “流畅的用户体验 + 高效的接口交互”，我们以 “任务列表页面” 和 “聊天页面” 为例，讲解前端实现流程。

（一）项目初始化与全局配置

创建 UniApp 项目：通过 HBuilderX 创建 “uni-app 项目”，选择 “默认模板”，配置项目名称（如collab-office-app）。

全局配置（main.js）：初始化 Pinia、Axios 拦截器：

import { createSSRApp } from 'vue'

import { createPinia } from 'pinia'

import App from './App.vue'

import axios from './utils/axios'

export function createApp() {

const app = createSSRApp(App)

app.use(createPinia())

// 全局挂载Axios

app.config.globalProperties.$axios = axios

return { app }

}

Axios 封装（utils/axios.js）：处理请求拦截（添加 JWT 令牌）、响应拦截（统一错误处理）：

import axios from 'axios'

import { useUserStore } from '@/stores/user'

const axiosInstance = axios.create({

baseURL: 'http://localhost:8080/api',

timeout: 5000

})

// 请求拦截器：添加JWT令牌

axiosInstance.interceptors.request.use(config => {

const userStore = useUserStore()

if (userStore.token) {

config.headers.Authorization = `Bearer ${userStore.token}`

}

return config

})

// 响应拦截器：统一错误处理

axiosInstance.interceptors.response.use(

response => response.data,

error => {

// 令牌过期，跳转登录页

if (error.response?.status === 401) {

uni.navigateTo({ url: '/pages/login/login' })

}

uni.showToast({ title: error.response?.data?.msg || '请求失败', icon: 'none' })

return Promise.reject(error)

}

)

export default axiosInstance

（二）页面实现：任务列表与聊天页面

1. 任务列表页面（pages/task/taskList.vue）

实现 “任务列表展示、状态筛选、任务创建” 功能：

<template>

</view>

<view class="task-title">{{ task.title }}</view>

<text>负责人：{{ task.assigneeName }}</text>

<text>截止时间：{{ formatDate(task.deadline) }}</text>

</view>

</view>

</view>

</template>

import { ref, onLoad } from 'vue'

import { useUserStore } from '@/stores/user'

import { $axios } from '@/utils/axios'

const userStore = useUserStore()

const filterStatus = ref(0) // 筛选状态：0-全部，1-进行中，2-已完成

const taskList = ref([])

// 页面加载时获取任务列表

onLoad(() => {

getTaskList()

})

// 获取任务列表

const getTaskList = async () => {

const res = await $axios.get('/task/list', {

params: { assigneeId: userStore.userId, status: filterStatus.value }

})

taskList.value = res.data

}

// 格式化日期

const formatDate = (date) => {

return new Date(date).toLocaleString()

}

// 获取状态文本

const getStatusText = (status) => {

return status === 0 ? '待办' : status === 1 ? '进行中' : '已完成'

}

// 跳转到创建任务页面

const navigateToCreate = () => {

uni.navigateTo({ url: '/pages/task/taskCreate' })

}

</script>

/* 样式省略 */

</style>

2. 聊天页面（pages/chat/chat.vue）

实现 “消息发送、接收、实时刷新” 功能：

<template>

<scroll-view class="message-list" scroll-y>

<view class="content">{{ msg.content }}</view>

</view>

</scroll-view>

</view>

</template>

import { ref, onMounted, onUnmounted } from 'vue'

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const userId = userStore.userId // 当前用户ID

const toUserId = ref(0) // 接收方ID（从页面参数获取）

const inputContent = ref('')

const messageList = ref([])

let websocket = null

// 页面加载时初始化WebSocket

onMounted(() => {

// 获取接收方ID（从跳转参数中获取）

const pages = getCurrentPages()

const currentPage = pages[pages.length - 1]

toUserId.value = currentPage.options.toUserId

// 初始化WebSocket

initWebSocket()

})

// 初始化WebSocket

const initWebSocket = () => {

// 连接后端WebSocket（携带用户ID）

websocket = new WebSocket(`ws://localhost:8080/ws/message?userId=${userId}`)

// 接收消息

websocket.onmessage = (event) => {

const res = JSON.parse(event.data)

messageList.value.push({

fromUserId: toUserId.value,

content: res.data,

time: new Date().toLocaleTimeString()

})

}

// 连接关闭

websocket.onclose = () => {

console.log('WebSocket连接关闭')

}

// 发送消息

const sendMessage = () => {

if (!inputContent.value.trim()) return

// 发送消息到后端

const msg = {

fromUserId: userId,

toUserId: toUserId.value,

content: inputContent.value

}

websocket.send(JSON.stringify(msg))

// 添加到消息列表（自己发送的消息）

messageList.value.push({

fromUserId: userId,

content: inputContent.value,

time: new Date().toLocaleTimeString()

})

// 清空输入框

inputContent.value = ''

}

// 页面卸载时关闭WebSocket

onUnmounted(() => {

if (websocket) {

websocket.close()

}

})

</script>

五、项目部署：Docker 容器化与 CI/CD 流程

（一）Docker 容器化部署

后端 Dockerfile：

FROM openjdk:11-jre-slim

WORKDIR /app

COPY target/collab-office-0.0.1-SNAPSHOT.jar app.jar

EXPOSE 8080

ENTRYPOINT ["java", "-jar", "app.jar"]

Docker Compose 配置（docker-compose.yml）：编排后端、MySQL、Redis、MinIO 服务：

version: '3.8'

services:

# 后端服务

backend:

build: ./backend

ports:

- "8080:8080"

depends_on:

- mysql

- redis

- minio

environment:

- SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/collab_office?useSSL=false

- SPRING_REDIS_HOST=redis

- MINIO_ENDPOINT=http://minio:9000

# MySQL服务

mysql:

image: mysql:8.0

ports:

- "3306:3306"

environment:

- MYSQL_ROOT_PASSWORD=123456

- MYSQL_DATABASE=collab_office

volumes:

- mysql-data:/var/lib/mysql

# Redis服务

redis:

image: redis:6

ports:

- "6379:6379"

volumes:

- redis-data:/data

# MinIO服务

minio:

image: minio/minio

ports:

- "9000:9000"

- "9001:9001"

environment:

- MINIO_ROOT_USER=minioadmin

- MINIO_ROOT_PASSWORD=minioadmin

command: server /data --console-address ":9001"

volumes:

- minio-data:/data

volumes:

mysql-data:

redis-data:

minio-data:

前端部署：UniApp 项目打包为微信小程序，通过微信开发者工具上传代码，提交审核后发布；若需 H5 版本，可通过npm run build:h5生成静态资源，部署到 Nginx。

（二）CI/CD 流程（Jenkins）

创建 Jenkins 任务：选择 “流水线任务”，配置代码仓库（如 GitHub、GitLab）。

编写 Jenkinsfile：实现 “拉取代码→构建后端→构建前端→部署容器” 自动化流程：

pipeline {

agent any

stages {

stage('拉取代码') {

steps {

git url: 'https://github.com/your-repo/collab-office.git', branch: 'main'

}

stage('构建后端') {

steps {

dir('backend') {

sh 'mvn clean package -DskipTests'

}

stage('构建前端') {

steps {

dir('frontend') {

sh 'npm install && npm run build:mp-weixin'

}

stage('部署容器') {

steps {

sh 'docker-compose down && docker-compose up -d --build'

}

六、项目优化与扩展：从 “可用” 到 “好用”

（一）性能优化

后端优化：

数据库索引：为task(assignee_id, status)、message(from_user_id, to_user_id)等高频查询字段添加索引；

缓存策略：对 “用户信息”“团队列表” 等低频变更数据设置较长缓存时间（如 24 小时），对 “任务列表” 等高频变更数据设置较短缓存时间（如 5 分钟）；

异步处理：用 Redis 消息队列异步处理 “消息已读回执”“文档版本记录” 等非核心流程，提升接口响应速度。

前端优化：

懒加载：任务列表、聊天记录采用分页加载，避免一次性渲染大量数据；

本地缓存：用 uni.setStorageSync 缓存 “用户令牌”“常用团队信息”，减少重复请求；

减少重绘：聊天页面消息列表使用固定高度容器，避免滚动时频繁重绘。

（二）功能扩展

集成第三方服务：

企业微信 / 钉钉登录：通过 OAuth2.0 集成企业微信登录，实现 “一键登录”；

云文档协作：集成腾讯云文档 / 飞书文档 SDK，替代自建文档服务，降低开发成本；

视频会议：集成腾讯云 TRTC / 阿里云 RTC，实现 “任务讨论时一键发起视频会议”。

移动端适配：

适配不同屏幕尺寸：使用 UniApp 的 rpx 单位，自动适配手机、平板；

离线功能：支持 “离线创建任务”“离线编辑文档”，网络恢复后自动同步。

七、总结：全栈开发的核心价值与实践启示

SpringBoot+UniApp 全栈开发在线协同办公小程序，不仅是技术的组合，更是 “业务需求→技术实现→用户体验” 的全链路思考。通过后端的 “稳定服务 + 高效数据处理”，保障协同办公的可靠性；通过前端的 “轻量化交互 + 跨平台适配”，提升用户的使用便捷性；通过容器化部署与 CI/CD，实现项目的快速迭代与维护。

对于开发者而言，全栈开发的核心启示在于：

前后端思维协同：后端需理解前端 “数据需求与交互逻辑”，前端需理解后端 “接口设计与数据结构”，避免 “接口冗余”“数据格式不匹配” 等问题；

优先解决核心痛点：协同办公的核心是 “沟通与任务跟踪”，需优先保证这两个模块的稳定性与流畅性，再逐步扩展其他功能；

持续迭代优化：项目上线后，通过用户反馈（如 “任务提醒不及时”“聊天消息延迟”）持续优化，从 “能用” 向 “好用” 迭代。

随着企业数字化办公的深入，在线协同办公小程序的需求将持续增长。掌握 SpringBoot 全栈开发能力，不仅能独立完成此类项目，更能在 “技术多元化” 的职场竞争中占据优势，为企业数字化转型提供切实可行的技术解决方案。

泽兴芝士网

一站式 IT 编程学习资源平台