jango html 模板引用不到

最新推荐文章于 2022-05-19 08:42:02 发布
最新推荐文章于 2022-05-19 08:42:02 发布
阅读量103 收藏
点赞数
分类专栏： django
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36270681/article/details/119279868
版权

 base.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header layui-bg-cyan">
    <div class="layui-logo layui-hide-xs  layui-bg-cyan" style="font-weight: bold;font-size: 26px;color: white">运维管理系统</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
{#    <ul class="layui-nav layui-layout-left">#}
{#      <!-- 移动端显示 -->#}
{#      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">#}
{#        <i class="layui-icon layui-icon-spread-left"></i>#}
{#      </li>#}
{##}
{#      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>#}
{#      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>#}
{#      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>#}
{#      <li class="layui-nav-item">#}
{#        <a href="javascript:;">nav groups</a>#}
{#        <dl class="layui-nav-child">#}
{#          <dd><a href="">menu 11</a></dd>#}
{#          <dd><a href="">menu 22</a></dd>#}
{#          <dd><a href="">menu 33</a></dd>#}
{#        </dl>#}
{#      </li>#}
{#    </ul>#}
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          子龙
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="">退出登录</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll layui-bg-cyan">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;"><i class="layui-icon layui-icon-chart">&nbsp</i>监控系统</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">服务器</a></dd>
            <dd><a href="javascript:;">中间件</a></dd>
            <dd><a href="javascript:;">应用</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;"><i class="layui-icon layui-icon-template-1">&nbsp</i>发布系统</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">项目管理</a></dd>
            <dd><a href="javascript:;">应用管理</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>

         <li class="layui-nav-item">
          <a href="javascript:;"><i class="layui-icon layui-icon-user">&nbsp</i>用户管理系统</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">添加用户</a></dd>
            <dd><a href="javascript:;">权限管理</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-vercode">&nbsp</i>跳板机</a></li>
        <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-upload">&nbsp</i>CMDB</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
    {% block content %}{% endblock %}
    <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    https://blog.csdn.net/qq_36270681?t=1
  </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;

  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });

});
</script>
</body>
</html>

 index.html

{% extends 'base.html' %}
{% block content %}
    <div class="layui-card">
      <div class="layui-card-header">卡片面板</div>
      <div class="layui-card-body">
        卡片式面板面板通常用于非白色背景色的主体内<br>
        从而映衬出边框投影
      </div>
    </div>
{% endblock %}

 原来我把index.html 重命名 base.html 时，pycharm 自动也把views.py 的index 跳转改为了base.html  ，下面改回来后就正常了

 

xiangzilong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
django框架模板
hard_days的博客
03-10 4326
模板 作为Web框架，Django提供了模板，用于编写html代码，还可以嵌入模板代码更快更方便的完成页面开发，再通过在视图中渲染模板，将生成最终的html字符串返回给客户端浏览器。模版致力于表达外观，而不是程序逻辑。模板的设计实现了业务逻辑view与显示内容template的分离，一个视图可以使用任意一个模板，一个模板可以供多个视图使用。 模板包含两部分： 静态部分，包含html、cs...
Jango V2.0.1
03-06
JANGO是一个不断扩展，完全响应和多用途的HTML5前端模板，由SASS和Bootstrap提供支持。 JANGO非常强大且灵活，可以轻松支持每个站点开发，例如企业，产品组合，博客，产品展示，登陆/单页网站等等。 充分利用JANGO...
jango模板语言初识
weixin_30457881的博客
12-09 173
一、Django框架简介 1、MVC框架 MVC，全名是Model View Controller，是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型(Model)、视图(View)和控制器(Controller)， 具有耦合性低、重用性高、生命周期成本低等优点。 2、Django的MTV模式 Django框架的设计模式借鉴了MVC框架的思想，也是分成三...
2021-05-21＜Django框架二---模板操作＞
qq_41013021的博客
05-12 158
Django模板与模型 回顾 WEB框架： 将数据放到页面上 页面加载： Django: 大而全的web框架。 沙箱环境：anaconda沙箱。 f’{name}’ format() %s with 创建项目 django-admin startproject 项目名称 pythonmanage.py startapp app名称 启动项目 pythonmanage.py runserver [ip:port] 拆分思维： 加载页面，返回给用户。 实现步骤 ...
Django模板错误与解决方法
热门推荐
04-29 11万+
针对一下问题，可以试一下此方法 1 错误提示 NoReverseMatch at /index/ Reverse for ‘study_section’ with arguments ‘(‘12’,)’ not found. 1 pattern(s) tried: [‘apppost/study_section/(?P<html_page>[0-9]+)/(?P<page_in...
django - html模板
分享自己浅浅的知识
01-30 1729
一、为什么要有模板 1、我们在浏览各大网站的时候，你会看到，有一些东西是不变的，比如说导航栏 、
Django模板标签完整攻略
ccc369639963的博客
05-19 1034
Django模板标签完整攻略 前面我们用了三节的内容重点讲解了模板语言中使用频率较高到的三个标签 if、for 以及 url。在本节我们将其余标签选择性的讲解，学习 Django 框架的时候，要学会抓住知识重点，这是提高学习效率的一种有效途径。 1. 模板标签攻略 1) 判断变量值是否相等 判断两个变量的值是否相等，也是一种很常见的需求，我们使用 ifequal 标签来进行判断，它 endifequal 标签成对出现，当然也可以使用 if 标签配合比较运算符来实现，所以这个标签也显的很鸡肋，Django官方
Django导入HTML出现404
qq_37605109的博客
04-14 799
需要在setting目录下，配置一个静态文件 STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]#加载静态文件 使用render导入HTML文件的时候，找不到路径的时候，需要在setting这个文件下： 'DIRS': [os.path.join(BASE_DIR,'templates')], #这个是声明找HTML模板到哪里去找 ...
jango路由层
weixin_30631587的博客
01-29 89
简单的路由配置： urls.py from django.contrib import admin from django.urls import path, re_path from book_app import views urlpatterns = [ path('admin/', admin.site.urls), # path('index/', ...
ci-fsf-hello-jango
02-28
这是Gitpod的代码学院学生模板。 我们已经预装了您入门所需的所有工具。 您可以安全地删除此README.md文件，或为您自己的项目进行更改。 不过，请至少阅读一次！ 它包含有关Gitpod和我们使用的扩展的一些重要信息。...
详解django模板与vue.js冲突问题
12-11
然而，由于两者都使用双大括号“{{ }}”作为模板语法，这可能导致冲突。当Django模板引擎在渲染页面时，它会先解析并替换所有“{{ }}”中的内容，从而影响Vue.js的数据绑定。为了解决这个问题，有几种策略可以调整和...
jango-front
02-17
"jango-front"是一个基于CSS的前端开发框架，用于构建高效、响应式的网页设计。这个框架的名字可能来源于"Jango"，一个可能是为了致敬著名...如果你在项目中使用了"jango-front"，你将享受到它带来的便捷性和灵活性。
D2_jango_
02-12
15. **Django REST framework**：D2_jango_ 可能也涉及到 Django REST framework，这是一个强大的工具，用于构建 RESTful API，支持序列化、身份验证、权限控制等功能。 通过 D2_jango_ 项目，你可以深入学习这些 ...
关于Django运行服务器后无法正常引用CSS、JS文件问题的解决
qq_34422681的博客
04-11 1775
关于Django运行服务器后无法正常引用CSS、JS文件问题的解决首先是报错以及问题描述解决方案在setting文件中加入将原本 html 第一行的 <!Document html> 换成{% load staticfiles %} 首先是报错以及问题描述 我使用的html文件以及配套的CSS、JS文件在本地都是可以正常运行的。但运行runserver命令之后，就无法正常显示样式了（如图）。 解决方案 受叄贰壹的 文章启发，解决方案如下： 在setting文件中加入 我之前的setting
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
最新发布
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Volar: Could not find a declaration file for module './layouts/BasicLayout.vue'. 'd:/JavaProgram/SystemOfMatch/yupi-project/src/layouts/BasicLayout.vue.js' implicitly has an 'any' type.
07-17
C知道: 这个错误是由于TypeScript无法找到`./layouts/BasicLayout.vue`模块的声明文件所导致的。它还指出`d:/JavaProgram/SystemOfMatch/yupi-project/src/layouts/BasicLayout.vue.js`文件隐式地具有`any`类型。 解决这个问题的方法是为`./layouts/BasicLayout.vue`模块创建一个声明文件，以便TypeScript可以正确地推断其类型。你可以按照以下步骤操作： 1. 在与`BasicLayout.vue`文件相同的目录下创建一个名为`BasicLayout.vue.d.ts`的文件。 2. 在`BasicLayout.vue.d.ts`文件中，添加以下代码： ```typescript declare module '*.vue' { import { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } ``` 3. 保存文件并重新编译你的项目。TypeScript应该能够正确地找到并推断`BasicLayout.vue`模块的类型。 如果你的项目中有其他类似的错误，请按照相同的步骤为缺失的声明文件创建相应的`.d.ts`文件。 希望这能帮助到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值