django2.0导入外部css和js jquery

最新推荐文章于 2021-08-03 19:08:57 发布

wangyan_z

最新推荐文章于 2021-08-03 19:08:57 发布

阅读量2.8k

点赞数

分类专栏： python3.6

本文链接：https://blog.csdn.net/wangyan_z/article/details/81462343

版权

python3.6 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在做一个django项目。导入外部css和js文件时，发现各种导入无效问题。记录一下。

1、新建一个static文件夹，与app同目录下。我的app名为demo

2、在settings.py下添加路径


STATIC_URL = '/static/'
STATICFILES_DIRS=(
    os.path.join(BASE_DIR,'static'),  #注意括号后面的还有个逗号
)

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')

3、在settings.py文件里看到如下添加：

4、在添加外部css和js文件之前，需要先在html页面load 上面的staticfiles 。具体写法参考如下：

<head>
    <title>Event Delegation Tests</title>
    {%load staticfiles%}        <!--需要添加load staticfiles-->
    <link rel="stylesheet" href="{% static 'css/div.css' %}">    <!--引入使用的css文件-->
    {%block css%}
    {%endblock css%}       <!--在子模板添加css文件方式-->


</head>

<body>


   <script src="{% static 'jquery/src/jquery.js' %}"></script>     <!--引入jquery库。必须放在js文件最前面，避免子模板出现$is not defined问题-->
    {%block js%}
    {%endblock js%}     <!--在子模板添加js文件方式-->
</body>

5、子模板导入方式（load 和block js文件和添加script头部尾部），参考如下:

{% extends "./baset.html"%}
{%load staticfiles%}
{%block css%}
<style></style>      <!--或外部css文件-->
{%endblock css%}
{%block js%}
<!--script之前加如下-->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!--script-->
<script src="{% static 'jquery/src/jquery.js' %}"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.get("{% url 'test' %}",function(data){
                alert("dssaf"+data.data)
            });

        });

        $.ajaxSetup({
            data: {csrfmiddlewaretoken:'{{ csrf_token }}'},
        });
        
        $('branchId').change(function(){
            var branch_name = $("#branchId").find("option:selected").Text();
            $.ajax({
                type:"GET",
                data:{"branch_name":branch_name},
                url:"{% url 'test' %}",
                cache:false,
                dataType:json,
                success:function(teList){
                    alert(teList);
                },
                error:function(){
                    alert('false');
                }

            });

        });
    });
</script>   
<!--script之后加如下-->
<script>if (window.module) module = window.module;</script>
{%endblock js%}

6、每个人遇到的情况都可能不一样，添加在线jquery库感觉还是比较稳妥的。如上注释部分

造成is not defined的情况可能是jquery库还没有加载进来，就开始使用（这种情况下，一般在chorm上可以看到jquery的路径，说明路径添加没有问题的）。或者有可能版本没有对齐。

wangyan_z

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
django2.0导入外部css和js jquery

在做一个django项目。导入外部css和js文件时，发现各种导入无效问题。记录一下。1、新建一个static文件夹，与app同目录下。我的app名为demo 2、在settings.py下添加路径STATIC_URL = '/static/'STATICFILES_DIRS=( os.path.join(BASE_DIR,'static'), #注意...
复制链接

扫一扫