Web实战丨基于django+html+css+js的在线博客网站

这篇具有很好参考价值的文章主要介绍了Web实战丨基于django+html+css+js的在线博客网站。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写在前面

本期内容:基于Django+Html+Css+JavaScript的在线博客网站

实验环境:

  • vscode或pycharm
  • python(3.11.4及以上)
  • django

项目下载地址:https://download.csdn.net/download/m0_68111267/88731015

实验目标

使用Django+HTML+CSS+JS开发一个含登录界面的在线博客网站,用户可以通过网站发布博客,管理员可以登录后台管理博客。

本项目共分为六大模块:

  1. 用户注册页面
  2. 用户登录页面
  3. 主页面
  4. 博客发布页面
  5. 博客搜索页面
  6. 后台管理页面

实验内容

安装依赖库

在正式开始之前,我们需要先安装本次实战项目所依赖的库:

  • django:一个高级的Python Web框架。

安装命令:

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django

1.登录页面

{% extends 'base.html' %}
{% load static %}

{% block page_title %}
    登录界面
{% endblock %}


{% block page_head %}
<link rel="stylesheet" href="{% static 'user/css/login.css' %}">
{% endblock %}

{% block page_content %}
<div id="content">
    <div id="left_img"><img src="{% static 'common/image/want.png' %}"></div>
    <div id="right_content">
        <div id="login_title">
            <span>账号登录</span>
        </div>
        {% if form.non_field_errors %}
        <div id="form_error">
            <div id="close_error">X</div>
            {{ form.non_field_errors }}
        </div>
        {% endif %}
        <div id="login_form">
            <form action="{% url 'login_handler' %}" method="POST">
                {% csrf_token %}
                <div class="form-group">{{ form.username }}</div>
                <div class="form-group">{{ form.password }}</div>
                <button type="submit" class="btn btn-danger btn-block">登录</button>
            </form>
        </div>
        <div id="login_thrid">
            <p>第三方登录</p>
            <p><img src="{% static 'common/image/icons.png' %}"></p>
            <p><span>还没有WANT账号?</span>
            <p><a href="{% url 'register' %}">立即注册</a></p>
            </p>
        </div>
    </div>
</div>
<div id="page_bottom">
    <div style="text-align:center;">
        <p style="height: 30px;margin-top:20px;border-bottom: 1px solid #c4c4c4;">
            <span style="overflow: hidden;height: 16px;display: inline-block;">
                    <img src="{% static 'common/image/qq_icon.png' %}" style="width: 17px;height: 120px">
                </span>网站客服&nbsp;
            <span style="overflow: hidden;height: 16px;display: inline-block;">
                    <img src="{% static 'common/image/weibo_icon.png' %}" style="width: 19px;height: 120px">
                </span>微博客服&nbsp;
            <span style="overflow: hidden;height: 16px;display: inline-block;">
                    <img src="{% static 'common/image/email_icon.png' %}" style="width: 16px;height: 126px">
                </span>Want595@want.com&nbsp;
            <span style="overflow: hidden;height: 16px;display: inline-block;">
                    <img src="{% static 'common/image/phone_icon.png' %}" style="width: 16px;height: 120px">
                </span>6666 6666&nbsp;|&nbsp;版权所有:Want595
        </p>
    </div>
</div>
{% endblock %}

{% block page_script %}

{% endblock %}

这段代码是一个登录界面的模板:

首先,在页面头部进行了一些设置,包括继承了一个名为base.html的基础模板,加载了静态文件,并定义了页面标题为"登录界面"。

接着,在页面的内容部分进行了布局和样式的设置。左侧是一个图片,使用了静态文件中的一张图片。右侧是登录表单,包括一个登录标题和一个表单。表单使用了Django的表单组件,包含用户名和密码两个输入框。如果表单提交出现错误,会显示错误信息。

在登录表单下方是一个第三方登录选项,显示了一些第三方登录平台的图标。最后是一个底部信息栏,包含了网站客服的联系方式和版权信息。

最后,在页面的底部进行了一些脚本的设置。

总的来说,这段代码实现了一个简单的登录界面,包含了表单输入和错误提示等功能,并进行了一些布局和样式的设置。

2.注册页面

{% extends 'base.html' %}
{% load static %}

{% block page_title %}
    注册用户
{% endblock %}

{% block page_head %}
    <link rel="stylesheet" href="{% static 'user/css/register.css' %}">
{% endblock %}

{% block page_content %}
    <div id="bg_left">
        <p id="logo"><a href="{% url 'home' %}">WANT</a></p>
        <p id="msg">人生苦短,Python当歌!</p>
        <img src="{% static 'common/image/background.png' %}">
    </div>
    <div id="bg_right">
        <a id="login" href="{% url 'login' %}">登录</a>
        <div id="content">
            <div id="register_title">欢迎注册</div>
            {% if form.non_field_errors %}
                <div id="form_error">
                    <div id="close_error">X</div>
                    {{ form.non_field_errors }}
                </div>
            {% endif %}
            <div id="register_form">
                <form action="{% url 'register_handler' %}" method="POST">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="{{ form.username.id_for_label }}">用户名</label>
                        {{ form.username }}
                    </div>
                    <div class="form-group">
                        <label for="{{ form.password.id_for_label }}">密码</label>
                        {{ form.password }}
                    </div>
                    <div class="form-group">
                        <label for="{{ form.confirm_password.id_for_label }}">确认密码</label>
                        {{ form.confirm_password }}
                    </div>
                    <button type="submit" class="btn btn-danger btn-block">确认注册</button>
                </form>
            </div>
            <div id="note">
                <span><img style="width: 16px;height: 16px;" src="{% static 'common/image/already.png' %}"></span>
                <span>我已仔细阅读并接受</span>
                <span><a href="#">WANT用户服务条款</a></span>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
    </div>
{% endblock %}

{% block page_script %}

{% endblock %}

这段代码是一个注册界面的模板:

首先,在页面头部进行了一些设置,包括继承了一个名为base.html的基础模板,加载了静态文件,并定义了页面标题为"注册用户"。

接着,在页面的内容部分进行了布局和样式的设置。页面分为左右两部分,左侧是一个包含网站logo和一句口号的背景图。右侧是注册表单,包括一个注册标题和一个表单。表单使用了Django的表单组件,包含了用户名、密码和确认密码三个输入框。如果表单提交出现错误,会显示错误信息。

在右侧注册表单下方是一个登录链接,可以跳转到登录页面。最后是一个底部的说明文字,包含了一个已阅读的图标和用户服务条款的链接。

最后,在页面的底部进行了一些脚本的设置。

总的来说,这段代码实现了一个简单的注册界面,包含了表单输入和错误提示等功能,并进行了一些布局和样式的设置。用户可以在此页面输入用户名和密码进行注册,并可以跳转到登录页面进行登录操作。

3.主页面

{% extends 'want.html' %}
{% load static %}

{% block page_title %}WANT{% endblock %}

{% block page_head %}
    <link rel="stylesheet" href="{% static 'blog/css/home.css' %}">
{% endblock %}

{% block page_content %}
    <div id="left_nav">
        <ul>
            <li id="to_top">返回顶部</li>
        </ul>
    </div>
    <div id="top_ad"></div>
    <div id="top_ten"></div>
    <ul id="blog_ul">
        {% for blog in blogs %}
            <li>
                <p><a href="{% url 'blog_detail' blog.id %}">{{ blog.title }}</a></p>
                <p>
                    <span>{{ blog.user.username }}</span>
                    <span>{{ blog.timestamp }}</span>
                    <span><span>{{ blog.comm_count }}</span>&nbsp;评论</span>
                    <span><span>{{ blog.view_count }}</span>&nbsp;阅读</span>
                </p>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

{% block page_script %}
    <script type="text/javascript" src="{% static 'blog/js/home.js' %}"></script>
{% endblock %}

这段代码是一个首页模板:

首先,在页面头部进行了一些设置,包括继承了一个名为want.html的基础模板,加载了静态文件,并定义了页面标题为"WANT"。

接着,在页面的内容部分进行了布局和样式的设置。页面分为左侧导航栏、顶部广告、排行榜和博客列表。左侧导航栏只包含一个用于返回顶部的链接。顶部广告使用了一个占位符div,可以用来展示广告图片或其他内容。排行榜使用了一个占位符div,可以用来展示热门博客或其他排行榜内容。博客列表使用了一个ul列表,通过遍历blogs变量来展示每篇博客的标题、作者、发布时间、评论数量和阅读数量。

在页面的底部进行了一些脚本的设置,包括加载了一个名为home.js的脚本文件。

总的来说,这段代码实现了一个简单的首页界面,展示了一些基本的内容,并进行了一些布局和样式的设置。用户可以在此页面浏览博客列表,并通过导航栏返回顶部。其中的顶部广告和排行榜可以通过替换占位符div的内容来展示不同的信息。

4.博客发布页面

{% extends 'want.html' %}
{% load static %}

{% block page_title %}
    发布博客
{% endblock %}

{% block page_head %}
    <link rel="stylesheet" href="{% static 'blog/css/blog_edit.css' %}">
{% endblock %}

{% block page_content %}
    <div id="edit_form">
        <form action="{% url 'blog_edit' %}" method="POST">
            {% csrf_token %}
            <span>{{ blog.user.username }}</span>
            <div class="form-group">{{ form.blog_title }}</div>
            <div id="content" class="form-group">{{ form.blog_content }}</div>
            <button type="submit" class="btn btn-danger btn-block">提交</button>
        </form>
    </div>
{% endblock %}

这段代码是一个HTML模板,用于展示发布博客的页面。下面对其中的代码进行具体分析。

  1. {% extends 'want.html' %}:该语句表示该模板继承自名为"want.html"的父模板。

  2. {% load static %}:该语句用于加载静态文件。

  3. {% block page_title %} ... {% endblock %}:这两句代码定义了一个命名块,用于设置页面标题。具体的标题内容被放置在这两句代码的中间。

  4. {% block page_head %} ... {% endblock %}:这两句代码定义了另一个命名块,用于设置页面头部的资源引入。具体的资源引入代码被放置在这两句代码的中间。

  5. {% block page_content %} ... {% endblock %}:这两句代码定义了另一个命名块,用于设置页面的主要内容。具体的页面内容代码被放置在这两句代码的中间。

  6. <link rel="stylesheet" href="{% static 'blog/css/blog_edit.css' %}">:这是一个CSS样式表的引入语句,路径由静态文件加载器进行解析。

  7. <div id="edit_form"> ... </div>:这段代码定义了一个具有"id"属性为"edit_form"的div标签,用于包含发布博客的表单。

  8. <form action="{% url 'blog_edit' %}" method="POST"> ... </form>:这是一个表单标签,action属性指定了表单提交的URL地址,method属性指定了表单提交的方法为POST。

  9. {% csrf_token %}:这是一个用于防止跨站请求伪造的安全标签,用于生成表单中的CSRF令牌。

  10. <span>{{ blog.user.username }}</span>:这是一个span标签,用于显示博客作者的用户名。

  11. <div class="form-group">{{ form.blog_title }}</div>:这是一个div标签,具有"class"属性为"form-group",用于包裹博客标题的输入表单。

  12. <div id="content" class="form-group">{{ form.blog_content }}</div>:这是一个div标签,具有"id"属性为"content"和"class"属性为"form-group",用于包裹博客内容的输入表单。

  13. <button type="submit" class="btn btn-danger btn-block">提交</button>:这是一个提交按钮,具有"class"属性为"btn btn-danger btn-block",用于提交博客表单。

这段代码实现了一个简单的发布博客页面,包含了博客标题、博客内容的输入表单,以及一个提交按钮。

5.搜索页面

主要代码

{% extends 'want.html' %}
{% load static %}

{% block page_title %}
    搜索结果
{% endblock %}

{% block page_head %}
    <link rel="stylesheet" href="{% static 'blog/css/search_results.css' %}">
{% endblock %}

{% block page_content %}

……请下载项目代码后查看哦~

这段代码是一个HTML模板,用于展示搜索结果页面。下面对其中的代码进行具体分析。

  1. {% extends 'want.html' %}:该语句表示该模板继承自名为"want.html"的父模板。

  2. {% load static %}:该语句用于加载静态文件。

  3. {% block page_title %} ... {% endblock %}:这两句代码定义了一个命名块,用于设置页面标题。具体的标题内容被放置在这两句代码的中间。

  4. {% block page_head %} ... {% endblock %}:这两句代码定义了另一个命名块,用于设置页面头部的资源引入。具体的资源引入代码被放置在这两句代码的中间。

  5. {% block page_content %} ... {% endblock %}:这两句代码定义了另一个命名块,用于设置页面的主要内容。具体的页面内容代码被放置在这两句代码的中间。

  6. <link rel="stylesheet" href="{% static 'blog/css/search_results.css' %}">:这是一个CSS样式表的引入语句,路径由静态文件加载器进行解析。

  7. <div id="content"> ... </div>:这是一个具有"id"属性为"content"的div标签,用于包含整个搜索结果内容。

  8. <div id="content_head"> ... </div>:这是一个具有"id"属性为"content_head"的div标签,用于包含搜索结果页面的头部部分。

  9. <div id="sort"> ... </div>:这是一个具有"id"属性为"sort"的div标签,用于包含排序方式的链接。

  10. <div class="input_form"> ... </div>:这是一个具有"class"属性为"input_form"的div标签,用于包含搜索输入框。

  11. <form class="form-inline"> ... </form>:这是一个具有"class"属性为"form-inline"的form标签,用于包裹搜索输入框和提交按钮。

  12. <input type="text" class="form-control" value="" placeholder="">:这是一个输入框,具有"type"属性为"text",和"class"属性为"form-control"。

  13. <button type="submit" class="btn btn-danger">搜索</button>:这是一个提交按钮,具有"type"属性为"submit"和"class"属性为"btn btn-danger"。

  14. <div id="content_body"> ... </div>:这是一个具有"id"属性为"content_body"的div标签,用于包含搜索结果的主体部分。

  15. <ul> ... </ul>:这是一个无序列表,用于包含搜索结果项。

  16. <li> ... </li>:这是一个列表项,包含了每一条搜索结果的相关信息。

  17. <p class="blog_title"><a href="#">博客1</a></p>:这是一个具有"class"属性为"blog_title"的p标签,内部包含了一个链接。

  18. <p class="blog_info"> ... </p>:这是一个具有"class"属性为"blog_info"的p标签,用于包含博客的作者、日期和浏览量等信息。

  19. <p class="blog_content">这是一篇博客……</p>:这是一个具有"class"属性为"blog_content"的p标签,用于显示博客的内容。

  20. <div id="content_footer"> ... </div>:这是一个具有"id"属性为"content_footer"的div标签,用于包含搜索结果页面的底部部分。

  21. <ul class="pagination"> ... </ul>:这是一个具有"class"属性为"pagination"的无序列表,用于分页显示搜索结果。

  22. <div id="page_bottom"> ... </div>:这是一个具有"id"属性为"page_bottom"的div标签,用于包含页面底部的版权信息。

这段代码实现了一个简单的搜索结果页面,包含了排序方式选择、搜索输入框、搜索结果展示和分页功能。

运行结果

  1. 注册界面

Web实战丨基于django+html+css+js的在线博客网站,《 Python实战项目100例 》,《 Web大作业 》,前端,django,html

  1. 登录界面

Web实战丨基于django+html+css+js的在线博客网站,《 Python实战项目100例 》,《 Web大作业 》,前端,django,html

  1. 主界面

Web实战丨基于django+html+css+js的在线博客网站,《 Python实战项目100例 》,《 Web大作业 》,前端,django,html

  1. 博客发布界面

Web实战丨基于django+html+css+js的在线博客网站,《 Python实战项目100例 》,《 Web大作业 》,前端,django,html

  1. 后台管理界面

Web实战丨基于django+html+css+js的在线博客网站,《 Python实战项目100例 》,《 Web大作业 》,前端,django,html

写在后面

我是一只有趣的兔子,感谢你的喜欢!文章来源地址https://www.toymoban.com/news/detail-793108.html

到了这里,关于Web实战丨基于django+html+css+js的在线博客网站的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web大学生网页作业成品 bootstrap响应式网站开发 基于HTML+CSS+JS+Bootstrap制作火锅美食网站(4页)

    🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年02月08日
    浏览(53)
  • 在线编程网站——codepen.io(支持HTML,CSS,JS)

    https://codepen.io/ CodePen是一个在线的前端代码编辑工具(可用于制作测试页面、代码调试)     CodePen(代码笔)一款前端所见即所得的工具,我们可以在线编辑制作前端页面,所见即所得。同时网站提供所有常见的 js、css 库,并且支持流行技术(如 SASS),免去了我们自建

    2024年03月24日
    浏览(51)
  • 【大学生期末大作业】HTML+CSS+JavaScript — 模仿博客网站设计(Web)

    目录 你为什么不亲自下船, 就一次也好啊, 亲眼去看看这个世界。 关于HTML5: 关于CSS: 关于JavaScript: 一、🌎前言: 二、🔖网页描述 三、📚网站介绍 四、💠网站演示 📜登陆页面设计 📜注册页面设计 📜首页页面设计 📜CSDN跳转设计 📜评论页面设计 📜 动态页面设

    2024年01月24日
    浏览(62)
  • html在线商城购物网站制作——基于HTML+CSS+JavaScript(oppo手机商城 6页)

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业,Web大学生网页 HTML:结构 CSS:样式 在操作方面

    2024年02月09日
    浏览(65)
  • Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:

    👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比

    2024年02月12日
    浏览(93)
  • Web网页基于HTML、CSS设计——“甜品网站”素材。

    Hello,大家好,今天给大家分享一下关于“甜品网站”网页设计的整体思路和流程。 目录 一、实现效果:  二、设计思路: 1、网页 header设计:  2、网页main设计: 3、网页foot的设计: 三、代码集合: 1、HTML代码: 2、CSS代码集合: 四、素材源码: 在这个素材网页中,小编

    2024年02月08日
    浏览(51)
  • 静态网页设计二十四节气网站HTML+CSS+JS(web期末大作业)

    本网站介绍了中国二十四节气,中国二十四节气准确的反映了自然节律变化,在人们日常生活中发挥了极为重要的作用,二十四节气蕴含着悠久的文化内涵和历史积淀。 2 .1 整体页面布局 网页多次使用div进行页面排版和页面布局,同时使用了float的属性,页面内容清晰明了,

    2024年02月20日
    浏览(47)
  • Web课程设计——小米商城页面实战(html,css,js实现)

    主要完成了三个页面,效果如下:   主页面html部分源码: 主页面css部分: js部分:

    2024年02月11日
    浏览(49)
  • 简单个人静态HTML网页设计作品 基于HTML+CSS+JavaScript仿小米手机网站 html静态在线购物商城网页制作

    常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目

    2024年02月09日
    浏览(64)
  • Web实战丨基于Django与HTML的用户登录验证系统

    本期内容:基于Django与HTML的简单登录验证系统。 项目需求:Python+Django 项目下载地址:https://download.csdn.net/download/m0_68111267/88727183 登录系统在我们的日常生活中随处可见,比如当我们使用QQ、微信等社交软件时,都需要先输入自己的账号密码进行登录,本文博主将带着大家用

    2024年01月25日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包