当前位置：首页 > news >正文

Remult项目实战：如何从零构建企业级CRM系统的完整流程

news 2026/5/24 16:49:50

Remult项目实战：如何从零构建企业级CRM系统的完整流程

【免费下载链接】remultFull-stack CRUD, simplified, with SSOT TypeScript entities项目地址: https://gitcode.com/gh_mirrors/re/remult

在当今快速发展的商业环境中，企业级CRM系统已成为提升客户关系管理和业务效率的关键工具。Remult作为一个现代化的全栈CRUD框架，以其简洁的TypeScript实体作为单一数据源，为企业级CRM系统开发提供了革命性的解决方案。本文将为您展示如何使用Remult从零开始构建一个功能完整的企业级CRM系统，涵盖从架构设计到部署上线的完整流程。

🚀 为什么选择Remult构建CRM系统？

Remult通过TypeScript实体作为单一数据源，实现了前后端代码的完美统一。这意味着您只需定义一次数据模型，即可同时获得：

✅ 完整的CRUD API和实时查询端点
✅ 前端类型安全的API客户端
✅ 后端ORM功能

Remult的现代化开发架构：浏览器、开发服务器、Node.js服务器和数据库的清晰分层

📋 企业级CRM系统核心功能规划

一个完整的企业级CRM系统通常需要以下核心模块：

1. 联系人管理模块

客户基本信息存储和管理
联系方式追踪（电话、邮箱、地址）
客户分类和标签系统
互动历史记录

2. 公司管理模块

公司基本信息管理
行业分类和规模标识
关联联系人管理

3. 交易管理模块

销售机会追踪
交易阶段管理
预期收益分析

4. 任务和活动管理

待办事项和提醒
会议安排
跟进计划

🛠️ 实战步骤：构建CRM系统

第一步：项目初始化与架构设计

首先，创建一个新的Remult项目：

npx create-remult@latest crm-system

选择适合的技术栈：

前端框架：React、Vue、Angular或Next.js
后端适配器：Express、Fastify或Hono
数据库：PostgreSQL、MySQL或SQLite

第二步：定义CRM核心数据模型

在shared/目录下创建CRM系统的核心实体。让我们从联系人实体开始：

// shared/Contact.entity.ts import { Entity, Fields, Relations, Validators } from 'remult' @Entity('contacts', { allowApiCrud: true, defaultOrderBy: { lastName: 'asc' } }) export class Contact { @Fields.id() id?: string @Fields.string({ validate: Validators.required }) firstName = '' @Fields.string({ validate: Validators.required }) lastName = '' @Fields.string({ validate: Validators.required }) email = '' @Fields.string() phone = '' @Fields.string() companyId = '' @Fields.date() lastContactDate = new Date() @Relations.toOne(() => Company, 'companyId') company?: Company }

第三步：实现公司实体和关联关系

// shared/Company.entity.ts import { Entity, Fields, Relations } from 'remult' @Entity('companies', { allowApiCrud: true }) export class Company { @Fields.id() id?: string @Fields.string() name = '' @Fields.string() industry = '' @Fields.number() employeeCount = 0 @Relations.toMany(() => Contact) contacts?: Contact[] }

第四步：构建交易管理实体

// shared/Deal.entity.ts import { Entity, Fields, Relations } from 'remult' @Entity('deals', { allowApiCrud: true }) export class Deal { @Fields.id() id?: string @Fields.string() title = '' @Fields.number() amount = 0 @Fields.string() stage = 'prospecting' // prospecting, qualification, proposal, negotiation, closed @Fields.string() contactId = '' @Fields.date() expectedCloseDate = new Date() @Relations.toOne(() => Contact, 'contactId') contact?: Contact }

第五步：配置后端API服务器

在server/目录中配置Remult API：

// server/api.ts import express from 'express' import { remultApi } from 'remult/remult-express' import { createPostgresDataProvider } from 'remult/postgres' import { Contact, Company, Deal } from '../shared/' const app = express() app.use(express.json()) app.use( '/api', remultApi({ entities: [Contact, Company, Deal], dataProvider: createPostgresDataProvider({ connectionString: process.env.DATABASE_URL }) }) ) app.listen(3000, () => { console.log('CRM系统API服务器已启动在端口3000') })

第六步：实现前端CRM界面

使用您选择的前端框架构建用户界面。以下是React示例：

// frontend/components/ContactList.tsx import { useEffect, useState } from 'react' import { repo } from 'remult' import { Contact } from '../shared/Contact.entity' export function ContactList() { const [contacts, setContacts] = useState<Contact[]>([]) const [loading, setLoading] = useState(true) useEffect(() => { repo(Contact) .find({ include: { company: true }, orderBy: { lastName: 'asc' } }) .then(setContacts) .finally(() => setLoading(false)) }, []) return ( <div className="contact-list"> <h2>联系人管理</h2> {loading ? ( <p>加载中...</p> ) : ( <table> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>电话</th> <th>公司</th> <th>最后联系</th> </tr> </thead> <tbody> {contacts.map(contact => ( <tr key={contact.id}> <td>{contact.firstName} {contact.lastName}</td> <td>{contact.email}</td> <td>{contact.phone}</td> <td>{contact.company?.name}</td> <td>{contact.lastContactDate.toLocaleDateString()}</td> </tr> ))} </tbody> </table> )} </div> ) }

基于Remult构建的CRM系统界面示例，展示联系人管理功能

🔧 高级功能实现

1. 实时数据同步

Remult内置的实时查询功能让CRM系统数据实时更新：

// 实时监控联系人变化 useEffect(() => { return repo(Contact) .liveQuery({ where: { status: 'active' } }) .subscribe((info) => { setContacts(info.applyChanges) }) }, [])

2. 数据验证和业务规则

在实体定义中统一设置验证规则：

@Fields.string<Contact>({ validate: (contact) => { if (!contact.email.includes('@')) { return '请输入有效的邮箱地址' } } }) email = '' @Fields.number<Deal>({ validate: (deal) => { if (deal.amount <= 0) { return '交易金额必须大于0' } } }) amount = 0

3. 权限控制和数据安全

@Entity<Contact>('contacts', { allowApiRead: true, allowApiInsert: Allow.authenticated, allowApiUpdate: (contact) => { // 只有创建者或管理员可以修改 return contact.createdBy === remult.user.id || remult.isAllowed('admin') }, apiPrefilter: () => { // 普通用户只能看到自己的联系人 if (!remult.isAllowed('admin')) { return { createdBy: remult.user.id } } return {} } })