零基础构建档案管理系统：技术架构设计详解与主流开发工具推荐

// 档案列表组件示例
class DocumentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      documents: [],
      loading: true
    };
  }

  // 组件挂载后获取数据
  componentDidMount() {
    this.fetchDocuments();
  }

  // 获取档案列表
  async fetchDocuments() {
    try {
      const response = await fetch('/api/documents');
      const data = await response.json();
      this.setState({ 
        documents: data,
        loading: false 
      });
    } catch (error) {
      console.error('获取档案列表失败:', error);
      this.setState({ loading: false });
    }
  }

  render() {
    if (this.state.loading) {
      return 
加载中...
;
    }

    return (
      

        {this.state.documents.map(doc => (
          
        ))}
      
    );
  }
}

// 档案服务层示例
public class DocumentService : IDocumentService
{
    private readonly IDocumentRepository _documentRepository;
    
    public DocumentService(IDocumentRepository documentRepository)
    {
        _documentRepository = documentRepository;
    }
    
    // 获取档案详情
    public async Task GetDocumentAsync(int id)
    {
        var document = await _documentRepository.GetByIdAsync(id);
        if (document == null)
        {
            throw new NotFoundException("档案不存在");
        }
        
        return new DocumentDto
        {
            Id = document.Id,
            Title = document.Title,
            Category = document.Category,
            CreateTime = document.CreateTime,
            FileSize = document.FileSize
        };
    }
    
    // 上传档案文件
    public async Task UploadDocumentAsync(IFormFile file, string category)
    {
        // 验证文件类型和大小
        ValidateFile(file);
        
        // 保存文件到存储系统
        var filePath = await SaveFileAsync(file);
        
        // 创建档案记录
        var document = new Document
        {
            Title = Path.GetFileNameWithoutExtension(file.FileName),
            FileName = file.FileName,
            FilePath = filePath,
            Category = category,
            FileSize = file.Length,
            CreateTime = DateTime.Now
        };
        
        await _documentRepository.AddAsync(document);
        return document;
    }
}

-- 创建档案表
CREATE TABLE Documents (
    Id INT PRIMARY KEY IDENTITY(1,1),
    Title NVARCHAR(255) NOT NULL,
    FileName NVARCHAR(255) NOT NULL,
    FilePath NVARCHAR(500) NOT NULL,
    Category NVARCHAR(100) NOT NULL,
    FileSize BIGINT NOT NULL,
    Description NVARCHAR(1000),
    CreateTime DATETIME2 NOT NULL DEFAULT GETDATE(),
    UpdateTime DATETIME2 NOT NULL DEFAULT GETDATE(),
    IsDeleted BIT NOT NULL DEFAULT 0
);

-- 创建分类索引提高查询性能
CREATE INDEX IX_Documents_Category 
ON Documents(Category) 
WHERE IsDeleted = 0;

-- 创建档案元数据表
CREATE TABLE DocumentMetadata (
    Id INT PRIMARY KEY IDENTITY(1,1),
    DocumentId INT NOT NULL,
    MetaKey NVARCHAR(100) NOT NULL,
    MetaValue NVARCHAR(500) NOT NULL,
    FOREIGN KEY (DocumentId) REFERENCES Documents(Id)
);

/* 使用BEM命名规范 */
.document-list {
  padding: 20px;
  background-color: #f8f9fa;
}

.document-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.document-list__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
}

.document-list__item {
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: #fff;
}

.document-list__item--selected {
  background-color: #e3f2fd;
  border-color: #2196f3;
}