1. 项目概述企业级全栈技术栈实战这套基于SpringBootVue3MyBatis的企业信息管理系统采用了当前主流的前后端分离架构。作为多年全栈开发的老兵我认为这套技术组合在2023年依然是企业级应用开发的黄金配置。SpringBoot 3.x提供了稳定的后端服务能力Vue3的Composition API让前端开发更高效而MyBatis-Plus的加持则让数据库操作变得异常简单。系统采用经典的MVC分层设计前端Vue3 Element Plus Axios后端SpringBoot 3.x MyBatis-Plus 3.5.x数据库MySQL 8.0兼容5.7版本构建工具Maven npm接口规范RESTful API JWT认证提示这套架构特别适合需要快速迭代的中小型企业应用从开发到部署的全套技术栈都经过生产环境验证。2. 核心技术栈深度解析2.1 SpringBoot后端设计精要后端采用多模块Maven项目结构enterprise-system ├── system-common // 公共模块 ├── system-admin // 管理后台API ├── system-service // 业务服务层 └── system-mapper // 数据持久层关键配置示例application.ymlspring: datasource: url: jdbc:mysql://localhost:3306/enterprise_db?useSSLfalseserverTimezoneAsia/Shanghai username: root password: 加密密码 redis: host: 127.0.0.1 port: 6379 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: 12.2 Vue3前端架构设计前端采用Vite构建工具项目结构清晰src/ ├── api/ // 接口定义 ├── assets/ // 静态资源 ├── components/ // 公共组件 ├── composables/ // 组合式函数 ├── router/ // 路由配置 ├── stores/ // Pinia状态管理 └── views/ // 页面组件典型页面组件示例UserManagement.vuescript setup import { ref, onMounted } from vue import { getUserList } from /api/user const tableData ref([]) const loading ref(false) const fetchData async () { loading.value true try { const res await getUserList() tableData.value res.data } finally { loading.value false } } onMounted(() { fetchData() }) /script3. 数据库设计与MyBatis优化3.1 MySQL表结构设计核心表结构示例用户管理模块CREATE TABLE sys_user ( user_id bigint NOT NULL AUTO_INCREMENT COMMENT 用户ID, dept_id bigint DEFAULT NULL COMMENT 部门ID, username varchar(30) NOT NULL COMMENT 用户账号, password varchar(100) NOT NULL COMMENT 密码, nick_name varchar(30) DEFAULT NULL COMMENT 用户昵称, email varchar(50) DEFAULT NULL COMMENT 用户邮箱, phone varchar(11) DEFAULT NULL COMMENT 手机号码, status char(1) DEFAULT 0 COMMENT 帐号状态0正常 1停用, create_time datetime DEFAULT NULL COMMENT 创建时间, update_time datetime DEFAULT NULL COMMENT 更新时间, deleted char(1) DEFAULT 0 COMMENT 删除标志0代表存在 1代表删除, PRIMARY KEY (user_id), UNIQUE KEY idx_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户信息表;3.2 MyBatis-Plus高级应用动态SQL示例部门查询Mapper public interface DeptMapper extends BaseMapperDept { Select(script SELECT * FROM sys_dept where if testdeptName ! null AND dept_name like CONCAT(%,#{deptName},%) /if if teststatus ! null AND status #{status} /if /where ORDER BY order_num ASC /script) ListDept selectDeptList(Param(deptName) String deptName, Param(status) String status); }4. 前后端交互关键实现4.1 接口安全设计JWT认证流程实现用户登录成功后生成Tokenpublic String createToken(LoginUser loginUser) { return Jwts.builder() .setSubject(loginUser.getUsername()) .claim(user_id, loginUser.getUserId()) .setExpiration(new Date(System.currentTimeMillis() expireTime)) .signWith(SignatureAlgorithm.HS512, secret) .compact(); }前端Axios请求拦截器配置service.interceptors.request.use(config { const token getToken() if (token) { config.headers[Authorization] Bearer token } return config }, error { return Promise.reject(error) })4.2 文件上传下载方案后端文件处理控制器PostMapping(/upload) public RString uploadFile(RequestParam(file) MultipartFile file) { try { String fileName FileUploadUtils.upload(file); return R.ok(fileName); } catch (Exception e) { return R.fail(上传失败 e.getMessage()); } } GetMapping(/download) public void downloadFile(String fileName, HttpServletResponse response) { try { FileUploadUtils.download(fileName, response); } catch (IOException e) { log.error(下载文件失败, e); } }5. 系统部署与性能优化5.1 多环境部署方案使用Spring Profile实现环境隔离# application-dev.properties server.port8080 spring.profiles.activedev # application-prod.properties server.port80 spring.profiles.activeprod前端环境变量配置.env.productionVITE_API_BASE_URLhttps://api.yourdomain.com VITE_APP_TITLE企业信息管理系统5.2 性能优化实战技巧数据库连接池配置优化spring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5 idle-timeout: 30000 max-lifetime: 1800000 connection-timeout: 30000Vue3组件懒加载const UserManagement defineAsyncComponent(() import(./views/system/UserManagement.vue) )MyBatis二级缓存配置cache evictionLRU flushInterval60000 size512 readOnlytrue/6. 常见问题排查手册6.1 跨域问题解决方案SpringBoot全局跨域配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }6.2 数据权限控制实现基于注解的数据权限过滤Target(ElementType.METHOD) Retention(RetentionPolicy.RUNTIME) public interface DataScope { String deptAlias() default ; String userAlias() default ; } // AOP实现 Around(annotation(dataScope)) public Object around(ProceedingJoinPoint point, DataScope dataScope) throws Throwable { // 数据权限过滤逻辑 dataFilter(filterSQL); return point.proceed(); }7. 项目扩展与二次开发建议工作流引擎集成可接入Activiti或Flowable实现审批流程消息通知增强集成WebSocket实现实时消息推送微服务改造使用SpringCloud Alibaba拆分模块移动端适配开发uniapp版本实现多端统一监控体系搭建集成PrometheusGrafana监控系统健康状态这套系统在实际部署时我建议先从小规模部门试用开始逐步完善权限体系和业务流程。对于初期开发可以优先实现核心的用户-角色-权限体系和基础数据管理功能后续再根据实际需求扩展OA、CRM等模块。
