基于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'
});