cgi html和python交互 python和h5

本文是承接博主的上一篇文章，主要讲述django及相关h5页面的开发，从而正真实现“学习笔记”的完整功能。
进入正题。

1.什么是H5

H5页面由第5代html标准规范简称html5而来，但其对视频音频和触屏互动等事件的支持远超出HTML5所标记的规范。随着移动端用户的暴增，因“H5”在移动端兼容性更强，于是”H5”逐渐演变成一种对可以在移动端展示页面的简称。

一.创建网页

使用Django创建网页的过程通常分为三个阶段：定义URL、编写视图、编写模板。你必须先定义URL模式，让Django知道如何将浏览器请求与网站URL匹配，从而确定返回到那个网页。

1.1映射URL

用户通过在浏览器中输入URL以及单击链接来请求网页，因此我们需要确定项目有哪些URL。主页的URL最重要，基础URL http://localhost:8000(如果返回页面报错，可以试试 http://127.0.0.1:8000/)返回默认的Django网站，让我们知道正确的建立项目。
下面我们将修改这个基础URL，让其映射到“学习笔记”的主页
打开项目主文件夹learning_log中的文件urls.py，将其修改为如下代码：

from django.conf.urls import include,url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/',include(admin.site.urls)),
    url(r'', include('learning_logs.urls', namespace='learning_logs')),  #①
]

在①处，我们添加了一行代码来包含模块learning_logs.urls.这行代码能够让我们将learning_logs中的URL同项目中的其他URL区分开。
现在我们需要在文件夹learning_logs中创建另一个urls.py文件：

"""定义learning_logs的URL模式"""
from django.conf.urls import url
from . import views
urlpatterns = [
    #主页
    url(r'^$',views.index,name ='index'),
]

在这里使用了正则表达式r’^$。其中的r让python将接下来的字符串视为原始字符串，而引号则告诉python正则表达式始于和终于何处。这个正则表达式可以让基础URL匹配。

1.2编写视图

我们在learning_logs中的文件views.py中编写相应的视图。这个文件初始只导入了render()函数。下面的代码来演示该如何为主页编写视图：

from django.shortcuts import render
def index(request):
    """学习笔记的主页"""
    return render(request,'learning_logs/index.html')

1.3编写模板

模板定义了网页的结构。模板指定了网页是什么样的，而每当网页被请求是，Django将填入相关的数据。
在文件夹learning_logs中新建一个文件夹，并将其命名为templates。在文件夹templates中新建一个文件夹，将其命名为learning_logs。在最里面的learning_logs中新建一个HTML文件，命名为index，并编写如下代码。

<p>Learning Log</p>
<p>Learning Log help you keep tracj of your learning,for any topic you're learning acout.</p>

如果你刷新浏览器的主页，你将看到下图类似的网页;

二、创建其他网页

确定创建网页的流程后，可以开始扩充“学习笔记”项目了。我们将创建两个显示数据的网页，其中一个列出所有的主题，另一个显示特定主题的所有条目。（不是通过后台管理，而是用户自己创建的条目）。对于每个网页，我们都将指定其URL，编写一个视图函数，并编写一个模板。但在这之前，我们需要先创建一个父模板，项目的其他模板都将继承它。

2.1父模板

我们通过创建一个包含通用元素的父模板来让你更容易去管理你的网站，而不是重复定义网站中的通用元素。项目中的其他模板都将继承它。

我们首先在index.html所在文件夹中创建一个名为base.html的模板。其他模板都将继承这个模板。
下面是这个模板的初始代码：

<p>
	<a href="{% url 'learning_logs:index' %}">Learning Log</a>
</p>
{% block content %}
{% endblock content %}

2.2子模板

现在需要重新编写index.html，使其继承base.html，如下所示：

{% extends "learning_logs/base.html" %}
{% block content %}
<p>Learning Log help you keep tracj of your learning,for any topic you're learning acout.</p>
{% endblock content %}

子模板的第一行必须包含标签{% extends %}，让Django知道它继承了哪个父模板。
而标签{% block content %}和{% endblock content %}分别记录了内容定义的起始位置和结束位置。

2.3显示所有主题的页面

①URL模式
首先，我们来定义显示所有主题的页面的URL。在http://127.0.0.1:8000/topics/中将返回显示所有主题的页面。下面显示了如何修改learning_logs/urls.py。

from django.conf.urls import url
from . import views
urlpatterns = [
    #主页
    url(r'^$',views.index,name ='index'),
    #显示所有的主题
    url(r'^topics/$', views.topics,name ='topics'),
    ]

②视图
我们需要将view.py修改为如下：

from django.shortcuts import render
from .models import Topic
def index(request):
    """学习笔记的主页"""
    return render(request,'learning_logs/index.html')
def topics(request):
    """显示所有的主题"""
    topics = Topic.objects.order_by('date_added')
    context = {'topics':topics}
    return render(request,'learning_logs/topics.html',context)

③模板
在index.html所在目录中创建topics.html文件。下面是其中的代码：

{% extends "learning_logs/base.html" %}
{% block content %}
    <p>Topics</p>
{% endblock header %}
    <ul>
        {% for topic in topics %}
            <li>{{ topic }}</li>
        {% empty %}
            <li>No topics have been added yet.</li>
        {% endfor %}
    </ul>
{% endblock content %}

在这里，我们使用了一个相当于for循环的模板标签，它遍历循环字典context中的列表topics。模板中的代码与python中存在一些差别，在模板中每个for循环都必须使用{% endfor %}标签来指出其结束的位置。此外，我们使用了模板标签{% empty %}，它告诉Django在列表topics为空时打印出一行信息。
现在需要修改父模板，使其包含到显示所有主题的页面链接。

<p>
	<a href="{% url 'learning_logs:index' %}">Learning Log</a> - 
	<a href="{% url 'learning_logs:topics' %}">Topics</a>
</p>
{% block content %}
{% endblock content %}

如果你刷新浏览器的主页，将看到链接Topics，和下图类似;

2.4显示特定主题的页面

①URL模式
修改learning_logs/urls.py。

from django.conf.urls import url
from . import views
urlpatterns = [
    #主页
    url(r'^$',views.index,name ='index'),
    #显示所有的主题
    url(r'^topics/$', views.topics,name ='topics'),
    #特定主题的详细页面
    url(r'^topics/(?P<topic_id>\d+)/$', views.topic,name='topic'),
    ]

其中，我们将使用topic_id中的值作为实参传递给视图函数topic()。在这个函数中，我们将使用topic_id的值来获取相应的主题。
②视图
我们需要将view.py修改为如下：

from django.shortcuts import render
from .models import Topic
def index(request):
    """学习笔记的主页"""
    return render(request,'learning_logs/index.html')
def topics(request):
    """显示所有的主题"""
    topics = Topic.objects.order_by('date_added')
    context = {'topics':topics}
    return render(request,'learning_logs/topics.html',context)
def topic(request,topic_id):
    """显示单个主题及其所有条目"""
    topic = Topic.objects.get(id = topic_id)
    entries = topic.entry_set.order_by('-date_added')
    context = {'topic':topic,'entries':entries}
    return render(request,'learning_logs/topic.html',context)

③模板
在index.html所在目录中创建topic.html文件。下面是其中的代码：

{% extends "learning_logs/base.html" %}
{% block content %}
    <p>Topic:{{ topic }}</p>
    <p>Entries:</p>
	<ul>
    {% for entry in entries %}
  		<li>
                {{ entry.date_added|date:'M d, Y H:i' }}
                {{ entry.text|linebreaks }}
         </li>
    {% empty %}
        There are no entries for this topic yet.
    {% endfor %}
  </ul>
{% endblock content %}

每个项目都将列出两项信息：条目的时间戳和完整的文本。过滤器date_added|date:'M d, Y H:i’以这样的格式显示时间戳：月，日，年，时间。

现在，我们点击到链接http://127.0.0.1:8000/topics/1，将会出现以下类似的网页：

在接下来，我们将添加一个用户注册系统，让用户能够创建账户和自己的学习笔记内容。