Django 7 实现Web便签

一、效果图

二、会用到的知识

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

三、实现步骤

1. terminal 输入 django-admin startapp the_10回车

2. 注册， 在 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",
]

3. 路由 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')),
]

4. the_10文件夹新建子文件夹 urls.py

from django.urls import path
from .views import indexurlpatterns = [path('index/', index),
]

5. the_10文件夹内的 views.py 

from django.shortcuts import render# Create your views here.def index(request):return render(request, "the_10/the_10_index.html")

6. templates 文件夹创建 the_10子文件夹，再在the_10子文件夹 创建 the_10_index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>web便签</title>
</head>
<body><h1>hello 2024</h1>
</body>
</html>

7. 运行tutorial, 点击 http://127.0.0.1:8000/， 地址栏 https://127.0.0.1:8000/the_10/index/

8. the_10_index.html 代码 

<!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;}.main{display: flex;}.content{width: 90%;height: 700px;display: flex;}.sidebar{width: 10%;height: 400px;font-size: 30px;/*文字上下展示，从右向左读*/writing-mode: vertical-rl;text-shadow: 3px 5px 5px  gray;}.footer{width: 100%;background: gray;text-align: center;color: white;padding: 5px 0;position: fixed;bottom: 0;}.card{align-content: center;display: flex;flex-wrap:wrap;align-items: center;width: 200px;height: 200px;background: rgb(138,109,53);justify-content: space-around;margin: 10px;padding: 10px;}.card .msg{width: 100%;text-align: left;color: white;}.card .username{width: 100%;text-align: right;color: red;}</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">python大佬，记得明天是项目截止日期！</div><div class="username">python大佬的老大</div></div></div>
{#        右边#}<div class="sidebar">这世上本没有路，走的人多了，也便成了路！</div></div>
{#页脚#}<div class="footer">Copyright C 1970-2077 Python大佬 All Rights Reserved.</div>
</body>
</html>

9. 刷新浏览器，实现效果 

四、继承

1. 在templates\the_10 创建base.html

2. 把the_10_index.html里面的内容全部复制到base.html里面， 然后清空the_10_index.html里面的内容， 然后写入 {% extends 'the_10/base.html' %}

{% extends 'the_10/base.html' %}

3. 刷新浏览器，发现也能打印，证明the_10/已经引入成功

4. 在最外面的tutorial文件夹创建一个static的文件夹，专门用来存放css,js等内容， 然后在static文件夹创建一个css的文件，再在css文件夹创建the_10_base.css文件

5. 把base.html里面style里面的样式内容全部剪切到the_10_base.css里面，删除style标签，然后在the_10_base.css里面改下注释

        /*归零*/*{padding: 0;margin: 0;}.appbar{height: 100px;color: rgb(92,53,21);/*给阴影*/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: 30px;/*文字上下展示，从右向左读*/writing-mode: vertical-rl;text-shadow: 3px 5px 5px  gray;}.footer{width: 100%;background: gray;text-align: center;color: white;padding: 5px 0;position: fixed;bottom: 0;}.card{align-content: center;display: flex;flex-wrap:wrap;align-items: center;width: 200px;height: 200px;background: rgb(138,109,53);justify-content: space-around;margin: 10px;padding: 10px;}.card .msg{width: 100%;text-align: left;color: white;}.card .username{width: 100%;text-align: right;color: red;}

6. 我想用这个样式 需要去tutorial\settings.py里面进行配置

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

7. 配置好以后需要引入， 在templates\the_10\base.html 最上面添加 {% load static %}, 然后添加link标签 <link rel="stylesheet" href="{% static 'css/the_10_base.css'%}">

{% load static %}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>web便签</title><link rel="stylesheet" href="{% static 'css/the_10_base.css'%}">
</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">python大佬，记得明天是项目截止日期！</div><div class="username">python大佬的老大</div></div></div>
{#        右边#}<div class="sidebar">这世上本没有路，走的人多了，也便成了路！</div></div>
{#页脚#}<div class="footer">Copyright C 1970-2077 Python大佬 All Rights Reserved.</div>
</body>
</html>

8. 刷新浏览器，样式就有了，页面如步骤3

9. 对templates\the_10\base.html里面的content内容进行挖坑

10. 把上面的内容复制到the_10_index.html里面，然后把templates\the_10\base.html里面block内的内容删掉

the_10_index.html

{% extends 'the_10/base.html' %}{% block content %}
<div class="card"><div class="msg">小明，记得好好吃饭哦！</div><div class="username">python大佬</div>
</div>
<div class="card"><div class="msg">python大佬，记得明天是项目截止日期！</div><div class="username">python大佬的老大</div>
</div>
{% endblock %}

templates\the_10\base.html

11. 刷新浏览器，效果如步骤3

五、前后端交互

1. the_10\views.py做如下修改

from django.shortcuts import render# Create your views here.def index(request):l = [{'msg':'小红，一定要记得好好吃饭哦！', 'username':'python大佬'},{'msg': 'python大佬，记得明天是项目截止日期！一定要交，不交不准下班！', 'username': 'python大佬的老大'},]return render(request, "the_10/the_10_index.html",{'cards':l})

2. templates\the_10\the_10_index.html

{% extends 'the_10/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 %}

3. 刷新网页，自定义的内容就渲染出来了，这个就叫前后端不分离。

4. 这样就可以通过后端控制前端的内容，如果我们再加一条， 刷新网页，就自动加进去了。

{'msg': '还有一个月，就到农历新年了！', 'username': 'python大佬'},

六、连接数据库

1. the_10\models.py 写入代码

from django.db import models# Create your models here.class Card(models.Model):msg = models.CharField(max_length=200)# user = models.OneToOneField('auth.User',on_delete=models.CASCADE) # 一个用户只能发一个便签user = models.ForeignKey('auth.User', on_delete=models.CASCADE) # 一个用户可以发多个便签def __str__(self):return self.msg

2. 迁移 ， terminal 输入 python .\manage.py makemigrations回车

Migrations for 'the_10':
  the_10\migrations\0001_initial.py
    - Create model Card  

3. terminal 再输入 python .\manage.py migrate 回车

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, the_10, the_6, the_8, the_9
Running migrations:
  Applying the_10.0001_initial... OK

4. the_10\admin.py加内容

from django.contrib import admin
from the_10.models import Card# Register your models here.class CardAdmin(admin.ModelAdmin):# fields = ['pub_date','question_text']fieldsets = [('日期', {'fields':['user']}),('文本', {'fields': ['msg']}),]list_display = ('user','msg')admin.site.register(Card,CardAdmin)

5. 浏览器打开 站点管理 | Django 站点管理员  

6. 点击 Cards， 增加内容

7. 从数据库中查询出来,the_10\views.py做如下更改

from django.shortcuts import render
from the_10.models import Card# Create your views here.def index(request):card = Card.objects.select_related().all()# l = [#     {'msg':'小红，一定要记得好好吃饭哦！', 'username':'python大佬'},#     {'msg': 'python大佬，记得明天是项目截止日期！一定要交，不交不准下班！', 'username': 'python大佬的老大'},#     {'msg': '还有一个月，就到农历新年了！', 'username': 'python大佬'},# ]return render(request, "the_10/the_10_index.html",{'cards':card})

8.  templates\the_10\the_10_index.html 把username 改成user.username

{% extends 'the_10/base.html' %}{% block content %}{% for i in cards %}<div class="card"><div class="msg">{{ i.msg }}</div><div class="username">{{ i.user.username }}</div>
</div>{% endfor %}

9. 浏览器访问 web便签

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ffmpeg 5.0版本调试 ffmpeg 5.01 static版本

ffmpeg 5.0版本调试 ffmpeg 5.01 static版本

ffmpeg 5.0版本调试 写法&#xff1a;ffmpeg -rtsp_transport tcp -re -i rtsp://admin:BYTtest2019192.168.1.2:554/h264/ch1/main/av_stream -q 5 -f mpegts -fflags nobuffer -c:v mpeg1video -an -s 960x540 http://127.0.0.1:12345/demo本地写法 ffmpeg -timeout 5000000…
阅读更多...
JRTClient打开谷歌

JRTClient打开谷歌

网站默认已经启动https访问&#xff0c;这时候JRTClient发布wss需要浏览器信任证书才能访问打印。为此在JRTClient内部发布了HTTPS服务&#xff0c;有时候浏览器信任的证书会丢失或者被清理掉&#xff0c;这时候需要手工信任下&#xff0c;当然用JRTBrowser就不用信任证书&…
阅读更多...
数据库设计——DQL

数据库设计——DQL

D Q L \huge{DQL} DQL ⭐⭐⭐⭐⭐ DQL&#xff1a;数据库查询语言&#xff0c;用来查询数据库中的记录&#xff0c;非常的重要&#xff0c;对于数据库的操作修改相对来讲还是较少部分&#xff0c;绝大多数操作都是数据查询。 整体的语法结构&#xff1a; 基本查询 示例&#…
阅读更多...
FPGA项目（14）——基于FPGA的数字秒表设计

FPGA项目（14）——基于FPGA的数字秒表设计

1.功能设计 设计内容及要求: 1.秒表最大计时范围为99分59. 99秒 2.6位数码管显示&#xff0c;分辨率为0.01秒 3.具有清零、启动计时、暂停及继续计时等功能 4.控制操作按键不超过二个。 2.设计思路 所采用的时钟为50M&#xff0c;先对时钟进行分频&#xff0c;得到100HZ频率…
阅读更多...
rtsp学习记录

rtsp学习记录

目录 学习资料个人rtsp仓库文章视频标准 学习资料 个人rtsp仓库 文档,标准,文章等: https://gitee.com/fedorayang/rtsp.git 文章 百度百科RTSP: https://baike.baidu.com/item/RTSP/1276768?frge_ala 流媒体协议之RTSP详解: https://zhuanlan.zhihu.com/p/622028835?ut…
阅读更多...
xtu oj 1374 连分数

xtu oj 1374 连分数

题目描述 xb1a1b2a2b3a3⋯ 比如 n3,a11,a22,a33,b13,b22,b31时 x3122132113 给定n,ai,i1,2,…,n&#xff0c;请求x,并按最简方式表示x。 输入 第一个行是一个整数T(1≤T≤100)&#xff0c;表示样例的个数。 以后每个样例的第一行为整数n(1≤n≤9); 第二行为n个整数&#…
阅读更多...
联合union

联合union

//————联合&#xff1a;union 1.联合的定义 联合也是一种特殊的自定义类型 //#include<stdio.h> //union Un//Un为联合标签 //{ // int a; // char c; //}; //struct St //{ // int a; // int b; //}; //int main() //{ // union Un u; // printf(…
阅读更多...
219.【2023年华为OD机试真题（C卷）】机械绘图（模拟-JavaPythonC++JS实现）

219.【2023年华为OD机试真题（C卷）】机械绘图（模拟-JavaPythonC++JS实现）

🚀点击这里可直接跳转到本专栏，可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路，高质量解题代码(Java&Python&C++&JS分别实现)，详细代码讲解，助你深入学习，深度掌握！ 文章目录 一. 题目-机械绘图二.解题思路三.题解代码Python题解代码…
阅读更多...
编程基础 - 初识Linux

编程基础 - 初识Linux

编程基础 - 初识Linux 返回序言及专栏目录 文章目录 编程基础 - 初识Linux前言一、Linux发展简介二、现代Linux三、Linux系统各发行版小结 前言 为什么要学习Linux呢&#xff1f;我这Windows用得好好的&#xff0c;简单易用傻瓜式、用的人还超多&#xff01;但是我要告诉你的…
阅读更多...
使用阿里云oss图片处理实现大尺寸图片加载优化

使用阿里云oss图片处理实现大尺寸图片加载优化

背景 为方便客户减少图片的处理&#xff0c;h5端需要加载20m的大尺寸图片 思路 格式转换为webp 图片分割 懒加载 编码实战 import React, { useEffect, useState } from react; import LazyLoad from react-lazyload; import { View, Image } from tarojs/components; imp…
阅读更多...
Transformer模型中前置Norm与后置Norm的区别

Transformer模型中前置Norm与后置Norm的区别

主要介绍原始Transformer和Vision Transformer中的Norm层不同位置的区别。 文章目录 前言 不同位置的作用 总结 前言 在讨论Transformer模型和Vision Transformer (ViT)模型中归一化层位置的不同&#xff0c;我们首先需要理解归一化层&#xff08;Normalization&#xff09;在…
阅读更多...
阿里云大模型「让照片跳舞」刷屏朋友圈，有哪些信息值得关注？

阿里云大模型「让照片跳舞」刷屏朋友圈，有哪些信息值得关注？

介绍 大家好&#xff0c;我分享聊聊阿里通义千问APP中全民舞王功能。 网络热舞结合AI视频&#xff0c;这是以后不用学习跳舞&#xff1f; 可以尝试下效果&#xff0c;一张图片生成视频。 APP快速使用 搜索下载通义千问APP 打开APP&#xff0c;选中一张照片来跳舞。 这里…
阅读更多...
了解webpack

了解webpack

1 概念 webpack是一个模块打包工具&#xff0c;他将各种不同类型的文件最终都打包成.js、.css、.png、.jpg4个类型的静态资源。 2 特点 模块化开发 用webpack之前&#xff0c;项目都是在html中引入一个个js文件来开发&#xff1b;而在webpack中&#xff0c;一切皆模块&#xf…
阅读更多...
我的2023年总结：往前看，别回头

我的2023年总结：往前看，别回头

2023年已经结束&#xff0c;我借此机会回顾一下我的2023年&#xff0c;同时也为2024年立好flag。 文章目录 2023印象深刻的实战经历技术成长与规划技术分享与交流CSDN博客参加百度apollo技术讨论会 深入学习Redis源码多彩的生活张杰演唱会《漫长的季节》&#xff1a;往前看&am…
阅读更多...
bat批处理文件_输出内容到文本

bat批处理文件_输出内容到文本

文章目录 1、echo str > test.txt&#xff08;覆盖原有内容&#xff09;2、echo str >> test.txt&#xff08;不覆盖原有内容&#xff0c;追加&#xff09; 1、echo str > test.txt&#xff08;覆盖原有内容&#xff09; 2、echo str >> test.txt&#xff0…
阅读更多...
js根据二进制流获取文件类型

js根据二进制流获取文件类型

js根据二进制流获取文件类型 在JavaScript中，可以使用FileReader对象来读取二进制数据并判断其文件类型。 下面是一段示例代码： function getFileType(file) {return new Promise((resolve, reject) => {const reader = new FileReader();// 当加载完成时调用onload事件处…
阅读更多...
C++64位游戏软件安全汇编与反汇编反调试 x64驱动开发进程保护进程隐藏驱动读写过保护 视频教程

C++64位游戏软件安全汇编与反汇编反调试 x64驱动开发进程保护进程隐藏驱动读写过保护 视频教程

├─课程1 x32dbgx64dbg驱动调试器反反调试器驱动调试环境搭载 │ 1.为什么要搭载驱动调试环境.mp4 │ 2.驱动调试环境搭载1.mp4 │ 3.三种过PG的方法.mp4 │ 4.驱动调试环境搭载2.mp4 │ 5.驱动调试与驱动进程保护对抗.mp4 │ ├─课程2 C64位游戏软件安全汇编与反汇编反…
阅读更多...
代码随想录 718. 最长重复子数组

代码随想录 718. 最长重复子数组

题目 给两个整数数组 nums1 和 nums2 &#xff0c;返回 两个数组中 公共的 、长度最长的子数组的长度 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,3,2,1], nums2 [3,2,1,4,7] 输出&#xff1a;3 解释&#xff1a;长度最长的公共子数组是 [3,2,1] 。 示例 2&#xff1…
阅读更多...
C++ 类和对象 （下）

C++ 类和对象 （下）

初始化列表&#xff1a; 之前所说的构造函数初始化严格意义上来说不能叫变量初始化&#xff0c;只能是称为赋初值&#xff0c;C给出了初始化列表的概念 标准写法&#xff1a; class Date { public:Date (int year ,int month, int day):_year(year),_month(month),_day(day)…
阅读更多...
C++——stack的基本概念与常用接口

C++——stack的基本概念与常用接口

1.stack基本概念 概念:stack是一种先进后出(First In Last Out,FILO)的数据结构,它只有一个出口 图形剖析: ____________________________栈底 | | 数据元素 | || |________________________| || | 数据元素 | || |________________________| || | 数据元…
阅读更多...
最新文章

Copyright @ 2022~2023