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. 刷新浏览器,实现效果
相关推荐
丕羽2 小时前
【Pytorch】基本语法
人工智能·pytorch·python
2401_865854882 小时前
iOS应用想要下载到手机上只能苹果签名吗?
后端·ios·iphone
bryant_meng2 小时前
【python】Distribution
开发语言·python·分布函数·常用分布
AskHarries2 小时前
Spring Boot集成Access DB实现数据导入和解析
java·spring boot·后端
2401_857622663 小时前
SpringBoot健身房管理:敏捷与自动化
spring boot·后端·自动化
程序员阿龙3 小时前
基于SpringBoot的医疗陪护系统设计与实现(源码+定制+开发)
java·spring boot·后端·医疗陪护管理平台·患者护理服务平台·医疗信息管理系统·患者陪护服务平台
程思扬3 小时前
为什么Uptime+Kuma本地部署与远程使用是网站监控新选择?
linux·服务器·网络·经验分享·后端·网络协议·1024程序员节
阿华的代码王国3 小时前
【Spring】——SpringBoot项目创建
java·spring boot·后端·启动类·target文件
m0_594526303 小时前
Python批量合并多个PDF
java·python·pdf
九鼎科技-Leo3 小时前
什么是 ASP.NET Core?与 ASP.NET MVC 有什么区别?
windows·后端·c#·asp.net·mvc·.net