Foundation 模板

桌面

移动端

简介

Foundation 模板提供了一个通用、简洁且强大的模板，用于在您的 Neo4j 数据库之上开发应用程序。它具备简洁直观的布局，包括侧导航栏、中心内容区域以及用于连接或断开 Neo4j 实例的连接模态框。

在线预览链接

模板代码链接

先决条件

确保在您的项目中已安装 @neo4j-ndl 库，以使用此 Foundation 模板。

此模板使用了共享文件夹中的以下组件和工具，请确保已导入它们

共享组件文件夹中的 Header 组件。
共享组件文件夹中的 ConnectionModal 组件。
共享 utils 文件夹中的 Driver 工具。

文档

布局结构

模板结构以 Home.tsx 组件为核心，包含 Header 和 PageLayout 组件。PageLayout 进一步将页面划分为 SideNav 和 Content 区块，为应用开发提供了完整的环境。

该布局采用响应式设计，确保在各种设备和屏幕尺寸下都能提供流畅的用户体验。

代码片段

以下是 Content.tsx 中自动连接功能的代码片段

useEffect(() => {
  if (!init) {
    let session = localStorage.getItem('needleStarterKit-neo4j.connection');
    if (session) {
      let neo4jConnection = JSON.parse(session);
      setDriver(neo4jConnection.uri, neo4jConnection.user, neo4jConnection.password)
        .then((isSuccessful: boolean) => {
          setConnectionStatus(isSuccessful);
        });
    }
    setInit(true);
  }
});

此代码片段展示了在 SideNav.tsx 中设置侧导航栏的示例

<SideNavigation iconMenu={true} expanded={expanded} {...expandedChangeProp}>
  <SideNavigation.List>
    <SideNavigation.Item
      href='#'
      selected={selected === 'search'}
      onClick={handleClick('search')}
      icon={<MagnifyingGlassIconOutline className={fullSizeClasses} />}
    >
      Search
    </SideNavigation.Item>
    // Additional navigation items...
  </SideNavigation.List>
</SideNavigation>

与 Neo4j 的集成

StarterKit 旨在与 Neo4j 数据库无缝集成，便于轻松连接和交互。ConnectionModal 组件使用户能够连接或断开其 Neo4j 实例，如果连接未成功，会提供错误反馈。

连接模态框使用方法

<ConnectionModal
  open={openConnection}
  setOpenConnection={setOpenConnection}
  setConnectionStatus={setConnectionStatus}
/>