django 按钮的样式_Django RESTful 系列教程（一）
本章概要：
很多的 web 框架都以方便使用而著称，特别是 flask ，一个文件就可以做一个 Hellow world 了，那 django 可以吗？答案时肯定的。同时，我们将会简单的了解下 REST 的概念 。最后，我们将会利用我们才学的知识来编写我们的第一个 REST 项目。在本章，我们会涵盖以下知识点。单文件 django
REST 是什么
第一个 Django REST 项目。
单文件 Django
发生了什么？
相信大家对 Django 有一定的了解，对构建项目的每个过程也已经非常清楚了。总是重复的那么几个步骤：先运行 django-admin startproject 创建项目
再切换到项目路径下运行 python manage.py startapp ，创建项目的 app 。
在每个 App 里写代码，写完了最后想要运行项目时运行 python manage.py runserver 来启动本地的开发服务器。
有的时候，我们仅仅是想做个实验，仅仅时想看看刚才手动写入的数据到底有没有正确写入或者是看看我的视图反响解析出来到底是什么样子。更重要的是，我们不想每次需要查看一些相关数据时，都需要从 app 目录里切出来，然后 runserver 。或许你会辩驳说，我们有 django 提供的 shell 可用，这样也可以很方便的和我们的应用交互。那么能不能再简单一点？换句话说，我们能不能直接执行我们当前编写的脚本呢？
新建一个文件夹，叫做 test-project 。并在里面创建一个新的文件 test.py 。你的目录结构大概是这样的：
test/
test.py
在开头引入这些包：
test.py
from django.conf import settings
from django.http import HttpResponse
from django.conf.urls import url
我们依次来看看他们都是什么意思。
from django.conf import settings：
settings 是 django 的配置文件钩子，你可以在项目的任何地方引入它，可以通过 . 路径符来访问项目的配置。比如 settings.ROOT_URLCONF 就会返回根 url 配置。关于钩子，我需要多说两句。讲道理，如果需要引用项目配置，标准的写法难道不应该是 import project.settings as settings 吗，这样才能连接到项目的配置啊，为什么我只是引入 django 自己的配置就可以了呢。这就是 django 的神奇之处了，在一切都还没有运行之前，django 首先做的就是加载配置文件，并且把 settings 对象的属性连接到各个配置上。注意，settings 是个对象，所以像 from django.conf.settings import DEBUG 之类的语法是错误的。因为它不是个模块。所以在访问配置时，只能以 settings. 的形式来调用配置。
首先加载配置文件是一件天经地义的事情，只有知道了各个部分的配置如何，相应的功能才能按照需求运转。请大家记住这一点，这非常重要。在 django 中，加载配置文件有两种方式：第一种是使用 settings.configure(**settings)
手动的写每一项配置，这样做的好处是，如果你需要配置的东西不多，那就不单独再建个文件作为配置文件了。
第二种是使用 django.setup()
这是通过环境变量来配置的方法。
django.setup() 方法会自己查询环境变量 'DJANGO_SETTINGS_MODULE` 的值，会把它的值作为配置文件的路径，并读取这个文件的配置。
以上两种方法都可以用来配置 django 。我们这里采用第一种。注意，两种方式必须用一种，也就是说，想要使用 django ，必须对 django 进行配置。
from django.http import HttpResponse
用于返回一个响应。
from django.conf.urls import url
用于配置 urlpatterns 。
首先，让我们来编写配置，在 test.py下一行接着写:
test.py
setting = {
'DEBUG':True,
'ROOT_URLCONF':__name__
}
settings.configure(**setting)
我们只是进行了简单的配置，设置 DEGUB 为 True 是因为我们想要在出错时能看到错误报告。设置 ROOT_URLCONF 为 __name__ 也就是这个文件本身，也就是说，我们打算把 urlpatterns 这个变量写进这个文件中。
这个配置很简单吧。
接下来让我们编写视图，在 test.py 加入以下代码：
test.py
def home(request):
return HttpResponse('Hello world!')
这个视图非常简单，仅仅是返回一个字符串。
最后，把 urlpatterns 写在下面：
test.py
urlpatterns = [url('^$',home,name='home')]
到目前为止，你的代码应该是这样的：
test.py
from django.conf import settings
from django.http import HttpResponse
from django.conf.urls import url
setting = {
'DEBUG':True,
'ROOT_URLCONF':__name__
}
settings.configure(**setting)
def home(request):
return HttpResponse('Hello world!')
urlpatterns = [url('^$',home,name='home')]
该如何运行呢？一般情况下，我们是用 manage.py 来运行的。那 manage.py 又是怎么运行的？在 manage.py 内部，它调用了 django 的 exute_from_command_line(**command_line_args)方法来运行我们的应用，所以，把这部分代码添加到最后(实际上，这是从 manage.py复制粘贴过来的，去掉了不必要的部分，大家也可以这么做，嘿嘿嘿)：
test.py
if __name__ == '__main__':
import sys
from django.core.management import execute_from_command_line
execute_from_command_line(sys.argv)
此时，你的代码应该长这样：
test.py
from django.conf import settings
from django.http import HttpResponse
from django.conf.urls import url
setting = {
'DEBUG':True,
'ROOT_URLCONF':__name__
}
settings.configure(**setting)
def home(request):
return HttpResponse('Hello world!')
urlpatterns = [url('^$',home,name='home')]
if __name__ == '__main__':
import sys
from django.core.management import execute_from_command_line
execute_from_command_line(sys.argv)
回到 test 目录下，在终端运行 python test.py runserver ，然后在浏览器访问 127.0.0.1:8000 ，不出意外的话，你会看到浏览器上有个 hello world。
我们仅仅用了 19 行代码就完成了一个单文件的 django 应用。其实它的原理很简单，就是把以前分开的代码给放在了一起，urls.py是 tes.py ,·settings.py是 test.py，views.py是test.py，甚至连 manage.py 也是 test.py 。
这个小 demo 意义在于让大家了解 django 在运行的时候都发生了些什么，了解 django 的运行流程，为以后的开发打下基础。
REST 是什么
先有个印象
REST的种种好处我不再赘述。简单的说说为什么我们需要用 REST 。相信写过模板的同学都知道，只要哪怕页面中的数据有一丝丝变动，那整个页面都需要重新渲染，这对性能无疑是巨大的浪费，并且页面中只有一些元素会和数据相联系，比如列表中的
元素，如果数据有变化，能直接只更新 元素就好了，REST 就是为此而生。提到 REST ，很多人可能知道一些概念，比如我们将要做的前后端分离的项目会用到它，大概明白它可以用用 json 来交换数据。REST 不是什么具体的软件或者代码，而是一种思想。这么说就太抽象了，REST 刚出来的时候是以论文的形式提出的，是一种设计的形式。对它的概念我们就先了解到这里。在本章，我们就把 REST 简单的当作是不再让 django 来渲染我们的前端，而是用 JS 在前端请求数据，用 JS 来渲染我们的页面。让 django 专注于后端的数据处理。
我们的 REST
为了明确我们的 REST 开发，我们的前后端的分工大概如下：
客户端(浏览器)----> 前端页面-----> 后端处理数据，并把数据以 json 形式发送到前端
(这里本来是 flow 流程图，结果简书貌似不支持)
我们的 REST 设计目前就是这样，实际上，REST 的抽象架构也就是这样的，
第一个REST项目
这个项目的意义在于让大家了解 REST 的大致开发流程，踩踩需要踩的坑。这次我们会做一个简单的在线代码执行系统，由于不会用到数据库和模版，所以我们就使用刚才学习的单文件 django 来开发这个应用。注意，在开发这个应用时，需要你对 JavaScript 和 JQuery 有最基本的了解，要是你对他们还不了解，那就在敲代码时多多查阅文档，在练习当中学会他们。同时我们还会使用 Bootstrap 。在跟随教程敲代码时，注意多翻翻文档，一边敲一边查看文档，搞明白每一行代码是是什么意思。同时，代码注释也是很好的文档搜索关键词。
设计应用
我们希望在用户访问我们的主页，并能在页面中编写python代码，在点击执行按钮时，主页上能返回程序执行的结果。
创建我们的应用
新建一个文件夹，叫做 online_python ，并创建的目录结构：
onlie_python/
index.html
online_app.py
准备工作
先把刚才在 test.py 里的代码复制过来，
online_app.py
from django.conf import settings
from django.http import HttpResponse
from django.conf.urls import url
setting = {
'DEBUG':True,
'ROOT_URLCONF':__name__
}
settings.configure(**setting)
def home(request):
return HttpResponse('Hello world!')
urlpatterns = [url('^$',home,name='home')]
if __name__ == '__main__':
import sys
from django.core.management import execute_from_command_line
execute_from_command_line(sys.argv)
我们需要用户在访问访问 http://127.0.0.1:8000/ 时，视图应该返回主页的 html，也就是我们的 index.html 。由于我们并没有使用 django 的模板引擎，所以 render 函数也不能用了。所以我们需要自己手动的把 index.html 写入到响应中。所以把我们的 home 函数改成这个样子：
online_app.py
def home(request):
with open('index.html','rb') as f:
html = f.read()
return HttpResponse(html)注意，这里是以二进制读取的方式('rb')打开的 index.html ，也就是说最终的 html 的值为字节串，也就是 b'....'的形式，为什么要用二进制形式打开呢？
原因有两个：最主要的也是最重要的，在一个 html 文件中，你不知道会有什么样的语言夹杂进去，一旦 python 无法识别其中的编码，就会报编码错误。然而实际上，读取并解析 html 是浏览器来完成的工作，django 只是简单的充当一个传递者的角色，它只需要把 html 文件传给浏览器即可。
这也涉及到了一些浏览器和服务器数据传输的知识，浏览器与服务器的内容交互都是以二进制流的方式进行的，所以正规的响应就应返回字节串。django 的 HttpResponse为我们做了转换的工作，所以你也可以把字符串传给 HttpResponse。
由于我们的 index.html 还没有任何内容，在 index.html 写入以下内容：
index.html
在线 Python 解释器在线 Python 解释器
在根路径下运行 python online_app.py runserver ，在浏览器中访问 http://127.0.0.1:8000，你应该可以在浏览器中看到 在线 Python 解释器 的字样。
一切已经就绪，你准备好了吗？
前端开发
接下来，让我们专注于前端的开发，如果你对 js 和 jqery 不是很了解，那也没关系，教程中会进行讲解，如果有不懂的地方，利用教程中的关键词去查文档就行了。
我们需要使用 Bootstrap ，所以要引入 jqery。在 Bootstrap 的官网的基本模板给复制进来并替换掉原来的代码，删除其中的注释，此时你的 index.html 是这样的：
index.html
Bootstrap 101 Template你好，世界！
我们需要从页面中来引用 Bootstrap 的 js 文件和 css 文件，所以把第 8 行 替换为：
把第 13 行替换为：
现在，让我们正式开始前端页面的开发。最好把 Bootstrap 的官方文档打开，好方便随时查阅。
首先，我们需要对页面进行布局，先把我们页面的大概的样子设计好，我们的页面大概是这样的：
+-------------------------+
+ ---标题---- +
+ 代码输入框 结果显示框 +
+ | +
+ +------+ | +------+ +
+ + + | + + +
+ + + | + + +
+ + + | + + +
+ +------+ | +------+ +
+ | +
+ +
+-------------------------+
由于前端代码的特殊性，代码所在的行对最终的结果有影响，所以我给下面的代码手动添加了行号。注意：在下面的代码中 + 与 - 分别代表代码的删除、增加，他们之前的数字是行号。
把第 7 行的改成：
index.html
7-
Bootstrap 101 Template7+
在线 PYthony 解释器删除第 11 行内容， 并替换为Bootstrap 布局容器
index.html
11-
你好，世界！
11+
12+
13+
我们可以大致把页面看成两个 Bootstrap container 的两个 row。
也就是：
+-------------------------+
+ ---标题---- +---------> 标题单独为一行
+ 代码输入框 结果显示框 +------>+
+ | + +
+ +------+ | +------+ + +
+ + + | + + + +
+ + + | + + + +-----> 主体内容可以看作一行分成了两列
+ + + | + + + +
+ +------+ | +------+ + +
+ | + +
+ +----->+
+-------------------------+
按照上面的布局，我们这样来写代码：
inxex.html
12+
13+
14+
15+ 在线 Python 解释器
16+
17+
18+
19
20+
保存你的代码，在浏览器中打开 index.html 你可以看到浏览器中央已经有个标题了。
已经可以看见标题了
接下来我们把代码输入框和结果显示框也完成。
因为我们的主体布局是左右布局，所以我们要先把左右布局先写好：
index.html
20
21+
22+
23
现在我们把需要在屏幕上显示的具体元素先写好：
代码输入部分：
index.html
21
22+
23+ 在下面输入代码
24+
25+
26+ 运行
27
结果显示部分：
index.html
28
29+
运行结果
30+
31+
32