原版书名：《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目录和文件，然后粘贴以下代码：
Django!
Test!
启动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/
Django!
Test!
{% load staticfiles %}
如果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文件，输入以下代码
Django!
Blog Page!
运行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模板在
下面新增代码
{% for list in postlist %}
| {{list.postname}} |
{{list.contents}} |
{% endfor %}
这里使用{}模板标签从数据库获取所有数据
更多关于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/', 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，输入
Django!
Postdetails Page!
{{postlist.postname}}
{{postlist.contents}}
在URL最后添加文章数字编号，页面如图所示
使用onclick事件实现 在博客列表页点击文章标题或者内容进入文章详情页，编辑templates/main/blog.html
点击后
在详情页新建返回列表页的按钮，在postdetails.html添加带超链接的标签
List(Go back)
编辑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 %}
{% 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在
