# Enterprise Crm Fullstack > 企业级CRM全栈开发规范：基于Vue 2 + Element UI + Java Spring Boot的标准化开发指南。覆盖前端配置式列表页、详情页、国际化、权限控制，后端分层架构、接口规范、数据库设计。当用户说'CRM开发'、'Vue 2列表页'、'Element UI表单'、'Java后端接口'、'全栈开发规范'、'中后台系统开发'、'工单系统开发'、'客户管理系统开发'时触发。核心特点：前后端标准化、配置式开发、企业级权限、国际化支持。 - Skill: `gaoqiongxie/enterprise-crm-fullstack` (Agent Skill) - Install (CLI): `npx skillmds@latest add gaoqiongxie/enterprise-crm-fullstack` - Raw SKILL.md: https://api.skillmd.com/api/skills/gaoqiongxie/enterprise-crm-fullstack/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: gaoqiongxie (https://skillmd.com/u/gaoqiongxie) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/gaoqiongxie/enterprise-crm-fullstack --- > **来源**: 基于企业级CRM项目实战经验 + Vue 2 + Element UI + Spring Boot 技术栈 > > **发布时间**: 2026-06-04 > > **理念**: "标准化不是束缚，是让团队协作更高效的契约。" # Enterprise CRM Fullstack — 企业级CRM全栈开发规范 一套完整的企业级中后台系统全栈开发规范，前端基于 Vue 2 + Element UI，后端基于 Java Spring Boot + MyBatis，覆盖从数据库设计到前端页面的完整开发链路。 --- ## 🎯 技术栈概览 ### 前端 | 技术 | 版本/说明 | |------|----------| | Vue | 2.6.x (Options API) | | Vue Router | 3.x (hash 模式) | | Vuex | 3.x (模块自动加载) | | Element UI | 2.13.x | | Axios | 0.18.x | | SCSS | node-sass | | 代码规范 | ESLint + Prettier + Standard | ### 后端 | 技术 | 版本/说明 | |------|----------| | Java | 8+ | | Spring Boot | 2.x | | MyBatis / MyBatis-Plus | 数据访问 | | Maven | 构建工具 | | OAuth2 + JWT | 认证授权 | --- ## 📁 前端项目结构规范 ``` src/ ├── api/ # API 接口定义（按业务模块拆分） │ ├── customer.js # 客户相关 │ ├── workOrder.js # 工单相关 │ └── silentCustomer.js # 沉默客户相关 ├── components/ # 公共/业务组件 │ ├── common/ # 全局注册基础组件 │ └── business/ # 业务组件（按模块分目录） ├── layout/ # 布局组件（Sidebar/Navbar/AppMain） ├── router/ # 路由配置（单文件 index.js） ├── store/ # Vuex store（自动加载 modules） ├── styles/ # 全局 SCSS 样式 │ ├── variables.scss # SCSS 变量 │ └── index.scss # 全局样式入口 ├── utils/ # 工具函数 │ ├── request.js # Axios 封装 │ └── directives.js # 自定义指令（权限等） ├── views/ # 页面级组件（按菜单结构分目录） │ └── customerMarketing/ │ ├── SilentCustomer/ # 沉默客户池 │ │ └── index.vue │ └── WorkOrder/ # 电销工单 │ ├── index.vue │ └── Detail.vue ├── main.js # 应用入口 ├── permission.js # 路由守卫 └── settings.js # 应用配置 ``` --- ## 🎨 前端开发规范 ### 1. 页面开发模式 #### 模式 A：配置式列表页（推荐） 适用于数据列表+筛选+分页的场景： ```vue ``` #### 模式 B：自定义详情页 适用于表单编辑、复杂交互的详情页： ```vue ``` ### 2. API 封装规范 **统一使用命名导出模式**： ```javascript // src/api/silentCustomer.js import request from '@/utils/request' /** * 查询沉默客户列表 * @param {Object} data - 查询参数 */ export function querySilentCustomerList(data) { return request({ url: '/api/customer/silent/list', method: 'post', data }) } /** * 批量转派沉默客户 * @param {Object} data - { customerIds: [], assigneeId: '' } */ export function transferCustomers(data) { return request({ url: '/api/customer/silent/transfer', method: 'post', data }) } /** * 查询工单详情 * @param {string} id - 工单ID */ export function getWorkOrderDetail(id) { return request({ url: `/api/work-order/${id}`, method: 'get' }) } ``` ### 3. 国际化规范 **所有用户可见文本必须使用 `$i18n()`**： ```javascript // 正确 // 错误 ``` **key 命名规范**： - 页面标题：`page.xxx` - 按钮：`btn.xxx` - 表单字段：`field.xxx` / `form.xxx` - 表格列：`column.xxx` - 筛选条件：`filter.xxx` - 提示信息：`msg.xxx` - 确认框：`confirm.xxx` ### 4. 权限控制规范 **按钮权限**： ```vue 转派 转派 ``` **页面权限**： - 路由守卫仅设置标题，不做登录校验 - 实际权限由后端接口控制 - 前端路由全部静态注册 ### 5. 路由添加规范 ```javascript // src/router/index.js { path: '/customer-marketing/silent-customer', component: Layout, children: [ { path: '', name: 'SilentCustomer', component: () => import('@/views/customerMarketing/SilentCustomer/index'), meta: { title: $i18n({ key: 'page.silentCustomer', desc: '沉默客户池' }), icon: 'customer' } } ] } ``` --- ## 🔧 后端开发规范 ### 1. 分层架构 ``` controller/ # 表现层：处理HTTP请求和响应 service/ # 业务逻辑层：实现业务逻辑 mapper/ # 数据访问层：MyBatis Mapper接口 entity/ # 模型层：实体类 ``` ### 2. Controller 规范 ```java @RestController @RequestMapping("/api/customer") public class SilentCustomerController { @Autowired private SilentCustomerService silentCustomerService; /** * 查询沉默客户列表 */ @PostMapping("/silent/list") public Result> queryList(@RequestBody SilentCustomerQueryDTO query) { return Result.success(silentCustomerService.queryList(query)); } /** * 批量转派客户 */ @PostMapping("/silent/transfer") public Result transfer(@RequestBody TransferDTO dto) { silentCustomerService.transfer(dto); return Result.success(); } } ``` ### 3. Service 规范 ```java @Service public class SilentCustomerServiceImpl implements SilentCustomerService { @Autowired private SilentCustomerMapper silentCustomerMapper; @Override public PageResult queryList(SilentCustomerQueryDTO query) { // 业务逻辑处理 PageHelper.startPage(query.getPage(), query.getLimit()); List list = silentCustomerMapper.selectList(query); return PageResult.of(list); } @Override @Transactional(rollbackFor = Exception.class) public void transfer(TransferDTO dto) { // 转派逻辑：创建工单 + 更新客户跟进人 // 事务控制 } } ``` ### 4. 接口返回规范 ```java public class Result { private Integer code; // 200成功，其他失败 private String message; private T data; public static Result success(T data) { Result result = new Result<>(); result.setCode(200); result.setData(data); return result; } public static Result error(String message) { Result result = new Result<>(); result.setCode(500); result.setMessage(message); return result; } } ``` ### 5. 数据库设计规范 **必须字段**（所有表）： ```sql `remark` VARCHAR(200) NOT NULL DEFAULT '' COMMENT '系统备注', `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `edit_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '编辑时间', `delete_flag` tinyint(4) NOT NULL DEFAULT '0' COMMENT '是否删除 0未删除 1已删除' ``` **表名命名**：小写下划线分隔，如 `silent_customer`、`work_order`、`follow_up_record` **索引命名**：`idx_` 前缀，如 `idx_customer_name` --- ## 🔒 安全规范 ### 前端 - 按钮权限必须使用 `v-btn-permission` - 敏感数据（手机号）显示需遵循脱敏规则 - 所有请求自动注入 Token + 签名 ### 后端 - 接口前缀规范： - `/api/`：前端调用（需鉴权） - `/feign/`：微服务内部调用（禁止外部访问） - `/job/`：定时任务（禁止外部访问） - 参数校验：使用 `@Valid` + DTO 注解 - SQL 注入防护：使用 MyBatis 参数化查询 --- ## 🧪 测试规范 ### 前端 ```javascript // Jest + Vue Test Utils describe('SilentCustomerList', () => { it('should render columns correctly', () => { // 测试列渲染 }) it('should handle transfer button click', () => { // 测试转派按钮 }) }) ``` ### 后端 ```java @SpringBootTest class SilentCustomerServiceTest { @Autowired private SilentCustomerService silentCustomerService; @Test void shouldQueryListSuccessfully() { SilentCustomerQueryDTO query = new SilentCustomerQueryDTO(); query.setPage(1); query.setLimit(20); PageResult result = silentCustomerService.queryList(query); assertNotNull(result); assertTrue(result.getList().size() > 0); } } ``` --- ## 🚀 快速入口 ``` "CRM开发" → Vue 2 + Element UI + Java 全栈开发规范 "Vue 2列表页" → 配置式 SearchListPage 开发指南 "Element UI表单" → 详情页表单开发规范 "Java后端接口" → Controller/Service/Mapper 分层规范 "全栈开发规范" → 完整的前后端标准化开发流程 "中后台系统开发" → 企业级中后台系统开发最佳实践 "工单系统开发" → 工单CRUD + 状态管理 + 跟进记录 "客户管理系统开发" → 客户池 + 筛选 + 转派 + 评分 ``` --- ## 🆚 与现有 Skill 的关系 | Skill | 关系 | 协作方式 | |-------|------|---------| | **web-artifacts-builder** | 替代 | 本 Skill 更贴合 Vue 2 + Element UI 实际项目，`web-artifacts-builder` 面向 React 技术栈 | | **database-designer** | 前置 | `database-designer` 设计表结构，本 Skill 执行前后端开发 | | **api-doc-generator** | 前置 | `api-doc-generator` 生成接口文档，本 Skill 按文档实现接口 | | **frontend-code-review** | 后置 | 本 Skill 编码完成后，用 `frontend-code-review` 审查 Vue 代码质量 | | **backend-change-flow** | 互补 | 后端变更时，用 `backend-change-flow` 规范变更流程 | | **git-commit** | 协同 | 本 Skill 遵循项目的 Conventional Commits 规范 | | **testing-patterns** | 互补 | 本 Skill 编码，用 `testing-patterns` 设计测试策略 | --- > "在企业级开发中，一致性比创新性更重要。每个开发者写出的代码，应该像是一个人写的。"