笨方法写一个Web便签

木易丫ang

已于 2024-03-31 22:34:42 修改

阅读量214

点赞数 3

文章标签： python django

于 2024-03-26 22:38:42 首次发布

本文链接：https://blog.csdn.net/2303_77327646/article/details/137056882

版权

新建项目

django-admin startapp the_9

settings 中注册项目

总路由

写视图

写路由

网页视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web便签</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .appbar{
            height: 100px;
            color: rgb(138,109,53);
            {#阴影——范围——颜色#}
            text-shadow: 0 0 2px red;
            font-size: 60px;
        }
        .main{
            display: flex;
        }
        .content{
            width: 90%;
            height: 700px;
            display: flex;
        }
        .sidebar{
            width: 10%;
            height: 400px;
            font-size: 25px;
            {#字体样式：上下排列，从右向左——rl#}
            writing-mode: vertical-rl;
            {#阴影——范围——颜色#}
            text-shadow: 3px -2px 3px rgb(138,131,170);
        }
        .footer{
            width: 100%;
            {#背景颜色#}
            background: dimgrey;
            {#居中#}
            text-align: center;
            color: aliceblue;
            padding: 5px 0;
            {#定位#}
            position: fixed;
            {#底部#}
            bottom: 0;
        }
        .card{
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            width: 200px;
            height: 200px;
            background: rgb(138,109,53);
            justify-content: space-around;
            margin: 10px;
            padding: 10px;
        }
        .card .msg{
            width: 100%;
            color: aliceblue;
            float: left;
        }
        .card .username{
            width: 100%;
            color: red;
            text-align: right;
        }
    </style>
</head>
<body>
{#页眉#}
    <div class = 'appbar'>
        人生苦短，我用Python
    </div>
{#主体#}
    <div class = 'main'>
{#        左边#}
        <div class = 'content'>
{#            卡片#}
            <div class = 'card'>
                <div class = 'msg'>
                    小明，明天记得吃早餐
                </div>
                <div class = 'username'>
                    python大佬
                </div>
            </div>
            <div class = 'card'>
                <div class = 'msg'>
                    pythin大佬，明天是项目截止日
                </div>
                <div class = 'username'>
                    python大佬的老大
                </div>
            </div>
        </div>
{#        右边#}
        <div class = 'sidebar'>
            世上本没有路，走的人多了也就成了路！
        </div>
    </div>
{#页角#}
    <div class = 'footer'>
        Copyright @ 1970-2077 Python大佬 All Rights Reserved.
    </div>
</body>
</html>

继承

创建 base 页面。将网页视图的内容复制到 base 页面中

新建一个静态文件夹，然后新建一个css文件，把 base 页面中的样式内容复制到 css文件中

base 页面的的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web便签</title>
</head>
<body>
{#页眉#}
    <div class = 'appbar'>
        人生苦短，我用Python
    </div>
{#主体#}
    <div class = 'main'>
{#        左边#}
        <div class = 'content'>
{#            卡片#}
            <div class = 'card'>
                <div class = 'msg'>
                    小明，明天记得吃早餐
                </div>
                <div class = 'username'>
                    python大佬
                </div>
            </div>
            <div class = 'card'>
                <div class = 'msg'>
                    pythin大佬，明天是项目截止日
                </div>
                <div class = 'username'>
                    python大佬的老大
                </div>
            </div>
        </div>
{#        右边#}
        <div class = 'sidebar'>
            世上本没有路，走的人多了也就成了路！
        </div>
    </div>
{#页角#}
    <div class = 'footer'>
        Copyright @ 1970-2077 Python大佬 All Rights Reserved.
    </div>
</body>
</html>

css 的样式内容

        *{
            padding: 0;
            margin: 0;
        }
        .appbar{
            height: 100px;
            color: rgb(138,109,53);
            /*阴影——范围——颜色*/
            text-shadow: 0 0 2px red;
            font-size: 60px;
        }
        .main{
            display: flex;
        }
        .content{
            width: 90%;
            height: 700px;
            display: flex;
        }
        .sidebar{
            width: 10%;
            height: 400px;
            font-size: 25px;
            /*字体样式：上下排列，从右向左——rl*/
            writing-mode: vertical-rl;
            /*阴影——范围——颜色*/
            text-shadow: 3px -2px 3px rgb(138,131,170);
        }
        .footer{
            width: 100%;
            /*背景颜色*/
            background: dimgrey;
            /*居中*/
            text-align: center;
            color: aliceblue;
            padding: 5px 0;
            /*定位*/
            position: fixed;
            /*底部*/
            bottom: 0;
        }
        .card{
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            width: 200px;
            height: 200px;
            background: rgb(138,109,53);
            justify-content: space-around;
            margin: 10px;
            padding: 10px;
        }
        .card .msg{
            width: 100%;
            color: aliceblue;
            float: left;
        }
        .card .username{
            width: 100%;
            color: red;
            text-align: right;
        }

settings 中配置 —— 注册，方便系统找到配置文件

打开 base 项目引入样式模板

{#引入#}
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web便签</title>
    <link rel="stylesheet" href="{% static 'CSS/the_9_base.css' %}">
</head>

挖坑

填坑

前后端交互

后台管理数据

from django.shortcuts import render

# Create your views here.


def index(request):
    l = [
        {'msg': '所有随风而逝的都是属于昨天的，所有历经风雨留下来的才是面向未来的','username': '玛格丽特·米切尔'},
        {'msg': '我从来不是那样的人，不能耐心地拾起一地碎片，把它们凑合在一起，然后对自己说，这个修补好了的东西，跟新的完全一样。一样东西破碎了就是破碎了，我宁愿记住它最好时的模样，而不想把它修补好，然后终生看着那些碎了的地方','username': '玛格丽特·米切尔'},
    ]
    return render(request, 'the_9/the_9_index.html',{'cards':l})

{# extends 继承 —— 引入 #}
{% extends 'the_9/base.html' %}

{% block content %}
    {% for i in cards %}
    <div class = 'card'>
        <div class = 'msg'>
            {{ i.msg }}
        </div>
        <div class = 'username'>
            {{ i.username }}
        </div>
    </div>
    {% endfor %}
{% endblock %}

定义模型

from django.db import models

# Create your models here.


class Card(models.Model):
    mag = models.CharField(max_length=500)
    # user = models.OneToOneField('auth.User',on_delete=models.CASCADE)  # 一个用户只能发一个便签
    user = models.ForeignKey('auth.User',on_delete=models.CASCADE)  # 一个用户可以发多个便签

    def __str__(self):
        return self.mag

迁移

(class15env) PS D:\muyi\Django\muyi> python ./manage.py makemigrations
Migrations for 'the_9':
  the_9\migrations\0001_initial.py
    - Create model Card
(class15env) PS D:\muyi\Django\muyi> python .\manage.py migrate       
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, the_5, the_7, the_8, the_9
Running migrations:
  Applying the_9.0001_initial... OK

转入后台，处理数据

from django.contrib import admin
from the_9.models import Card
# Register your models here.


class CardtionAdmin(admin.ModelAdmin):
    # fields = ['pub_date', 'question_text']
    fieldsets = [
        ('文本', {'fields': ['mag']}),
        ('作者', {'fields': ['user']}),
    ]
    # 列表页的展示
    list_display = ('mag','user')


admin.site.register(Card, CardtionAdmin)

从数据库查询数据

from django.shortcuts import render
from the_9.models import Card


# Create your views here.


def index(request):
    card = Card.objects.select_related().all()  # select_related() 查询所有
    return render(request, 'the_9/the_9_index.html',{'cards':card})