django5博客项目实战-把html页面改造为django模版页面

最新推荐文章于 2024-11-11 17:28:03 发布
最新推荐文章于 2024-11-11 17:28:03 发布
阅读量285 收藏
点赞数 1
文章标签： html django 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013342594/article/details/142737473
版权

新建base.html页面

把相同的页面代码放到base.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'bootstrap5/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap5/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap5/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    {% block head %}{% endblock %}
</head>
<body>
<header class="p-3 text-bg-light border-bottom mb-3">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                <img src="{% static 'image/logo.png' %}" alt="" height="40">
            </a>

            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                <li><a href="#" class="nav-link px-2 text-secondary">首页</a></li>
                <li><a href="#" class="nav-link px-2 text-secondary">发布博客</a></li>
            </ul>

            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                <input type="search" class="form-control" placeholder="搜索..." aria-label="Search">
            </form>

            <div class="text-end">
                <button type="button" class="btn btn-outline-primary me-2">登录</button>
                <button type="button" class="btn btn-primary">注册</button>
            </div>
        </div>
    </div>
</header>
<main class="container bg-white p-3 rounded">
    {% block main %}{% endblock %}
</main>
</body>
</html>

改造index.html

{% extends 'base.html' %}
{% block title %}首页{% endblock %}
{% block main %}
    <h1>博客列表</h1>
    <div class="row row-cols-2 row-gap-4">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <a href="#">Django5实战教程</a>
                </div>
                <div class="card-body" style="height: 100px;">
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div class="card-footer text-body-secondary d-flex justify-content-between">
                    <div>
                        <img src="{% static 'image/avatar.webp' %}" class="rounded-circle" width="30" height="30" alt="">
                        钢铁侠
                    </div>
                    <div>发布时间：2024年10月6日 10:40</div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

改造login.html

{% extends 'base.html' %}
{% block title %}登录{% endblock %}
{% block main %}
        <div class="m-auto" style="max-width: 330px;">
        <h1>登录</h1>
        <form class="mt-3">
            <div class="mb-3">
                <label class="form-label">邮箱</label>
                <input type="email" name="email" placeholder="请输入邮箱" class='form-control'>
            </div>
            <div class="mb-3">
                <label class="form-label">密码</label>
                <input type="password" name="password" placeholder="请输入密码" class='form-control'>
            </div>
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" name='remember' value="1" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                    记住我
                </label>
            </div>
            <div class='mb-3'>
                <button class='btn btn-primary w-100'>登录</button>
            </div>
        </form>
    </div>
{% endblock %}

改造register.html

{% extends 'base.html' %}
{% block title %}注册{% endblock %}
{% block main %}
    <div class="m-auto" style="max-width: 330px;">
        <h1>请注册</h1>
        <form class="mt-3">
            <div class="mb-3">
                <label class="form-label">用户名</label>
                <input type="text" name="username" placeholder="请输入用户名" class='form-control'>
            </div>
            <div class="mb-3">
                <label class="form-label">邮箱</label>
                <input type="email" name="email" placeholder="请输入邮箱" class='form-control'>
            </div>
            <div class="mb-3">
                <label class="form-label">验证码</label>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="验证码" aria-label="Recipient's username"
                           aria-describedby="button-addon2">
                    <button class="btn btn-outline-secondary" type="button">获取验证码</button>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">密码</label>
                <input type="password" name="password" placeholder="请输入密码" class='form-control'>
            </div>
            <div class='mb-3'>
                <button class='btn btn-primary w-100'>注册</button>
            </div>
        </form>
    </div>
{% endblock %}

改造blog_detail.html

{% extends 'base.html' %}
{% block title %}博客详情{% endblock %}
{% block main %}
<h1>博客详情</h1>
    <hr>
    <div class="mt-2">
        <img src="{% static 'image/avatar.webp' %}" class="rounded-circle" width="30" height="30" alt="">
        <span class="ms-2">钢铁侠</span>
        <span class="ms-2">于</span>
        <span class="ms-2">发布时间：2024年10月6日 10:40</span>
    </div>
    <hr>
    <div class="py-2">
        博客详情
    </div>
    <hr>
    <div class="mt-2">
        <h3>评价(10)</h3>
        <form action="" method="POST">
            <div class="mt-2">
                <input type="text" class="form-control" placeholder="请输入评论">
            </div>
            <div class="text-end mt-2">
                <button type="button" class="btn btn-primary">评价</button>
            </div>
        </form>
    </div>
    <div class="mt-2">
        <ul class="list-group list-group-flush">
            <li class="list-group-item mb-3">
                <div class="d-flex justify-content-between text-body-secondary">
                    <div class="user-info">
                        <img src="{% static 'image/avatar.webp' %}" class="rounded-circle" width="40" height="40" alt="">
                        <span class="ms-2">钢铁侠</span>
                    </div>
                    <div class="create-time" style="line-height: 40px;">
                        发布时间：2024年10月6日 10:40
                    </div>
                </div>
                <div class="mt-2">
                    评价内容
                </div>
            </li>
        </ul>
    </div>
{% endblock %}

改造pub_blog.html

{% extends 'base.html' %}
{% block title %}发布博客{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'wangeditor/style.css' %}">
    <script type="text/javascript" src="{% static 'wangeditor/index.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/pub_blog.js' %}"></script>
    <style type="text/css">
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
{% endblock %}
{% block main %}
    <h1>发布博客</h1>
    <div class="mt-2">
        <form>
            <div class="mb-3">
                <label class="form-label">标题</label>
                <input type="text" name="title" placeholder="请输入标题" class="form-control">
            </div>
            <div class="mb-3">
                <label class="form-label">分类</label>
                <select class="form-select" name='category'>
                    <option value="1">Python</option>
                    <option value="2">前端</option>
                    <option value="3">大数据</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">内容</label>
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
            </div>
            <div class="mb-3 text-end">
                <button class="btn btn-primary">发布</button>
            </div>
        </form>
    </div>
{% endblock %}

繁华c
关注
Django项目实战 ----用户个人信息页面
A
04-20 1311
注册保护用户数据 捕获异常 在编写程序的时候，程序抛异常是一件很正常的事；既然异常总是会抛，那就想办法在抛出后，尽早解决才是王道。就拿Django来说，通常发生未知异常时，我们会将settings里的DEBUG=False改为True，然后盯着日志看。可谁没事老盯着日志看啊，未免也太浪费时间了；不能老是等待用户反馈异常和问题，万一用户懒得反馈了，岂不很尴尬。 在保护用户数据的逻辑代码里面添加上try，最后直接返回 JsonResponse # 密码加密 数据保存可能不成功捕获异常 # create_
Django实战项目 ------ 学生信息管理系统
NiuXL的编程技术网络日志
06-13 4368
文章目录1. 数据库表的结构设计2. 后台引入母板3. 查询班级信息4. 添加班级信息5. 编辑班级信息6. 删除班级信息7. 查询学生信息8. 添加学生信息9. 编辑学生信息10. 删除学生信息11. Bootstrap介绍12. AJAX添加班级信息13. AJAX编辑班级信息14. AJAX删除班级信息15. 数据库操作代码复用16. AJAX添加学生信息17. AJAX编辑学生信息18. AJAX删除学生信息19. 分页展示学生表20. 数据库操作封装21. 添加教师信息22. 查询教师和任课班.
django5博客项目实战-用bootstrap5实现发布博客页面
u013342594的博客
10-07 440
创建pub_blog.js(static文件夹里面创建js文件夹)更改下博客详情页面路由以免有冲突。创建pub_blog.html。上面的代码中引入了富文本编辑器。创建发布博客的视图函数。引入富文本编辑器参考。
django5博客项目实战-用bootstrap5实现导航条
u013342594的博客
10-05 496
打开项目新建一个app blogsettings.py注册app根目录中创建templates文件夹并在setting.py中设置下templates参数。
django5博客项目实战-用bootstrap5实现登录和注册页面
u013342594的博客
10-07 428
在myauth views.py里面创建登录和注册的视图函数。在templates文件夹中创建register.html。在templates文件夹中创建login.html。在主urls.py中导入认证的urls。在myauth里面创建urls.py。新建一个认证的app。
Django实战----页面静态化
A
06-04 426
关于页面静态化 前言： 因为代码在windows上运行，Linux上的定时任务无法使用，正常来说要把页面静态化的脚本做成定时任务，每过一段时间自动渲染一次，因为MySQL内的数据是会变化的 为什么要做页面静态化 减少数据库查询次数。 提升页面响应效率。 具体的做法 将动态渲染生成的页面结果保存成html文件，放到静态文件服务器中。 用户直接去静态服务器，访问处理好的静态html文件。 哪些数据不能静态化处理 用户相关数据不能静态化： 1.1 用户名、购物车等不能静态化。 动态变化的数据不能静态化
Django 5 Web应用开发实战
热门推荐
屿小夏.的知识博客
06-13 6万+
Django 5 Web应用开发实战》集Django架站基础、项目实践、开发经验于一体，是一本从零基础到精通Django Web企业级开发技术的实战指南。《Django 5 Web应用开发实战》内容以Python 3.x和Django 5版本为基础，从Django 5构建项目开始，逐步深入讲述Django框架的各项功能要点，每个功能要点从源码角度分析，并在源码的基础上实现自定义的功能开发。
从零开始的django+vue项目实战(4--前端登陆页面设计与路由）
qq_35328355的博客
07-15 887
前面我们已经创建好数据模型了，并且在admin后台中添加了一些测试用户。下面我们就要设计好站点的url路由、对应的处理视图函数以及使用的前端模板了。注意要先从login导入views模块。
Python Django 5 Web应用开发实战
weixin_43178406的博客
05-21 2万+
本文主要介绍了Python Django 5 Web应用开发实战，希望能对学习Python Web应用开发的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
django-使用python+django开发的博客应用-项目实战.zip
01-27
在本项目实战中，我们将深入探讨如何使用Python与Django框架构建一个功能完善的博客应用程序。Django是一个高级的、免费的开源Web框架，遵循模型-视图-控制器（MVC）设计模式，专为快速开发安全且可维护的网站而设计...
Django5+Vue3:OA系统前后端分离项目实战-前端登录页面实现(9)
08-03
登录模板（懒人版）
Python项目开发Django实战-多用户内容发布系统-编程案例解析实例详解课程教程.pdf
04-28
【Python项目开发Django实战-多用户内容发布系统】是一个编程教程，旨在引导读者通过实践构建一个多用户内容发布系统，采用Python的Django框架。Django是一个强大的Web开发框架，以其高效、安全和易于上手的特点深受...
认识HTML（简介）
gjgeiugrwhgrewg的博客
11-11 623
只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。在这里，你将掌握一些重要的概念和语法，学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。该部分提供了一些链接，它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法：如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容，包括通过许多不同的方式嵌入图片，以及如何嵌入视频、音频甚至整个其他网页。
HTML单页面实现量子纠缠效果
weixin_52236586的博客
11-06 505
【代码】单页面量子纠缠效果。
HTML&CSS： 日落卡片
最新发布
weixin_52814911的博客
11-11 573
这段代码创建了一个包含日落图像和文本的美观卡片，使用了现代CSS背景模糊和渐变，以及SVG图形来增强视觉效果。
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 931
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
W3C HTML 活动
wjs2024的博客
11-08 450
W3C于2008年1月22日发布了HTML 5的工作草案。W3C不仅推动了HTML语言的发展，也促进了Web技术的标准化和普及【7†source】【8†source】【9†source】。这个版本在HTML 2.0的基础上增加了许多广泛使用的特性，如字体、表格、applets、围绕图像的文本流、上标和下标等。它是HTML的早期版本，但目前已不再使用，因为现有的浏览器都依赖于更新的HTML版本。关于W3C（万维网联盟）的HTML活动，我们可以从HTML的不同版本的发展历程中了解其主要的活跃时期和贡献。
JavaScript如何操作HTML：动态网页构建指南
weixin_43822401的博客
11-11 693
在现代网页开发中，JavaScript不仅是实现网页交互性的关键技术，也是动态操作HTML文档对象模型（DOM）的重要工具。通过JavaScript，开发者可以在运行时修改网页的内容、结构和样式，从而为用户提供更加丰富和动态的体验。本文将详细介绍如何使用JavaScript来操作HTML，包括元素的创建、属性的修改、内容的更新以及事件的处理。
HTML查缺补漏
lalalalalab的博客
11-11 627
html查缺补漏
Python Django项目实战：django-test-master快速入门
Django遵循MVC架构模式（模型-视图-控制器），但通常被称为MTV框架（模型-模板-视图）。" 知识点详细说明: 1. Django框架基础: Django框架遵循MTV（模型-模板-视图）模式，其中模型(Model)负责与数据库进行交互，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值