发布于 2026-01-06 0 阅读
0

新拟物化用户界面 - 使用两种 Python 框架编写:Flask 和 Django

新拟物化用户界面 - 使用两种 Python 框架编写:Flask 和 Django

各位程序员朋友们,大家好!

本文介绍了两个基于Neumorphism UI Kit (免费版)的开源 Web 应用程序,它们分别使用Flask 和 Django 这两个流行且广泛使用的 Web 框架编写。

感谢阅读! - 内容由App Generator提供


这两个应用都以 MIT 许可证发布在 GitHub 上。如果您时间紧迫,我会在下面提供相关链接:


拟物化用户界面- 英雄区域

新拟物化用户界面 - Flask 版本,英雄区域。


新拟物化用户界面- 行动号召组件

新拟物化用户界面 - Flask 版本,行动号召示例组件。


新拟物化用户界面- 与地图控件的接触

新拟物化用户界面 - Flask 版本,带有地图控件的联系人。


拟物化设计

新拟物化设计融合了当前流行的扁平化用户界面和经典的拟物化设计(又称苹果风格)原则!组件底部带有深色阴影,顶部带有浅色阴影;两者结合,营造出元素仿佛要从屏幕中跃然而出的效果——定义来源:设计趋势:新拟物化设计

一些链接:


Flask 新拟物化 UI

该应用采用极其简洁的代码库编写,运用了蓝图应用工厂模式。MIT 许可证允许无限复制,并可作为业余或商业项目发布。需要移除页脚版权信息?没问题,您可以添加自己的链接。

应用链接

如果您的工作站安装了 Python3 和 Git 命令行工具,则可以轻松构建此应用程序。要查看此 Flask 入门示例在浏览器中的运行情况,只需按照README文件中的说明进行操作即可

新拟物化用户界面 - Flask 版本,注册页面。


Django 新拟物化 UI 套件

Django 版本使用相同的超简单代码库,并增强了身份验证、数据库工具以及 Docker 和 Nginx/Gunicorn 堆栈的部署脚本。

应用链接

新拟物化用户界面 - Django 版本,示例页面。


代码库结构

该项目采用如下所示的简单直观的结构进行编码:

< PROJECT ROOT >
   |
   |-- core/                               # Implements app logic and serve the static assets
   |    |-- settings.py                    # Django app bootstrapper
   |    |-- wsgi.py                        # Start the app in production
   |    |-- urls.py                        # Define URLs served by all apps/nodes
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/                     # Templates used to render pages
   |         |
   |         |-- includes/                 # HTML chunks and components
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Scripts common to all pages
   |         |
   |         |-- layouts/                  # Master pages
   |         |    |-- base-fullscreen.html # Used by Authentication pages
   |         |    |-- base.html            # Used by common pages
   |         |
   |         |-- accounts/                 # Authentication pages
   |         |    |-- login.html           # Login page
   |         |    |-- register.html        # Register page
   |         |
   |      index.html                       # The default page
   |     page-404.html                     # Error 404 page
   |     page-500.html                     # Error 404 page
   |       *.html                          # All other HTML pages
   |
   |-- authentication/                     # Handles auth routes (login and register)
   |    |
   |    |-- urls.py                        # Define authentication routes  
   |    |-- views.py                       # Handles login and registration  
   |    |-- forms.py                       # Define auth forms  
   |
   |-- app/                                # A simple app that serve HTML files
   |    |
   |    |-- views.py                       # Serve HTML pages for authenticated users
   |    |-- urls.py                        # Define some super simple routes  
   |
   |-- requirements.txt                    # Development modules - SQLite storage
   |
   |-- .env                                # Inject Configuration via Environment
   |-- manage.py                           # Start the app - Django default start script
   |
   |-- ************************************************************************
Enter fullscreen mode Exit fullscreen mode

引导流程

  • Django引导程序manage.py使用core/settings.py以下主要配置文件
  • core/settings.py.env从文件中加载应用程序的魔法
  • 将访客用户重定向到登录页面
  • 为已认证用户解锁应用节点提供的页面

感谢阅读!更多资源,请访问:

文章来源:https://dev.to/sm0ke/neumorphism-ui-coded-in-two-python-flavors-flask-and-django-he9