1. 项目概述:企业级全栈开发实战
这个基于SpringBoot+Vue的企业项目管理系统,是我去年带队为一家中型科技公司实施的内部协作平台。系统上线后成功支撑了300+员工的日常项目管理,将需求响应周期缩短了40%。典型的全栈分离架构中,前端Vue负责动态交互展示,后端SpringBoot处理业务逻辑,MyBatis作为ORM框架与MySQL数据库交互,这种组合在当下企业级开发中已成为黄金标准。
2. 技术架构深度解析
2.1 后端技术栈选型依据
SpringBoot 2.7.4版本的选择经过了严格验证:
- 内嵌Tomcat服务器避免容器配置烦恼
- Starter依赖自动管理JAR包版本冲突
- Actuator端点提供完善的健康监控
- 与MyBatis的整合仅需添加
mybatis-spring-boot-starter
数据库连接池对比测试数据:
| 连接池类型 | 100并发QPS | 错误率 | 内存占用 |
|---|---|---|---|
| HikariCP | 1256 | 0.02% | 58MB |
| Druid | 1187 | 0.03% | 73MB |
| Tomcat JDBC | 976 | 0.15% | 82MB |
最终选用HikariCP作为默认连接池,其性能优势在分页查询密集的业务场景中尤为明显。
2.2 前端架构设计要点
Vue 3的组合式API大幅提升了代码组织效率:
javascript复制// 项目看板模块示例
const { projectList, loading } = useProjectStore()
const pagination = reactive({
pageSize: 10,
currentPage: 1,
total: computed(() => projectList.length)
})
Element Plus组件库的二次封装策略:
- 基于业务抽象基础表格组件
BusinessTable - 统一封装异步请求拦截器
- 定制化主题色通过SCSS变量覆盖
3. 核心模块实现细节
3.1 权限控制系统实现
RBAC模型数据库设计:
sql复制CREATE TABLE `sys_role` (
`role_id` bigint NOT NULL AUTO_INCREMENT,
`role_name` varchar(50) COLLATE utf8mb4_bin NOT NULL,
`role_key` varchar(50) COLLATE utf8mb4_bin NOT NULL,
`data_scope` char(1) COLLATE utf8mb4_bin DEFAULT '1',
PRIMARY KEY (`role_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
Spring Security配置关键点:
java复制@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/login").permitAll()
.anyRequest().authenticated()
.and()
.addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
}
}
3.2 工作流引擎集成
采用Activiti 7.1.0实现项目审批流,核心表包括:
- ACT_RU_TASK 运行中任务
- ACT_HI_TASKINST 历史任务
- ACT_RE_PROCDEF 流程定义
典型流程定义示例:
xml复制<process id="project_approval" name="项目立项审批">
<startEvent id="start"/>
<userTask id="deptLeaderAudit" name="部门领导审批"/>
<sequenceFlow sourceRef="start" targetRef="deptLeaderAudit"/>
<exclusiveGateway id="exclusiveGw"/>
<sequenceFlow sourceRef="deptLeaderAudit" targetRef="exclusiveGw"/>
</process>
4. 前后端交互规范
4.1 接口契约设计
统一响应体结构:
java复制public class R<T> implements Serializable {
private int code;
private String msg;
private T data;
public static <T> R<T> ok(T data) {
return restResult(data, 200, "操作成功");
}
}
Swagger3配置示例:
java复制@Bean
public Docket createRestApi() {
return new Docket(DocumentationType.OAS_30)
.apiInfo(apiInfo())
.select()
.apis(RequestHandlerSelectors.basePackage("com.xxx.controller"))
.paths(PathSelectors.any())
.build();
}
4.2 跨域解决方案
生产环境推荐的Nginx配置:
nginx复制location /api {
proxy_pass http://backend;
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
}
5. 部署实战指南
5.1 后端部署要点
JVM参数优化建议:
bash复制java -jar -Xms1024m -Xmx2048m -XX:MetaspaceSize=256m \
-XX:MaxMetaspaceSize=512m -Dfile.encoding=UTF-8 \
-Dspring.profiles.active=prod your-application.jar
MySQL性能调优参数:
ini复制[mysqld]
innodb_buffer_pool_size = 2G
innodb_log_file_size = 256M
max_connections = 500
thread_cache_size = 32
5.2 前端部署策略
Docker多阶段构建示例:
dockerfile复制FROM node:16 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
6. 典型问题排查实录
6.1 MyBatis缓存踩坑记录
现象:更新操作后查询结果未刷新
解决方案:
- 确认实体类实现了Serializable
- 检查二级缓存配置:
xml复制<settings>
<setting name="cacheEnabled" value="true"/>
</settings>
- 在Mapper接口添加
@CacheNamespace注解
6.2 Vue路由守卫异常
常见问题场景:
- 页面刷新后路由丢失
- 权限校验死循环
优化后的路由守卫实现:
javascript复制router.beforeEach(async (to, from, next) => {
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
} else {
const hasRoles = store.getters.roles?.length > 0
if (hasRoles) {
next()
} else {
try {
await store.dispatch('user/getInfo')
next()
} catch (error) {
await store.dispatch('user/resetToken')
next(`/login?redirect=${to.path}`)
}
}
}
}
})
7. 性能优化专项
7.1 数据库查询优化
慢SQL分析工具配置:
properties复制# application.properties
spring.datasource.hikari.data-source-properties=slowQueryThreshold=2000
logging.level.com.xxx.mapper=debug
EXPLAIN结果分析要点:
- 检查type列是否出现ALL
- 关注Extra列中的Using filesort
- 评估possible_keys与实际使用key的差异
7.2 前端加载优化
Webpack分包策略:
javascript复制configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
}
}
}
}
}
8. 安全防护实践
8.1 SQL注入防御
MyBatis防注入规范:
- 严禁使用
${}进行字符串拼接 - 复杂查询使用
<script>标签包裹 - 参数类型严格校验
xml复制<select id="selectByCondition" resultType="Project">
SELECT * FROM t_project
WHERE 1=1
<if test="status != null">
AND status = #{status}
</if>
ORDER BY create_time DESC
</select>
8.2 XSS防护方案
前端过滤器实现:
javascript复制const xssFilter = (str) => {
return str.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
}
后端统一处理:
java复制@ControllerAdvice
public class XssAdvice implements ResponseBodyAdvice<Object> {
@Override
public Object beforeBodyWrite(Object body, MethodParameter returnType,
MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType,
ServerHttpRequest request, ServerHttpResponse response) {
// XSS过滤处理逻辑
}
}
9. 项目扩展方向
9.1 微服务化改造
SpringCloud Alibaba技术选型:
- Nacos 2.0 服务注册与配置中心
- Sentinel 1.8 流量控制组件
- Seata 1.4 分布式事务解决方案
服务拆分建议:
- 认证中心独立部署
- 工作流引擎单独服务
- 报表模块采用独立数据源
9.2 移动端适配方案
Uniapp整合要点:
- 共用Vuex状态管理
- 封装API请求适配器
- 使用条件编译处理平台差异
javascript复制// #ifdef H5
import H5Components from './h5'
// #endif
// #ifdef MP-WEIXIN
import MpComponents from './mp'
// #endif
10. 开发环境配置指南
10.1 IDE推荐配置
IntelliJ IDEA必备插件:
- MyBatisX - XML与接口跳转
- Vue.js - 语法支持
- Alibaba Java Coding Guidelines - 代码规范检查
VS Code前端开发配置:
json复制{
"eslint.validate": ["javascript", "vue"],
"vetur.validation.template": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
10.2 数据库版本控制
Flyway迁移脚本命名规范:
code复制V20220801__create_project_table.sql
V20220802__add_audit_columns.sql
SpringBoot集成配置:
properties复制spring.flyway.locations=classpath:db/migration
spring.flyway.baseline-on-migrate=true
spring.flyway.encoding=UTF-8