【Django】引入js等静态文件

最新推荐文章于 2024-09-14 11:44:15 发布

WF文丰

最新推荐文章于 2024-09-14 11:44:15 发布

阅读量452

点赞数 4

分类专栏： Django 文章标签： django python 后端

本文链接：https://blog.csdn.net/xzzteach/article/details/140731224

版权

Django 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

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

在这里插入图片描述
static目录下一定要新建一个以app命名的文件夹（避免多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),
]

在这里插入图片描述

运行调试

在这里插入图片描述

WF文丰

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录