[Django快速开发1]搭建一个简单的博客系统（1）

系列文章目录

Django快速开发0快速搭建环境并得到django项目的hello world

文章目录

系列文章目录
前言
从Django的模型层开始书写
- 定义文章模型：
- 使用脚本向sqlite3中注入数据
视图层之视图与URL
- 定义视图
- 配置URLconf
书写前端视图
- bootstrap基本知识
- jinja2

前言

上一个博客讲述了如何搭建开发环境，并输出一个属于Django的hello world，紧接着本篇博客将继续浅析Django框架的MVT设计模式，边做讲解边并使用jinja2和Bootstrap快速搭建一个具有分页显示的简单私人博客系统，学习目的主要是先对Django框架有一个大概的了解。

### Django的MVT设计模式

MVC
大部分开发语言中都有MVC框架
MVC框架的核心思想是：解耦
降低各功能模块之间的耦合性，方便变更，更容易重构代码，最大程度上实现代码的重用
m表示model，主要用于对数据库层的封装
v表示view，用于向用户展示结果
c表示controller，是核心，用于处理请求、获取数据、返回结果
MVT
Django是一款python的web开发框架
与MVC有所不同，属于MVT框架
m表示model，负责与数据库交互
v表示view，是核心，负责接收请求、获取数据、返回结果
t表示template，负责呈现内容到浏览器
整个客户端和服务器的具体交互如下图所示：

从Django的模型层开始书写

ORM(Object Relational Mapping): 对象关系映射（英语：Object Relational Mapping，简称ORM，或O/RM，或O/R mapping），是一种程序设计技术，用于实现面向对象编程语言里不同类型系统的数据之间的转换。从效果上说，它其实是创建了一个可在编程语言里使用的“虚拟对象数据库”。如今已有很多免费和付费的ORM产品，而有些程序员更倾向于创建自己的ORM工具。对ORM的实现中SQLalchemy就为我们提供了很好的专注度，更注重于业务逻辑的书写，而不必要过分花时间于数据库上【code first】。

定义文章模型：

作为一篇博客，其元素包括文章唯一id，文章标题、文章摘要、文章内容，因此我们开始设计其

文章id标记（Primary key）
文章标题（ TextField ）
文章摘要（ TextField ）
文章内容（ TextField ）
发布日期（DateTimeField(auto_now=True)）
因此在self_blogapp中定义模型：self_blog/models.py

from django.db import models# Create your models here.
class Article(models.Model):# 定义文章模型article_id = models.AutoField(primary_key=True)title = models.TextField()brief_content = models.TextField()content = models.TextField()publish_date = models.DateTimeField(auto_now=True)def __str__(self):return self.title

书写完成后在Terminal中输入python manage.py makemigrations生成迁移文件后，再使用python manage.py migrate映射到默认的sqlite3数据库中。

使用脚本向sqlite3中注入数据

啊

视图层之视图与URL

定义视图

视图就是一个Python函数，被定义在应用的views.py中.
视图的第一个参数是HttpRequest类型的对象reqeust，包含了所有请求信息.
视图必须返回HttpResponse对象，包含返回给请求者的响应信息.
需要导入HttpResponse模块 :from django.http import HttpResponse

视图函数书写如下：self_blog\views.py:

from django.shortcuts import render
from django.http import HttpResponse
from self_blog.models import Article
# Create your views here.def hello(request):return HttpResponse('hello world')def index(request):article_list = Article.objects.all()return render(request, 'index.html', {'article_list': article_list})def get_detail_page(request, article_id):article_list = Article.objects.all()for article in article_list:if article.article_id == article_id:curr_article = articlesession_list = curr_article.content.split('\n')return render(request, 'detail.html', {'curr_article': curr_article,'session_list': session_list})

配置URLconf

查找视图的过程 :

请求者在浏览器地址栏中输入URL, 请求到网站.
网站获取URL信息.
然后与编写好的URLconf逐条匹配.
如果匹配成功则调用对应的视图.
如果所有的URLconf都没有匹配成功.则返回404错误.

URLconf入口
位于如图所示的project下的settings.py文件下的ROOT_URLCONF

分别在project和app中定义urlconf
在执行分工合作时，每一个人进行一个app的开发时，将小组合作中的app整合成一个project时，仅需要在project目录下的urls.py中声明即可引入app下所有路由，降低了项目之间的耦合性。提高生产效率，和分工合作效率，真是小组任务写系统的好帮手。

在project中定义urlconf
blog\urls.py

"""blog URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
import self_blog.views
urlpatterns = [path('admin/', admin.site.urls),path('self_blog/', include('self_blog.urls'))]

在app中定义urlconf
self_blog/urls.py

from django.urls import pathimport self_blog.viewsurlpatterns = [path('hello', self_blog.views.hello),path('index', self_blog.views.index),path('detail/<int:article_id>', self_blog.views.get_detail_page)
]

书写前端视图

bootstrap基本知识

使用Bootstrap构建快速响应网站
使用世界上最流行的前端开源工具包Bootstrap快速设计和自定义响应式移动优先站点，它具有Sass变量和mixins，响应式网格系统，大量的预构建组件以及强大的JavaScript插件。只需对前端知识有一定的了解就可以快速上手进行前端页面的开发。

jinja2

Jinja2：是 Python 下一个被广泛应用的模板引擎，是由Python实现的模板语言，他的设计思想来源于 Django 的模板引擎，并扩展了其语法和一系列强大的功能，尤其是Flask框架内置的模板语言

由于django默认模板引擎功能不齐全,速度慢，所以我们也可以在Django中使用jinja2, jinja2宣称比django默认模板引擎快10-20倍。

Django主流的第三方APP基本上也都同时支持Django默认模板及jinja2，所以要用jinja2也不会有多少障碍。

安装jinja2

pip install jinja2

Django配置jinja2
在项目文件中创建 jinja2_env.py 文件

from jinja2 import Environmentdef environment(**options):env = Environment(**options)return env

2.在settings.py文件

TEMPLATES = [{'BACKEND': 'django.template.backends.jinja2.Jinja2',#修改1'DIRS': [os.path.join(BASE_DIR, 'templates')],'APP_DIRS':True,'OPTIONS':{'environment': 'jinja2_env.environment',# 修改2'context_processors':['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]

具体jinja2的语法请见：jinja2设计者文档
前端页面为：
tempaltes/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文章首页</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header"><h1>文章首页</h1>
</div>
<div class="container page-body"><div class="col-md-9" role="main"><div class="body-main"><div>{% for article in article_list %}<a href="detail\{{ article.article_id }}"><h3>{{ article.title }}</h3><p>{{ article.brief_content }}</p></a>{% endfor %}</div></div></div><div class="col-md-3" role="complementary"><div><h2>最新文章</h2>{% for article in article_list %}<h4><a href="detail/{{ article.article_id }}">{{ article.title }}</a></h4>{% endfor %}</div></div></div>
</body>
</html>

templtaes/detail.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文章详情页</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header"><h1>{{ curr_article.title }}</h1>
</div>
<div class="container page-body"><div>{% for session in session_list %}<p>{{ session }}</p>{% endfor %}</div>
</div>
</div>
</body>
</html>

最后的实现效果为：
进入首页：

点击进入详情页：

目前专注后端学习，前端页面太丑，后期更改。如有大佬指出错误，还望不吝赐教。