原版书名:《Django 2.1 Tutorial : Build a Travel Blog with GoormIDE and Bootstrap 4 (Tutorial Project)》
公司专注于为企业提供成都网站制作、做网站、微信公众号开发、商城网站建设,微信小程序定制开发,软件定制网站设计等一站式互联网企业服务。凭借多年丰富的经验,我们会仔细了解各客户的需求而做出多方面的分析、设计、整合,为客户设计出具风格及创意性的商业解决方案,创新互联建站更提供一系列网站制作和网站推广的服务。
作者:Hojun Lee、 Suwon Choi
出版时间:2018-08
演示地址:https://tutorialdjango-ircmu.run.goorm.io/
源码地址:https://github.com/wenguonideshou/tutorialdjango
这本书适合谁
这本书的目标读者是想使用django编程的程序员。django是python语言里非常流行的框架。希望这是个提升你的web开发技能的好机会。
关于这本书
这本书将会教你使用django开发简单旅游博客,并不学习django开发的详细细节,而是主要关注于手把手的开发简单web项目。
如果你跟着操作,你将学会开发django web项目,你可以在上面的源码地址下载源码和模板。
本书的前端编程部分使用bootstrap 4。
学完教程后
学完本书后,你将学会排错,并记录解决办法,而且你将能开发实际的web项目。
如果你对python其他方面感兴趣,你可能还想学习数据分析、数据可视化或人工智能。
第一章 在Goorm IDE安装环境
1.1 介绍
django是基于python开发的免费开源的web框架,在Instagram、NASA、Disqus等大公司应用广泛。
框架是利用诸多现成的组件使得开发web应用更快更容易的支持结构。
django在2005年做为免费开源的框架出现,django2.0在2017年12月发布,目前在韩国还没有关于django2.0的书籍。
为了理解网站开发的全部过程,本书中我们将开发简单博客。
如果你想了解django的更多信息,建议参考django官方网站 https://www.djangoproject.com ,官方主页提供django介绍、下载和支持文档。
PDF文档下载地址 https://media.readthedocs.org/pdf/django/2.0.x/django.pdf
1.2 安装django和环境配置
下图描述互联网的工作原理,这是你在浏览器输入google.com后互联网的运行流程。
我们即将开发的网站也会是安装这样的流程运行。
我们将使用不同的编程语言和框架如HTML、CSS、JavaScript、Python、Bootstrap和django。
1)你在浏览器输入google.com
2)浏览器获取到你输入的域名
3)浏览器从DNS服务器获取到域名对应的IP 216.58.221.164
4)浏览器向Google服务器发起首页请求
5)浏览器渲染服务器返回的响应,展现给你
我们将使用GoormIDE的云服务,操作系统是基于Linux的Ubuntu 14。
过去大家大部分使用图形化界面环境比如Windows,因此纯黑界面的Linux命令行环境可能对你来说比较陌生。
Linux系统占有全世界服务器操作系统至少90%的市场。这就是我们推荐使用Linux系统的原因。
对比下3种不同的云服务类型
SaaS(Software as a Service):SaaS是软件的开发、管理、部署都交给第三方,不需要关心技术问题,可以拿来即用,是用户体验最好的
PaaS(Platform as a Service):PaaS提供软件部署平台,抽象掉了硬件和操作系统细节,可以无缝地扩展。开发者只需要关注自己的业务逻辑,不需要关注底层
IaaS(Infrastructure as a Service):IaaS是云服务的最底层,主要提供一些基础资源,主要是专业人士使用
我相信你选择本书是因为被python强大的库、直观、优秀的可扩展性吸引。
现在python已成为世界上最流行的编程语言之一。
关于框架呢?下图是python官方wiki上关于python不同框架的描述。
除django外,还有其他流行的框架比如Flask。django是全栈web框架,而Flask是轻量、可扩展的。
从下面的框架中做出选择,没有绝对的正确和错误,这完全取决于你的项目。
1.2使用IDE配置环境
下面开始设置Goorm IDE环境,注意图片中的红框,官网 https://ide.goorm.io ,点击Sign Up注册账号,免费账号完全够用,可以创建5个容器。
注册完成后会自动登录Dashboard,或者在首页点击Dashboard。
在Dashboard页面有个看起来像设置电脑的容器,点击Create a new container,新版goorm需要填写申请理由然后人工审核通过后才能新建容器,内容就填写学习django web开发。
审核通过后,再次点击Create a new container,Source from选择Template,Name栏输入tutorialdjango,Description栏输入create a travel blog in django,software stack选择Python,点击Create
你将看到容器很快创建完成,并提示是否运行容器,点击Run进入容器
容器加载过程中通常会有代码提示或提到名人
下图是容器成功加载后的界面
①处是文件夹结构,在右上角有个刷新按钮,如果你新建或更新某些文件/文件夹但是在①看不见,就点击刷新按钮
②显示.txt .html .py等文件的内容
③协作、聊天窗口,我们不会使用到它
④命令行窗口,大部分命令在这里输入
点击Project - Running URL and Port,下图的红色方框是以后从外部访问的URL地址
提示:如果你没设置域名,在URL处输入域名,然后设置PORT为80
首先就是设计网站界面,本书不包括此步骤,如果想了解详情请阅读书籍《Bootstrap Tutorial: Learn how to create Travel Blog using Bootstrap》
我们看下站点结构:
主页 https://用户域名.run.Goorm.io
主页,网站介绍,Google地图API,最新发布
模板:index.html
博客列表 https://用户域名.run.Goorm.io/blog/
点击blog会跳转到主页,展现博客列表
模板:blog.html
文章详情 https://用户域名.run.Goorm.io/blog/文章ID
在列表页点击文章后跳转
模板:contens.html
下面是项目完成后的网站主页预览图,我们任意新建了一些文章
下面是博客列表页
下面是文章详情页,我们也任意填充了一些内容
现在开始开发,在④命令行窗口按步骤输入下面的命令
python --version # 检查python版本,是3.6.5 mkdir mysite # 创建名为mysite的文件夹 cd mysite # 进入mysite目录 apt-get install python-virtualenv # 安装虚拟环境所需要的包 virtualenv myvenv # 基于python3.6.5创建虚拟环境 source myvenv/bin/activate # 激活虚拟环境,注意:每次使用云容器都应该运行此命令激活虚拟环境
现在命令行最前面有(myenv)标志,说明已进入虚拟环境
安装django,创建项目
pip3 install django==2.0.6 # 安装django django-admin startproject tutorialdjango . # 在当前目录新建项目 python manage.py migrate # 稍后解释,简而言之,在数据库中新建表结构
一定要注意django-admin startproject后面的.
如果你创建的容器名称不是tutorialdjango,命令修改为django-admin startproject xxx,其中xxx是你的容器名称
现在打开左边面板,修改tutorialdjango目录的settings.py,第28改行为ALLOW_HOSTS = ['*'] 允许任意用户访问,如图所示
修改后按Ctrl+S保存生效,然后在命令行输入下面的命令
python manage.py runserver 0:80
点击Project - Running URL and Port
点击红框中的域名,浏览器会打开如图所示的页面
第二章 创建主页
使用django可以同时创建和组装多个应用,因为我们开发的是简单项目,现在我们只新建1个叫main的应用,在命令行窗口Ctrl+C停止运行上面的项目,输入命令:
python manage.py startapp main
在settings.py找到INSTALLED_APPS在最下面添加1行,注册main应用
注意:在'main'后面有个,
在项目下的urls.py添加内容视图函数和URL的映射
from main.views import index
意思是导入main目录下的views.py中的index函数,现在在views.py还没定义index函数,所以会报错,添加一行
path('', index)
意思是django会重定向任何访问 http://用户域名/ 到index函数,下面将连接index函数和index.html模板
文件位于 mysite/tutorialdjango/urls.py
现在打开mysite> main> views.py新建index函数,可以看到 调用此函数时它将会返回render渲染main/index.html模板
文件位于 mysite/main/urls.py
新建myiste/main/templates/main/index.html目录和文件,然后粘贴以下代码:
<html> <head> <title>Django!</title> </head> <body> <h2>Test!</h2> </body> </html>
启动web服务,看看网站发生了什么变化
python manage.py runserver 0:80
在域名后面添加/admin然后回车即可访问管理后台,可以在后台发布、编辑、删除文章,还可以管理用户。
但是现在还不能登录,因为没有创建管理员账号。为了安全考虑,建议在web应用中不要对外开放管理后台。
接下来将展示如何在主页加载图片,django不支持HTML和CSS中的相对目录。
在mysite目录下新建static文件夹,用来存储静态文件。
上传图片
如果在左边面板没找到图片,点击刷新标志即可
如图所示 在settings.py定义静态文件目录列表,注意在代码最后有个,
STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )
打开index.html输入下列代码调用静态文件,{% %}语法意思是调用模板标签
更多django模板语法请访问 https://docs.djangoproject.com/en/2.0/ref/templates/builtins/
<html> <head> <title>Django!</title> </head> <body> <h2>Test!</h2> {% load staticfiles %} <img src="{% static 'bluemountain.jpg' %}"> </body> </html>
如果web服务器没有运行,在命令行输入python manage.py runserver 0:80 ,点击Project - Running URL and Port菜单,点击域名,可以正常访问
现在项目结构如下图所示,红色方框的文件是刚修改过的文件
django把MVC模式叫做MTV模式,虽然术语改变,但是本质是相同的。下图演示了django的运行流程。
CRUD分别代表增、查、改、删
第三章 创建列表页
新建包括所有文章的列表页,首先编辑tutorialdjango/urls.py和tutorialdjango/views.py
from main.views import index, blog path('blog/', blog)
def blog(request): return render(request, 'main/blog.html')
新建mysite/main/templates/main/blog.html文件,输入以下代码
<html> <head> <title>Django!</title> </head> <body> <h2>Blog Page!</h2> </body> </html>
运行web服务器,浏览器打开 https://用户域名/blog/ ,可以正常访问
现在为每篇文章新建内容,首先需要创建文章模型,包括postname和contens字段,在myiste/main/models.py输入
class Post(models.Model): postname = models.CharField(max_length=50) contents = models.TextField()
要在数据库中新建模型对应的表结构,按Ctrl+C停止web服务器,然后输入下面的迁移命令
python manage.py makemigrations main python manage.py migrate
现在打开main/admin.py导入模型,修改管理后台界面
from .models import Post admin.site.register(Post)
现在创建超级管理员账户,超级管理员能删除、编辑、保存文章,还能管理其他用户。 在命令行窗口输入
python manage.py createsuperuser
为了安全考虑,在命令行输入密码的时候是不可见的。
再开启web服务器,能看见登录界面了吧。
输入创建的超级管理员用户名和密码登录,进入后台可以试下新建文章
点击SAVE后,刚才输入的标题并没有显示,而是只显示了Post object(1)。这是因为没有定义模型的显示名为postname。
编辑main/models.py输入
def __str__(self): return self.postname
刷新后台页面,现在可以看到刚才发布的文章标题,现在随便创建一些文章,稍后会删除。
这里我创建了3篇文章,现在准备在列表页展现这些文章,修改main/views.py
from .models import Post postlist = Post.objects.all() {'postlist': postlist}
修改blog.html模板在<h2>下面新增代码
<table> {% for list in postlist %} <tr> <td>{{list.postname}}</td> <td>{{list.contents}}</td> </tr> {% endfor %} </table>
这里使用{}模板标签从数据库获取所有数据
更多关于Django文档请访问 https://docs.djangoproject.com/en/2.0/
模板语言文档请访问 https://docs.djangoproject.com/en/2.0/ref/templates/language/
现在使用F12查看网页源代码,是看不到模板语言的,因为是在django内部渲染成HTML再展现给访客
第四章 新建详情页
任何时候你返回该项目,都需要运行下面的命令确保运行的是虚拟环境的python而不是系统自带的python
在使用虚拟环境的情况下,命令行最前面有(myvenv)标志
root@Goorm:/workspace/container name# cd mysite
root@Goorm:/workspace/container name/mysite# source myvenv/bin/activate
(myvenv)root@Goorm:/workspace/container name/mysite#
如果你在没有进入虚拟环境的情况下运行了以下命令,此时最好的解决办法就是删除容器并重建容器。
最前面是否有(myvenv)标志非常重要,因为他代表的是完全不同的运行环境!
现在创建详情页,展示每一篇文章。修改tutorialdjango/urls.py新增以下代码
from main.views import index, blog, postdetails path('blog/<int:pk>', postdetails),
修改main/views.py,新增以下代码
def postdetails(request, pk): postlist = Post.objects.get(pk=pk) return render(request, 'main/postdetails.html', {'postlist': postlist})
如下图所示,在templates文件夹有3个模板文件,现在这个是最后的模板(在第七章将会使用bootstrap美化模板)
新建templates/main/postdetails.html,输入
<html> <head> <title>Django!</title> </head> <body> <h2>Postdetails Page!</h2> <p>{{postlist.postname}}</p> <p>{{postlist.contents}}</p> </body> </html>
在URL最后添加文章数字编号,页面如图所示
使用onclick事件实现 在博客列表页点击文章标题或者内容进入文章详情页,编辑templates/main/blog.html
<tr onclick="location.href='/blog/{{list.pk}}'">
点击后
在详情页新建返回列表页的按钮,在postdetails.html添加带超链接的标签<a>
<a href='/blog/'>List(Go back)</a>
编辑main/models.py,新增可以上传图片的ImageField
mainphoto = models.ImageField(blank=True, null=True)
由于要上传图片,所以需要安装叫Pillow的图片处理库
pip3 install pillow # 上面修改了模型,所以需要迁移模型到数据库 python manage.py makemigrations python manage.py migrate python manage.py runserver 0:80
修改settings.py,设置上传文件的保存目录MEDIA_ROOT和访客访问的URL,如果不设置MEDIA_ROOT,文件将会上传到mysite目录下
现在在后台新建5篇文章,每篇文章上传1张图片
最开始上传名为jeju的图片,点击文章查看文件图片是否上传成功
点击图片文件名,浏览器弹出新页面 报错提示文件不存在,但是刚刚我们明明已经上传了!
还差一步,在urls.py设置图片URL
from django.conf.urls.static import static from django.conf import settings urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
现在可以刷新页面可以看到图片了
修改postdetails.html添加代码,注意红框内的域名改成你自己的
{% if postlist.mainphoto %} <img src='{{postlist.mainphoto.url}}'> {% endif %}
django官方文档中相关说明
现在可以在详情页看到图片了
第五章 增加评论框和标签
现在增加评论功能,我准备使用叫Disqus的插件。
也可以使用pip3 install django-disqus安装该扩展,但我打算使用另一种方式安装。
打开 https://disqus.com/ 点击Get Started
输入用户名、邮箱等注册
注册成功后先去邮箱收件箱 查收验证邮件,验证邮箱,然后点击I want to install Disqus on my site
输入网站名称、网站类型、语言,点击Create Site
选择套餐,当然是Basic啦。点击Subscribe Now
现在选择平台,点击最后的I don't see my platform listed, install manually with Universal Code
复制①里面的代码,点击Configure
点击Complete Setup
编辑postdetails.html在</body>标签前粘贴代码
刷新详情页,可以在页面最下面看到评论框
修改模型增加发布时间字段、编辑时间字段
publishDate = models.DateTimeField(blank=True, null=True) modifiedDate = models.DateTimeField(blank=True, null=True)
迁移模型
python manage.py makemigrations python manage.py migrate
在后台可以看到新增的字段
修改所有文章,并修改blog.html模板,增加下面这行
<td>{{list.modifiedDate}}</td>
添加过编辑时间字段的文章都能在网页上显示编辑时间
安装django-taggit为文章添加标签,还可以利用标签来查找具有相同标签的文章
pip3 install django-taggit
修改models.py添加tag字段
from taggit.managers import TaggableManager tag = TaggableManager(blank=True)
编辑settings.py,在INSTALLED_APPS添加'taggit',
迁移模型
python manage.py makemigrations python manage.py migrate
在后台确认文章编辑界面底部是否有标签选项,把旅行过的国家作为标签
输入标签,点击SAVE保存
修改postdetails.html添加以下代码
<p>{{postlist.tag.names}}</p>
在详情页可以看到Queryset类型的标签
使用for循环语句可以展现所有的标签,我暂时只使用1个标签所以用{{post.tag.names.0}}
现在标签是字符串类型了
第六章 使用bootstrap美化模板以及部署
可以把bootstrap看成花最少的精力快速获得想要的结果的包罗万象的前端web框架。
不管是超大屏幕还是手机端,bootstrap都为用户体验量身定制,也叫响应式设计。
bootstrap自带HTML、CSS、表单、按钮、表格、导航栏。
bootstrap3中能用的标签大部分在bootstrap4也能使用,但是4相较于3变化也不小,所以你需要了解下新版本的bootstrap。
可以在 https://www.w3schools.com/bootstrap4 找到bootstrap4的入门教程。
更多信息请访问官方网站 https://getbootstrap.com/docs/4.1/content/reboot/
可以在 https://getbootstrap.com/ 下载bootstrap4(在本书中不需要下载)
bootstrap默认模板使用cdn(内容分发网络),CDN的好处是无需下载文件,在全球访问速度都很不错
如果想使用最新版本的CDN,在Google搜索"bootstrap cdn"然后访问 https://www.bootstrapcdn.com 获取,最新版本是4
在001.html的<body></body>标签内有调用CDN的<script></script>标签,下图中的红框是模板中用来填充内容的代码
利用bootstrap的网格系统可以快速方便的建立响应式布局,整个页面的一行中可以有最多12列,如果不想使用全部12列 可以把列合并为更宽的列。
如下图所示,在<body></body>标签之间输入代码后,保存为002.html并用浏览器打开
红框代表在一行中定义的网格,每4小列分组为1个中型列,所以能看到3列
003.html把.col-md-4类和.col-md-6类的网格进行对比,效果一目了然
在官方网站可以看到,列也可以拆分
如果想在网格系统中使用所有的12列占满屏幕,使用.container-fluid类。
还可以把.no-gutters类添加到.row类,以消除列之间的外边距和内边距。
下面是官方网站对网格系统的描述,nestable意思是可以分割列。常用的是md类。
如果使用了偏移列,列的位置将会浮动,有许多方法设置外边距,不过常用的是偏移列和弹性盒子对列排序。下图的003.html只使用了偏移列。
现在解压templates.zip后,可以看到index.html,blog.html和blogdetails.html。
用浏览器打开index.html可以看到含有标记的地图。
每篇文章都需要坐标以在地图上做标记。
下图index001.html里的LatLng指的是纬度和精度。
在模型中添加经纬度字段
Lat = models.FloatField(null=True) Lng = models.FloatField(null=True)
官方文档提供blank和null的解释和区别:https://docs.djangoproject.com/en/2.0/ref/models/fields/#django.db.models.FloatField
迁移模型,重新运行web服务器
python manage.py makemigrations python manage.py migrate python manage.py runserver 0:80
可以在后台文章编辑页面看到地理坐标类型的经纬度字段。
如果忘记了后台用户名密码,可以在命令行执行python manage.py changepassword admin修改admin用户的密码。
给每篇文章填充经纬度数据
bluemountain 照片,经纬度(-33.3493206,149.7360613)
jejucityhall 照片,经纬度(33.499597,126.5290653)
perth 照片,经纬度(-32.0388312,115.4010747)
sydney 照片,经纬度(-33.8567844,151.213108)
tasmania 照片,经纬度(-42.200633, 146.643736)
然后从lorem ipsum网站生成虚假内容然后从本地templates/img文件夹上传照片。
lorem ipsum网站:https://lipsum.com/
现在删除其他数据,只留下下面5条。
编辑views.py在index函数里添加以下代码,才能在首页使用postlist变量
postlist = Post.objects.all()
从index_002.html复制全部代码,粘贴到index.html。这2个文件唯一不同的地方如下图所示。
现在刷新首页,可以看到坐标标记,但是照片是裂开的。
接下来用{% %}和{{}}语法把每篇文章的照片放到红色方框的Infowindow(信息窗口,地图专用术语)中。
点击照片后,跳转到文章详情页。
把index_003.html的所有代码复制到index.html中,记得把其中的域名改成你自己的域名。
下图显示的是2个文件之间的区别,左边是index.html右边是index_003.html。
打开本地的templates/blog.html,修改blog.html的第161到180行的代码,找到<a href=""></a>然后把红框位置换成你的自己的域名。
复制全部代码,粘贴到云服务的blog.html。
现在访问 https://你的域名/blog/ ,点击每张图片都会跳转到文章详情页。
打开本地的templates/blogdetails.html,修改第147到166行,找到<a href=""></a>标签,把红框的域名换成你自己的域名。
然后复制所有代码,粘贴到云服务里面的postdetails.html。
现在访问 https://你的域名/blog/文章ID ,可以看到漂亮的带评论框的详情页。
虽然本书中并没有用到模板继承,但是在实际的django web项目开发中会经常用到模板继承。
一般是新建含有头部、菜单、底部等的母版,然后在其他所有模板中继承此模板。
下图是模板继承的简单例子。year_archive.html继承base.html。
在GoormIDE,Always On(永远在线)选项仅供付费用户。
如果是付费用户,当点击Always On,容器的绿色在线状态将会被点亮,访客可以在任意时间访问旅游博客。
负责只能在Dashboard点击Run后容器才能运行,网站才能访问。
点击图片中的红框地方,查看更多详细选项。
部署
点击Configure进入详细配置页面,点击+Add添加你自己购买的域名和端口,或者使用GoormIDE赠送的域名也可以。
在Setting下面的Init script处点击Set,然后输入容器初始化命令,我经常使用下面2行命令:
source /workspace/容器名称/mysite/myvenv/bin/activate python3 /workspace/容器名称/mysite/manage.py runserver 0:80
输入完成后,点击下面的Stop停止容器,再点击右上角的Run
现在访问域名,测试网站完全正常运行。如果正常,说明上面的初始化脚本正常运行。
第七章 总结
django是python语言中快速开发web项目的框架,大部分功能都已经自动化,而且官方文档也很详尽。
阅读官方文档后,不用再考虑其他文档了。
现在我们使用django创建了简单的博客。
但是这仅仅使用了django的一小部分功能,如果想使用更多更强大的功能,推荐阅读官方文档。
下面是django的结构图,我画图简单总结之前我们做的所有步骤。你可以对照检查下是否有步骤遗漏。
注意:我们没有使用到表单功能
Django
urls.py
下图是我们之前所有操作的流程图。
最开始修改的是urls.py,urls.py根据特定的URL规则调用视图函数 。
views.py
在urls.py定义URL规则后,创建与URL相关联的视图函数。视图函数包括页面逻辑。
models.py
模型中的类变量代表数据库中的字段。需要执行迁移以保证数据库和模型结构同步。
templates
模板就是简单的文本文件,可以是任何基于文本的格式(html,csv等),模板展示的是页面设计界面。
译者注:全文到此结束。作者的模板做的很粗糙,页面中的很多超链接是死链。毕竟这只是个入门教程。
文章题目:Django2入门教程:利用GoormIDE和Bootstrap4开发旅游博客
网站路径:https://www.cdcxhl.com/article14/jscede.html
成都网站建设公司_创新互联,为您提供用户体验、网站收录、商城网站、关键词优化、Google、网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联