基于 Django 与 Bootstrap 构建的现代化设备管理平台

整体步骤概览

1. 创建项目和应用
2. 设计模型（Model） - 定义设备的数据结构
3. 配置用户认证（Auth） - 使用 Django 自带的强大用户系统
4. 创建视图（View） - 处理业务逻辑：登录、列表、增删改查
5. 编写模板（Template） - 设计前端页面
6. 配置路由（URL） - 将 URL 映射到视图
7. 运行测试

---

第一步：创建项目和应用

# 1. 在合适的位置创建项目目录并进入
mkdir my_device_manager
cd my_device_manager

# 2. 创建虚拟环境（推荐）
python -m venv venv

# 3. 激活虚拟环境
# On Windows:
venv\Scripts\activate
# On macOS/Linux:
source venv/bin/activate

# 4. 安装 Django
pip install django

# 5. 创建Django项目，名为 `my_site`
django-admin startproject my_site .

# 6. 创建一个名为 `devices` 的应用来处理设备相关的功能
python manage.py startapp devices

# 7. 将新应用 `devices` 和 Django 自带的 `auth` 应用添加到设置中
# 编辑 my_site/settings.py

编辑 my_site/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth', # 用户认证系统
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'devices', # 添加你的应用
]

同时，在文件末尾配置数据库（默认使用 SQLite，无需修改即可用）和静态文件。

---

第二步：设计设备模型 (Model)

编辑 devices/models.py:

from django.db import models
from django.contrib.auth.models import User

class Device(models.Model):
    # 设备类型选择
    TYPE_CHOICES = (
        ('router', '路由器'),
        ('switch', '交换机'),
        ('server', '服务器'),
        ('pc', '个人电脑'),
        ('other', '其他'),
    )

    name = models.CharField(max_length=100, verbose_name="设备名称")
    ip_address = models.GenericIPAddressField(verbose_name="IP地址")
    type = models.CharField(max_length=20, choices=TYPE_CHOICES, default='other', verbose_name="设备类型")
    description = models.TextField(blank=True, null=True, verbose_name="设备描述")
    # 添加创建时间和更新时间
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
    updated_at = models.DateTimeField(auto_now=True, verbose_name="更新时间")
    # 将设备与用户关联（一个用户拥有多个设备）
    owner = models.ForeignKey(User, on_delete=models.CASCADE, related_name='devices', verbose_name="所属用户")

    def __str__(self):
        return f"{self.name} ({self.ip_address})"

    class Meta:
        verbose_name = "设备"
        verbose_name_plural = "设备"

创建数据库表:

# 生成迁移文件
python manage.py makemigrations
# 执行迁移，在数据库中创建表
python manage.py migrate

---

第三步：创建处理逻辑的视图 (View)

编辑 devices/views.py:

from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required
from django.contrib import messages
from .models import Device
from .forms import DeviceForm # 我们稍后会创建这个表单

def user_login(request):
    """用户登录视图"""
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            messages.success(request, f'欢迎回来，{username}！')
            return redirect('device_list')
        else:
            messages.error(request, '用户名或密码错误！')
    return render(request, 'registration/login.html')

@login_required
def user_logout(request):
    """用户登出视图"""
    logout(request)
    messages.info(request, '您已成功登出。')
    return redirect('user_login')

@login_required
def device_list(request):
    """设备列表视图，只显示当前用户的设备"""
    devices = Device.objects.filter(owner=request.user)
    return render(request, 'devices/device_list.html', {'devices': devices})

@login_required
def device_create(request):
    """创建设备视图"""
    if request.method == 'POST':
        form = DeviceForm(request.POST)
        if form.is_valid():
            new_device = form.save(commit=False)
            new_device.owner = request.user # 自动设置设备所有者為当前用户
            new_device.save()
            messages.success(request, f'设备 {new_device.name} 创建成功！')
            return redirect('device_list')
    else:
        form = DeviceForm()
    return render(request, 'devices/device_form.html', {'form': form, 'title': '添加新设备'})

@login_required
def device_update(request, pk):
    """更新设备视图"""
    device = get_object_or_404(Device, pk=pk, owner=request.user) # 确保用户只能修改自己的设备
    if request.method == 'POST':
        form = DeviceForm(request.POST, instance=device)
        if form.is_valid():
            form.save()
            messages.success(request, f'设备 {device.name} 更新成功！')
            return redirect('device_list')
    else:
        form = DeviceForm(instance=device)
    return render(request, 'devices/device_form.html', {'form': form, 'title': '编辑设备'})

@login_required
def device_delete(request, pk):
    """删除设备视图"""
    device = get_object_or_404(Device, pk=pk, owner=request.user)
    if request.method == 'POST':
        device_name = device.name
        device.delete()
        messages.success(request, f'设备 {device_name} 已删除。')
        return redirect('device_list')
    return render(request, 'devices/device_confirm_delete.html', {'device': device})

---

第四步：创建表单 (Form)

Django 的表单可以简化 HTML 表单的创建和验证。

创建 devices/forms.py:

from django import forms
from .models import Device

class DeviceForm(forms.ModelForm):
    class Meta:
        model = Device
        fields = ['name', 'ip_address', 'type', 'description']
        widgets = {
            'description': forms.Textarea(attrs={'rows': 4}),
        }
        labels = {
            'name': '设备名称',
            'ip_address': 'IP地址',
            'type': '设备类型',
            'description': '描述',
        }

---

第五步：设计前端页面 (Templates)

创建以下模板文件目录结构和内容。

1. 基础模板 devices/templates/base.html:

   <!DOCTYPE html>
   <html lang="zh">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>设备管理系统</title>
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
       <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
           <div class="container-fluid">
               <a class="navbar-brand" href="{% url 'device_list' %}">设备管理</a>
               <div class="navbar-nav ms-auto">
                   {% if user.is_authenticated %}
                       <span class="navbar-text me-3">你好，{{ user.username }}</span>
                       <form method="post" action="{% url 'user_logout' %}">
                           {% csrf_token %}
                           <button type="submit" class="btn btn-outline-light btn-sm">登出</button>
                       </form>
                   {% else %}
                       <a class="nav-link" href="{% url 'user_login' %}">登录</a>
                   {% endif %}
               </div>
           </div>
       </nav>
   
       <div class="container mt-4">
           <!-- 消息提示 -->
           {% if messages %}
               {% for message in messages %}
                   <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                       {{ message }}
                       <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                   </div>
               {% endfor %}
           {% endif %}
   
           <!-- 主要内容 -->
           {% block content %}
           {% endblock %}
       </div>
   
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
   </body>
   </html>

2. 登录页面 devices/templates/registration/login.html:

   {% extends 'base.html' %}
   
   {% block content %}
   <div class="row justify-content-center">
       <div class="col-md-6">
           <h2 class="mb-4">用户登录</h2>
           <form method="post">
               {% csrf_token %}
               <div class="mb-3">
                   <label for="username" class="form-label">用户名</label>
                   <input type="text" class="form-control" id="username" name="username" required>
               </div>
               <div class="mb-3">
                   <label for="password" class="form-label">密码</label>
                   <input type="password" class="form-control" id="password" name="password" required>
               </div>
               <button type="submit" class="btn btn-primary">登录</button>
           </form>
       </div>
   </div>
   {% endblock %}

3. 设备列表页 devices/templates/devices/device_list.html:

   {% extends 'base.html' %}
   
   {% block content %}
   <div class="d-flex justify-content-between align-items-center mb-4">
       <h2>我的设备列表</h2>
       <a href="{% url 'device_create' %}" class="btn btn-success">+ 添加新设备</a>
   </div>
   
   {% if devices %}
   <div class="table-responsive">
       <table class="table table-striped table-hover">
           <thead class="table-dark">
               <tr>
                   <th>设备名称</th>
                   <th>IP地址</th>
                   <th>类型</th>
                   <th>创建时间</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               {% for device in devices %}
               <tr>
                   <td>{{ device.name }}</td>
                   <td>{{ device.ip_address }}</td>
                   <td>{{ device.get_type_display }}</td>
                   <td>{{ device.created_at|date:"Y-m-d H:i" }}</td>
                   <td>
                       <a href="{% url 'device_update' device.pk %}" class="btn btn-sm btn-outline-primary">编辑</a>
                       <a href="{% url 'device_delete' device.pk %}" class="btn btn-sm btn-outline-danger">删除</a>
                   </td>
               </tr>
               {% endfor %}
           </tbody>
       </table>
   </div>
   {% else %}
   <div class="alert alert-info">您还没有添加任何设备。 <a href="{% url 'device_create' %}">点击添加</a></div>
   {% endif %}
   {% endblock %}

4. 设备表单页（创建/编辑共用） devices/templates/devices/device_form.html:

   {% extends 'base.html' %}
   
   {% block content %}
   <h2 class="mb-4">{{ title }}</h2>
   <form method="post">
       {% csrf_token %}
       {{ form.as_p }}
       <button type="submit" class="btn btn-primary">保存</button>
       <a href="{% url 'device_list' %}" class="btn btn-secondary">取消</a>
   </form>
   {% endblock %}

5. 删除确认页 devices/templates/devices/device_confirm_delete.html:

   {% extends 'base.html' %}
   
   {% block content %}
   <h2 class="mb-4">确认删除</h2>
   <p>你确定要删除设备 <strong>{{ device.name }}</strong> ({{ device.ip_address }}) 吗？此操作不可逆。</p>
   <form method="post">
       {% csrf_token %}
       <button type="submit" class="btn btn-danger">是的，删除</button>
       <a href="{% url 'device_list' %}" class="btn btn-secondary">取消</a>
   </form>
   {% endblock %}

---

第六步：配置路由 (URL)

1. 应用级路由 devices/urls.py (需要创建这个文件):

   from django.urls import path
   from . import views
   
   app_name = 'devices'
   
   urlpatterns = [
       path('', views.device_list, name='device_list'),
       path('login/', views.user_login, name='user_login'),
       path('logout/', views.user_logout, name='user_logout'),
       path('new/', views.device_create, name='device_create'),
       path('<int:pk>/edit/', views.device_update, name='device_update'),
       path('<int:pk>/delete/', views.device_delete, name='device_delete'),
   ]

2. 项目级路由 my_site/urls.py:

   from django.contrib import admin
   from django.urls import path, include
   
   urlpatterns = [
       path('admin/', admin.site.urls),
       path('', include('devices.urls')), # 将根路径指向 devices 应用的路由
   ]

---

第七步：运行测试

# 创建超级用户，用于登录后台和管理用户（可选，但推荐）
python manage.py createsuperuser
# 按照提示输入用户名、邮箱和密码

# 启动开发服务器
python manage.py runserver

1. 打开浏览器访问 http://127.0.0.1:8000
2. 你应该会被重定向到登录页面。你可以使用刚刚创建的超级用户登录。
3. 登录成功后，你会看到设备列表页（初始为空）。
4. 点击"添加新设备"进行测试。

功能清单验证：

· ✅ 用户登录/登出

· ✅ 设备列表显示（只显示当前用户的）

· ✅ 创建设备

· ✅ 编辑设备

· ✅ 删除设备（有确认提示）

这个系统已经具备了核心功能。你可以在此基础上继续扩展，比如添加更复杂的设备字段、实现搜索过滤、添加分页功能等。Django Admin 后台 (/admin) 也可以直接管理所有设备和用户数据。