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. lamp服务器被人恶意绑定域名的解决办法

    还没开始就被别人绑定了域名 事情的起因与发现 刚买了个服务器搭建了一个dz,想着域名还没备案,就先搭建了起来,然后在做DDOS测试时偶然发现服务器被别人恶意把域名绑定了 最初的解决方案 没管..... ...

  2. How to know the directory size in CENTOS 查看文件夹大小

    Under any linux system, you want to use the command du. (Disk Usage) Common usage is : du -sh file(s ...

  3. 记一次oracle创建一个新数据库,并导入正式环境数据库备份的dmp包过程

    背景:正式环境oracle数据库定时用exp备份一个dmp包,现在打算在一台机器上创建一个新数据库,并导入这个dmp包. 1.创建数据库 开始 -> 所有程序 -> Oracle -> ...

  4. Python3 list sort排序

    转自:https://blog.csdn.net/u010758410/article/details/79737498 当带排序列表的元素由多字段构成时,我们可以通过sorted(iterable ...

  5. go 依赖工具glide

    添加gopath/bin目录到环境变量下 安装glide $ go get github.com/Masterminds/glide $ go install github.com/Mastermin ...

  6. spring-tool-suite使用教程,并创建spring配置文件

    本文为博主原创,未经允许不得转载: 在应用springMVC框架的时候,每次创建spring的xml配置文件时,需要很多步骤,非常麻烦. 所以spring提供了spring-tool-suite插件, ...

  7. Ubuntu16.04更新记

    大概一周前因为不可抗因素,我再次安装了Ubuntu16.04LTS 对于之前发誓不想再用Ubuntu的我,我只想说一句:真香 写一点我现在Ubuntu的配置,方面自己以后查看,也方便如果有相同需求的人 ...

  8. 1. Mysql在java中的使用步骤

    -1.配置数据库:http://www.cnblogs.com/sshoub/p/4321640.html 2.创建可以远程的登录用户:http://www.cnblogs.com/xyzdw/arc ...

  9. _event_team

    EventId 事件ID TeamId 事件玩家分组,仅传送(0为联盟 1为部落)对线(防守为1,进攻为2),自定义阵营(_faction表自定义阵营ID),公会(公会guid) TeamName 事 ...

  10. 利用logstash从mysql同步数据到ElasticSearch

    前面一篇已经把logstash和logstash-input-jdbc安装好了. 下面就说下具体怎么配置. 1.先在安装目录bin下面(一般都是在bin下面)新建两个文件jdbc.conf和jdbc. ...