程序员

[翻译]使用Django框架来开发适合移动设备的Web

2018-02-01  本文已影响0人  a11en0

创建一个Django admin的接口对象

使用Django admin的接口,给Post类(在之前我们已经完成的数据模型model中)创建一个对象。

myfirstdjangoproject目录使用以下命令,确保Django 的web服务运行在8000端口上(其他用户选择的也可以)。

# cd ~/myfirstdjangoenv/myfirstdjangoproject
# python manage.py runserver 0.0.0.0:8000

现在打开浏览器进入http://ip-address:8000/admin,然后用预先创建的账户登录并开始写入一些post(这会创建一个Post类型的对象并且插入相关数据进入底层数据库)

Django Administration

重复输入2~3次数据:


Create Object in Django

现在我们已经创建了一些数据,让我们看下怎样才能把这些数据在浏览器中显示出来;

初始化视图(view)

我们第一个视图(~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) 将会负责筛选所有的Post对象,并返回那些whenPublished(whenPublished__lte=timezone.now()) 的值小于或等于当前日期,并且时间(whenPublished__lte=timezone.now())按照降序排序;

这些对象很方便的被保存在名为posts的变量中,并且返回后(确定为allposts)被嵌入在HTML页面中,我们可以阅读以下代码:

from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
        posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
        return render(request, 'myblog/posts.html', {'allposts': posts})

最后提醒,whenPublished__lte中的双下划线是用于从一个过滤器或者操作符(lte = less than or equal)中区分数据域。

一旦我们定义完成初始化视图,就可以开始关联模板文件。

为我们的第一个项目创建一个template(网页模板)

在我们预先生成的路径下,键入命令。将我们的初始化模板存入myblog/templates/myblog. 这意味着你需要创建一个目录templates和一个子目录myblog。

# cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
# mkdir -p templates/myblog

命名模板文件’posts.html‘,并写入以下代码。你将注意到我们添加了一些在线引用 jQuery, Bootstrap, FontAwesome, and Google fonts.

此外,我们使用大括号将HTML中的Python 代码括了起来。请注意,每个Post类型的对象我们都显示了它的标题、出版日期和作者,最后是正文。最后,您将看到以红色显示myblog / views.py返回的对象的引用。

Ok,下面是posts.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
    <style>
      .title {
        font-family: 'Indie Flower', serif;
        font-size: 30px;
        color: #1E90FF;
      }
      h1 {
        font-family: 'Pacifico', serif;
        font-size: 45px;
        color: #1E90FF;
      }
    </style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
    <div>
        <div class="title">{{ post.title }}</div>
        <strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
        <p>{{ post.text|linebreaks }}</p>
    </div>
{% endfor %}
</div>
</body>
</html>

在上面的模板中, linebreaks过滤器用于将纯文本中的换行符替换为相应的HTML标签(<br />或</ p>),以使用段落分隔正确格式化每个post。

接下来,我们需要在应用程序中的URL和相应的返回数据的视图之间建立一个映射。为此,请在myblog中使用以下内容创建一个名为urls.py的文件:

from django.conf.urls import url
from . import views
urlpatterns = [
    url(r'^$', views.posts, name='posts'),
]

r'^ $'值得多一点解释。前导r指示Django将单引号内的字符串视为正则表达式。

特别的是,r'^$'代表一个空字符串,当我们在浏览器中输入http://ip-address:8000 (而不是其他任何内容)时,views.py中的posts变量中返回的数据就会显示在我们的主页中。

最后,但也十分重要,我们将把我们的博客应用程序的urls.py文件(〜/ myfirstdjangoenv / myfirstdjangoproject / myblog / urls.py)包含到我们主项目的urls.py中(〜/ myfirstdjangoenv / myfirstdjangoproject / myfirstdjangoproject / url的.py)

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

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'', include('myblog.urls')),
]

启动web 服务:

# cd ~/myfirstdjangoenv/myfirstdjangoproject
# python manage.py runserver 0.0.0.0:8000

我们就能看见我们之前添加的posts被显示出来了~~~

Check My Django Web Project

感谢Bootstrap,在更小的设备中你依然能够看见一个不错的显示效果。


Mobile Responsive Look of My Project

回顾

让我们回顾一下本文中提到的一些概念:
Let’s now review the concepts that we have covered in this article and throughout this series:
1.每个model定义一个对象并映射一个数据表,该表的字段依次映射该对象的属性。另一方面,模板定义将被显示的view返回的数据。

假设我们想通过在Post对象中添加一个名为summary的字段来修改我们的模型,我们将在这里存储每个post的可选简要描述。让我们在myblog / models.py中添加以下行:

summary = models.CharField(max_length=350, blank=True, null=True)

在之前的内容中我们知道,我们需要将更改写入数据库:

# python manage.py makemigrations myblog
# python manage.py migrate myblog
Django: Migrate Changes to Database

然后使用admin接口去编辑posts,并添加一个简短的概要到每一个post中。最后,将以下代码替换掉(posts.html)

<p>{{ post.text|linebreaks }}</p>

替换为

<p>{{ post.text|linebreaks }}</p>

刷新主页查看下变化:

Django: Verify Changes to Web Project

2. 视图函数接受一个HTTP请求并返回一个HTTP响应。 在本文中,在views.py中定义posts(请求)将调用底层数据库来检索所有posts。 如果我们想要检索标题中所有可能的单词,我们应该替换。

posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')

替换为

posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')

By separating the user interface from the application logic in web applications, Django facilitates the tasks of maintaining and escalating apps.

3.如果你按照本系列中指导的那样做,你的项目结构应该如下所示:

myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0001_initial.pyc
│   │   ├── __init__.py
│   │   └── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── templates
│   │   └── myblog
│   │       └── posts.html
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── views.py
│   └── views.pyc
└── myfirstdjangoproject
    ├── __init__.py
    ├── __init__.pyc
    ├── settings.py
    ├── settings.pyc
    ├── urls.py
    ├── urls.pyc
    ├── wsgi.py
    └── wsgi.pyc

如果以上列表没有正确地显示在你的浏览器中,这里还有一份截图,你可以通过以下命令输出:

# tree myfirstdjangoenv/myfirstdjangoproject
My Django Protect Tree

总结

虽然所有这些概念起初看起来有点吓人,但我可以向你保证,Django非常值得熟悉它,希望我们在本系列中使用的例子向你介绍这个出色的Web框架,将激励你学习更多。 如果是这样,官方的Django文档(不断更新)是最好的开始。 我可以向你们保证,Django还有很多东西比我们能够在一系列的文章中充分的覆盖到所有的东西,所以你可以随意的去探索它并且通过它来学习!

@Allen Ge

上一篇下一篇

猜你喜欢

热点阅读