以下是一个基于Django的远程主机管理系统的HTML内容示例,涵盖登录、主页、主机列表、添加主机等页面:

  1. 登录页面 (login.html):
<!DOCTYPE html>
<html>
<head>
    <title>远程主机管理系统 - 登录</title>
</head>
<body>
    <h1>远程主机管理系统 - 登录</h1>
    <form method="post" action="{% url 'login' %}">
        {% csrf_token %}
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required><br><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>
  1. 主页 (home.html):
<!DOCTYPE html>
<html>
<head>
    <title>远程主机管理系统 - 主页</title>
</head>
<body>
    <h1>远程主机管理系统 - 主页</h1>
    <p>欢迎, {{ username }}!</p>
    <ul>
        <li><a href="{% url 'host_list' %}">主机列表</a></li>
        <li><a href="{% url 'add_host' %}">添加主机</a></li>
        <li><a href="{% url 'logout' %}">退出</a></li>
    </ul>
</body>
</html>
  1. 主机列表页面 (host_list.html):
<!DOCTYPE html>
<html>
<head>
    <title>远程主机管理系统 - 主机列表</title>
</head>
<body>
    <h1>远程主机管理系统 - 主机列表</h1>
    <table>
        <tr>
            <th>主机名</th>
            <th>IP地址</th>
            <th>操作</th>
        </tr>
        {% for host in host_list %}
        <tr>
            <td>{{ host.hostname }}</td>
            <td>{{ host.ip_address }}</td>
            <td><a href="{% url 'edit_host' host.id %}">编辑</a> | <a href="{% url 'delete_host' host.id %}">删除</a></td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>
  1. 添加主机页面 (add_host.html):
<!DOCTYPE html>
<html>
<head>
    <title>远程主机管理系统 - 添加主机</title>
</head>
<body>
    <h1>远程主机管理系统 - 添加主机</h1>
    <form method="post" action="{% url 'add_host' %}">
        {% csrf_token %}
        <label for="hostname">主机名:</label>
        <input type="text" id="hostname" name="hostname" required><br><br>
        <label for="ip_address">IP地址:</label>
        <input type="text" id="ip_address" name="ip_address" required><br><br>
        <input type="submit" value="添加">
    </form>
</body>
</html>

这些HTML模板将根据你的Django应用程序的具体需求和URL配置进行调整和扩展。


原文地址: https://www.cveoy.top/t/topic/pRky 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录