1. 项目概述
母婴护理知识讲座系统是一个面向准父母和新生儿家庭的在线教育平台，采用Vue.js+SpringBoot前后端分离架构开发。这个系统解决了传统线下讲座受时空限制、信息获取不及时等痛点，让用户能够随时随地学习科学的育儿知识。
我在开发过程中发现，现代年轻父母对专业护理知识的需求非常强烈，但市面上多数平台要么内容零散，要么交互体验差。我们这个系统特别注重知识的系统性和易用性，通过结构化课程+实时互动的模式，真正帮助家长掌握实用技能。
2. 技术架构设计
2.1 前端技术栈选型
选择Vue 2.x版本作为前端框架主要基于三点考虑：
- 组件化开发模式非常适合内容展示型应用
- 丰富的生态系统（Element UI、Vue Router等）
- 团队已有Vue技术积累
实际开发中使用的主要技术：
- 脚手架：Vue CLI 4.x
- UI库：Element UI 2.15（定制了母婴主题色系）
- 状态管理：Vuex 3.x（管理用户登录状态、收藏记录等）
- 路由：Vue Router 3.x（实现动态路由权限控制）
- HTTP客户端：Axios（封装了统一的请求拦截器）
提示：Element UI的按需引入能显著减小打包体积，建议在babel.config.js中配置plugins: [['component', {libraryName: 'element-ui', styleLibraryName: 'theme-chalk'}]]
2.2 后端技术方案
SpringBoot 2.3.x版本的选择主要考虑：
- 内嵌Tomcat简化部署
- 完善的Starter机制
- 与MyBatis的良好整合
核心模块配置示例（application.yml）：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/babycare?useSSL=false
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
redis:
host: 127.0.0.1
port: 6379
安全框架采用Spring Security + JWT组合，关键配置类：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()));
}
}
3. 核心功能实现
3.1 讲座预约系统
采用状态机模式管理讲座生命周期：
mermaid复制stateDiagram
[*] --> 未开始
未开始 --> 进行中: 到开始时间
进行中 --> 已结束: 到结束时间
未开始 --> 已取消: 管理员操作
数据库表设计关键字段：
sql复制CREATE TABLE `lecture` (
`id` bigint NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL COMMENT '讲座标题',
`cover_url` varchar(255) DEFAULT NULL COMMENT '封面图URL',
`start_time` datetime NOT NULL COMMENT '开始时间',
`end_time` datetime NOT NULL COMMENT '结束时间',
`speaker_id` bigint NOT NULL COMMENT '主讲人ID',
`max_attendees` int DEFAULT '100' COMMENT '最大参与人数',
`status` tinyint DEFAULT '0' COMMENT '0未开始 1进行中 2已结束 3已取消',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 知识库系统
实现Elasticsearch全文检索的要点：
- 创建索引配置
java复制@Document(indexName = "knowledge")
public class KnowledgeES {
@Id
private Long id;
@Field(type = FieldType.Text, analyzer = "ik_max_word")
private String title;
@Field(type = FieldType.Text, analyzer = "ik_max_word")
private String content;
// getters/setters...
}
- 搜索服务实现
java复制public Page<KnowledgeVO> search(String keyword, int page, int size) {
NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();
queryBuilder.withQuery(QueryBuilders.multiMatchQuery(keyword, "title", "content"));
queryBuilder.withPageable(PageRequest.of(page, size));
SearchHits<KnowledgeES> hits = elasticsearchRestTemplate.search(queryBuilder.build(), KnowledgeES.class);
List<KnowledgeVO> list = hits.stream()
.map(hit -> convertToVO(hit.getContent()))
.collect(Collectors.toList());
return new PageImpl<>(list, PageRequest.of(page, size), hits.getTotalHits());
}
4. 关键问题解决方案
4.1 高并发预约处理
采用Redis+Lua脚本解决超卖问题：
lua复制-- KEYS[1] 讲座ID
-- ARGV[1] 用户ID
local key = 'lecture:'..KEYS[1]..':attendees'
local exists = redis.call('SISMEMBER', key, ARGV[1])
if exists == 1 then
return 0
end
local count = redis.call('SCARD', key)
local max = tonumber(redis.call('GET', 'lecture:'..KEYS[1]..':max'))
if count >= max then
return -1
end
redis.call('SADD', key, ARGV[1])
return 1
Java调用示例：
java复制public boolean reserve(Long lectureId, Long userId) {
String script = "上面Lua脚本内容";
RedisScript<Long> redisScript = RedisScript.of(script, Long.class);
Long result = redisTemplate.execute(redisScript,
Collections.singletonList(lectureId.toString()),
userId.toString());
return result == 1;
}
4.2 实时通知系统
使用WebSocket实现变更通知：
javascript复制// 前端实现
const socket = new WebSocket(`wss://yourdomain.com/ws/${this.userId}`)
socket.onmessage = (event) => {
const data = JSON.parse(event.data)
if (data.type === 'LECTURE_UPDATE') {
this.$notify({
title: '讲座变更通知',
message: `您预约的《${data.title}》时间已调整`,
type: 'warning'
})
}
}
后端事件发布：
java复制@RestController
@RequestMapping("/api/lecture")
public class LectureController {
@Autowired
private SimpMessagingTemplate messagingTemplate;
@PostMapping("/update")
public Result update(@RequestBody Lecture lecture) {
// 更新数据库...
// 通知已预约用户
List<Long> userIds = reservationService.getAttendees(lecture.getId());
for (Long userId : userIds) {
messagingTemplate.convertAndSendToUser(
userId.toString(),
"/queue/notifications",
new Notification("LECTURE_UPDATE", lecture.getTitle()));
}
return Result.success();
}
}
5. 部署与优化实践
5.1 Docker容器化部署
前端Dockerfile示例：
dockerfile复制FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
后端Dockerfile关键配置：
dockerfile复制FROM openjdk:8-jdk-alpine
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
5.2 性能优化指标
通过JMeter压测后采取的优化措施：
| 优化前(QPS) | 优化措施 | 优化后(QPS) | 提升幅度 |
|---|---|---|---|
| 120 | 增加Redis缓存 | 350 | 192% |
| 350 | Nginx负载均衡 | 680 | 94% |
| 680 | SQL优化+索引 | 1100 | 62% |
具体SQL优化示例：
sql复制-- 优化前
EXPLAIN SELECT * FROM comment WHERE knowledge_id = 123 ORDER BY create_time DESC;
-- 优化后
ALTER TABLE comment ADD INDEX idx_knowledge_time (knowledge_id, create_time DESC);
6. 开发经验总结
- 组件封装心得：
- 将讲座卡片封装为
<lecture-card :data="lecture">组件 - 通过插槽支持自定义操作按钮区域
- 使用provide/inject传递全局配置
- 状态管理陷阱：
- Vuex模块热重载需要特殊处理
javascript复制if (module.hot) {
module.hot.accept(['./modules/user'], () => {
store.hotUpdate({
modules: {
user: require('./modules/user').default
}
})
})
}
- 跨域解决方案对比：
- 开发环境：配置vue.config.js的devServer.proxy
- 生产环境：Nginx反向代理最优
nginx复制location /api {
proxy_pass http://backend;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
这个项目让我深刻体会到，技术架构的选择必须服务于业务场景。比如在内容展示为主的系统中，Vue的响应式特性大大简化了开发复杂度，而SpringBoot的约定优于配置理念让团队能快速迭代。特别在处理母婴这类敏感领域时，系统的稳定性和易用性往往比炫酷的功能更重要。