Python Web开发记录 Day7：Django（Web框架） part 1

名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪）
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）

目录

      • 七、Django
        • 1、快速了解Django
          • ①概述
          • ②核心功能
          • ③优势
          • ④Django官方文档
        • 2、 安装Django
          • ①创建项目
          • ②app
          • ③启动项目
          • ④静态文件
          • ⑤关于重定向
        • 3、ORM
          • ①ORM的工作原理
          • ②优点
          • ③示例
          • ④具体的使用
        • 4、综合案例
          • ①项目概述
          • ②准备工作
          • ③数据库模型
          • ④视图和URLs
          • ⑤前端模板
          • ⑥静态文件
          • ⑦运行和测试

在当今迅速发展的互联网时代，开发高效、安全且可扩展的网站变得越来越重要。Python语言因其简洁的语法和强大的功能而广受欢迎，而Django则是Python中最受欢迎的Web框架之一。本篇博客将着重学习Django，进一步走进Web开发。

七、Django

回顾：

  • python知识点：函数、面向对象。
  • 前端开发：HTML、CSS、JavaScript、jQuery、BootStrap。
  • MySQL数据库
  • Python的Web框架：
    • Flask，自身短小精悍+第三方组件
    • Django，内部已集成了很多组件 + 第三方组件。【主要】
1、快速了解Django
①概述

Django是一个开放源代码的高级Python Web框架，它遵循“不要重复自己”(DRY)的原则，旨在帮助开发者快速构建高效、安全且易于维护的网站。自2005年首次发布以来，Django已经发展成为一个强大的Web框架，提供了丰富的功能，适用于各种Web开发需求。

②核心功能

  • ORM（对象关系映射）：Django的ORM允许开发者使用Python代码来定义数据模型，这些模型随后会被转化为数据库表，无需编写SQL语句。这不仅提高了代码的可读性，还使数据库操作更加安全和便捷。

  • URL路由：Django让开发者能够设计易于理解和维护的URL。通过一个简单的Python字典，可以将URL模式映射到视图函数，这使得网站的结构更加清晰。

  • 视图系统：视图是用Python编写的函数，它接收Web请求并返回Web响应。Django的视图系统让HTTP请求的处理变得直观。

  • 模板系统：允许开发者定义HTML模板，其中可以使用特殊的模板标签和过滤器来动态地插入数据。这使得前端和后端的开发更加分离，也更易于协作。

  • 表单处理：Django提供了一个强大的表单库，用于生成和处理HTML表单。这不仅包括表单的呈现，还包括数据的验证和清理。

③优势

  • 高效率：Django的设计哲学是“为开发者提供最佳解决方案”，这意味着开发者可以用更少的代码做更多的事情，显著提高开发效率。

  • 扩展性：Django遵循松耦合的设计原则，开发者可以根据项目的需要灵活地选择或替换组件。

  • 社区支持：Django有一个庞大而活跃的社区，提供大量的文档、插件和第三方应用，帮助解决开发中的问题。

  • 适用范围广：从小型个人项目到大型企业级应用，Django都能够胜任。它的使用者包括Instagram、Mozilla、Pinterest等知名公司。

④Django官方文档

https://docs.djangoproject.com/zh-hans/4.2/topics/

在这里插入图片描述

总的来说，Django以其强大的功能、安全性和易用性在Web框架中脱颖而出。无论你是一名新手还是有经验的开发者，Django都能提供必要的工具来帮助你构建高效、安全且可维护的Web应用。通过学习和使用Django，你将能够在Web开发的世界中更加自如地航行。

紧接着我们来安装它，以方便后续使用。

2、 安装Django

在终端运行下面的命令即可安装：

pip install django

c:\python39
	- python.exe
	- scripts
		- pip.exe
		- django-admin.exe	【工具，创建django项目的文件和文件夹】
	- lib
		- 内置模块
		- site-packages
			- openpyxl
			- python-docx
			- flask
			- django		【框架的源码】
①创建项目

django中项目会有一些默认的文件和文件夹。

方式1：在终端创建

  • 打开终端

  • 打开某个目录（项目放的位置）。

  C:\Users\25399>D:
  
  D:\>cd /pythonProject1/Django
  
  D:\pythonProject1\Django>
  • 执行命令创建项目
"c:\python39\Scripts\django-admin.exe" startproject 项目名称

#如果 c:\python39\Scripts 已加入环境系统环境变量。

django-admin startproject 项目名称

django-admin startproject Mysite

image-20240305233726623

方式2：通过Pycharm来创建Django项目

注意：不要将项目的目录放到python解释器的文件夹里。

image-20240306000642827

特殊说明：

  • 命令行，创建的项目是标准的。

  • Pycharm，在标准的基础上默认给咱们加了东西。

    • 创建了一个templates目录（删除）

    image-20240306000947805

  • settings.py中多了一句【删除】

image-20240306001110468

默认项目的文件介绍：

mysite
	manage.py			【项目的管理，启动项目、创建app、数据管理】 【常用】
	mysite
		__init__.py
		settings.py		【项目配置】 【常修改】
		urls.py			【URL和函数的对应关系】【常修改】
        asgi.py			【接收网络请求】【不要动】
		wsgi.py			【接收网络请求】【不要动】
②app

在Django框架中，App是一个非常核心的概念。一个Django项目可以被看作是一个包含多个应用(apps)的集合，每个应用完成一个特定的功能。理解Django中的App对于高效地使用这个框架非常关键。

1.什么是App？

在Django中，App是一个专门用于完成特定功能的Python包。它设计得足够小，以便可以在不同的项目中重用。例如，一个用户认证App可以被用于多个项目来处理用户登录、登出和权限验证。Django鼓励开发者通过创建可重用的Apps来促进代码的重用。

2.App的结构（*）

每个Django App都包含一组特定的文件和目录，这些结构定义了App的功能。常见的结构包括：

  • models.py：定义App的数据模型，这些模型映射到数据库表。
  • views.py：包含处理用户请求并返回响应的视图函数。
  • urls.py：定义URL路由，将URL路径映射到对应的视图。
  • templates：一个目录，包含用于生成HTML响应的模板文件。
  • admin.py：配置Django管理界面，以便于操作App中的数据模型。
  • tests.py：包含App的测试用例。

3.创建一个App

在项目的根目录下运行以下命令就能新建一个App：

python manage.py startapp <app_name>

运行这个命令之后，会生成一个新的App目录，包含上述提到的基本结构文件。

4.App的作用和重要性

Apps是Django项目的构建块。通过将功能逻辑分散到不同的Apps中，开发者可以：

  • 提高代码的可维护性：每个App专注于完成一个特定的功能，使得项目结构更加清晰。
  • 促进代码复用：设计良好的App可以在多个项目之间共享和复用，减少了重复代码的编写。
  • 便于团队协作：不同的开发者可以同时在不同的Apps上工作，提高开发效率。

在Django中，App是实现特定网站功能的模块或组件。正确地理解和使用App，可以使你的Web开发过程更加模块化、高效和可维护。每个App都应该尽可能地独立，这样它们就可以在不同的项目中被重用，同时保持项目的整洁和组织性。

- 项目
	- app，用户管理 【表结构、函数、HTML模版、CSS】
    - app，订单管理 【表结构、函数、HTML模版、CSS】
    - app，后台管理 【表结构、函数、HTML模版、CSS】
    - app，网站    【表结构、函数、HTML模版、CSS】
    - app，API    【表结构、函数、HTML模版、CSS】
    ...
注意：我们开发比较简洁，用不到多app，一般情况下，项目下创建1个app即可。
③启动项目

1.确保app已经注册settings.py

image-20240306114843607

2.编写URL和视图函数对应关系urls.py

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

from app01 import views

urlpatterns = [
    # path("admin/", admin.site.urls),
    #www.xxx.com/index/ ->函数
    path("index/", admin.site.urls),
]

image-20240306115556187

3.编写视图函数views.py

from django.shortcuts import render,HttpResponse

def index(request):
    return HttpResponse("欢迎使用")

image-20240306115547502

4.启动django项目

1️⃣命令行启动

python manage.py runserver

2️⃣PyCharm启动

image-20240306120326733

image-20240306120505205

再写一个页面

- url -> 函数
- 函数

urls.py函数中创建关系，view.py函数中创建响应页面

image-20240306121617811

templates模版

image-20240306140836942

④静态文件

在Django中，静态文件指的是不经常改变的文件，如CSS、JavaScript和图片等。这些文件不像Django模板那样在每次请求时都可能改变内容。静态文件主要用于存储设计和客户端代码，为网站提供布局、设计和交互功能。

例如：在开发过程中一般将：

  • 图片
  • CSS
  • js

都会当做静态文件处理。

1.静态文件的管理

Django提供了一套管理静态文件的系统，使得在开发和部署时都能高效地处理这些文件

static目录

1️⃣在app目录下创建static文件夹

image-20240306153751215

2️⃣引用静态文件

image-20240306153838908

3️⃣模版语法

本质上：在HTML中写一些占位符，由数据对这些占位符进行替换和处理。

image-20240306163438828

2.设置和使用

1️⃣配置静态文件路径：在Django的设置文件（settings.py）中，STATIC_URL用于指定静态文件的URL，而STATICFILES_DIRS列表包含了Django项目中静态文件的额外目录。

2️⃣ 引用静态文件：在模板中，可以使用{% static %}模板标签来生成静态文件的URL。例如，如果有一个CSS文件位于静态目录下的css/styles.css，那么可以在模板中这样引用它：

<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">

3.查找

Django在查找静态文件时会按照一定的顺序搜索STATICFILES_DIRS中列出的目录，以及每个已安装app中名为static的子目录。这使得开发者可以在app内部组织其静态文件，同时保持全局静态文件的组织。

4.部署

在开发环境中，Django可以自动服务静态文件。但在生产环境中，建议将静态文件服务交给更适合静态内容的Web服务器，如Nginx或Apache。为了简化生产环境下的静态文件服务，Django提供了collectstatic管理命令，该命令会将所有的静态文件收集到STATIC_ROOT指定的目录中，从而便于Web服务器访问。

5.重要性

静态文件是Web应用的基础组成部分，负责美化和提升用户界面。合理管理和部署静态文件对于提高网站性能、加快加载速度和优化用户体验至关重要。

总而言之，Django中的静态文件处理为开发者提供了一个既方便又高效的方式来管理和使用网站的CSS、JavaScript和图片等资源。

案例：仿新闻中心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>新闻中心</h1>
    <ul>
        {% for item in news_list %}
            <li>{{ item.news_title }} 时间：{{item.post_time}}</li>
        {% endfor %}
    </ul>
</body>
</html>

请求和响应

image-20240306183406147

⑤关于重定向

在Django中，重定向（redirect）是一种常见的Web开发技术，用于将一个网页请求指向另一个网页。

image-20240306183159505

1.什么是重定向？

重定向是HTTP协议的一个标准，允许Web服务器告诉客户端（例如，浏览器）去访问另一个URL地址。在Web开发中，这通常用于页面跳转，例如，当用户成功提交表单后，重定向用户到一个新的页面，显示提交成功的消息。

在Django中，可以使用redirect函数来实现重定向。这个函数是Django的django.shortcuts模块的一部分，它简化了HTTP重定向的发送过程。

redirect函数的基本用法非常直接。它可以接受一个模型对象、一个视图的名称或一个绝对或相对的URL作为参数。当调用redirect函数时，它会返回一个HttpResponseRedirect或HttpResponsePermanentRedirect对象，依赖于参数的类型和用法。

2.如何使用重定向？

例如：

  • 重定向到一个URL：
from django.shortcuts import redirect

def my_view(request):
    # 进行一些处理
    return redirect('/some/url/')
  • 重定向到一个视图：
from django.shortcuts import redirect

def my_view(request):
    # 进行一些处理
    return redirect('name_of_view')

在这个例子中，name_of_view是URLconf中定义的视图的名称。

  • 重定向到一个模型的get_absolute_url：

如果你有一个Django模型实例，并且这个实例定义了get_absolute_url方法，你可以直接将这个实例作为redirect函数的参数：

from django.shortcuts import redirect
from .models import MyModel

def my_view(request, id):
    # 获取一个模型实例
    obj = MyModel.objects.get(pk=id)
    # 重定向到模型实例的get_absolute_url
    return redirect(obj)

3.为什么使用重定向？

在Web应用中使用重定向有多种原因，常见的包括：

  • 避免表单的重复提交：在用户提交表单后重定向到另一个页面，可以防止用户刷新页面时重复提交表单。
  • 提高用户体验：在执行某些操作后，将用户重定向到另一个与操作结果相关的页面，可以提供更连贯的用户体验。
  • URL管理：重定向可以用于管理或更新应用中的URL，例如，将旧的URL重定向到新的URL，而不影响用户体验。

总结来说，重定向是Django开发中一种重要的技术，允许开发者在合适的时机，将用户从一个页面平滑地转移到另一个页面，这在提升网站的可用性和用户体验方面发挥着重要作用。

案例：用户登录

def login(request):
    if request.method == "GET":
        return render(request, "login.html")
    else:
        # 如果是POST请求，获取用户提交的数据
        username = request.POST.get("user")
        password = request.POST.get("pwd")
        if username == 'root' and password == "123":
            # return HttpResponse("登录成功")
            return redirect("https://www.baidu.com")
        else:
            # return HttpResponse("登录失败")
            return render(request,"login.html",{"error_msg":"用户名或密码错误"})

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>用户登录</h1>
<form method="post" action="/login/">

    {% csrf_token %}
    <input type="text" name="user" placeholder="用户名">
    <input type="password" name="pwd" placeholder="密码">
    <input type="submit" value="提交"/>
    <span style="color: red">{{ error_msg }}</span>
</form>

</body>
</html>

数据库操作

  • MySQL数据库 + pymysql
import pymysql
from pymysql import cursors

#1.连接MySQL
conn = pymysql.connect(host="127.0.0.1",port=3306,user='root',passwd="123456",charset='utf8',database='unicom')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

#2.发送指令(不要用字符串格式化去做SQL的拼接，因为存在安全隐患 SQL注入)
sql = "insert into admin(username,password,mobile) values(%s,%s,%s)"
cursor.execute(sql,["张三","121","1112121112"])
conn.commit()

#3.关闭
cursor.close()
conn.close()
  • Django开发操作数据库更简单，内部提供了ORM框架。

image-20240306214737595

安装第三方模块

pip install mysqlclient

image-20240306214953461

3、ORM

在Django框架中，ORM（Object-Relational Mapping，对象关系映射）是一种强大的机制，它允许开发者用Python类来定义和操作数据库中的数据，而不需要编写SQL语句。

①ORM的工作原理

  • 模型定义：在Django中，每一个数据库表都对应于一个Python类，该类继承自django.db.models.Model。类中的每个属性代表数据库表中的一个字段。Django提供了丰富的字段类型，能够覆盖大部分数据库字段的需求。

  • 数据操作：通过定义的模型，开发者可以进行查询、更新、删除等操作而无需编写原始的SQL代码。Django的ORM层将这些Python方法调用转换为相应的数据库操作。

  • 迁移机制：Django的ORM还支持数据库迁移，这意味着开发者可以在模型变化后，自动地更新数据库结构，而不会丢失数据。

②优点

  • 抽象性：ORM提供了一层抽象，让开发者不必直接与SQL语言打交道，从而简化了数据操作和管理。

  • 可移植性：由于ORM层的存在，Django项目可以不受特定数据库软件的限制，轻松迁移到不同的数据库系统。

  • 安全性：ORM有助于防止SQL注入攻击，因为数据不是通过拼接SQL字符串来查询的，而是通过参数化查询，其中数据自动被适当地转义。

  • 可维护性与可扩展性：使用ORM可以使代码更加整洁、组织化，同时也便于维护和扩展。

③示例

以下是使用Django ORM的一个简单例子：

  1. 定义模型：

    from django.db import models

class Person(models.Model):
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)

  2. 创建记录：

    new_person = Person(first_name='John', last_name='Doe')
new_person.save()

  3. 查询记录：

    person = Person.objects.get(first_name='John')

  4. 更新记录：

    person.last_name = 'Smith'
person.save()

  5. 删除记录：

    person.delete()

通过使用ORM，开发者可以更加专注于业务逻辑的实现，而不必担心底层的数据库细节。

总的来说，ORM可以帮助我们做两件事情：

  • 对数据库中表的增删改查 （可以不用写sql语句）。【无法创建数据库】
  • 操作表中的数据（不用写SQL语句）。
④具体的使用

1.创建数据库

  • 启动MySQL服务
  • 自带工具创建数据库
create database henan15;

2.django连接数据库

在settings.py文件中进行配置和修改。

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",
        "NAME": "henan15",
        "USER": "your username",
        "PASSWORD": "your pwd",
        "HOST": "127.0.0.1",
        "PORT": "3306",
    }
}

3.django操作表

  • 创建表
  • 删除表
  • 修改表

创建表：在models.py文件中：

from django.db import models

class UserInfo(models.Model):
    name = models.CharField(max_length=32)
    password = models.CharField(max_length=64)
    age = models.IntegerField()

create table app01_userInfo(
    id bigint auto_increment primary key,
    name varchar(32),
    password varchar(64),
    age int
)

执行命令：

python manage.py makemigrations

image-20240306224402894

 python manage.py migrate

image-20240306224411556

image-20240306224440037

image-20240306224505469

在表中新增列时，由于已存在列中可能已有数据，所以新增列必须要指定新增列对应的数据：

  • 手动输入一个值
  • 设置默认值
age = models.IntegerField(default=2)
  • 允许为空
data = models.IntegerField(null = True,blank = True)

以后在开发中

如果想要对表结构进行调整：

  • 在models.py文件中操作类即可。
  • 命令
python manage.py makemigrations
python manage.py migrate

操作表中的数据

def orm(request):
    # 测试ORM操作表中的数据 2011-11-11 datetime.datetime.now()

    # #### 1.新建 ####
    # Department.objects.create(title="销售部")
    # Department.objects.create(title="IT部")
    # Department.objects.create(title="运营部")
    # UserInfo.objects.create(name="张三", password="123",age=19)
    # UserInfo.objects.create(name="李四",password="666",age=29)
    # UserInfo.objects.create(name="王五",password="666")

    # #### 2.删除 ####
    # UserInfo.objects.filter(id=3).delete()
    # UserInfo.objects.all().delete()

    # #### 3.查询 ####
    # 3.1查询符合条件的所有数据
    # data_list = [行，行，行] QuerySet类型
    # data_list = UserInfo.objects.all()
    # for obj in data_list:
    #     print(obj.id,obj.name,obj.password,obj.age)

    # data_list = [对象,]
    # data_list = UserInfo.objects.filter(id=1)
    # print(data_list)
    # 3.2 查询第一条数据【对象】
    # row_obj = UserInfo.objects.filter(id=1).first()
    # print(row_obj.id,row_obj.name,row_obj.password,row_obj.age)

    # #### 4.修改数据 ####
    # UserInfo.objects.all().update(password=999)
    # UserInfo.objects.filter(id=2).update(age=999)
    UserInfo.objects.filter(name="张三").update(age=999)


    return HttpResponse("成功")

案例：用户管理

1.显示用户列表

  • url
  • 函数
    • 获取所有用户信息
    • HTML渲染

info_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>info列表</h1>

    <a href="/info/add">添加</a>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>密码</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        {% for obj in data_list %}
            <tr>
                <td>{{ obj.id }}</td>
                <td>{{ obj.name }}</td>
                <td>{{ obj.password }}</td>
                <td>{{ obj.age }}</td>
                <td>
                    <a href="http://127.0.0.1:8000/info/delete?nid={{obj.id}}">删除</a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</body>
</html>

views.py

def info_list(request):
    # 1.获取数据库中所有的用户信息
    # [对象，对象，对象]
    data_list = UserInfo.objects.all()

    # 2.渲染，返回给用户
    return render(request, "info_list.html", {"data_list": data_list})

2.添加用户

  • url
  • 函数
    • GET，看到页面，输入内容
    • POST，提交->写入到数据库

info_add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>添加用户</h1>
<form method="post" action="/info/add">
    {% csrf_token %}
    <label for="user">用户名</label>
    <input type="text" id="user" name="user" placeholder="用户名">
    <label for="pwd">密码</label>
    <input type="text" id="pwd" name="pwd" placeholder="密码">
    <label for="age">年龄</label>
    <input type="text" id="age" name="age" placeholder="年龄">
    <input type="submit" value="提交">
</form>

</body>
</html>

views.py

def info_add(request):
    if request.method == "GET":
        return render(request, 'info_add.html')

    # 获取用户提交的数据
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")
    age = request.POST.get("age")

    # 添加到数据库
    UserInfo.objects.create(name=user, password=pwd, age=age)
    # return HttpResponse("添加成功")

    # 自动跳转
    return redirect("http://127.0.0.1:8000/info/list")
    # return redirect("info/list")

3.删除用户

  • url
  • 函数
http://127.0.0.1:8000/info/delete/?nid=1
http://127.0.0.1:8000/info/delete/?nid=2
http://127.0.0.1:8000/info/delete/?nid=3

def info_delete(request):
    nid = request.GET.get('nid')
    UserInfo.objects.filter(id=nid).delete()
    # return HttpResponse("删除成功")
    return redirect("/info/list")
4、综合案例

案例：简易个人博客系统

  • 文章的展示
  • 文章的添加
①项目概述

个人博客系统将包括以下部分：

  • 前端：使用HTML, CSS (利用Bootstrap框架), 以及JavaScript和jQuery来构建用户界面。
  • 后端：使用Django来处理数据的存储、文章的添加和展示。
  • 数据库：使用MySQL来存储文章数据。
②准备工作

  1. 确保已安装Python、Django、MySQL和相关库。

  2. 创建一个Django项目：假设你的项目名为myblog。

    django-admin startproject myblog

在这里插入图片描述

在这里插入图片描述

  1. 创建一个Django应用：比如命名为blog。

    cd myblog
python manage.py startapp blog

在这里插入图片描述

  1. 配置MySQL数据库：在myblog/settings.py中设置数据库连接。

在这里插入图片描述

③数据库模型

在blog/models.py中定义一个Article模型。

from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    published_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

在这里插入图片描述

④视图和URLs

在blog/views.py中创建视图来处理文章的显示和添加。

from django.shortcuts import render, redirect
from .models import Article
from django.utils import timezone

def article_list(request):
    articles = Article.objects.all().order_by('-published_at')
    return render(request, 'blog/article_list.html', {'articles': articles})

def add_article(request):
    if request.method == "POST":
        title = request.POST.get('title')
        content = request.POST.get('content')
        Article.objects.create(title=title, content=content, published_at=timezone.now())
        return redirect('article_list')
    return render(request, 'blog/add_article.html')

在这里插入图片描述

在myblog/urls.py中引入blog应用的视图，并定义URL模式。

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.article_list, name='article_list'),
    path('add/', views.add_article, name='add_article'),
]
⑤前端模板

  1. 文章列表页面 (blog/templates/blog/article_list.html)

    使用Bootstrap创建一个简单的页面布局来展示文章列表。

    {% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Blog</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
    <div class="container">
        <h1>文章列表</h1>
        <a href="/add/" class="btn btn-primary">添加文章</a>
        {% for article in articles %}
            <div class="article">
                <h2>{{ article.title }}</h2>
                <p>{{ article.content|linebreaks }}</p>
            </div>
        {% endfor %}
    </div>
</body>
</html>

在这里插入图片描述

  1. 添加文章页面 (blog/templates/blog/add_article.html)

    使用Bootstrap和jQuery来创建一个表单，用于添加新文章。

    {% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Add Article</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
</head>
<body>
    <div class="container">
        <h1>添加文章</h1>
        <form action="/add/" method="post">
            {% csrf_token %}
            <div class="form-group">
                <label for="title">标题</label>
                <input type="text" class="form-control" id="title" name="title" required>
            </div>
            <div class="form-group">
                <label for="content">内容</label>
                <textarea class="form-control" id="content" name="content" rows="3" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>

    <script>
        // 这里可以写一些JS或jQuery代码，比如表单验证等
        $(document).ready(function() {
            // 示例：简单的表单验证提示
            $('form').submit(function(e) {
                if ($('#title').val().trim() === '' || $('#content').val().trim() === '') {
                    e.preventDefault(); // 阻止表单提交
                    alert('标题和内容不能为空！');
                }
            });
        });
    </script>
</body>
</html>

在这里插入图片描述

⑥静态文件

  1. 配置静态文件：确保在myblog/settings.py中正确设置了静态文件路径。

    STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

在这里插入图片描述

  1. 创建静态文件目录：在Django项目根目录下创建一个static文件夹，并将Bootstrap的CSS、JS文件以及你自己的CSS和JS文件放在里面。
    在这里插入图片描述
⑦运行和测试
  1. 准备工作

安装第三方模块mysqlclient

pip install mysqlclient

在这里插入图片描述

在myblog/settings.py路径下配置APPS，将刚才创建的blog添加到里面

在这里插入图片描述

  1. 数据库迁移（*）：创建数据库表。

    python manage.py makemigrations blog
python manage.py migrate

  2. 创建超级用户（选用）：用于登录Django admin管理后台。

    python manage.py createsuperuser

  3. 运行开发服务器（*）：

    python manage.py runserver

  4. 访问应用：在浏览器中打开http://127.0.0.1:8000/来查看博客的文章列表，通过http://127.0.0.1:8000/add/来访问添加文章的页面。页面如下：

在这里插入图片描述

在这里插入图片描述

在个人看来，实践是最好的学习方式，这个案例涉及了Web开发的多个方面。然后以上本篇内容整体偏向于对Django的了解和安装使用，之后会继续学习Django的内容，以熟悉用Django作为框架进行后续的案例开发为目标。

很感谢你能看到这里，如有相关疑问，还请下方评论留言。
Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）
希望本篇内容能对大家有所帮助，如果大家喜欢的话，请动动手点个赞和关注吧，非常感谢你们的支持！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/438730.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

css flex 布局换行

css flex 布局换行

默认使用display: flex;是不换行的&#xff0c;只需要加上flex-wrap: wrap;就行了&#xff0c;效果图 .app-center {display: flex;flex-wrap: wrap;justify-content:flex-start; } 通过上面我们发现虽然时间换行了&#xff0c;但是每行的边距不一样 加上这个就行了&#xff…
阅读更多...
华为配置DHCP Snooping防止DHCP Server仿冒者攻击示例

华为配置DHCP Snooping防止DHCP Server仿冒者攻击示例

配置DHCP Snooping防止DHCP Server仿冒者攻击示例 组网图形 图1 配置DHCP Snooping防止DHCP Server仿冒者攻击组网图 DHCP Snooping简介配置注意事项组网需求配置思路操作步骤配置文件 DHCP Snooping简介 在一次DHCP客户端动态获取IP地址的过程中&#xff0c;DHCP Snoopi…
阅读更多...
开源分子对接程序rDock使用方法(1)-Docking in 3 steps

开源分子对接程序rDock使用方法(1)-Docking in 3 steps

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、Docking in 3 steps 标准对接rDock 的基本对接步骤及注意事项 二、 三步对接案例Step 1. 结构文件准备Step 2. 产生对接位点Step 3. 运行分子对接3.1 检查输入文件3.2 测试-只进行打分3.3 运行…
阅读更多...
maven项目结构管理统一项目配置操作

maven项目结构管理统一项目配置操作

一、maven分模块开发 Maven 分模块开发 1.先创建父工程&#xff0c;pom.xml文件中&#xff0c;打包方式为pom 2.然后里面有许多子工程 3.我要对父工程的maven对所有子工程进行操作 二、解读maven的结构 1.模块1 <groupId>org.TS</groupId><artifactId>TruthS…
阅读更多...
利用CesiumJS开发模拟飞机飞行的应用(添加飞行轨迹)

利用CesiumJS开发模拟飞机飞行的应用(添加飞行轨迹)

上一节介绍了利用CesiumJS开发模拟飞机飞行的应用(一&#xff0c;基本功能)&#xff0c;本节介绍如何在上节基础上添加飞行轨迹所使用数据是从旧金山到哥本哈根的真实航班&#xff0c;并使用 FlightRadar24收集的雷达数据。 添加单个3D点对象 FlightRadar24 使用多种方法&#…
阅读更多...
[c/c++] const

[c/c++] const

const 和 #define 的区别 ? const 和指针一块出现的时候&#xff0c;到底谁不能修改 &#xff1f; const 和 volatile 能同时修饰一个变量吗 ? const 在 c 中的作用 ? 1 const 和 #define 的区别 const 和 #define 的相同点&#xff1a; (1) 常数 const 和 #define 定…
阅读更多...
51-27 DirveVLM：自动驾驶与大型视觉语言模型的融合

51-27 DirveVLM：自动驾驶与大型视觉语言模型的融合

本文由清华大学和理想汽车共同发布于2024年2月25日&#xff0c;论文名称DRIVEVLM: The Convergence of Autonomous Driving and Large Vision-Language Models. DriveVLM是一种新颖的自动驾驶系统&#xff0c;旨在针对场景理解挑战&#xff0c;利用最近的视觉语言模型VLM&…
阅读更多...
蓝桥杯——web(ECharts)

蓝桥杯——web(ECharts)

ECharts 初体验 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><script src"echarts.js">&l…
阅读更多...
【APB协议 UVM_Sequencer Driver Monitor_2024.03.04】

【APB协议 UVM_Sequencer Driver Monitor_2024.03.04】

apb协议 写时序 地址、写信号、PSEL、写数据信号同时发生变化&#xff0c;即传输的第一个时钟被称为SETUP周期。在下个时钟上升沿,PENABLE信号拉高&#xff0c;表示ENABLE周期&#xff0c;在该周期内&#xff0c;数据、地址以及控制信号都必须保持有效。整个写传输在这个周期…
阅读更多...
寻找旋转排序数组中的最小值[中等]

寻找旋转排序数组中的最小值[中等]

优质博文IT-BLOG-CN 一、题目 已知一个长度为n的数组&#xff0c;预先按照升序排列&#xff0c;经由1到n次 旋转 后&#xff0c;得到输入数组。例如&#xff0c;原数组nums [0,1,2,4,5,6,7]在变化后可能得到&#xff1a; 【1】若旋转4次&#xff0c;则可以得到[4,5,6,7,0,1,2…
阅读更多...
perf的安装与迁移

perf的安装与迁移

前言 perf是性能优化很重要的工具之一&#xff0c;本篇博客就来看一下perf的安装以及遇到的问题。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xff0c;一起讨论一起学…
阅读更多...
Unity性能优化篇(四) GPU Instancing

Unity性能优化篇(四) GPU Instancing

使用GPU Instancing可以在一个Draw Call中同时渲染多个相同或类似的物体&#xff0c;从而减少CPU和GPU的开销。 官方文档&#xff1a;https://docs.unity3d.com/Manual/GPUInstancing.html 启用GPU Instancing&#xff0c;我们可以选中一个材质&#xff0c;然后在Inspector窗口…
阅读更多...
【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 传统布局和Web标准布局的区别

【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 传统布局和Web标准布局的区别

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 传统布局与…
阅读更多...
c++复习

c++复习

基础 内存分区 栈&#xff1a; 存放函数的局部变量、函数参数、返回地址等&#xff0c;由编译器自动分配和释放。 堆&#xff1a; 动态申请的内存空间&#xff0c;就是由 malloc 分配的内存块&#xff0c;由程序员控制它的分配和释放&#xff0c;如果程序执行结束还没有释放…
阅读更多...
【MySQL 系列】MySQL 起步篇

【MySQL 系列】MySQL 起步篇

MySQL 是一个开放源代码的、免费的关系型数据库管理系统。在 Web 开发领域&#xff0c;MySQL 是最流行、使用最广泛的关系数据库。MySql 分为社区版和商业版&#xff0c;社区版完全免费&#xff0c;并且几乎能满足全部的使用场景。由于 MySQL 是开源的&#xff0c;我们还可以根…
阅读更多...
[HackMyVM]Quick 2

[HackMyVM]Quick 2

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…
阅读更多...
Chromium内核浏览器编译记（四）Linux版本CEF编译

Chromium内核浏览器编译记（四）Linux版本CEF编译

转载请注明出处&#xff1a;https://blog.csdn.net/kong_gu_you_lan/article/details/136508294 本文出自 容华谢后的博客 0.写在前面 本篇文章是用来记录编译Linux版本CEF的步骤和踩过的坑&#xff0c;以防止后续再用到的时候忘记&#xff0c;同时也希望能够帮助到遇到同样问…
阅读更多...
Uboot的start.s源码分析

Uboot的start.s源码分析

/* * armboot - Startup Code for ARM920 CPU-core * * Copyright (c) 2001 Marius Gr鰃er <magsysgo.de> * Copyright (c) 2002 Alex Z黳ke <azusysgo.de> * Copyright (c) 2002 Gary Jennejohn <gjdenx.de> * * See file CREDITS for list of people w…
阅读更多...
微软首批 AI PC 产品将于3月21日发布；腾讯、字节再战 AI 社交产品

微软首批 AI PC 产品将于3月21日发布；腾讯、字节再战 AI 社交产品

微软首批 AI PC 产品将于 3 月 21 日发布 据 Windows Central 报道&#xff0c;微软将于 3 月 21 日发布 Surface Pro 10 和 Surface Laptop 6&#xff0c;这有望成为微软首批 AI PC 产品&#xff0c;性能与效率或可媲美苹果 iPad Pro 和 MacBook Pro。 新品将搭载基于英特尔酷…
阅读更多...
OpenHarmony教程指南—Ability的启动模式

OpenHarmony教程指南—Ability的启动模式

介绍 本示例展示了在一个Stage模型中&#xff0c;实现standard、singleton、specified多种模式场景。 本实例参考开发指南 。 本实例需要使用aa工具 查看应用Ability 模式信息。 效果预览 使用说明 1、standard模式&#xff1a; 1&#xff09;进入首页&#xff0c;点击番茄…
阅读更多...
最新文章

Copyright @ 2022~2023