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

系列文章目录

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


前言

上一个博客讲述了如何搭建开发环境,并输出一个属于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的MVT设计模式

从Django的模型层开始书写

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

定义文章模型:

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

  1. 文章id标记 (Primary key)
  2. 文章标题 ( TextField )
  3. 文章摘要 ( TextField )
  4. 文章内容 ( TextField )
  5. 发布日期(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 = article
            session_list = curr_article.content.split('\n')
    return render(request, 'detail.html', {
    
    'curr_article': curr_article,
                                          'session_list': session_list
                                              })
配置URLconf

查找视图的过程 :

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

URLconf入口
位于如图所示的project下的settings.py文件下的ROOT_URLCONF
在这里插入图片描述
分别在project和app中定义urlconf
在执行分工合作时,每一个人进行一个app的开发时,将小组合作中的app整合成一个project时,仅需要在project目录下的urls.py中声明即可引入app下所有路由,降低了项目之间的耦合性。提高生产效率,和分工合作效率,真是小组任务写系统的好帮手。

扫描二维码关注公众号,回复: 13118228 查看本文章

在project中定义urlconf
blog\urls.py

"""blog URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. 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 path

import self_blog.views

urlpatterns = [
    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 Environment

def 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/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

最后的实现效果为:
进入首页:
在这里插入图片描述
点击进入详情页:
在这里插入图片描述
目前专注后端学习,前端页面太丑,后期更改。如有大佬指出错误,还望不吝赐教。

猜你喜欢

转载自blog.csdn.net/weixin_45915507/article/details/114996160