设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Python交流 › css和js加载问题
返回列表 发新帖
查看: 805|回复: 5

[已解决]css和js加载问题

[复制链接]
tengke
发表于 2023-12-29 16:49:51 | 显示全部楼层 |阅读模式
5鱼币
一下是 views.py的内容
def your_view(request):
    css_files = ['css/bootstrap.css',
                 'css/bootstrap.css.map',
                 'css/bootstrap-grid.css',
                 'css/bootstrap-grid.css.map',
                 'css/bootstrap-grid.min.css',
                 'css/bootstrap-grid.min.css.map',
                 'css/bootstrap-grid.rtl.css',
                 'css/bootstrap-grid.rtl.css.map',
                 'css/bootstrap-grid.rtl.min.css',
                 'css/bootstrap-grid.rtl.min.css.map',
                 'css/bootstrap.min.css',
                 'css/bootstrap.min.css.map',
                 'css/bootstrap-reboot.css',
                 'css/bootstrap-reboot.css.map',
                 'css/bootstrap-reboot.min.css',
                 'css/bootstrap-reboot.min.css.map',
                 'css/bootstrap-reboot.rtl.css',
                 'css/bootstrap-reboot.rtl.css.map',
                 'css/bootstrap-reboot.rtl.min.css',
                 'css/bootstrap-reboot.rtl.min.css.map',
                 'css/bootstrap.rtl.css',
                 'css/bootstrap.rtl.css.map',
                 'css/bootstrap.rtl.min.css',
                 'css/bootstrap.rtl.min.css.map',
                 'css/bootstrap-theme.css',
                 'css/bootstrap-theme.css.map',
                 'css/bootstrap-theme.min.css',
                 'css/bootstrap-theme.min.css.map',
                 'css/bootstrap-utilities.css',
                 'css/bootstrap-utilities.css.map',
                 'css/bootstrap-utilities.min.css',
                 'css/bootstrap-utilities.min.css.map',
                 'css/bootstrap-utilities.rtl.css',
                 'css/bootstrap-utilities.rtl.css.map',
                 'css/bootstrap-utilities.rtl.min.css',
                 'css/bootstrap-utilities.rtl.min.css.map',
                 'css/css404.css',
                 'css/css.css',
                 'css/eCommerceStyle.css',
                 'css/index.css',
                 'css/style404.css',
                 'css/style.css']
    return render(request, 'rootyongh.html', {'css_files': css_files})
def css_filejs(request):
    js_files = ['js/bootstrap.bundle.js',
                'js/bootstrap.bundle.js.map',
                'js/bootstrap.bundle.min.js',
                'js/bootstrap.bundle.min.js.map',
                'js/bootstrap.esm.js',
                'js/bootstrap.esm.js.map',
                'js/bootstrap.esm.min.js',
                'js/bootstrap.esm.min.js.map',
                'js/bootstrap.js',
                'js/bootstrap.js.map',
                'js/bootstrap.min.js',
                'js/bootstrap.min.js.map',
                'js/jquery-3.6.0.min.js',
                'js/jquery.js',
                'js/jquery.min.js',
                'js/npm.js',
                'js/vue.min.js']
    return render(request, 'rootyongh.html', {'js_files': js_files})

然后我在html界面这样写
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eCommerce template By Adobe Dreamweaver</title>

{% for css_file in css_files %}
    <link rel="stylesheet" href="{% static css_file %}">
{% endfor %}
{% for js_file in js_files %}
    <script src="{% static js_file %}"></script>
{% endfor %}
前台css和js没有加载 这个是为什么呢
最佳答案
月排行榜 / 总排行榜
不二如是
2023-12-29 16:49:52
从鱼油现有代码，可知CSS和JS文件在前端没有加载，可能的原因有几个：

  • 路径问题：确保 css_files 和 js_files 中的路径正确指向了静态文件夹中相应的CSS和JS文件。如果路径错误，文件将无法正确加载。
  • 模板上下文：确保在调用 render 函数时，正确传递了 css_files 和 js_files 到模板的上下文中。如果这些变量没有正确传递，模板将无法访问它们。
  • Django静态文件设置：检查Django项目的静态文件设置。确保在 settings.py 文件中正确设置了 STATIC_URL 和 STATICFILES_DIRS。
  • 模板渲染问题：确认 {% static css_file %} 和 {% static js_file %} 正确解析为静态文件的URL。如果Django模板引擎没有正确处理这些模板标签，静态文件将无法加载。
  • 浏览器缓存问题：有时浏览器缓存可能导致静态文件更新不显示。尝试清除浏览器缓存或使用无痕模式访问页面。
  • 服务器配置：如果您使用的是生产服务器，确保静态文件服务配置正确。

请一一排查～

最佳答案

不二如是

查看完整内容

从鱼油现有代码，可知CSS和JS文件在前端没有加载，可能的原因有几个： [*]路径问题：确保 css_files 和 js_files 中的路径正确指向了静态文件夹中相应的CSS和JS文件。如果路径错误，文件将无法正确加载。 [*]模板上下文：确保在调用 render 函数时，正确传递了 css_files 和 js_files 到模板的上下文中。如果这些变量没有正确传递，模板将无法访问它们。 [*]Django静态文件设置：检查Django项目的静态文件设置。确保在 sett ...
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2023-12-29 16:49:52 | 显示全部楼层    本楼为最佳答案   
从鱼油现有代码，可知CSS和JS文件在前端没有加载，可能的原因有几个：

  • 路径问题：确保 css_files 和 js_files 中的路径正确指向了静态文件夹中相应的CSS和JS文件。如果路径错误，文件将无法正确加载。
  • 模板上下文：确保在调用 render 函数时，正确传递了 css_files 和 js_files 到模板的上下文中。如果这些变量没有正确传递，模板将无法访问它们。
  • Django静态文件设置：检查Django项目的静态文件设置。确保在 settings.py 文件中正确设置了 STATIC_URL 和 STATICFILES_DIRS。
  • 模板渲染问题：确认 {% static css_file %} 和 {% static js_file %} 正确解析为静态文件的URL。如果Django模板引擎没有正确处理这些模板标签，静态文件将无法加载。
  • 浏览器缓存问题：有时浏览器缓存可能导致静态文件更新不显示。尝试清除浏览器缓存或使用无痕模式访问页面。
  • 服务器配置：如果您使用的是生产服务器，确保静态文件服务配置正确。

请一一排查～
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2023-12-29 16:50:03 | 显示全部楼层
首先，从你提供的代码来看，你在`your_view`函数和`css_filejs`函数中都没有给`css_files`和`js_files`变量赋值。这将导致在渲染模板时，这两个变量为空。

要解决这个问题，你需要在这两个函数中给这两个变量赋值。具体的方法如下：

在`your_view`函数中，你可以通过读取静态文件夹（通常是名为`static`的文件夹）中的样式表文件，并将其添加到`css_files`列表中。示例代码如下：
  1. import os
  3. def your_view(request):
  4.     css_files = []
  5.    
  6.     # 获取静态文件夹中的样式表文件
  7.     static_dir = os.path.join(BASE_DIR, 'static')
  8.     for file_name in os.listdir(static_dir):
  9.         if file_name.endswith('.css'):
  10.             css_files.append(file_name)
  11.    
  12.     return render(request, 'rootyongh.html', {'css_files': css_files})
复制代码

同样地，在`css_filejs`函数中，你可以用相同的方法获取并添加JavaScript文件到`js_files`列表中。示例代码如下：
  1. import os
  3. def css_filejs(request):
  4.     js_files = []
  5.    
  6.     # 获取静态文件夹中的JavaScript文件
  7.     static_dir = os.path.join(BASE_DIR, 'static')
  8.     for file_name in os.listdir(static_dir):
  9.         if file_name.endswith('.js'):
  10.             js_files.append(file_name)
  11.    
  12.     return render(request, 'rootyongh.html', {'js_files': js_files})
复制代码

确保你在视图文件的开头导入`os`模块。

此外，在你的HTML模板中，你需要在样式表和JavaScript的迭代循环中正确引用这些文件。示例如下：
  1. {% for css_file in css_files %}
  2.     <link rel="stylesheet" type="text/css" href="{% static css_file %}">
  3. {% endfor %}
  5. {% for js_file in js_files %}
  6.     <script src="{% static js_file %}"></script>
  7. {% endfor %}
复制代码

请注意，上述示例假设您已经在Django的settings.py文件中正确配置了静态文件目录，并且在模板中使用了`{% load static %}`标签。

希望以上解释能够帮助你解决问题！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

tengke
 楼主| 发表于 2023-12-29 16:59:21 | 显示全部楼层
import os
def your_view(request):
    css_files = []
    # 获取静态文件夹中的样式表文件
    static_dir = os.path.join(BASE_DIR, 'static')
    for file_name in os.listdir(static_dir):
        if file_name.endswith('.css'):
            css_files.append(file_name)
    return render(request, 'rootyongh.html', {'css_files': css_files})
def css_filejs(request):
    js_files = []
    # 获取静态文件夹中的JavaScript文件
    static_dir = os.path.join(BASE_DIR, 'static')
    for file_name in os.listdir(static_dir):
        if file_name.endswith('.js'):
            js_files.append(file_name)
    return render(request, 'rootyongh.html', {'js_files': js_files})


{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eCommerce template By Adobe Dreamweaver</title>

{% for css_file in css_files %}
    <link rel="stylesheet" type="text/css" href="{% static css_file %}">
{% endfor %}
{% for js_file in js_files %}
    <script src="{% static js_file %}"></script>
{% endfor %}按照你提供的还是没有样式
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2023-12-29 16:59:34 | 显示全部楼层
tengke 发表于 2023-12-29 16:59
import os
def your_view(request):
    css_files  ...

看起来你已经在视图函数中获取了静态文件的路径和文件名，并将它们存储在`css_files`和`js_files`列表中。但是，在返回渲染的模板时，你传递的是空的`css_files`和`js_files`列表，这就是为什么没有样式加载的原因。

要解决这个问题，你需要将`css_files`和`js_files`列表作为上下文变量传递给正确的模板。在`your_view`函数和`css_filejs`函数中，你可以使用`locals()`方法将局部变量作为字典传递给模板。示例代码如下：
  1. def your_view(request):
  2.     css_files = []
  3.     static_dir = os.path.join(BASE_DIR, 'static')
  4.     for file_name in os.listdir(static_dir):
  5.         if file_name.endswith('.css'):
  6.             css_files.append(file_name)
  7.     return render(request, 'rootyongh.html', locals())
  9. def css_filejs(request):
  10.     js_files = []
  11.     static_dir = os.path.join(BASE_DIR, 'static')
  12.     for file_name in os.listdir(static_dir):
  13.         if file_name.endswith('.js'):
  14.             js_files.append(file_name)
  15.     return render(request, 'rootyongh.html', locals())
复制代码

在这种情况下，模板会接收到局部变量`css_files`和`js_files`，并将其作为上下文变量使用。

另外，请确保在你的HTML模板中，你在样式表和JavaScript的迭代循环中正确引用这些文件。示例如下：
  1. {% load static %}
  2. eCommerce template By Adobe Dreamweaver
  4. {% for css_file in css_files %}
  5.     <link rel="stylesheet" type="text/css" href="{% static css_file %}">
  6. {% endfor %}
  7. {% for js_file in js_files %}
  8.     <script src="{% static js_file %}"></script>
  9. {% endfor %}
复制代码

在这个示例中，我们使用了`{% static %}`标签来正确生成静态文件的URL。

希望以上解释能够帮助你解决问题！如果还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

sunbeam22
发表于 2024-1-2 13:01:27 | 显示全部楼层
不了解你没有把urls.py的路由绑定到views.py中的函数，应该访问urls中的路由，再到这个视图函数，再返回给浏览器对应的html文件，在返回html中会渲染这些模板
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-28 02:09

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表