VS Code中 python Django添加可视化页面

在 Django 中绘制页面通常涉及以下几个步骤:创建视图函数或类、定义 URL 路由、创建模板文件以及处理静态文件(如 CSS 和 JavaScript)。下面是一个详细的示例,展示如何在 Django 中绘制一个简单的页面

1: 创建 Django 项目和应用
首先,确保你已经安装了 Django 并创建了一个新的项目和应用。如果还没有创建,可以使用以下命令:

# 创建项目
django-admin startproject myproject

# 进入项目目录
cd myproject

# 创建应用
python manage.py startapp myapp

2.定义视图
在 myapp/views.py 文件中定义一个视图函数。例如,我们创建一个简单的视图来显示一个 HTML 页面。

# myapp/views.py
from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

3.配置url路由
在 myapp 目录下创建一个 urls.py 文件,并配置 URL 路由。然后在项目的主 urls.py 文件中包含这个应用的 URL 配置。
myapp/urls.py

# myapp/urls.py
from django.urls import path
from .views import home

urlpatterns = [
    path('', home, name='home'),
]

myproject/urls.py

# myproject/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),  # 包含应用的 URL 配置
]

4.在 myapp 目录下创建一个 templates 文件夹,并在其中创建一个 home.html 文件。在这个文件中编写 HTML 代码。
myapp/templates/home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <!-- 引入静态文件中的 CSS 文件 -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <h1>Welcome to My Home Page</h1>
    <p>This is a simple home page created using Django.</p>
</body>
</html>

5.处理静态文件
为了在模板中引用静态文件(如 CSS 文件),需要配置 Django 的静态文件设置。
myproject/settings.py

import os

# 添加静态文件目录路径
STATIC_URL = '/api/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'api/static'),
]

在 myapp 目录下创建一个 static 文件夹,并在其中创建一个 css 文件夹和一个 style.css 文件。
myapp/static/css/style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

6.收集静态文件
运行以下命令收集静态文件到一个统一的位置:

python manage.py collectstatic

测试页面
现在,启动 Django 开发服务器并访问首页:

python manage.py runserver

打开浏览器并访问 http://127.0.0.1:8000/
屏幕截图 2024-11-22 153622.png

页面展示效果:


屏幕截图 2024-11-22 153639.png

通过以上步骤,你可以创建一个基本的 Django 页面,并添加一些简单的样式。根据需要,你可以继续扩展和美化页面。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容