Django使用Layui框架,静态文件 (js,css,image等)404 无法访问,问题汇总及解决办法!

问题重现

基于layui框架开发的页面在vscode可正常打开,但将整个前端代码放进django项目中,样式丢失

  • 出现样式无法加载后,首先应该做如下操作:

1.在.html文件中第一行加上 {% load static %}

{% load static %}
<html>
<head>
    <meta charset="utf-8">

2.引用了静态资源的代码里这样引用{% static ’ #原始路径’ %}

<link rel="stylesheet" href="{% static 'lib/layui-v2.5.5/css/layui.css' %}" media="all">

3.settings文件设置

# STATIC_URL是浏览器访问接口,django遇到/static/就去STATICFILE_DIRS里面的路径查找文件,
你也可以写成/xxx/,访问的时候以xxx开头就行
STATIC_URL = '/static/'

#静态文件的搜索路径,如url地址为127.0.0.1:80/static/xx/xxx.file,
系统自动在这个配置路径目录下,依次查找文件
STATICFILES_DIRS = [
    BASE_DIR / 'static',
    BASE_DIR / 'static/css',
    BASE_DIR / 'templates',
    BASE_DIR / 'templates/page',
    BASE_DIR / 'static/images',
    BASE_DIR / 'static/js',
    BASE_DIR / 'static/lib',
    #上面是我故意写这么多,自己根据需要写
]
  • 做完上面几步,基本上问题都会解决,可仍然还有些棘手的问题,具体如下:

1.按照Django静态文件需要分离原则,我创建了static文件夹也配置了settings文件,结果仍然无法加载样式,下面是具体问题。

报错代码:
<link rel="stylesheet" href="{%  static 'css/layuimini.css?v=2.0.0.1' %}" media="all">
报错:
"GET /static/css/layuimini.css%3Fv%3D2.0.0.1 HTTP/1.1" 404 1844

一直报错404,说css/layuimini.css找不到,路径绝对没问题
最后发现layuimini.css?v=2.0.0.1中的?和=被自动转义成 %3F 和 %3D,删除?v=2.0.0.1部分后,正常显示。
如有更好的办法,请回复。

总结:
django的html文件中使用{% static ’ 路径’ %}方法,路径不能包含?= 等特殊字符,找了半天没有解决方案,我直接给这部分删除了。

2.如果有json文件,那么里面的路径也要加上static,他会自己去STATICFILES_DIRS中查找文件

原文件无法访问
"homeInfo": {
        "title": "首页",
        "href": "page/huiyuanguanli.html"
    },
添加static后可以访问
"homeInfo": {
        "title": "首页",
        "href": "static/page/huiyuanguanli.html"
    },

3.Layui的表格里的url用{% static ‘路径’%}方法无效,直接加static即可

table.render({
            elem: '#currentTableId',
            url: 'static/api/dingdan_info.json',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [{
                    type: "checkbox",
                    width: 50
                }, {
                    field: 'id',
                    width: 80,
                    title: 'ID',
                    sort: true
                }]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

你可能感兴趣的:(Django静态资源无法加载,django,html,layui,python)