功能介紹：

頁面	功能
主頁index.html	展示添加博客和博客串列的文字，實作頁面跳轉
添加頁add.html	輸入文章標題及內容，并將內容提交到資料庫中
串列頁list.html	將資料庫中所有博客展示到前端頁面中，點擊文章可以查看文章的詳情，附帶編輯和洗掉的功能
詳情頁detail.html	顯示文章的標題及內容

1.環境配置及Django初始化

（1）ubuntu中新建供本專案使用的虛擬環境：

在ubuntu中新建一個供此專案使用的虛擬環境（名為dja_env），并安裝PyMsql包以供專案操作mysql資料庫，

在這里插入圖片描述

（2）pycharm中新建空Django專案:

在pycharm中新建名為blog的空Django專案；
配置好與遠程專案環境的連接；

在這里插入圖片描述

并新建一個名為blog_server的APP；

在這里插入圖片描述

（3）進行資料庫配置及一些細小配置：

（操作專案目錄下的settings.py檔案）

①設定允許所有人訪問

ALLOWED_HOSTS = ["*"]

②注冊新建的APP

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'blog_server',
]

③配置連接mysql資料庫

（注意：已經在資料庫中新建了名為blog的資料庫）

create database blog;

# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

DATABASES = {
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    # }
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 資料庫引擎
        'NAME': 'blog',                        # 資料庫名稱
        'USER': 'root',                        # 鏈接資料庫的用戶名
        'PASSWORD': 'password',                 # 鏈接資料庫的密碼
        'HOST': '域名',                         # mysql服務器的域名或ip地址
        'PORT': '3306',                        # mysql的一個埠號,默認是3306
    }

}

④更改專案使用的資料庫為Mysql

注意：Django默認使用的不是mysql資料庫，所以需要在專案目錄下的__init__.py檔案中添加以下代碼更改專案使用的資料庫，

import pymysql
pymysql.install_as_MySQLdb()

⑤設定時區為中國

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'Asia/Shanghai'			#更改

USE_I18N = True

USE_L10N = False				       	#更改

USE_TZ = True

（4）分配路由：

在專案目錄下的urls.py檔案中分配url（別忘了在新建的app目錄下創建個空的urls.py檔案~），

from django.contrib import admin
from django.urls import path,include		#需匯入include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog_server/',include("blog_server.urls")),		#分配url
]

2.創建模型并映射到資料庫:

創建模型并映射（執行兩個映射命令即可，忘了的看看前面的《模型的創建與映射》）到資料庫，
（操作blog_server下的models.py檔案）

from django.db import models

# Create your models here.

class BlogModel(models.Model):
    # 標題
    title = models.CharField(max_length=50)
    # 內容
    contest = models.TextField()

在這里插入圖片描述

3.基本框架撰寫

準備作業——專案目錄下的templates目錄下創建一個名為blog_server的檔案夾！
（供存放本專案模板檔案使用~）

在這里插入圖片描述

（1）父模板base.html的撰寫：

（templates/blog_server/base.html檔案）

只需挖倆坑即可——一個標題處挖一個坑，不同頁面標題起的不同；一個內容處挖一個坑，不同頁面內容展示的肯定不一樣，

在這里插入圖片描述

（2）主頁index.html的撰寫：

（templates/blog_server/index.html檔案）

對于主頁,只需要添加url跳轉的實作，所以在內容部分給倆a標簽即可！

{% extends 'blog_server/base.html' %}

{% block title %}
首頁
{% endblock %}

{% block con %}
    <a href="#">添加博客</a>
    <a href="#">博客串列</a>
{% endblock %}

主頁面對應的視圖函式：
在這里插入圖片描述

（3）添加博客頁面add.html的撰寫:

（templates/blog_server/add.html檔案）

{% extends 'blog_server/base.html' %}

{% block title %}
添加頁
{% endblock %}

{% block con %}
{# form標簽里的action指表單內容提交到何處，不寫則提交到本地 #}
<form method="post" action="">
    <input type="text" placeholder="請輸入文章標題" name="title"><br><br>
    <textarea name="content" placeholder="請輸入文章內容"></textarea><br><br>
    <button type="submit">發布</button>
</form>
{% endblock %}

添加博客頁對應的視圖函式：
在這里插入圖片描述

（4）博客串列頁面list.html的撰寫：

（templates/blog_server/list.html檔案）

{% extends "blog_server/base.html" %}

{% block title %}
串列頁
{% endblock %}

{% block con %}
根據資料庫里面的資料渲染出來！
{% endblock %}

博客串列頁對應的視圖函式：

在這里插入圖片描述

撰寫上述視圖函式各自對應的路由：

（blog_server/urls.py檔案）

from django.urls import path
from . import views

urlpatterns = [
    path("index/",views.index,name='index'),    #首頁
    path("render_add/",views.render_add,name='render_add'),  #添加頁
    path("add/",views.add,name='add'),      #添加頁提交的函式視圖
    path("list/",views.list,name='list'),       #博客串列頁
]

到現在，此專案整體框架已經搭建好，你已經可以運行整個專案，觀看一下簡陋的實作效果：

首頁：
在這里插入圖片描述添加頁：

博客串列頁：
在這里插入圖片描述

4.基本功能的實作

（1）主頁功能的實作：

在這里插入圖片描述

（2）添加博客頁功能的實作：

在這里插入圖片描述
撰寫添加博客功能的業務邏輯（blog_server/views.py檔案）：

在這里插入圖片描述
此功能已經實作：
點擊發布之后：
查看資料庫發現添加成功哦！

設想一下——你再發朋友圈發布成功之后，難道只是給你顯示一個“提交成功”嗎？
肯定不是啊！它是跳轉到朋友圈的串列頁，
所以使用一下重定向，當你點擊“發布”，并發布成功之后給你跳轉到博客串列頁，

在這里插入圖片描述

（3）博客串列頁功能的實作：

在這里插入圖片描述

撰寫博客串列頁實作業務邏輯（blog_server/views.py檔案）：
在這里插入圖片描述此功能已經實作：

現在就又需要一個功能——當我們點擊博客串列頁中的任意博客標題時，要實作跳轉到對應的博客詳情頁，

（4）detail.html詳情頁的實作:

detail.html將某一篇博客所有資料展示！

在這里插入圖片描述

博客詳情頁的路由撰寫：
在這里插入圖片描述

博客詳情頁對應的視圖函式：
在這里插入圖片描述

相應的——博客串列頁前端模板中包裹每個博客標題的a標簽所跳轉的路徑要指定到相應的博客詳情頁：
此功能已經實作（點擊博客串列頁任意博客標題即可跳轉對應的博客詳情頁！）：

（5）引入兩個新功能——洗掉和修改：

博客串列頁（list.html）加入兩個a標簽：
在這里插入圖片描述效果展示：

第一個——洗掉功能的實作：

從資料庫中將相應的博客文章洗掉,然后重定向到串列頁！

在這里插入圖片描述
配置洗掉視圖函式對應的路由：

更改博客串列頁（list.html）中修改對應的a標簽的跳轉鏈接：

此功能已經實作：

點擊洗掉后，對應博客被洗掉，然后跳轉到原頁面（博客串列頁）：
在這里插入圖片描述

第二個——修改功能的實作：

分析可知——修改功能所需的前端頁面其實就是添加博客頁的前端頁面，所以我們只需對add.html頁面進行一些改動即可實作修改功能！

在這里插入圖片描述
配置修改視圖函式對應的路由：

在這里插入圖片描述

更改添加博客頁（add.html），使其在添加博客時顯示添加博客頁面；在修改博客時顯示修改博客頁面：

{% extends 'blog_server/base.html' %}

{% block title %}
添加頁
{% endblock %}

{% block con %}
{#action:提交到哪里，不寫默認提交到本地！#}
    {% if o_article %}          {# 存在   修改頁 #}
        <form method="post" action={% url 'update' o_article.id %}>
    {% else %}                  {# 不存在 添加頁 #}
        <form method="post" action={% url 'add' %}>
    {% endif %}

{#  跨域請求攻擊  因為使用的是post方式提交，所以要帶下面這么一行，不然會報錯哦！#}
        {% csrf_token %}
        <input type="text" placeholder="請輸入文章標題" name="title" {% if o_article %}value = "{{ o_article.title }}" {% endif %}><br>
        <textarea placeholder="請輸入文章內容" name="content">{% if o_article %}{{ o_article.contest }}{% endif %}</textarea><br>
        {% if o_article %}
            <button type="submit">修改</button>
        {% endif %}
            <button type="submit">發布</button>

    </form>
{% endblock %}

注意別忘了給博客串列頁中的修改對應的a標簽完善一下：
在這里插入圖片描述
此功能已經實作：

點擊博客串列后：

在這里插入圖片描述
最后一篇博客內容：
點擊修改按鈕，并修改博文標簽和內容：

點擊修改按鈕，會發現修改成功哦！

在這里插入圖片描述

（6）拓展——分頁：

第一部分：分頁屬性及方法的學習：
使用自定義的串列li模擬資料庫中的QuerySet資料：

在這里插入圖片描述

現在有個問題就是，第n頁的整個的實體物件的方法與Paginator這個分頁實體物件的方法不互通，那么，如果我們在獲取了第n頁的實體物件后要使用到Paginator這個分頁的實體物件的方法該怎么做呢？

在這里插入圖片描述

第二部分：結合本專案進行實作：

①視圖函式的更改（博客串列頁實作分頁）
在這里插入圖片描述

②串列模板路徑更改（向其傳參num：實作分頁第幾頁的變換）
在這里插入圖片描述
③list.html模板檔案的更改（實作分頁展示；可進行上下分頁變換）

{% extends "blog_server/base.html" %}

{% block title %}
串列頁
{% endblock %}

{% block con %}
    <ul>
    <li><h2>文章標題</h2></li>
        {% for foo in pages %}
            <li>
                <a href={% url 'detail' foo.id %}>{{ foo.title }}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href={% url 'edit_blog' foo.id %}>修改</a>
                <a href={% url 'delete_blog' foo.id %}>洗掉</a>
            </li>
        {% endfor %}
    </ul>
    {#    .number方法是獲取當前頁的頁碼；#}
    {#    .previous_page_number方法是獲取上一頁的頁碼；#}
    {#    .next_page_number方法是獲取下一頁的頁碼；#}
    {#    .has_previous方法是判斷是否有上一頁；#}
    {#    .has_next方法是判斷是否有下一頁，#}
    {% if pages.has_previous %}
            <a href="{% url 'list' pages.previous_page_number %}">上一頁</a>
    {% else %}
            <a href="javascript:">上一頁</a>
    {% endif %}

    {% if pages.has_next %}
            <a href="{% url 'list' pages.next_page_number %}">下一頁</a>
    {% else %}
            <a href="javascript:">下一頁</a>
    {% endif %}

{% endblock %}

整個專案原始碼百度網盤鏈接：

鏈接：https://pan.baidu.com/s/1xhiN6o5EI_91w00IlKZytA
提取碼：GHZ6

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/299342.html

標籤：python

上一篇：2021乙醇偶合制備 C4 烯烴

下一篇：【Leetcode刷題】4. 尋找兩個正序陣列的中位數

29.結合前面所學實作一個博客小案例

1.環境配置及Django初始化

（1）ubuntu中新建供本專案使用的虛擬環境：

（2）pycharm中新建空Django專案:

（3）進行資料庫配置及一些細小配置：

①設定允許所有人訪問

②注冊新建的APP

③配置連接mysql資料庫

④更改專案使用的資料庫為Mysql

⑤設定時區為中國

（4）分配路由：

2.創建模型并映射到資料庫:

3.基本框架撰寫

（1）父模板base.html的撰寫：

（2）主頁index.html的撰寫：

（3）添加博客頁面add.html的撰寫:

（4）博客串列頁面list.html的撰寫：

撰寫上述視圖函式各自對應的路由：

到現在，此專案整體框架已經搭建好，你已經可以運行整個專案，觀看一下簡陋的實作效果：

4.基本功能的實作

（1）主頁功能的實作：

（2）添加博客頁功能的實作：

（3）博客串列頁功能的實作：

（4）detail.html詳情頁的實作:

（5）引入兩個新功能——洗掉和修改：

第一個——洗掉功能的實作：

第二個——修改功能的實作：

（6）拓展——分頁：

整個專案原始碼百度網盤鏈接：