Dans cet article, nous allons implémenter un site Web de blog personnel simple via Django+Mysql, et mettre en œuvre le déploiement et l'exploitation en ligne du site Web via Nginx et gunicorn sur Alibaba Cloud.
Afin de mettre en œuvre rapidement le système, nous avons uniquement complété les pages fonctionnelles de la liste des articles de blog et les détails des articles de blog. Pour conserver les données associées, nous appelons directement l'arrière-plan de gestion Admin fourni avec Django pour mettre à jour les informations de la base de données.
Table des matières
Préparation de l'environnement de développement
Configurer l'environnement virtuel
Création de base de données et configuration de connexion
Configuration de la connexion à la base de données Django
Développement de modules fonctionnels pour un site Web de blog
Définir les fonctions d'affichage
Configurer l'URL de la route d'accès
Préparation et configuration des ressources statiques
Création de modèles Web front-end
L'arrière-plan Django active la configuration
Préparation de l'environnement de développement
Les environnements liés au développement et les versions logicielles utilisés dans cet article sont les suivants :
Serveur : Python 3.9
Framework Web : Django 4.10
Base de données : MySQL mysql-8.0.13-winx64
Outil de développement IDE : Pycharm (Community Edition)
Framework front-end : Bootstrap 5
Cet article ne donnera pas une introduction particulière à l'installation de Python, Mysql et Pycharm. Les étudiants dans le besoin doivent se référer au billet de blog suivant.
Configurer l'environnement virtuel
Le développement de projets basés sur Python est actuellement essentiellement développé dans un environnement virtuel indépendant, ce qui peut rendre chaque environnement de projet indépendant des autres projets, maintenir l'environnement propre et résoudre les conflits de packages.
Notre première étape dans le développement Python consiste donc à configurer l’environnement virtuel.
À partir de la version 3.3 de Python, il est livré avec un environnement virtuel, il n'a pas besoin d'être installé, il suffit de le configurer et vous pouvez l'utiliser.
Créez un nouveau dossier sur n'importe quel disque, comme indiqué dans cet article E:\django_project.
Ouvrez ce dossier avec Pycharm :
Entrez la commande pour configurer venv dans la zone de saisie Terminal de Pycharm, où env est le répertoire où est placé l'environnement virtuel :
python -m venv env
Une fois la création terminée, saisissez ce qui suit env\Scripts\activate.batpour accéder à l'environnement virtuel :
Il y a une marque (env) avant la lettre de lecteur , indiquant que l'entrée dans venv est réussie.
Installer Django
Une fois l'environnement virtuel créé, nous pouvons installer Django. Cet article est basé sur Django4.1. Entrez la commande suivante dans la zone de saisie Terminal de Pycharm pip install django==4.1pour commencer l'installation de Django.
Ici, j'ai django==4.1spécifié la version de Django comme 4.1. Si la version n'est pas spécifiée, pip install djangola dernière version sera installée directement.
Une fois l'installation terminée, entrez Python (vous pouvez accéder à l'éditeur Python via la ligne de commande ou dans Pycharm) et entrez la commande suivante pour vérifier si l'installation a réussi.
import django
django.get_version()Si les informations sur la version de Django apparaissent, l'installation est réussie.
Créer un projet Django
Entrez la commande pour créer un projet Django via l'interface de saisie de ligne de commande Windows de Pycharm django-admin startproject django4blogpour créer un nouveau projet : django4blog
Une fois le projet créé, nous verrons le dossier de projet généré automatiquement E:\django_projectdans le dossier Pycharm.django4blog
cd django4blogAllez dans le dossier du projet
Ensuite, nous testons si notre projet Django est créé avec succès et saisissons la commande Django dans la zone de saisie du terminal :python manage.py runserver
Ouvrez l'adresse du port du serveur par défaut dans le navigateur : http://127.0.0.1:8000/ . Si la page suivante apparaît, cela signifie que nous avons créé et exécuté avec succès un projet Django.
Création de base de données et configuration de connexion
Django fournit un bon support pour diverses bases de données, notamment : PostgreSQL, MySQL, SQLite et Oracle.
Django fournit une API d'appel unifiée pour ces bases de données.
Nous pouvons choisir différentes bases de données en fonction de nos besoins commerciaux.
MySQL est la base de données la plus couramment utilisée dans les applications Web.
Cet article utilise MySQL.
Cette étape connecte les paramètres de la base de données à votre propre base de données MySQL et termine la création de la base de données.
Création de base de données
Django ne peut fonctionner qu'au niveau de la table de données et ne peut pas fonctionner au niveau de la base de données, vous devez donc créer une base de données manuellement : blog
On peut créer une base de données via la ligne de commande :
1. Entrez le répertoire du sous-dossier bin du dossier d'installation mysql :
Par exemple:D:\Program Files\mysql-8.0.13-winx64\bin
2. Connectez-vous à la base de données :
mysql -u root -p Enter password:******
3. Après une connexion et une connexion réussies, créez une base de données via la commande : django_blog
CREATE DATABASE IF NOT EXISTS django_blog DEFAULT CHARSET utf8;Configuration de la connexion à la base de données Django
Django nécessite le pilote mysql pour utiliser MySQL. Si vous n'avez pas installé le pilote mysql, vous pouvez exécuter la commande suivante pour l'installer :
pip install pymysql
Après l'installation, entrez dans le dossier django4blogsous le projet , ouvrez le fichier settings.py, recherchez l'élément de configuration DATABASES et modifiez l'élément de configuration DATABSES comme suit :django4blog
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql', # 数据库引擎
'NAME': 'django_blog', # 数据库名称
'HOST': '127.0.0.1', # 数据库地址，本机 ip 地址 127.0.0.1
'PORT': 3306, # 端口
'USER': 'root', # 数据库用户名
'PASSWORD': '123456', # 数据库密码
}
}Utilisez ensuite le module pymysql pour vous connecter à la base de données mysql :
Présentez le module et configurez-le dans __init__.py dans le même répertoire que settings.py :
import pymysql
pymysql.install_as_MySQLdb()À ce stade, nous avons créé un projet Django django4blog pour programmer le développement ultérieur de notre système de gestion d'examens en ligne.
Parallèlement, une base de données MySQL a été créée pour ce projet : blogutilisée pour le stockage et le traitement des données lors du processus de développement de notre programme.
Développement de modules fonctionnels pour un site Web de blog
Une fois le framework de projet Django construit, tous nos développements de programmes pour le front et le backend du système peuvent être effectués dans ce projet. Le développement d'une fonction typique de module de projet Django comprend les étapes suivantes :
- créer une application
- Enregistrer l'application
- Définir le modèle
- Définir les fonctions d'affichage
- Configurer l'URL de la route d'accès
- Préparation et configuration des ressources statiques
- Développement de modèles Web front-end
- Testez et exécutez
Créer une application
Une application dans Django représente un module fonctionnel, et le modèle de données spécifique de Django et l'implémentation de la vue fonctionnelle sont basés sur l'application.
Ici, nous créons d'abord un fichier articleappelé apppour gérer nos articles de blog.
Entrez la commande dans Terminal :python manage.py startapp article
Vérifiez le répertoire et vous constaterez qu'un nouveau dossier articlenomméapp
Enregistrer l'application
Ensuite, nous devons "dire" à Django qu'il existe désormais une application comme article.
Ouvrez settings.py dans le répertoire django4blog, recherchez INSTALLED_APPS et écrivez le code suivant :
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 新增'article'代码，激活app
'article',
]Définir le modèle
Django utilise des modèles pour mapper les champs du programme à la base de données et pour transmettre des données entre le programme et les données.
Les modèles Django utilisent l'ORM intégré.
Le mappage relationnel objet (ORM en abrégé) est utilisé pour convertir des données entre différents types de systèmes dans des langages de programmation orientés objet.
Nous avons déjà créé une base de données vierge bloget, dans cette étape, nous utilisons le modèle de Django pour créer la table de base de données.
Étant donné que Django possède ses propres règles de mappage entre le modèle et la base de données cible, si vous créez vous-même une table de données dans la base de données, elle ne sera pas nécessairement conforme aux règles de création de table de Django, ce qui entraînera l'impossibilité d'établir une communication entre le modèle et la base de données cible. base de données.
Il est donc préférable pour nous de créer la table de base de données correspondante via le modèle Django dans le projet Django.
Ouvrez-le django4blog/article/models.pyet ajoutez le code suivant :
from django.db import models
# timezone 用于处理时间相关事务。
from django.utils import timezone
# Create your models here.
# 博客文章数据模型
class Article(models.Model):
# 文章id,主键
id = models.AutoField(primary_key=True)
# 文章作者 ,用于指定数据删除的方式
author = models.CharField(max_length=100)
# 文章标题,models.CharField 为字符串字段，用于保存较短的字符串，比如标题
title = models.CharField(max_length=100)
# 文章正文,保存大量文本使用 TextField
body = models.TextField()
# 文章创建时间,参数 default=timezone.now 指定其在创建数据时将默认写入当前的时间
created = models.DateTimeField(default=timezone.now)
# 文章更新时间,参数 auto_now=True 指定每次数据更新时自动写入当前时间
updated = models.DateTimeField(auto_now=True)Migrations de données
Après avoir terminé la définition du modèle, créez la table de données correspondante dans la base de données cible. Cette étape est appelée migration de données dans Django.
Notez que chaque fois qu'un changement (ajout, modification, suppression, etc.) est apporté à la base de données, une migration des données est requise.
La création d'une table de données dans la base de données cible nécessite l'exécution de deux instructions, à savoir les instructions makemigrations et migrate.
python manage.py makemigrations
python manage.py migrate
Définir les fonctions d'affichage
Dans cette étape, nous implémentons une fonction simple pour obtenir les informations sur les articles de blog de la base de données et les transmettre à la page Web frontale.
from django.shortcuts import render
# 导入数据模型Article
from .models import Article
def article_list(request):
# 取出所有博客文章
articles = Article.objects.all()
# 需要传递给模板（templates）的对象
context = { 'articles': articles }
# render函数：载入模板，并返回context对象
return render(request, 'article/list.html', context)Configurer l'URL de la route d'accès
Après avoir obtenu la vue, nous devons mapper la fonction d'affichage au lien de la page Web frontale.
L'url peut être comprise comme le lien URL saisi lors de l'accès au site Web. Après avoir configuré l'url, Django sait comment localiser l'application et utiliser la fonction d'affichage correspondante pour obtenir des données d'arrière-plan.
Dans cet article, nous ajoutons deux liens pour obtenir respectivement la liste des articles et les détails de l'article.
Ouvrez django4blog/urls.py et entrez le code suivant :
from django.contrib import admin
from django.urls import path, re_path
# 引入app视图
from django4blog import article
urlpatterns = [
path('admin/', admin.site.urls),
re_path(r'^$', article.views.article_list),
path('list/', article.views.article_list, name='list'), # 文章列表
path('detail/<int:id>/', article.views.article_detail, name='detail'), # 文章详情
]Préparation et configuration des ressources statiques
Le front-end et le back-end de ce système ne sont pas séparés. Le framework front-end utilise le populaire Bootstrap5. Afin de se développer rapidement, toutes les pages de ce système sont développées en utilisant Bootstrap natif et sans modèles ni thèmes tiers. sont utilisés.
https://v5.bootcss.com/docs/getting-started/download/Créez un nouveau dossier statique dans le répertoire racine du projet pour stocker les ressources statiques du modèle frontal.
Copiez les dossiers css et js juste extraits par Bootstrap dans le dossier statique.
Une fois terminé, la structure des dossiers statiques est la suivante :
Après avoir préparé les ressources statiques, nous devons également spécifier l'emplacement de stockage des fichiers statiques dans Django afin qu'ils puissent être correctement référencés dans le modèle.
Configurez les éléments suivants dans django4blog/settings.py :
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'), # 添加此项Création de modèles Web front-end
L'inclusion de modèles est le contenu de Django qui est finalement affiché dans le navigateur. Il s'agit en fait d'un fichier de page Web HTML qui contient une syntaxe du moteur de modèles Django.
Avant de créer un modèle, nous créons d'abord un nouveau dossier modèles dans le répertoire racine pour stocker tous nos fichiers modèles.
L'emplacement du modèle doit également être configuré pour spécifier l'emplacement de stockage du modèle. Configurez les éléments suivants dans django4blog/settings.py :
Ensuite, nous créons trois nouveaux fichiers dans le fichier modèle :
- base.html : est la base de modèle de l'ensemble du projet, et toutes les pages Web en héritent ;
- header.html : est la barre de navigation en haut de la page Web ;
- footer.html : C'est la note de bas de page en bas de la page Web.
Écrivez respectivement les codes de trois fichiers HTML statiques comme suit :
templates/base.html：
<!-- 载入静态文件-->
{% load static %}
<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">
<head>
<!-- 网站采用的字符编码 -->
<meta charset="utf-8">
<!-- 预留网站标题的位置 -->
<title>{% block title %}{% endblock %}</title>
<!-- 引入bootstrap的css文件 -->
<link type="text/css" rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- 引入图标库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<!-- 引入导航栏 -->
{% include 'header.html' %}
<!-- 预留具体页面的位置 -->
{% block content %}{% endblock content %}
<!-- 引入注脚 -->
{% include 'footer.html' %}
<!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
<!--
popper.js 采用 cdn 远程引入，意思是你不需要把它下载到本地。
在实际的开发中推荐静态文件尽量都使用 cdn 的形式。
教程采用本地引入是为了让读者了解静态文件本地部署的流程。
-->
{#<script src="https://unpkg.com/@popperjs/core@2"></script>#}
<!-- 引入bootstrap的js文件 -->
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>templates/header.html：
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<!-- 导航栏商标 -->
<a class="navbar-brand" href="#">我的博客</a>
<!-- 导航入口 -->
<div>
<ul class="navbar-nav">
<li class="nav-item">
<!-- 改写了这里的 href -->
<a class="nav-link" href="{% url 'list' %}">首页</a>
{# <a class="nav-link" href="/list">首页</a>#}
</li>
</ul>
</div>
</div>
</nav>templates/footer.html：
{% load static %}
<!-- Footer-->
<div>
<br><br><br>
</div>
<footer class="py-3 bg-light fixed-bottom">
<div class="container">
<p class="m-0 text-center text-black-50">Copyright © django4blog</p>
</div>
</footer>Les trois fichiers ci-dessus sont des modules de composants courants des pages de sites Web. Fondamentalement, chaque page ne changera pas, nous les séparons donc.
Lorsque nous écrivons les modèles de page suivants de Django, nous pouvons directement hériter des composants de modèle communs correspondants.
Dans le dossier des modèles, nous créons d’abord un nouveau dossier d’articles pour gérer les modèles liés aux articles.
Ensuite, nous écrivons des pages modèles correspondant à la liste d'articles et à la vue des détails de l'article sur la base de trois composants communs :
django4blog/templates/article/list.html：
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
首页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 定义放置文章标题的div容器 -->
<br>
<div class="container">
{% for article in articles %}
<div class="row mt-2">
<!-- 文章内容 -->
<div class="col-sm-12">
<!-- 卡片容器 -->
<div class="card h-100">
<!-- 标题 -->
<!-- <h4 class="card-header">{
{ article.title }}</h4>-->
<!-- 摘要 -->
<div class="card-body">
<h4 class="card-title">{
{ article.title }}</h4>
<br>
<p class="card-text">{
{ article.body|slice:'100' }}...</p>
<a href="{% url 'detail' article.id %}" class="card-link">阅读本文</a>
</div>
</div>
</div>
</div>
{% endfor %}
<br>
</div>
{% endblock content %}django4blog/templates/article/detail.html ：
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
文章详情
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
<div class="container">
<!-- <div class="row">-->
<!-- 标题及作者 -->
<h1 class="col-12 mt-4 mb-4">{
{ article.title }}</h1>
<div class="col-12 alert alert-primary">
<div class="col-12">
<a>作者：{
{ article.author }}</a>
 
<a>{
{ article.created|date:'Y-m-d H:i:s' }}</a>
</div>
</div>
<!-- 文章正文 -->
<div class="col-12">
<p>{
{ article.body }}</p>
</div>
<!-- </div>-->
{% endblock content %}L'arrière-plan Django active la configuration
Django est livré avec sa propre fonction d'arrière-plan. Nous pouvons utiliser la fonction d'arrière-plan pour mettre à jour directement les informations de notre table de données d'arrière-plan en seulement deux étapes.
1. Créez un super utilisateur
Entrez sur la ligne de commande :python manage.py createsuperuser
Après avoir entré le nom d'utilisateur, l'e-mail et le mot de passe conformément aux informations demandées, le système créera un super utilisateur.
2. Enregistrez le modèle auprès de l'administrateur
Ouvrez django4blog/article/admin.py et entrez le code suivant pour enregistrer tous les modèles dans l'administrateur. Nous pourrons ensuite mettre à jour notre table de données en arrière-plan de Django.
from django.contrib import admin
# Register your models here.
from .models import Article
# 注册Article到admin中
admin.site.register(Article)essai
À ce stade, notre partie Django du travail de développement est pratiquement terminée.
Entrez la commande dans le terminal : python manage.py runserverdémarrez le serveur.
Entrez l'URL du backend http://127.0.0.1:8000/admin et connectez-vous :
Ajouter un enregistrement :
Retour à la page liste http://127.0.0.1:8000/ :
En cliquant sur le bouton pour lire cet article, l'URL s'ouvrira : http://127.0.0.1:8000/detail/1/
Conclusion
Dans cet article, nous utilisons le framework Python + Django pour réaliser un site Web de blog simple, réalisant les deux fonctions principales de liste d'articles de blog et de détails d'articles de blog.
Lors de l'écriture du code, j'ai constaté qu'il y avait en fait beaucoup de contenu dans le déploiement ultérieur, j'ai donc décidé de diviser l'article de blog en deux parties. Dans la partie suivante, nous apprendrons comment postuler pour un serveur Alibaba Cloud et comment pour connecter et gérer les données et la configuration du serveur Alibaba Cloud sous Windows. .
Atteignez enfin l’objectif ultime de déployer ce site de blog en ligne.