1. 项目概述：家校通网站的设计与实现
这个家校通网站项目是我在某科技公司实习期间完成的核心任务，采用Vue.js+SpringBoot前后端分离架构开发。作为连接学校、家长和学生的三方沟通平台，系统主要包含通知公告、作业管理、成绩查询、请假审批、班级圈等核心模块。整个开发周期约3个月，从需求分析到最终上线部署全程参与。
选择Vue+SpringBoot技术栈主要基于三点考虑：首先，Vue的组件化开发模式非常适合构建这类多模块的管理系统；其次，SpringBoot的快速开发特性能够满足实习项目的时间要求；最后，前后端分离架构便于团队协作，前端组和后端组可以并行开发。实测下来，这种技术组合在开发效率和系统性能方面都表现不错。
2. 技术架构设计
2.1 前端技术选型
前端采用Vue 2.x全家桶技术栈：
- Vue CLI 4.x 脚手架
- Vue Router 实现SPA路由
- Vuex 状态管理
- Axios 处理HTTP请求
- Element UI 组件库
- ECharts 数据可视化
特别说明选择Vue 2而非Vue 3的原因：实习公司现有项目都基于Vue 2开发，组件库和工具链更成熟；且Vue 3的Composition API学习曲线较陡，不适合短期实习项目。
2.2 后端技术选型
后端采用SpringBoot 2.5.x技术栈：
- Spring Security + JWT 认证授权
- MyBatis-Plus 数据访问
- Redis 缓存
- MySQL 8.0 数据库
- Swagger 接口文档
- Lombok 简化代码
数据库设计遵循第三范式，主要表包括：
- 用户表(sys_user)
- 角色表(sys_role)
- 学生表(edu_student)
- 家长表(edu_parent)
- 教师表(edu_teacher)
- 班级表(edu_class)
- 通知表(edu_notice)
- 作业表(edu_homework)
- 成绩表(edu_score)
3. 核心功能实现
3.1 用户认证模块
采用JWT+SpringSecurity实现认证授权：
java复制// JWT工具类关键代码
public class JwtUtil {
private static final String SECRET = "家校通密钥";
private static final long EXPIRATION = 86400L; // 24小时
public static String generateToken(UserDetails userDetails) {
Map<String, Object> claims = new HashMap<>();
claims.put("sub", userDetails.getUsername());
claims.put("created", new Date());
return Jwts.builder()
.setClaims(claims)
.setExpiration(new Date(System.currentTimeMillis() + EXPIRATION * 1000))
.signWith(SignatureAlgorithm.HS512, SECRET)
.compact();
}
// 验证逻辑...
}
前端在axios拦截器中添加token：
javascript复制// request拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + getToken()
}
return config
},
error => {
return Promise.reject(error)
}
)
3.2 实时通知功能
使用WebSocket实现实时消息推送：
java复制@ServerEndpoint("/websocket/{userId}")
@Component
public class WebSocketServer {
private static final Map<String, Session> sessions = new ConcurrentHashMap<>();
@OnOpen
public void onOpen(Session session, @PathParam("userId") String userId) {
sessions.put(userId, session);
}
public static void sendMessage(String userId, String message) {
try {
Session session = sessions.get(userId);
if(session != null) {
session.getBasicRemote().sendText(message);
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
前端连接WebSocket：
javascript复制const socket = new WebSocket(`ws://localhost:8080/websocket/${userId}`)
socket.onmessage = (event) => {
const notification = JSON.parse(event.data)
ElNotification({
title: notification.title,
message: notification.content,
type: 'success'
})
}
4. 开发中的难点与解决方案
4.1 跨域问题处理
前后端分离开发时遇到的典型跨域问题，解决方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
}
生产环境建议使用Nginx反向代理解决跨域，更安全高效。
4.2 文件上传与预览
作业提交需要支持文件上传，采用阿里云OSS存储：
java复制@PostMapping("/upload")
public R upload(@RequestParam("file") MultipartFile file) {
String fileName = file.getOriginalFilename();
String fileUrl = ossClient.upload(file.getInputStream(), fileName);
return R.ok().put("url", fileUrl);
}
前端使用el-upload组件：
vue复制<el-upload
action="/api/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button type="primary">点击上传</el-button>
</el-upload>
5. 项目部署方案
5.1 前端部署
使用Nginx部署Vue项目：
nginx复制server {
listen 80;
server_name jxt.example.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
5.2 后端部署
使用Docker部署SpringBoot应用：
dockerfile复制FROM openjdk:8-jdk-alpine
VOLUME /tmp
ADD target/jxt-backend.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
启动命令：
bash复制docker build -t jxt-backend .
docker run -d -p 8080:8080 --name jxt-backend jxt-backend
6. 实习收获与经验总结
通过这个项目，我系统掌握了Vue+SpringBoot全栈开发流程，几个关键收获：
-
工程化思维：学会使用Git进行团队协作，规范commit message，合理设计分支策略（feature/dev/master）
-
性能优化：
- 前端使用keep-alive缓存路由组件
- 后端接口添加Redis缓存
- 数据库建立合适索引
-
调试技巧：
- Chrome Vue Devtools调试组件状态
- Postman测试接口
- Arthas诊断Java应用
-
文档习惯：养成编写接口文档（Swagger）、项目README、技术wiki的好习惯
给后来者的建议：在开发类似家校系统时，要特别注意数据权限控制（如班主任只能管理本班数据），这是这类系统的核心安全要求。另外，移动端适配也很重要，可以考虑后期增加uni-app版本。