我的更新页面的 css 没有正确加载，但其他页面工作得很好答案

【问题标题】：my css of update page not loading correctly but other page are working very fine我的更新页面的 css 没有正确加载，但其他页面工作得很好
【发布时间】：2021-11-10 19:13:47
【问题描述】：

当我尝试使用主键或 ID CSS 渲染模板传递参数时，CSS 未按预期加载，但当我尝试仅使用请求渲染它而不传递 id arg 时，它加载完美。

viewsy.py

def update_lead(request,pk):
    leads = Lead.objects.get(id = pk)
    followup = Followup.objects.all
    agent = Agent.objects.all
    source = Source.objects.all
    print(f"the leads are {leads}")
    context = {"lead":leads,"followup":followup,"agent":agent,"source":source}
    
    return render(request,"home/update_lead.html",context)

当我尝试用我的视图传递 id 时，这就是前端的外观，它没有加载预期的 css

显示错误

但如果我们只是删除 pk 的使用，那么 css 将被加载

它应该看起来像

这是我的模板代码

{% extends 'base.html' %}

{% block body %}
<div class="container">
  <h2>Create Lead</h2>
  <form action="creat_handle_lead" method="POST">
    {% csrf_token %}
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail4">Name</label>
        <input type="text" class="form-control" id="inputEmail4" required name="name" value="{{lead.name}}">
      </div>
      <div class="form-group col-md-6">
        <label for="inputPassword4">Subject</label>
        <input type="text" class="form-control" id="inputPassword4" name="subject" required value="{{lead.subject}}">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputAddress">Email</label>
        <input type="email" class="form-control" id="inputAddress" name="email" placeholder="abc@email.com" value="{{lead.email}}">
      </div>
      <div class="form-group col-md-6">
        <label for="inputAddress2">Contact Number</label>
        <input type="number" class="form-control" id="inputAddress2" name="number"value = "{{lead.number}}" placeholder="99XX80XXXX">
      </div>
    </div>
    
    
    <div class="form-row">
      
      <div class="form-group col-md-4">
        <label for="inputState">Source</label>
        <select id="inputState" class="form-control" name="source">
          {% for x in source %}
          <option value="{{x.name}}">{{x.name}}</option>
          <!-- <option selected></option> -->
          {% endfor %}
          
        </select>
      </div>
      <div class="form-group col-md-4">
        <label for="inputState">Assign To</label>
        <select id="inputState" class="form-control" name="assign">
          {% for x in agent %}
          <option value="{{x.name}}">{{x.name}}</option>
          <!-- <option selected></option> -->
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Initial Followup</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="followup"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Update Lead </button>
  </form>
</div>

{% endblock body %}

这是我的 base.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../static/elegant/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="../static/elegant/css/custom.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="../static/elegant/css/sb-admin-2.min.css" rel="stylesheet">
    <title>{% block title %}   {% endblock title %}</title>
    {% block exhead %}

    {% endblock exhead %}
</head>
<body>
    
    
    {% block body %}
    

    {% endblock body %}


        <!-- Bootstrap core JavaScript-->
        <script src="../static/elegant/vendor/jquery/jquery.min.js"></script>
        <script src="../static/elegant/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    
        <!-- Core plugin JavaScript-->
        <script src="../static/elegant/vendor/jquery-easing/jquery.easing.min.js"></script>
    
        <!-- Custom scripts for all pages-->
        <script src="../static/elegant/js/sb-admin-2.min.js"></script>
    
        <!-- Page level plugins -->
        <script src="../static/elegant/vendor/chart.js/Chart.min.js"></script>
    
        <!-- Page level custom scripts -->
        <script src="../static/elegant/js/demo/chart-area-demo.js"></script>
        <script src="../static/elegant/js/demo/chart-pie-demo.js"></script>
</body>
</html>

【问题讨论】：

您永远不会将上下文传递给模板引擎。应该是render(request,"home/update_lead.html", context)。此外，您定义了两次context。
对不起，先生，实际上我正在调试没有问题，我尝试删除上下文以便它可以工作。现在我已经正确更新了问题
你重启django服务器，访问视图时使用Ctrl+Shift+F5吗？
是的，我做了所有的事情，甚至重新启动计算机...如果您不介意先生，我可以在 google meet 上显示我的问题
你能显示加载 .css/.js 文件的模板部分吗？

标签： css django django-views django-forms django-templates

【解决方案1】：

您正在加载静态文件：

&lt;script <s>src="../static/elegant/vendor/jquery/jquery.min.js"</s>&gt;&lt;/script&gt;

如果 URL 看起来像 leads/52，那么它将从 leads/static/elegant/vendor/jquery/jquery.min.js 加载，这不是我们想要的。这是因为.. 向上移动了一级，所以如果我们使用foo/bar/，那么从.. 开始将产生foo/static/elegant/…。但是如果路径是foo/bar/qux，那么它就会以foo/bar/static/elegant/…为路径加载数据。

您可以使用绝对路径，从而将其实现为：

&lt;script <b>src=/static/elegant/vendor/jquery/jquery.min.js"</b>&gt;&lt;/script&gt;

或者更好的是，使用{% static … %} [Django-doc] 模板标签：

&lt;script <b>src={% static 'elegant/vendor/jquery/jquery.min.js' %}"</b>&gt;&lt;/script&gt;

然后它会在参数前面加上STATIC_URL setting [Django-doc] 的值，这样以后更改静态 URL 就很容易了。

您需要使用../static/ 前缀更新所有项目。

【讨论】：

为什么我的 css 可以用于其他页面，如果我删除 pk 使用，这个页面也可以工作我知道我没有使用使用 css 的标准方式，但我不认为这可能是原因
@sarangkkl：如果 URL 仅一级深，它可以在其他页面上使用，因为 ../ 将向上移动一级。因此，如果您使用 URL about/ 加载页面，它将导入 static/elegant/...，因为它已移动到父路径，然后加载 static/ 子路径。但是，如果您有一个具有两个（或更多）级别的 URL，它只会向上移动一个。
我非常感谢您，先生，这正在运行