使用 Django 和 Dev.to API 顯示帖子

更新於 發佈於 閱讀時間約 25 分鐘

作為開發人員,您可能想知道是否需要博客。老實說,我寫博客已經有一段時間了,我只能告訴你,在你的網站上擁有一個博客有很大的好處。假設您有一個網站,您在該網站上擁有投資組合併銷售產品或服務。您如何為您的網站帶來更多流量,以便潛在的招聘人員或客戶能夠發現您的產品或服務?

為您的網站增加流量的最佳方式是擁有一個包含有用內容的博客。包含有用內容的博客向您的受眾和客戶表明您是值得信賴的信息來源。

raw-image

但是,要在您的網站上擁有博客,您需要一個內容管理系統,簡稱 CMS。CMS 是一種軟件解決方案,可幫助人們創建、管理和修改網站上的內容,而無需專業技術知識。

大多數 CMS 都是付費的,如果您想節省幾美元,付費 CMS 是您最不想要的。在本文中,我將向您展示如何在不花一分錢的情況下將博客添加到您的網站。我將使用 Django、Dev.to API、PostgreSQL 和Arctype SQL Client。

什麼是開發。到,Django 和 Postgres?

Dev.to是一個博客平台,開發人員在此發布有關幫助其他開發人員解決問題或學習新知識的主題的文章。Dev.to 是一個軟件開發人員社區,他們聚在一起互相幫助。Django 是一個免費且開源的基於 Python 的 Web 框架,它遵循模型-模板-視圖架構模式。Django 鼓勵快速開發和簡潔、實用的設計。

PostgreSQL,也稱為 Postgres,是一個免費的開源關係數據庫管理系統,強調 SQL 合規性。

先決條件

首先,為了能夠完成本教程,您需要在您的機器上安裝一個文本編輯器。在這種情況下,我將使用Visual Studio 代碼編輯器,但您可以使用您選擇的代碼編輯器。此外,請確保您的機器上安裝了PythonPostgreSQL 。

項目設置

要開始學習本教程,請在您的計算機上創建一個名為Blog的文件夾。右鍵單擊該文件夾並使用 Visual Studio Code 文本編輯器或您選擇的文本編輯器打開它。使用 Visual Studio Code 時,單擊頂部的終端選項,然後選擇新建終端,如下所示。

raw-image

現在讓我們在我們的 Blog Django 項目中安裝Django 。要安裝 Django,我們將使用一個名為Pipenv的 Python 打包工具。Pipenv 用於管理 Django 項目中的虛擬環境。您可以使用本指南將 Pipenv 安裝到您的機器上。現在運行以下命令在您的項目中安裝 Django:

pipenv 安裝 django

然後通過運行如下所示的命令在項目中創建一個虛擬環境。

pipenv 外殼

現在您應該在命令行上看到博客周圍的括號,如下所示。

((博客))

Blog 周圍的括號表示已激活虛擬環境。

現在讓我們通過運行如下所示的命令創建一個名為 Articles 的新 Django 項目。不要忘記末尾的句點 (.)。

django-admin startproject 文章。

現在運行如下所示的命令,然後訪問http://127.0.0.1:8000:

python manage.py 運行服務器

您應該看到如下所示的 Django 歡迎頁面。

raw-image

現在讓我們在 Django 項目中創建一個名為posts的應用程序。在命令行中,使用control+c 退出服務器。然後運行如下所示的命令。

python manage.py 啟動應用程序帖子

在 Visual Studio Code 編輯器窗口中,單擊Articles文件夾並打開settings.py文件,如下所示。

raw-image

在 settings.py 文件中,向下滾動到INSTALLED_APPS您將看到六個內置 Django 應用程序的部分。在底部添加我們的新帖子應用程序,如下所示。

INSTALLED_APPS = [ 
'django.contrib.admin'、
'django.contrib.auth'、
'django.contrib.contenttypes'、
'django.contrib.sessions'、
'django.contrib.messages'、
'django.contrib.staticfiles' ,
'帖子', # 新
]

設置 Postgres

在您的機器上安裝 Postgres 後,運行以下命令以確認安裝。

psql --版本

您應該能夠看到安裝到系統中的 Postgres 版本。現在運行如下所示的命令以打開 Postgres 提示符。

sudo -u postgres psql postgres

在命令行上打開 PostgreSQL 後,運行以下命令為其設置密碼。

\密碼postgres

T T T T T T T T T 要退出 PostgreSQL 提示符,請運行如下所示的命令。

\q

要再次打開 Postgres 提示符,請運行如下所示的命令並輸入您為 postgres 設置的密碼。

psql -U postgres -W

現在讓我們在 Postgres 中創建一個數據庫,通過運行以下命令來存儲我們博客項目的帖子。

創建數據庫帖子;

然後運行如下所示的命令,查看您創建的數據庫是否在 Postgres 的數據庫列表中。

\l

從下面的屏幕截圖中可以看出,post 數據庫是在 PostgreSQL 中創建的。

raw-image

將 Postgres 與 Django 集成

讓我們安裝 psycopg2 包,它允許我們使用通過運行以下命令創建的 Postgres 數據庫。

pipenv 安裝 psycopg2

打開 Articles 文件夾中的 settings.py 文件,然後向下滾動到 DATABASES 部分,如下所示。

數據庫 = { 
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}

該項目配置為使用 SQLite 作為數據庫。您需要做的是更改此設置,以便項目可以使用我們創建的 Postgres 數據庫。

更改引擎,使其使用 Postgres 適配器而不是 sqlite3 適配器。對於 NAME,使用您的數據庫的名稱,在這種情況下它是帖子。您還需要為您的數據庫添加登錄憑據。

USER 應該是 postgres,PASSWORD 應該是您為 postgres 設置的密碼。settings.py 文件的 DATABASES 部分現在應如下所示。

數據庫 = { 
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'posts',
'USER': 'postgres',
'PASSWORD': 'password',
'HOST': '本地主機',
'端口':'',
}
}

Django 模型

現在讓我們創建一個 Django 模型,它定義了我們希望存儲在 Postgres 數據庫中的數據字段。要創建模型,請導航到 posts 文件夾中的models.py文件,如下所示。

raw-image

您的 models.py 文件現在應該如下所示。

from django.db import models 
import datetime


class Article(models.Model):
title = models.TextField(blank=True)
description = models.TextField(blank=True)
cover_image = models.TextField(blank=True)
article_body = models. TextField(blank=True)
published_at = models.DateTimeField(
default=datetime.date.today, blank=True, null=True)

def __str__(self):
return self.title

讓我們通過運行以下命令來創建並將遷移應用到我們的數據庫T T T

python manage.py makemigrationspython manage.py 遷移

現在讓我們通過打開帖子文件夾中的admin.py文件來註冊模型。admin.py 文件現在應該如下所示。

from django.contrib import admin 
from django.contrib.auth.admin import UserAdmin

from .models import Article


class ArticleAdmin(admin.ModelAdmin):
list_display = ('id', 'title')


admin.site.register(Article, ArticleAdmin)

下一步是通過運行以下命令創建一個管理員帳戶。系統將要求您選擇用戶名、提供電子郵件地址、選擇並確認帳戶密碼。

python manage.py createsuperuser

Django 視圖

現在訪問Dev.to API 文檔,了解如何獲取 API 密鑰以及各種 API 端點。在網頁的左側,選擇身份驗證部分以了解如何獲取 API 密鑰。

raw-image

然後在身份驗證部分下方,選擇文章部分。向下滾動下拉菜單到用戶發表的文章。這是允許客戶端代表經過身份驗證的用戶檢索已發布文章列表的端點。

raw-image

在頁面右側,您可以看到可以向 Dev.to API 發出的請求示例。

現在讓我們在 views.py 文件上創建一個 python 視圖函數,該函數向 Dev.to API 發出 http 請求,如下所示。

from django.shortcuts import render 
import requests
from .models import Article


def get_articles(request):
all_articles = {}

API_KEY = 'Your_API_KEY'

url = 'https://dev.to/api/articles/me/published'

headers = { 'api-key': API_KEY}

response = requests.get(url, headers=headers)

data = response.json()

for i, item in enumerate(data):
article_data = Article(
title=data[i]['title '],
description=data[i]['description'],
cover_image=data[i]['cover_image'],
article_body=data[i]['body_markdown'],
published_at=data[i]['published_at']
)

article_data.save()

all_articles = Article.objects.all().order_by(
'-published_at').distinct('published_at')

return render(request, "blog.html", {"all_articles": all_articles})

為了顯示文章的正文,我們需要創建另一個按 id 查詢文章的視圖函數。

def blogBody(request, id): 
article = Article.objects.get(id=id)

return render(request, "blogBody.html", {"article": article})

您的 views.py 文件現在應該如下所示。

from django.shortcuts import render 
import requests
from .models import Article


def get_articles(request):
all_articles = {}

API_KEY = 'Your_API_KEY'

url = 'https://dev.to/api/articles/me/published'

headers = { 'api-key': API_KEY}

response = requests.get(url, headers=headers)

data = response.json()

for i, item in enumerate(data):
article_data = Article(
title=data[i]['title '],
description=data[i]['description'],
cover_image=data[i]['cover_image'],
article_body=data[i]['body_markdown'],
published_at=data[i]['published_at']
)

article_data.save()

all_articles = Article.objects.all().order_by(
'-published_at').distinct('published_at')

return render(request, "blog.html", {"all_articles": all_articles})


def blogBody (request, id):
article = Article.objects.get(id=id)

return render(request, "blogBody.html", {"article": article})

Django URL

現在我們需要通過在帖子文件夾中創建一個新的 urls.py 文件來配置我們項目的 url。urls.py 文件現在應該如下所示。

from django.urls import path 
from .views import blogBody


urlpatterns = [
path("blog", blog, name="blog"),
path("article/<int:id>", blogBody, name="article"),
]

最後一步是更新 Articles/urls.py 文件——該文件應如下所示。

from django.contrib import admin 
from django.urls import path, include

urlpatterns = [
path('admin/', admin.site.urls),
path("", include("posts.urls"))
]

Django 模板

創建一個名為templates的目錄,然後像這樣創建兩個名為blog.htmlblogBody.html的HTML 文件。

mkdir 模板觸摸模板/blog.html觸摸模板/blogBody.html

現在讓我們更新 Articles/settings.py 文件來告訴 Django 我們新模板目錄的位置。這是對“模板”部分下的“DIRS”設置的單行更改,如下所示。

模板 = [ 
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], #new
'APP_DIRS': True,
'OPTIONS' :{
'context_processors':[
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages' ,
],
},
},
]

不要忘記在settings.py文件的頂部指定import os ,否則您將收到 os 未定義的錯誤。您的 templates/blog.html 文件現在應該如下所示。T T T T T T T T T T T T T

{% for article in all_articles %} 
<img src="" alt="">
<h4></h4>
<p></p>
<a href="{% url 'article' article.id %}" >閱讀更多...</a>
{% endfor %}

導航到127.0.01:800/blog,您應該會看到來自 Dev To 的文章,如下所示。

raw-image

文章正文

當我們調用 API 時,文章正文被獲取為article markdown. 降價作為字符串從 API 接收。這意味著它將看起來像您在 DEV To 上輸入的原始內容,而不是預覽/發布的版本(即使用所有 markdown 語法,如用於標題的 ##)。要在 DEV To 上顯示它在您的網站上,您需要添加一個額外的步驟來將字符串 markdown 轉換為 HTML。有很多 Markdown 解析庫可以為你做這件事,但在這個項目中,我們將使用 Django 的 Markdown 解析庫,名為Markdown.

要使用Markdown,我們需要使用以下命令將其安裝到我們的項目中:

pipenv 安裝降價

讓我們創建一個自定義模板過濾器,它使用Markdown. 在我們的帖子應用程序中創建一個templatetags目錄,然後創建一個markdown_extras.py文件,如下所示。

mkdir 帖子/模板標籤觸摸帖子/模板標籤/markdown_extras.py

文件本身將導入 markdown 包並使用防護代碼塊擴展T T T T T T

# posts/templatetags/markdown_extras.py 
from django import template
from django.template.defaultfilters import stringfilter

import markdown as md

register = template.Library()


@register.filter()
@stringfilter
def markdown(value):
return md.markdown(值,擴展=['markdown.extensions.fenced_code'])

現在讓我們將自定義過濾器加載到我們的模板中,以便用 Markdown 編寫的內容將作為 HTML 輸出。我們的blogBody.html文件現在應該如下所示:

{% load markdown_extras %} 

<h4></h4>
<img src="" alt="">
<span>{{article.published_at }}</span>
<p></p>

導航到127.0.01:800/blog並單擊底部的閱讀更多按鈕。您應該被重定向到文章正文,如下所示。

raw-image

使用 Arctype SQL 客戶端查詢 Postgres 數據

要查看存儲在 PostgreSQL 中的博客數據或與之交互,您可以使用 SQL 客戶端和數據庫管理工具,例如Arctype。要使用 Arctype,請導航到 Arctype 主頁並將 Arctype 應用程序下載到您的計算機上。目前,Arctype 支持 Linux、Windows 和 MacOS:

raw-image

安裝應用程序後,打開它,系統將提示您創建一個帳戶,如下所示。

raw-image

創建帳戶後,系統將提示您選擇數據庫。在這種情況下,選擇 Postgres。

raw-image

下一步是添加 Postgres 憑據以將 Arctype 連接到 Postgres 數據庫。使用您在 Postgres 提示中創建數據庫時創建的憑據。

raw-image

一旦數據庫連接成功,您應該能夠訪問 Postgres 中的帖子數據庫中的表,如下所示。

raw-image

如果您想了解如何在 Arctype 中創建和運行查詢,請查看本指南。

T T T T T T T T T T T T T T T T T T

結論

在本文中,您學習瞭如何在您的網站上創建博客,而無需使用付費內容管理系統或從頭開始創建一個。我已經指導您完成了使用 Django 和 Dev.to API 在您的博客上成功顯示 Dev.to 帖子的步驟。本博客中提供的所有代碼都可以在 GitHub 上找到,如果您喜歡這篇文章,請務必關注 Arctype 博客以獲取更多內容,直到下一次。

留言
avatar-img
留言分享你的想法!
avatar-img
Lesley Selaludicakiti的沙龍
0會員
10內容數
2022/07/25
我們很高興地宣布,Metalinq 與 Indorse 正式合作,Indorse 是一家由加密 OG 和營銷專家組成的開創性區塊鏈公司,構建 Web3 社區和產品。Metalinq 將依靠 Indorse 在軟件開發、營銷方面的專業知識及其廣泛的網絡繼續建設其核心技術基礎設施。 與下面的團隊聯繫!
Thumbnail
2022/07/25
我們很高興地宣布,Metalinq 與 Indorse 正式合作,Indorse 是一家由加密 OG 和營銷專家組成的開創性區塊鏈公司,構建 Web3 社區和產品。Metalinq 將依靠 Indorse 在軟件開發、營銷方面的專業知識及其廣泛的網絡繼續建設其核心技術基礎設施。 與下面的團隊聯繫!
Thumbnail
2022/07/21
這樣你才能達到真正的自由 如果我說“財富”,大多數人會想到貝佐斯或蘭博。 錯誤的。金錢只是財富的一種。 這是讓我們中的許多人從其他類型的財富中分心的一個。當您了解所有形式的財富時,您可以充分體驗生活。您可以退出狀態遊戲並進入真實遊戲。 1. 精神財富 你頭腦中的貨幣是注意力。 做心理代表。
2022/07/21
這樣你才能達到真正的自由 如果我說“財富”,大多數人會想到貝佐斯或蘭博。 錯誤的。金錢只是財富的一種。 這是讓我們中的許多人從其他類型的財富中分心的一個。當您了解所有形式的財富時,您可以充分體驗生活。您可以退出狀態遊戲並進入真實遊戲。 1. 精神財富 你頭腦中的貨幣是注意力。 做心理代表。
2022/07/21
Serene 睁开眼睛,盯着音箱。他们就是这样称呼的。磁带已经播放完毕,但机器不想停止。她一边呻吟着一边挪动着爬过去。她按下停止按钮,强迫自己站起来。 她在原地站了一会儿,试图弄清楚自己的方位。她在哪里?某人的房子。但谁的房子? 它开了。 她的右边是一条通往楼梯的砖路。大概是地下室的外部入口。
Thumbnail
2022/07/21
Serene 睁开眼睛,盯着音箱。他们就是这样称呼的。磁带已经播放完毕,但机器不想停止。她一边呻吟着一边挪动着爬过去。她按下停止按钮,强迫自己站起来。 她在原地站了一会儿,试图弄清楚自己的方位。她在哪里?某人的房子。但谁的房子? 它开了。 她的右边是一条通往楼梯的砖路。大概是地下室的外部入口。
Thumbnail
看更多
你可能也想看
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
什麼是Python python是電腦程式語言的一種,如同python官方網站上的介紹 "Python是一種程式語,可讓你更快速地工作並更有效的整合系統"。簡單地說,就是你可用python這個程式語言去告訴電腦你想要作什麼,讓電腦來幫你完成你要作的事情。
Thumbnail
什麼是Python python是電腦程式語言的一種,如同python官方網站上的介紹 "Python是一種程式語,可讓你更快速地工作並更有效的整合系統"。簡單地說,就是你可用python這個程式語言去告訴電腦你想要作什麼,讓電腦來幫你完成你要作的事情。
Thumbnail
你知道IG是用Django開發的嗎? 正在學習或使用Django、Flask框架開發後端的你,是否也常在享受Python語法的舒適之餘,仍然煩惱著是否該學習效率更好的GO或Laravel。
Thumbnail
你知道IG是用Django開發的嗎? 正在學習或使用Django、Flask框架開發後端的你,是否也常在享受Python語法的舒適之餘,仍然煩惱著是否該學習效率更好的GO或Laravel。
Thumbnail
WordPress是一個強大、靈活且易於使用的內容管理系統(CMS),免費開源並擁有龐大的開發者社區。其具有多媒體支持、SEO友好、安全性強、用戶權限管理等特點。這些特性使得WordPress成為構建現代專業網站的優秀選擇。
Thumbnail
WordPress是一個強大、靈活且易於使用的內容管理系統(CMS),免費開源並擁有龐大的開發者社區。其具有多媒體支持、SEO友好、安全性強、用戶權限管理等特點。這些特性使得WordPress成為構建現代專業網站的優秀選擇。
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
本文介紹了 Django 專案中各個檔案的用途,包括 settings.py、tests.py、models.py 等。並且解釋了 MTV 架構的後端運作流程,以及相對應的範例介紹。閱讀本文可幫助讀者更好地瞭解 Django 後端開發。
Thumbnail
本文介紹了 Django 專案中各個檔案的用途,包括 settings.py、tests.py、models.py 等。並且解釋了 MTV 架構的後端運作流程,以及相對應的範例介紹。閱讀本文可幫助讀者更好地瞭解 Django 後端開發。
Thumbnail
本文將介紹如何從頭開始建立一個Django專案,包括安裝和設定,以及創建管理員帳戶和新的app。透過本文,你可以學習到建立自己的網頁的所有步驟和設定。
Thumbnail
本文將介紹如何從頭開始建立一個Django專案,包括安裝和設定,以及創建管理員帳戶和新的app。透過本文,你可以學習到建立自己的網頁的所有步驟和設定。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News