2022-07-27|閱讀時間 ‧ 約 24 分鐘

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

    作為開發人員,您可能想知道是否需要博客。老實說,我寫博客已經有一段時間了,我只能告訴你,在你的網站上擁有一個博客有很大的好處。假設您有一個網站,您在該網站上擁有投資組合併銷售產品或服務。您如何為您的網站帶來更多流量,以便潛在的招聘人員或客戶能夠發現您的產品或服務?
    為您的網站增加流量的最佳方式是擁有一個包含有用內容的博客。包含有用內容的博客向您的受眾和客戶表明您是值得信賴的信息來源。
    但是,要在您的網站上擁有博客,您需要一個內容管理系統,簡稱 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 時,單擊頂部的終端選項,然後選擇新建終端,如下所示。
    現在讓我們在我們的 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 歡迎頁面。
    現在讓我們在 Django 項目中創建一個名為posts的應用程序。在命令行中,使用control+c 退出服務器。然後運行如下所示的命令。
    python manage.py 啟動應用程序帖子
    在 Visual Studio Code 編輯器窗口中,單擊Articles文件夾並打開settings.py文件,如下所示。
    在 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 中創建的。
    將 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文件,如下所示。
    您的 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 密鑰。
    然後在身份驗證部分下方,選擇文章部分。向下滾動下拉菜單到用戶發表的文章。這是允許客戶端代表經過身份驗證的用戶檢索已發布文章列表的端點。
    在頁面右側,您可以看到可以向 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 的文章,如下所示。
    文章正文
    當我們調用 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並單擊底部的閱讀更多按鈕。您應該被重定向到文章正文,如下所示。
    使用 Arctype SQL 客戶端查詢 Postgres 數據
    要查看存儲在 PostgreSQL 中的博客數據或與之交互,您可以使用 SQL 客戶端和數據庫管理工具,例如Arctype。要使用 Arctype,請導航到 Arctype 主頁並將 Arctype 應用程序下載到您的計算機上。目前,Arctype 支持 Linux、Windows 和 MacOS:
    安裝應用程序後,打開它,系統將提示您創建一個帳戶,如下所示。
    創建帳戶後,系統將提示您選擇數據庫。在這種情況下,選擇 Postgres。
    下一步是添加 Postgres 憑據以將 Arctype 連接到 Postgres 數據庫。使用您在 Postgres 提示中創建數據庫時創建的憑據。
    一旦數據庫連接成功,您應該能夠訪問 Postgres 中的帖子數據庫中的表,如下所示。
    如果您想了解如何在 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 博客以獲取更多內容,直到下一次。
    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.