BookStrap之模板继承

模板继承 (extend)

Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版，它包含您站点中的全部元素，并且可以定义能够被子模版覆盖的 blocks 。

通过从下面这个例子开始，可以容易的理解模版继承：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}My amazing site{%/span> endblock %}</title>
</head>

<body>
    <div id="sidebar">
        {% block sidebar %}
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
        {% endblock %}
    </div>

    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

这个模版，我们把它叫作 base.html，它定义了一个可以用于两列排版页面的简单HTML骨架。“子模版”的工作是用它们的内容填充空的blocks。

在这个例子中， block 标签定义了三个可以被子模版内容填充的block。 block 告诉模版引擎：子模版可能会覆盖掉模版中的这些位置。

子模版可能看起来是这样的：

{% extends "base.html" %}//先写上从哪里继承的模板
 
{% block title %}My amazing blog{% endblock %}//用这个数据去替换掉模板里的内容
 
{% block content %}
{% for entry in blog_entries %}//用的是循环来显示内容
    <h2>{{ entry.title }}</h2>
    <p>{{ entry.body }}</p>
{% endfor %}这个是标签的结束标志
{% endblock %}

快捷键：先写block接着按Table快捷键

extends 标签是这里的关键。它告诉模版引擎，这个模版“继承”了另一个模版。当模版系统处理这个模版时，首先，它将定位父模版——在此例中，就是“base.html”。

那时，模版引擎将注意到 base.html 中的三个 block 标签，并用子模版中的内容来替换这些block。根据 blog_entries 的值，输出可能看起来是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>My amazing blog</title>
</head>
 
<body>
    <div id="sidebar">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
    </div>
 
    <div id="content">
        <h2>Entry one</h2>
        <p>This is my first entry.</p>
 
        <h2>Entry two</h2>
        <p>This is my second entry.</p>
    </div>
</body>
</html>

请注意，子模版并没有定义 sidebar block，所以系统使用了父模版中的值。父模版的 {% block %} 标签中的内容总是被用作备选内容（fallback）。父标签里的block名字不能重复，不然找不到是哪个对应哪个。

如果要继承父标签的名字里面的内容可以用：

{% block menu %}
     <p><h>班级信息</h></p>
     {{ block.super }}//继承父亲的用这种方法


{% endblock %}

今日代码：

urls

from django.conf.urls import url
from django.contrib import admin
from app01 import  views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^class/',views.class_info),
    url(r'^studentInfo/(d+)',views.student_info),
]

views

from django.shortcuts import render

# Create your views here.
def class_info(request):
    return  render(request,"index3.html")
def student_info(request,id):

   return  render(request,"studentInfo.html",{"class_id":id})

Templates

母模版

<!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">
    <title>Title</title>
    <style>
        .header {
             100%;
            height: 40px;
            background-color: #2aabd2;
        }

        .content {
             100%;
            height: 520px;

        }

        .left, .right {
            float: left;

        }
        .left{
            20%;
            height: 520px;
            background-color: greenyellow;
        }
        .footer {
             100%;
            height: 40px;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="content">
    <div class="left">
        {% block  menu %}
            <ul>
                <li><a href="/studentInfo/6">S6</a></li>
                <li><a href="/studentInfo/7">S7</a></li>
                <li><a href="/studentInfo/8">S8</a></li>
            </ul>
        {% endblock %}


    </div>
    <div class="right">
        {% block con %}

        {% endblock %}
    </div>

</div>
<div class="footer"></div>
</body>
</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">
    <title>Title</title>
</head>
<body>
{% extends "base.html" %}//继承母模版
{% block con %}这里包括开始和模板的名字
    <h2>首页</h2>
{% endblock %}

</body>
</html>

{%  extends "base.html" %}
{% block menu %}
     <p><h>班级信息</h></p>
     {{ block.super }}//继承父亲的用这种方法


{% endblock %}
{% block con %}
    <p><h>学生信息</h></p>
    <h2>第{{ class_id }}页</h2>
    <h>{{ class_id }}:班</h>

{% endblock %}

ORM:

这次数据库用的是MySQL需要更改数据配置：和注销掉原来django自带的数据库

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.mysql',

        'NAME': 'crm',    #你的数据库名称

        'USER': 'root',   #你的数据库用户名

        'PASSWORD': '', #你的数据库密码

        'HOST': '', #你的数据库主机，留空默认为localhost

        'PORT': '3306', #你的数据库端口

    }

}

设置前端的静态文本：

static也需要在setting里面需要修改：

STATIC_URL = '/static/'
STATICFILES_DIR=[
    os.path.join(BASE_DIR,"static")
]

图书管理系统：先配置文件接着运行数据库持久化用两行代码做数据库的持久化

M：

from django.db import models

# Create your models here.

class Book(models.Model):
    nid=models.AutoField(primary_key=True)
    title=models.CharField(max_length=32)
    author=models.CharField(max_length=32)
    publishDate=models.DateField()
    price=models.DecimalField(max_digits=5,decimal_places=2)

"""mysite1 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from app003 import  views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^del/(d+)', views.del_book),
    url(r'^edit/(d+)', views.edit_book),
    url(r'^edit/', views.edit_book),
    url(r'^add/', views.add_book),
]

<!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">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <style>
        .container {
            margin-top: 100px;
        }
        .btn-primary{
            margin-bottom: 50px;

        }
    </style>
</head>
<body>


<div class="container">
    <div class="row">
        <div class="col-md-6 clo-md-offset-2">
            <table class=" table table-striped text-center table-bordered">
                <thead>
                <tr>
                    <th class="text-center">编号</th>
                    <th class="text-center">姓名</th>
                    <th class="text-center">作者</th>
                    <th class="text-center">出版日期</th>
                    <th class="text-center">价格</th>
                    <th class="text-center">操作</th>
                    <a href="/add/"><button class="btn btn-primary">添加</button></a>
                </tr>
                </thead>
                <tbody>
                {% for book in bookList %}
                    <tr>
                        <td>{{ book.nid }}</td>
                        <td>{{ book.title }}</td>
                        <td>{{ book.author }}</td>
                        <td>{{ book.publishDate|date:"Y-m-d" }}</td>
                        <td>{{ book.price }}</td>
                        <td>
                            <a href="/del/{{ book.nid }}"><button class="btn btn-danger"> 删除</button></a>
                            <a href="/edit/{{ book.nid }}"><button class="btn btn-info"> 编辑</button></a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>


</body>
</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">
    <title>Title</title>
</head>
<body>
<form action="/index/" method="post">
{#    {% csrf_token %}#}
   <p>编号：<input type="text" name="id"  value={{  }}></p>
   <p>书名：<input type="text" name="title"  value={{  }}></p>
   <p>作者：<input type="text" name="author" value={{  }}></p>
   <p>出版日期：<input type="text" name="publishDate" value={{  }}></p>
   <p>价格：<input type="text" name="price" value={{  }}></p>
   <p><input type="submit" ></p>
</form>

</body>
</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">
    <title>Title</title>
</head>
<body>
<form action="/index/" method="post">
   <p>书名：<input type="text" name="title" ></p>
   <p>作者：<input type="text" name="author"></p>
   <p>出版日期：<input type="text" name="publishDate"></p>
   <p>价格：<input type="text" name="price"></p>
   <p><input type="submit" ></p>
</form>
</body>
</html>

在后台获取数据首先想到用form表单的方法获取：request.POST.get(" ")或者request.GET.get("").在前端用句点符.获取。