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

最新推荐文章于 2023-11-09 13:55:29 发布

李威威wiwi

最新推荐文章于 2023-11-09 13:55:29 发布

阅读量1.2k

点赞数 1

分类专栏： Django全栈开发 Python Web Python Web毕业设计文章标签： python django 开发语言

本文链接：https://blog.csdn.net/agelee/article/details/127425833

版权

Python Web毕业设计同时被 3 个专栏收录

20 篇文章 34 订阅

订阅专栏

Django全栈开发

17 篇文章 7 订阅

订阅专栏

Python Web

16 篇文章 8 订阅

订阅专栏

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

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

开发环境准备

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

服务端：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/<int:id>/', 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 %}

<!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/bootstrap-icons@1.5.0/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 &copy; django4blog</p>
    </div>
</footer>

上述三个文件是网站页面的通用组件模块，基本上每个页面都不会变，所以我们把他们独立出来。

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

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

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

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>
                &nbsp
                <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 %}

Django后台启用配置

Django自带后台功能，我们只需要两步就可以使用后台功能直接更新我们的后台数据表信息。

1.创建超级用户

在命令行输入：python manage.py createsuperuser

根据提示信息输入用户名，邮箱和密码后系统就创建了一个超级用户。

2.注册模型到admin中

打开django4blog/article/admin.py输入如下代码将所有的模型都注册到admin中，我们就可以在Django自带的后台中更新我们的数据表了。

from django.contrib import admin

# Register your models here.
from .models import Article

# 注册Article到admin中
admin.site.register(Article)

测试运行

至此，我们的Django部分的开发工作基本完成了。

终端输入命令：python manage.py runserver启动服务器。

输入后台网址 http://127.0.0.1:8000/admin 并登录：

添加一条记录：

回到列表页 http://127.0.0.1:8000/：

点击阅读本文按钮会打开网址：http://127.0.0.1:8000/detail/1/

结语

本篇我们一条龙利用Python + Django框架完成了一个简单的博客网站，实现了博文列表和博文详情两个核心功能。

码文的时候发现后面的部署实际上还有很多的内容，所以决定将博文分成两部分，下篇我们将学习如何申请一个阿里云服务器，在Windows上如何连接并管理阿里云服务器的数据和配置。

最终实现将此博文网站部署到线上的终极目标。

李威威wiwi

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用Django开发博客网站并在阿里云上利用 Nginx + Gunicorn 部署上线（开发篇）

本文我们将通过Django+Mysql实现一个简单的个人博客网站，同时在阿里云上通过Nginx 和gunicorn实现网站的线上部署运行。
复制链接

扫一扫