stark 组件基础页面base.html 文件

base.html

1. base.html 页面是 ： stark组件增，删，改，查页面的公共部分，如头部导航栏，左侧的用户权限列表栏等。

2. base.html 页面结构：

（1）公共部分的代码区域。（其他模板通过继承）。

（2）css 自定义部分，js 自定义部分，内容自定义部分，权限栏部分等（红色区域部分）。

下面问stark组件base.html文件

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CRM</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">

    <link rel="shortcut icon" href="/static/imgs/luffy-study-logo.png">

    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.css">

    <link rel="stylesheet" href="/static/css/commons.css ">

    <link rel="stylesheet" href="/static/css/nav.css">

    <script src="/static/js/jquery-3.3.1.min.js"></script>

    <style>

        .pg-body > .left-menu {

            background-color: #F3F3F3;

            position: absolute;

            left: 1px;

            top: 60px;

            bottom: 0;

            width: 220px;

            overflow: auto;

        }

        .pg-body > .right-body {

            position: absolute;

            left: 225px;

            right: 0;

            top: 60px;

            bottom: 0;

            overflow: scroll;

            border-top: 0;

            font-size: 13px;

            min-width: 755px;

            padding: 20px;

        }

        .dropdown-menu {

            top: 118%;

            left: -108px;

        }

        a:hover{

                text-decoration: none!important;

            }

    </style>

   {% block css %}

   {% endblock %}

</head>

<body>

<div class="pg-header">

    <div class="nav">

        <div class="logo-area left">

            <a href="#">

                <img class="logo" src="{% static 'imgs/logo.svg' %}">

                <span style="font-size: 18px;">CRM </span>

            </a>

        </div>

        <div class="left-menu left">

            <a class="menu-item">资产管理</a>

            <a class="menu-item">用户信息</a>

            <a class="menu-item">权限管理</a>

            <div class="menu-item">

                <span>使用说明</span>

                <i class="fa fa-caret-down" aria-hidden="true"></i>

                <div class="more-info">

                    <a href="#" class="more-item">666</a>

                    <a href="#" class="more-item">888</a>

                </div>

            </div>

        </div>

        <div class="right-menu right clearfix">

            <!-- Single button -->

            <div class="btn-group user-info right">

              <img class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" width="50" height="50" class="img-circle" src="{% static 'imgs/default.jpg' %}">

              <ul class="dropdown-menu small">

                <li><a href="#" class="more-item">个人信息</a></li>

                <li><a href="/logout/" class="more-item">注销</a></li>

                <li><a href="/home/">修改密码</a></li>

                <li><a href="/home/">更换头像</a></li>

              </ul>

            </div>

            <a class="user-menu right">

                <i class="fa fa-user" aria-hidden="true"></i>

                <span>{{ request.user }}</span>

            </a>

            <a class="user-menu right">

                消息

                <i class="fa fa-commenting-o" aria-hidden="true"></i>

                <span class="badge bg-success">2</span>

            </a>

            <a class="user-menu right">

                通知

                <i class="fa fa-envelope-o" aria-hidden="true"></i>

                <span class="badge bg-success">2</span>

            </a>

            <a class="user-menu right">

                任务

                <i class="fa fa-bell-o" aria-hidden="true"></i>

                <span class="badge bg-danger">4</span>

            </a>

        </div>

    </div>

</div>

<div class="pg-body">

        <div class="left-menu">

             {% block side_bar %}

                {% load rbac %}

                {% get_menu request %}

             {% endblock side_bar %}

        </div>

    <div class="right-body">

         {% block content %}

         {% endblock content %}

    </div>

</div>

{% block js %}

 {% endblock %}

</body>

</html>

（3）.stark组件增删改查页面的，继承语句

{% extends "stark/base.html" %}

以change._view.html 页面为例：

{% extends "stark/base.html" %}

{% block css %}

<style>

        .error{

            color: red;

        }

        h3{

            text-align: center;

        }

    </style>

{% endblock %}

{% block content %}

<div class="container-fluid">

    <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <h3>编辑{{ table_name }}</h3>

            {% include "stark/formbase.html" %}

        </div>

    </div>

</div>

{% endblock %}

change_view.html

(4) stark 组件中，一些静态文件，font-awesome 字体图标文件夹。以及js,bootstrap.css文件等，主要是组件的依赖文件。imgs 主要用于base.html 导航栏中的图片。

stark组件base.html的更多相关文章

  1. stark组件的分页，模糊查询，批量删除

    1.分页组件高阶 2.整合展示数据showlist类 3.stark组件之分页 3.stark组件之search模糊查询 4.action批量处理数据 4.总结 1.分页组件高阶 1.分页的class ...

  2. day 68crm(5) 分页器的进一步优化,以及在stark上使用分页器,,以及,整理代码,以及stark组件search查询

    前情提要: 本节内容 自定制分页器 保存及查询记录 代码整理, stark组件search 查询    一:自定制分页器 page 1:创建类 Pagination  # 自定制分页器 _ _init ...

  3. 【django之stark组件】

    一.需求 仿照django的admin,开发自己的stark组件.实现类似数据库客户端的功能,对数据进行增删改查. 二.实现 1.在settings配置中分别注册这三个app # Applicatio ...

  4. django 之 stark组件

    ----------------------------------------------------------------烦恼没完没了,内心动荡不安,呜呼哀哉. 一.有个特殊的需求,需要用sta ...

  5. 设计stark组件

    设计stark组件 作者:Eric 微信:loveoracle11g 新建Django项目crm_1随便起名 然后再创建一个App manage.py@crm_1 > startapp star ...

  6. stark组件配置，二层URL

    1.django的admin配置 2 stark组件开发 3.2层url分发 4.小结 1.django的admin配置 model.py from django.db import models # ...

  7. CRM项目之stark组件

    . stark也是一个app(用startapp stark创建),目标时把这个做成一个可以拔插的组件 . setting文件下INSTALLED_APPS 路径要配置好(app的注册) . 写好si ...

  8. stark组件开发之列表页面应用示例

    已经解决的,自定义的扩展函数,功能.但是 不可能返回. 一个 固定的页面把!  应该是,点击那条 记录之后的编辑, 就会跳转到相应的,编辑页面.所以 这个标签的  <a href="/ ...

  9. Django之stark组件

    现在让我说啥是stark组件,我也说不清楚.反正从今天讲的知识来看,今天完成的就是自己写一个模块,这个模块包含了admin后台管理工具的一些比较好用的功能,我们把它提炼出来,也就是相当于自己写一个ad ...

随机推荐

  1. Flutter提升开发效率的一些方法和工具

    Flutter的环境搭配完之后,就开始Flutter的开发,下面的一些工具和方法,可以省下一些时间. 自己在用的,暂时想到的,就是这些了,总结一下. 1.JSON解析快速生成实体类 根据接口返回的数据 ...

  2. Ubuntu: repository/PPA 源

    在Ubuntu中,每个PPA源是单独存放在/etc/apt/sources.list.d/文件夹中的,进入到该文件夹,使用ls命令查询即可列出当前系统添加的PPA源. 添加 sudo add-apt- ...

  3. Nvme固体硬盘Intel750,SM961分别使用一段时间以后对比

    在SM961使用了一年半(2017年1月17日购买)后,再次测试,这次测试使用AS_SSD_Benchmark工具进行测试 感觉CrystalDiskMark工具测出来的分数在所以工具中分数最高 看图 ...

  4. 【系列教程1】Gradle入门系列二：第一个Java项目

    这篇教程的主要内容是讲解如何用Gradle编译和打包一个简单的Java项目. 该Java项目只有一个需求:我们的构建脚本必须创建一个可执行的Jar文件,换句话说,我们必须能够使用命令java -jar ...

  5. p1110 报表统计（FHQ-TREAP/TREAP）

    平衡树的裸题,操作都相当简单 写了一个FHQ,但是奈何常数太大,实在过不去 最后写了一个Treap开O2水过 TREAP代码 #include <cstdio> #include < ...

  6. The issus in Age Progression/Regression by Conditional Adversarial Autoencoder (CAAE)

    The issus in Age Progression/Regression by Conditional Adversarial Autoencoder (CAAE) Today I tried ...

  7. Paper Reviews and Presentations

    Copied from Advanced Computer Networks, Johns Hopkins University. Paper Reviews and Presentations Ea ...

  8. Using keytool to import keystore

    open command line and locate to the location of  keytool.exe. import cert to keystore command: keyto ...

  9. trackViewer 氨基酸位点变异位置图谱展示

    内容中包含 base64string 图片造成字符过多,拒绝显示

  10. async函数对比Generator函数

    首先定义一个读取文件的异步函数 var readFile = function(fileName){ return new Promise((resolve,reject)=>{ fs.read ...