Django 实现Web便签

效果图

会用到的知识

  • 目录结构与URL路由注册
  • request与response对象
  • 模板基础与模板继承
  • ORM查询
  • 后台管理

实现步骤

  1. terminal 输入 django-admin startapp the_10回车
  1. 注册, 在 tutorial子文件夹settings.py INSTALLED_APPS 中括号添加 "the_10"
复制代码
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "the_3",
    "the_5",
    "the_6",
    "the_7",
    "the_8",
    "the_9",
    "the_10",
]
  1. 路由 tutorial子文件夹 urls.py
复制代码
urlpatterns = [
    path('admin/', admin.site.urls),
    path('the_3/', include('the_3.urls')),
    path('the_4/', include('the_4.urls')),
    path('the_5/', include('the_5.urls')),
    path('the_7/', include('the_7.urls')),
    path('the_10/', include('the_10.urls')),
]
  1. the_10文件夹新建子文件夹 urls.py
python 复制代码
from django.urls import path
from .views import index


urlpatterns = [
    path('index/', index),
]
  1. the_10文件夹内的 views.py
python 复制代码
from django.shortcuts import render

# Create your views here.

def index(request):
    return render(request, "the_10/the_10_index.html")
  1. templates 文件夹创建 the_10子文件夹,再在the_10子文件夹 创建 the_10_index.html
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web便签</title>
</head>
<body>
    <h1>hello 2024</h1>
</body>
</html>
  1. 运行tutorial, 点击 http://127.0.0.1:8000/, 地址栏 https://127.0.0.1:8000/the_10/index/
  1. the_10_index.html 代码
python 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web便签</title>
    <style>
        {# 归零#}
        *{
            padding: 0;
            margin: 0;
        }
        .appbar{
            height: 100px;
            color: rgb(92,53,21);
            {#给阴影#}
            text-shadow: 0 0 2px red;
            font-size: 60px;
            font-family: 黑体;
        }
        .main{
            display: flex;
        }
        .content{
            width: 90%;
            height: 700px;
        }
        .sidebar{
            width: 10%;
            height: 360px;
            font-family: 汉仪行楷简;
            font-size: 30px;
            {#文字上下展示,从右向左读#}
            writing-mode: vertical-rl; /* 从上到下 */
            text-shadow: 3px 5px 5px gray;
        }
        .footer{
            background: gray;
            text-align: center;
            color: white;
            padding: 5px 0;
        }
        .card1{
            float: left;
            width: 150px;
            height:150px;
            background: rgb(139 108 49);
            color: white;
            font-family: 黑体;
            display: flex;
            align-items: center;
            margin-left: 150px;
            margin-right: 20px;
            box-shadow: 1px 1px 10px 3px grey;
        }
        .card2{
            float: left;
            width: 150px;
            height:150px;
            background: rgb(139 108 49);
            color: white;
            font-family: 黑体;
            display: flex;
            align-items: center;
            box-shadow: 1px 1px 10px 3px grey;
        }
        .username{
            color: orangered;
            text-align: right;
        }
    </style>
</head>
<body>
{#页眉#}
    <div class="appbar">
        人生苦短,我用python
    </div>
{#主体#}
    <div class="main">
{#        左边#}
        <div class="content">
            <div class="card1">
                <div class="msg">
                    小明,记得好好吃饭哦!
                    <div class="username">
                    python大佬
                </div>
                </div>

            </div>
            <div class="card2">
                <div class="msg">
                    python大佬, 记得明天是项目截止日期!
                    <div class="username">
                    python大佬的老大
                </div>
                </div>
            </div>
        </div>
{#        右边#}
        <div class="sidebar">
            这世上本没有路, 走的人多了, 也就成了路!
        </div>
    </div>
{#页脚#}
<div class="footer">Copyright C 1970-2077 Python大佬 All Rights Reserved.</div>
</body>
</html>
  1. 刷新浏览器,实现效果
相关推荐
Yan-英杰20 分钟前
百度搜索和文心智能体接入DeepSeek满血版——AI搜索的新纪元
图像处理·人工智能·python·深度学习·deepseek
weixin_307779131 小时前
Azure上基于OpenAI GPT-4模型验证行政区域数据的设计方案
数据仓库·python·云计算·aws
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
m0_748256144 小时前
SpringBoot
java·spring boot·后端
多想和从前一样5 小时前
Django 创建表时 “__str__ ”方法的使用
后端·python·django
涛粒子6 小时前
Spring Bean 生命周期的执行流程
java·后端·spring
小喵要摸鱼6 小时前
【Pytorch 库】自定义数据集相关的类
pytorch·python
bdawn7 小时前
深度集成DeepSeek大模型:WebSocket流式聊天实现
python·websocket·openai·api·实时聊天·deepseek大模型·流式输出
Jackson@ML7 小时前
Python数据可视化简介
开发语言·python·数据可视化
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt