全部栏目

首页 操作系统 后端开发 数据库 前端开发 移动端开发
您的当前位置：首页正文

【Django】引入js等静态文件

2024-11-11 来源：个人技术集锦

创建静态目录-app目录/static/app名称

html模板引入静态资源

{% load static %}
<!doctype html>
<html lang="zh-CN">
    <head>
        <!-- 必须的 meta 标签 -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap 的 CSS 文件 -->
        <link rel="stylesheet" href="{% static "antapp/bootstrap/bootstrap.min.css" %}">
        <title>Hello, world!</title>
    </head>
    <body>
        <h1>Hello, world!</h1>

        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
        <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

        <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
        <script src="{% static "antapp/bootstrap/jquery.min.js" %}"></script>
        <script src="{% static "antapp/bootstrap/bootstrap.bundle.min.js" %}"></script>

    </body>
</html>

写views

def jstest(request):
    return render(request,"jstest.html",{})

写urls

urlpatterns = [
    path("jstest/",views.jstest),
]

运行调试
显示全文