基础模板

桌面 移动端
FeaturedFoundation
FeaturedFoundationMobile

介绍

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

实时预览链接

模板代码链接

先决条件

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

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

  • 共享组件文件夹中的 Header 组件。

  • 共享组件文件夹中的 ConnectionModal 组件。

  • 共享 utils 文件夹中的 Driver 实用工具。

文档

布局架构

FoundationArchitecture

模板结构以 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 集成

入门套件旨在与 Neo4j 数据库无缝集成，方便与 Neo4j 建立连接和进行交互。ConnectionModal 组件使用户能够连接或断开与 Neo4j 实例的连接，并在连接失败时提供连接状态的错误反馈。

连接模态框使用方法
<ConnectionModal
  open={openConnection}
  setOpenConnection={setOpenConnection}
  setConnectionStatus={setConnectionStatus}
/>
© . All rights reserved.