基础模板

桌面版

移动版

介绍

基础模板提供了一个通用、简单但功能强大的模板，用于在 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 数据库无缝集成，方便轻松连接和与 Neo4j 交互。ConnectionModal 组件使用户能够连接或断开其 Neo4j 实例，如果连接失败，则会提供有关连接状态的错误反馈。

连接模态用法

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