利用Django开发博客网站并在阿里云上利用 Nginx + Gunicorn 部署上线（开发篇）

利用Django开发博客网站并在阿里云上利用 Nginx + Gunicorn 部署上线（开发篇）
本文我们将通过Django+Mysql实现一个简单的个人博客网站，同时在阿里云上通过Nginx 和gunicorn实现网站的线上部署运行。

为了快速实现系统，我们仅完成博文列表和博文详情的功能页面，相关数据的维护直接调用Django自带的Admin管理后台更新数据库信息。

目录

开发环境准备

配置虚拟环境

安装Django

创建Django项目

数据库创建和连接配置

数据库创建

Django数据库连接配置

博客网站功能模块开发

创建App

注册APP

定义模型

数据迁移（Migrations）

定义视图函数

配置访问路由URL

静态资源准备及配置

前端网页模板创建

Django后台启用配置

测试运行

结语

开发环境准备

本文使用到的开发相关的环境和软件版本如下：

服务端：Python 3.9

Web框架：Django 4.10

数据库：MySQL mysql-8.0.13-winx64

开发工具IDE：Pycharm（社区版）

前端框架：Bootstrap 5

Python，Mysql，Pycharm的安装本文就不做特别介绍了，有需要的同学请参考如下博文。

Python + Django4 搭建个人博客（二）：准备开发环境_李威威wiwi的博客-CSDN博客本系列博文实现博客网站使用到的开发相关的技术和软件版本如下：服务端：Python 3.9Web框架：Django 4.10数据库：MySQL mysql-8.0.13-winx64开发工具IDE：Pycharm（社区版）前端框架：Bootstrap 5https://blog.csdn.net/agelee/article/details/126406215

配置虚拟环境

基于Python的项目开发目前基本上都会在一个独立的虚拟环境中进行开发，这样可以使每个项目环境与其他项目独立开来，保持环境的干净，解决包冲突问题。

所以我们进行Python开发的第一步就是配置虚拟环境。

从Python3.3版本开始就自带了虚拟环境，不需要安装，配置一下就可以用了。

任意盘新建一个文件夹，本文中为E:\django_project。

用Pycharm打开此文件夹：

在Pycharm的终端Terminal输入框输入配置venv的命令，其中的env为虚拟环境的放置目录：

python -m venv env

创建完成后，输入env\Scripts\activate.bat，即可进入虚拟环境：

盘符前有(env)标识说明进入venv成功。

安装Django

虚拟环境创建好了之后，我们可以安装django了，本文基于django4.1，在Pycharm的Terminal输入框输入如下命令pip install django==4.1即可开始安装Django。

这里我通过django==4.1指定了django版本为4.1 ，如果不指定版本，直接使用pip install django将安装最新版。

安装完成后进入Python(可以通过命令行或者在Pycharm中进入Python编辑器)输入以下命令检查是否成功安装
```
import django
 
django.get_version()
```
出现django 版本信息则说明安装成功

创建Django项目

通过Pycharm 的Windows 命令行输入界面输入创建Django项目的命令django-admin startproject django4blog，创建一个新的项目: django4blog

项目创建完成后，我们将会在Pycharm的E:\django_project文件夹中看到自动生成了django4blog的项目文件夹

cd django4blog进入项目文件夹

接着我们测试下我们的django项目是否创建成功，在终端输入框中输入django命令：python manage.py runserver

在浏览器中打开默认服务器端口地址： http://127.0.0.1:8000/ ，出现如下页面，则代表我们已经成功创建并运行了一个django项目。

数据库创建和连接配置

Django 对各种数据库提供了很好的支持，包括：PostgreSQL、MySQL、SQLite、Oracle。

Django 为这些数据库提供了统一的调用API。

我们可以根据自己业务需求选择不同的数据库。

MySQL 是 Web 应用中最常用的数据库。

本文采用MySQL。

此步骤将数据库设置连接到自己的MySQL数据库,并完成数据库的创建.

数据库创建

Django只能操作到数据表级别,不能操作到数据库级别,所以需要手工创建一个数据库:blog

我们可以通过命令行创建一个数据库:

1.进入mysql安装文件夹的bin 子文件夹目录:

比如:D:\Program Files\mysql-8.0.13-winx64\bin

2.连接数据库:

mysql -u root -p Enter password:******

3.连接登录成功后通过命令创建一个数据库:django_blog
```
CREATE DATABASE IF NOT EXISTS django_blog DEFAULT CHARSET utf8;
```
Django数据库连接配置

Django使用MySQL需要mysql 驱动,如果你没安装 mysql 驱动，可以执行以下命令安装：

pip install pymysql

安装好之后，进入django4blog项目下的django4blog文件夹，打开settings.py 文件,找到DATABASES配置项，修改DATABSES配置项为如下内容:
```
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', # 数据库密码
    }
}
```
然后使用 pymysql 模块连接 mysql 数据库：

在与 settings.py 同级目录下的 __init__.py 中引入模块和进行配置：
```
import pymysql
pymysql.install_as_MySQLdb()
```
至此，我们创建了一个Django项目django4blog用于我们后续的在线考试管理系统开发的程序编写。

同时为此项目创建了一个MySQL数据库:blog用于我们程序开发过程中的数据存放和处理。

博客网站功能模块开发

一个Django项目框架搭建起来后，我们所有对系统的前后台所有的程序开发都可以在这个项目中进行了，一个典型的Django项目模块功能的开发包括如下几个步骤：
- 创建app
- 注册app
- 定义模型
- 定义视图函数
- 配置访问路由URL
- 静态资源准备及配置
- 前端网页模板开发
- 测试及运行
创建App

在Django中的一个app代表一个功能模块,django的具体的数据模型和功能视图实现都基于app。

在这里，我们先创建一个名为article的app用来管理我们的博客文章。

在Terminal中输入命令：python manage.py startapp article

查看目录可以发现新增了一个名为article的app文件夹

注册APP

接着我们要“告诉”Django现在有article这么一个app了。

打开django4blog目录的settings.py，找到INSTALLED_APPS写入如下代码：
```
# 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',
]
```
定义模型

Django通过模型将程序中的字段和数据库对应起来，同时在程序和数据中间来传递数据。

Django 模型使用自带的 ORM。

对象关系映射（Object Relational Mapping，简称 ORM ）用于实现面向对象编程语言里不同类型系统的数据之间的转换。

我们之前创建了一个空白的数据库blog,这一步我们通过Django的模型来完成数据库表的创建.

因为Django对模型和目标数据库之间有自身的映射规则,如果自己在数据库中创建数据表,可能不一定符合Django的建表规则,从而导致模型和目标数据库无法建立通信联系。

所以最好我们在Django项目中还是通过Django模型来创建对应数据库表。

打开django4blog/article/models.py，添加如下代码：
```
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）

完成模型的定义后，接着在目标数据库中创建相应的数据表，这个步骤在Django中叫做数据迁移。

注意，每当对数据库进行了更改（添加、修改、删除等）操作，都需要进行数据迁移。

在目标数据库中创建数据表需要执行两次指令，分别是makemigrations和migrate指令。

python manage.py makemigrations

python manage.py migrate

定义视图函数

这一步我们具体实现一个简单的功能函数，将博文信息从数据库获取出来，传递给前端网页。
```
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)
```
配置访问路由URL

有了视图后，我们需要将视图函数和前端Web网页链接对应起来。

url可以理解为访问网站时输入的网址链接，配置好url后Django才知道怎样定位app并使用对应的视图函数获取后台数据。

本文我们添加两个链接，分别获取文章列表和文章详情。

打开django4blog/urls.py,输入如下代码：
```
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//', article.views.article_detail, name='detail'),  # 文章详情
]
```
静态资源准备及配置

本系统前后端不分离,前端框架选用当前比较受欢迎的Bootstrap5，为了快速开发，本系统所有的页面都使用原生Bootstrap进行开发，未采用第三方的模板和主题。

下载 Bootstrap · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网下载 Bootstrap 以获得编译后的 CSS 和 JavaScript 文件、源码，或者通过你所喜欢的软件包管理器，例如 npm、RubyGems 等，将 Bootstrap 添加到你的项目中。https://v5.bootcss.com/docs/getting-started/download/

在项目根目录下新建一个文件夹static用于存放前端模板静态资源。

把刚才Bootstrap解压出来的css和js两个文件夹复制到static文件夹去。

完成后Static文件夹结构如下图：

准备好静态资源后，我们还需要在Django中指定静态文件的存放位置，这样才能够在模板中正确引用它们。

在django4blog/settings.py 中进行如下配置：
```
import os
 
STATIC_URL = '/static/'
 
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),  # 添加此项
```
前端网页模板创建

模板包含是Django中最终展示在浏览器的内容，实际上是包含了一些django模板引擎语法的html网页文件。

在创建模板之前，我们先在根目录下新建一个文件夹templates用于存放我们的所有的模板文件。

模板位置也同样需要进行配置指定模板的存放位置，在django4blog/settings.py 中进行如下配置：

接着我们在模板文件中新建三个文件：
- base.html：是整个项目的模板基础，所有的网页都从它继承；
- header.html：是网页顶部的导航栏；
- footer.html：是网页底部的注脚。
分别编写三个静态HTML文件代码如下：

templates/base.html：
```
{% load static %}
 
html>
<html lang="zh-cn">
<head>
    
    <meta charset="utf-8">
    
    <title>{% block title %}{% endblock %}title>
    
    <link type="text/css" rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
head>
 
<body>
{% include 'header.html' %}
{% block content %}{% endblock content %}
{% include 'footer.html' %}
 
{#<script src="https://unpkg.com/@popperjs/core@2">script>#}
 
<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">
                    
                    <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 %}
<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 © django4blogp>
    div>
footer>
```
上述三个文件是网站页面的通用组件模块，基本上每个页面都不会变，所以我们把他们独立出来。

我们编写Django后续的页面模板时可以直接继承对应的通用模板组件。

在templates文件夹下我们先新建article文件夹用来管理文章相关的模板。

接下来我们在三个通用组件的基础上分别编写文章列表和文章详情视图对应的模板页面：

django4blog/templates/article/list.html：
```
{% extends "base.html" %}
{% load static %}
 
{% block title %}
    首页
{% endblock title %}
 
{% block content %}
 
class="container">
    {% for article in articles %}
    class="row mt-2">
        
        class="col-sm-12">
            
            class="card h-100">
                
                
                class="card-body">
                    class="card-title">{{ article.title }}
                    
                    class="card-text">{{ article.body|slice:'100' }}...
                    "{% url 'detail' article.id %}"  class="card-link">阅读本文
                
```

开发环境准备

配置虚拟环境

安装Django

创建Django项目

数据库创建和连接配置

数据库创建

Django数据库连接配置

博客网站功能模块开发

创建App

注册APP

定义模型

数据迁移（Migrations）

定义视图函数

配置访问路由URL

静态资源准备及配置

前端网页模板创建

class="card-title">{{ article.title }}

Django后台启用配置

测试运行

结语