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

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

写在前面

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

实验环境:

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

实验目标

使用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"的父模板。


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


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


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


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


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


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


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


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


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


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


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


  1. <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. 注册界面

  1. 登录界面

  1. 主界面

  1. 博客发布界面

  1. 后台管理界面

写在后面

我是一只有趣的兔子,感谢你的喜欢!

目录
相关文章
|
23小时前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
1天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
21 5
|
4天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
5天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
12 1
|
5天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
7天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
17 0
|
7天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
15 0
|
7天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
9 0
|
1月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
8天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
29 3

热门文章

最新文章