1. 善筹网系统架构概述
善筹网是一个基于现代Java Web技术栈构建的众筹平台，采用前后端分离架构设计。后端使用SpringBoot2框架提供RESTful API服务，前端采用Vue3实现响应式用户界面，数据持久层通过MyBatis-Plus与MySQL8.0交互。这种技术组合在2023年已成为中大型Java Web项目的标配方案，兼顾了开发效率和运行时性能。
提示：选择SpringBoot2而非SpringBoot3的主要考虑是当前企业生产环境仍以Java8/11为主，而SpringBoot3强制要求Java17+。这种技术选型体现了实际项目中的兼容性考量。
系统采用经典的三层架构：
- 表现层：Vue3 + Element Plus组件库
- 业务逻辑层：SpringBoot2 + 自定义业务组件
- 数据访问层：MyBatis-Plus + MySQL8.0
2. 后端技术实现详解
2.1 SpringBoot2核心配置
项目采用SpringBoot2.7.x版本构建，其application.yml配置包含以下关键项：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/crowdfunding?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
jackson:
date-format: yyyy-MM-dd HH:mm:ss
time-zone: GMT+8
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
global-config:
db-config:
logic-delete-field: deleted # 逻辑删除字段
logic-not-delete-value: 0
logic-delete-value: 1
这种配置实现了：
- MySQL8.0连接池管理
- 统一的JSON日期格式处理
- MyBatis-Plus逻辑删除配置
2.2 MyBatis-Plus高级应用
项目充分利用了MyBatis-Plus的特性提升开发效率：
1. 通用Mapper实现
java复制public interface BaseMapper<T> extends com.baomidou.mybatisplus.core.mapper.BaseMapper<T> {
// 批量插入
int insertBatchSomeColumn(List<T> entityList);
}
2. 自动填充处理
java复制@Slf4j
@Component
public class MetaObjectHandler implements com.baomidou.mybatisplus.core.handlers.MetaObjectHandler {
@Override
public void insertFill(MetaObject metaObject) {
this.strictInsertFill(metaObject, "createTime", LocalDateTime.class, LocalDateTime.now());
this.strictInsertFill(metaObject, "updateTime", LocalDateTime.class, LocalDateTime.now());
}
@Override
public void updateFill(MetaObject metaObject) {
this.strictUpdateFill(metaObject, "updateTime", LocalDateTime.class, LocalDateTime.now());
}
}
3. 分页插件配置
java复制@Configuration
public class MybatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
// 分页插件
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
// 乐观锁插件
interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());
return interceptor;
}
}
2.3 业务模块设计
系统主要包含以下核心模块：
- 用户认证模块（JWT实现）
- 项目发起模块
- 资金管理模块
- 订单支付模块
- 消息通知模块
以订单支付模块为例，其核心类结构如下：
code复制com.crowdfunding.order
├── controller
│ └── OrderController.java
├── service
│ ├── impl
│ │ └── OrderServiceImpl.java
│ └── OrderService.java
├── mapper
│ └── OrderMapper.java
└── entity
└── Order.java
3. 前端Vue3实现方案
3.1 项目初始化与配置
使用Vite创建Vue3项目：
bash复制npm create vite@latest crowdfunding-front --template vue-ts
关键依赖配置：
json复制{
"dependencies": {
"vue": "^3.3.0",
"vue-router": "^4.2.0",
"pinia": "^2.1.0",
"axios": "^1.4.0",
"element-plus": "^2.3.8"
}
}
3.2 组合式API实践
项目采用Vue3的组合式API编写业务逻辑，以项目详情页为例：
vue复制<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getProjectDetail } from '@/api/project'
const route = useRoute()
const project = ref<ProjectDetail>()
onMounted(async () => {
const { data } = await getProjectDetail(route.params.id as string)
project.value = data
})
</script>
3.3 状态管理方案
使用Pinia进行全局状态管理，创建authStore处理用户认证：
ts复制// stores/auth.ts
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
token: localStorage.getItem('token') || '',
userInfo: null as UserInfo | null
}),
actions: {
login(payload: LoginPayload) {
return authAPI.login(payload).then(res => {
this.token = res.data.token
this.userInfo = res.data.user
localStorage.setItem('token', res.data.token)
})
}
}
})
4. 数据库设计与优化
4.1 MySQL8.0表结构设计
核心表包括：
- 用户表(cf_user)
- 项目表(cf_project)
- 支持项表(cf_reward)
- 订单表(cf_order)
sql复制CREATE TABLE `cf_project` (
`id` bigint NOT NULL AUTO_INCREMENT,
`user_id` bigint NOT NULL,
`title` varchar(100) NOT NULL,
`description` text,
`target_amount` decimal(12,2) NOT NULL,
`current_amount` decimal(12,2) DEFAULT '0.00',
`status` tinyint DEFAULT '0' COMMENT '0-待审核 1-众筹中 2-众筹成功 3-众筹失败',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_user` (`user_id`),
KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
4.2 性能优化措施
- 索引优化：为所有外键和查询条件字段建立索引
- JSON字段应用：使用MySQL8.0的JSON类型存储动态扩展属性
- 窗口函数：利用MySQL8.0的窗口函数实现复杂统计查询
sql复制-- 热门项目排行查询
SELECT
p.*,
RANK() OVER (ORDER BY o.support_count DESC) AS hot_rank
FROM cf_project p
JOIN (
SELECT project_id, COUNT(*) AS support_count
FROM cf_order
WHERE create_time > DATE_SUB(NOW(), INTERVAL 7 DAY)
GROUP BY project_id
) o ON p.id = o.project_id
WHERE p.status = 1
LIMIT 10;
5. 系统安全与部署
5.1 安全防护措施
- JWT认证：采用HS256算法签名，设置合理过期时间
- XSS防护：前端使用DOMPurify净化HTML输入
- CSRF防护：SameSite Cookie策略
- SQL注入防护：MyBatis-Plus参数化查询
安全配置示例：
java复制@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.csrf().disable()
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()));
}
}
5.2 生产环境部署
推荐部署方案：
- 前端：Nginx静态部署 + CDN加速
- 后端：Docker容器化部署 + Kubernetes集群
- 数据库：MySQL主从复制 + 读写分离
Docker-compose示例：
yaml复制version: '3'
services:
backend:
image: crowdfunding-backend:latest
ports:
- "8080:8080"
environment:
- SPRING_PROFILES_ACTIVE=prod
depends_on:
- mysql
mysql:
image: mysql:8.0
environment:
- MYSQL_ROOT_PASSWORD=123456
- MYSQL_DATABASE=crowdfunding
volumes:
- mysql-data:/var/lib/mysql
volumes:
mysql-data:
6. 开发经验与优化建议
6.1 常见问题解决方案
1. MyBatis-Plus分页失效问题
- 确保配置了分页插件
- 检查Page参数是否正确传递
- 注意wrapper不能为null
2. Vue3响应式丢失问题
- 复杂对象使用shallowRef
- 数组操作使用扩展运算符或Array.prototype方法
- 必要时使用toRaw访问原始对象
3. 跨域问题处理
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
6.2 性能优化建议
-
接口层面：
- 使用@Cacheable实现方法缓存
- 批量查询代替循环单查
- 合理使用@Transactional事务范围
-
数据库层面：
- 冷热数据分离
- 大文本字段单独建表
- 定期执行ANALYZE TABLE
-
前端层面：
- 组件懒加载
- 路由懒加载
- 图片懒加载+WebP格式
6.3 扩展性设计
- 支付渠道扩展：
java复制public interface PaymentService {
PaymentResult pay(PaymentRequest request);
}
@Service("aliPay")
public class AliPayServiceImpl implements PaymentService { ... }
@Service("wechatPay")
public class WechatPayServiceImpl implements PaymentService { ... }
- 消息通知扩展：
- 使用Spring事件机制实现观察者模式
- 支持邮件、短信、站内信等多种通知方式
- 消息模板可配置化
- 国际化支持：
- 前端使用vue-i18n
- 后端MessageSource资源文件
- 数据库存储多语言内容
这套技术栈组合经过多个线上项目验证，在开发效率、运行性能和可维护性之间取得了良好平衡。实际开发中建议根据团队技术储备适当调整，例如前端可考虑Nuxt3实现SSR，后端可引入SpringCloud实现微服务化。