Django后台侧边三级导航栏|极客教程

Django后台侧边三级导航栏

在开发web应用的过程中，侧边导航栏是一个非常重要的组件，它能够让用户快速导航到不同的页面和功能模块。在Django中，我们可以通过定制后台管理界面来实现一个侧边三级导航栏，让用户能够更加方便地管理后台数据。

1. 创建Django项目

首先，我们需要创建一个Django项目。打开命令行，执行以下命令：

django-admin startproject myproject
cd myproject

2. 创建Django应用

接着，我们需要创建一个Django应用。执行以下命令：

python manage.py startapp myapp

3. 编写功能视图

在Django应用中，我们可以编写不同的功能视图。这里，我们创建一个简单的视图，用于展示三级导航栏：

# myapp/views.py

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

4. 编写模板文件

在Django应用中，我们需要编写模板文件来展示页面内容。创建一个名为index.html的模板文件，包含三级导航栏的结构：

<!-- myapp/templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Side Navigation</title>
</head>
<body>

  <div class="sidenav">
    <a href="#">Dashboard</a>
    <button class="dropdown-btn">Products
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-container">
      <a href="#">Product 1</a>
      <a href="#">Product 2</a>
      <a href="#">Product 3</a>
    </div>
  </div>

  <div class="main">
    <!-- Main content goes here -->
  </div>

</body>
</html>

5. 编写静态文件

在Django项目中，我们可以将静态文件放到static目录下。为了使导航栏样式生效，我们需要创建一个CSS文件，定义导航栏的样式：

/* myapp/static/styles.css */

.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  border: none;
  background: none;
}

.main {
  margin-left: 200px;
  padding: 20px;
}

6. 配置URL路由

在Django项目中，我们需要配置URL路由，将视图和URL路径关联起来。打开urls.py文件，添加以下内容：

# myproject/urls.py

from django.urls import path
from myapp.views import index

urlpatterns = [
    path('', index, name='index'),
]

7. 运行Django项目

最后，我们可以运行Django项目，在浏览器中查看效果：

python manage.py runserver

打开浏览器，访问http://127.0.0.1:8000/，可以看到如下页面效果：

Dashboard
Products
- Product 1
- Product 2
- Product 3

通过以上步骤，我们成功创建了一个简单的Django后台侧边三级导航栏。用户可以通过点击不同的导航链接，快速切换到不同的页面和功能模块。开发者可以根据实际需求，扩展和定制导航栏的功能和样式。

Django后台侧边三级导航栏