视频加载失败

个人站点相关功能

3855 字
19 分钟
个人站点相关功能
2024-10-20
Web 开发
无标签
  1. 1BBS表分析
  2. 2BBS项目搭建
  3. 3BBS模型表创建
  4. 4公共功能
  5. 5后台管理功能
  6. 6用户相关功能
  7. 7个人站点相关功能本文
  8. 8文章相关功能

【一】首页搭建#

【1】需求分析#

【2】视图函数#

  • blog/views.py
from django.shortcuts import render, HttpResponse
from django.contrib import auth




# Create your views here.
def home(request):
    user_is_login = request.user.is_authenticated
    return render(request, "home.html", locals())

【3】路由映射#

  • BulletinBoardSystem/urls.py
from django.contrib import admin
from django.urls import path
from django.urls.conf import include
from blog.views import home


urlpatterns = [
    path('admin/', admin.site.urls),
    path("", home, name="home"),
    path("user/", include("user.urls")),
    path("blog/", include("blog.urls")),
    path("article/", include("article.urls")),
]

【4】前端页面#

  • blog/templates/home.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
    {#    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#}
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
    <script src="{% static 'plugins/layui/layui/layui.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/layui/layui/css/layui.css' %}">
</head>
<body>
{# 导航条开始 #}
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'home' %}">BBS</a>
        </div>


        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">新闻 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">精华</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">发现 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="https://www.cnblogs.com/dream-ze" target="_blank">博客园</a></li>
                        <li><a href="https://blog.csdn.net/Chimengmeng" target="_blank">CSDN</a></li>
                        <li><a href="https://juejin.cn/" target="_blank">掘金</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="https://gitee.com/chi-meng/bbs-related-projects" target="_blank">Gitee</a></li>
                    </ul>
                </li>
            </ul>
            {#    搜索框 跳转百度页面    #}
            <form class="navbar-form navbar-left" id="searchForm">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="放松一刻" id="searchText">
                </div>
                <button type="submit" class="btn btn-default">百度一下</button>
            </form>
            {# 右侧登录注册导航栏 #}
            <ul class="nav navbar-nav navbar-right">
                {# 利用auth模块的登陆认证功能，利用 Django的 模版语法，判断当前用户是否登录 #}
                {# 如果当前用户处于登陆状态则将右侧登录注册隐藏，渲染当前个人信息 #}
                {% if user_is_login %}
                    {# 渲染当前用户的头像 #}
                    <li>
                        <img src="{{ request.user.avatar }}" alt="" class="img-circle" style="height: 48px;width: 48px">
                    </li>
                    {# 页面显示当前登录的用户名 #}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">{{ request.user.username }}<span class="caret"></span></a>
                        {# 点开下拉框显示个人信息 #}
                        <ul class="dropdown-menu">
                            {# 根据下面模态框中的属性弹出指定的模态框 #}
                            <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
                            <li><a href="#">修改头像</a></li>
                            <li><a href="#">个人信息</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'logout' %}">注销登陆</a></li>
                        </ul>
                    </li>
                    {# 如果当前用户处于未登录的状态，则渲染注册和登陆框 #}
                {% else %}
                    <li><a href="{% url 'register' %}">注册</a></li>
                    <li><a href="{% url 'login' %}">登陆</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{# 导航条结束 #}


{# 修改密码模态框开始 #}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                {# 右上角关闭模态框的 x  #}
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                {# 大标题 ： 修改密码页面 #}
                <h4 class="modal-title text-center" id="myLargeModalLabel">修改密码</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        {# 定义form表单，但是仍然不走 form 表单提交数据，而是使用ajax #}
                        <form id="reset_password_form">
                            <div class="form-group">
                                <label for="inputUsername">用户名 : </label>
                                <input type="text" class="form-control" name="username" id="inputUsername"
                                       value="{{ request.user.username }}" disabled>
                            </div>
                            <div class="form-group">
                                <label for="inputOldPassword">旧密码 : </label>
                                <input type="text" class="form-control" name="old_password" id="inputOldPassword"
                                       placeholder="old_password">
                            </div>
                            <div class="form-group">
                                <label for="inputNewPassword">新密码 : </label>
                                <input type="text" class="form-control" name="new_password" id="inputNewPassword"
                                       placeholder="new_password">
                            </div>
                            <div class="form-group">
                                <label for="inputConfirmPassword">确认密码 : </label>
                                <input type="text" class="form-control" name="confirm_password"
                                       id="inputConfirmPassword"
                                       placeholder="confirm_password">
                            </div>
                            {# 定义点击修改按钮 #}
                            <div class="form-group">
                                <input type="button" class="btn btn-warning btn-block" value="确认修改"
                                       id="btn_reset_password">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{# 修改密码模态框结束 #}


{# js文件书写位置 #}
{# 百度搜索框点击搜索事件开始 #}
<script>
    $(document).ready(function () {
        // 定义函数
        function search() {
            // 使用jQuery获取输入框中的值
            let keyword = $("#searchText").val();
            // 构造跳转到百度搜索的链接
            let urlTag = "https://www.baidu.com/s?wd=" + encodeURIComponent(keyword);
            // 在新窗口中打开链接
            window.open(urlTag, "_blank");
        }


        // 给搜索按钮绑定点击事件
        $("#searchForm").submit(function (event) {
            // 阻止表单默认提交行为
            event.preventDefault();
            // 调用搜索函数
            search();
        });


        // 修改密码按钮点击事件
        $("#btn_reset_password").on("click", function () {
            // 使用 sweetalert 的弹框确认事件
            swal({
                title: "修改密码操作不可逆!",
                text: "一旦密码被修改，无法找回原密码，确认修改吗？",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willReset) => {
                // 判断用户是否点击了确认按钮
                if (willReset) {
                    let data = {}
                    $.each($("#reset_password_form").serializeArray(), function (index, dataDict) {
                        data[dataDict.name] = dataDict.value
                    })
                    data["csrfmiddlewaretoken"] = "{{ csrf_token }}"
                    $.ajax({
                        url: "{% url 'reset_password' %}",
                        type: "post",
                        data: data,
                        success: (response) => {
                            if (response.code === 200) {
                                swal({
                                    title: response.message,
                                    icon: "success",
                                    button: true,
                                }).then(() => {
                                    window.location.href = response.next_url;
                                });
                            } else {
                                swal({
                                    title: response.errors,
                                    icon: "error",
                                    button: true,
                                }).then(() => {
                                    window.location.reload()
                                });
                            }
                        }
                    })
                } else {
                    swal("好好想一想哦 ~ ~ ~ ");
                }
            });
        })
    });
</script>
{# 百度搜索框点击搜索事件结束 #}


</body>
</html>

【二】广告投放#

【1】需求分析#

【2】视图函数#

  • blog/views.py
def adv_detail(request, *args, **kwargs):
    # 获取所有广告数据
    adv_data_all = Adv.objects.all()
    # 获取当前页数
    current_page = request.GET.get("page", 1)
    # 获取总数据量
    all_count = adv_data_all.count()
    # 获取分页器对象
    page_obj = Pagination(current_page=current_page, all_count=all_count, per_page_num=10)
    # 对总数据分页
    page_queryset = adv_data_all[page_obj.start:page_obj.end]


    background_data_all = Adv.objects.filter(is_background_img=True).all()
    return render(request, "advertisement.html", locals())




class AddAdvView(View):


    def get(self, request, *args, **kwargs):
        return render(request, "advertisement_add.html", locals())


    def post(self, request, *args, **kwargs):
        if request.is_ajax():
            data = request.POST
            title = data.get("adv_title")
            mobile = data.get("adv_mobile")
            content = data.get("adv_content")
            is_background_img = data.get("is_background_img")
            img = request.FILES.get("adv_img")
            print(title, mobile, content, is_background_img, img)
            if not all([title, mobile, content, is_background_img, img]):
                return CommonResponse(code=201, errors=f"请补齐参数!")
            Adv.objects.create(title=title, mobile=mobile, content=content, is_background_img=is_background_img,
                               img=img)
            return CommonResponse(code=200, message=f"当前广告信息 {title} 添加成功", next_url=reverse("adv"))




def del_adv(request, pk, *args, **kwargs):
    Adv.objects.filter(pk=pk).delete()
    return redirect("adv")

【3】路由映射#

  • blog/urls.py
from django.urls import path
from blog.views import AddAdvView, adv_detail, del_adv


urlpatterns = [
    path("adv/", adv_detail, name="adv"),
    path("adv/add/", AddAdvView.as_view(), name="adv_add"),
    path("adv/del/<int:pk>/", del_adv, name="adv_del"),
]

【4】侧边inclusion_tag#

  • blog/templatetags/CommonInclusionTag.py
import datetime


from django import template
from blog.models import Adv


# 创建注册对象
register = template.Library()




# 自定义侧边栏广告展示
@register.inclusion_tag('home_adv.html')
def home_adv():
    # 查询所有的广告
    adv_obj = Adv.objects.all()
    current_time = datetime.datetime.now()
    return locals()

【5】前端页面#

（1）侧边广告栏#

  • blog/templates/home_adv.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
    <script src="{% static 'plugins/layui/layui/layui.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/layui/layui/css/layui.css' %}">
</head>
<body>
{% if adv_obj %}
    {% for adv in adv_obj %}
        <div class="thumbnail adv-container">
            <img src="{{ adv.img }}" alt="一不小心就走对了~~~" style="max-width: 100%; height: auto;">
            <div class="caption">
                <h3 class="text-center">{{ adv.title }}</h3>
                <p>{{ adv.content }}</p>
                <p class="text-center text-danger">联系热线:{{ adv.mobile }}</p>
                <p class="text-center text-info">{{ adv.create_time|date:"Y-m-d H:i:s" }}</p>
                <p class="text-center text-info">{{ adv.update_time|date:"Y-m-d H:i:s" }}</p>
                <p class="text-center"><a
                        href="8877405d8db9d7603ca34c8b40edf73a"
                        class="btn btn-primary " role="button" target="_blank">了解详情</a>
                    <a class="btn btn-default close-btn" role="button">关闭广告</a>
                </p>
            </div>
        </div>
    {% endfor %}
{% else %}
    <div class="thumbnail adv-container">
        <img src="{% static 'advImg/可爱短发兔女郎.jpg' %}" alt="一不小心就走对了~~~"
             style="max-width: 100%; height: auto;">
        <div class="caption">
            <h3 class="text-center">重金求子!</h3>
            <p>赶快来联系我吧 ~~~ </p>
            <p class="text-center text-danger">联系热线:11122223333</p>
            <p class="text-center text-info">{{ current_time|date:"Y-m-d H:i:s" }}</p>
            <p class="text-center text-info">{{ current_time|date:"Y-m-d H:i:s" }}</p>
            <p class="text-center"><a href="8877405d8db9d7603ca34c8b40edf73a"
                                      class="btn btn-primary " role="button" target="_blank">了解详情</a>
                <a class="btn btn-default close-btn" role="button">关闭广告</a>
            </p>
        </div>
    </div>
{% endif %}




{% block js %}
    <script>
        $(".close-btn").click(function () {
            $(this).closest(".adv-container").hide();
        });
    </script>
{% endblock %}
</body>
</html>

（2）广告详情页#

  • blog/templates/advertisement.html
{% extends 'home.html' %}
{% load static %}
{% block content_outer %}
    <style>
        th, td {
            text-align: center;
        }
    </style>
    <div class="container-fluid">
        <div class="col-md-10 col-md-offset-1">
            <div class="layui-carousel" id="ID-carousel-demo-image">
                <div carousel-item>
                    {% if background_data_all %}
                        {% for background_obj in background_data_all %}
                            <div><img src="/media/{{ background_obj.img }}/"></div>
                        {% endfor %}
                    {% else %}
                        <div><img src="{% static 'advImg/img.png' %}"></div>
                        <div><img src="{% static 'advImg/img_1.png' %}"></div>
                        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
                        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
                        <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
                    {% endif %}
                </div>
            </div>
            <br>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">
                        广告信息展示
                    </h3>
                </div>
                <div class="panel-body">
                    <a href="{% url 'adv_add' %}" class="btn btn-info  btn-xs pull-right" role="button">添加广告</a>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>广告标题</th>
                            <th>联系方式</th>
                            <th>广告内容</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>广告图片</th>
                            <th>轮播图</th>
                            <th>编辑</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% if adv_data_all %}
                            {% for adv_obj in adv_data_all %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ adv_obj.title }}</td>
                                    <td>{{ adv_obj.mobile }}</td>
                                    <td>{{ adv_obj.content }}</td>
                                    <td>{{ adv_obj.create_time|date:"Y-m-d H:i:s" }}</td>
                                    <td>
                                        {{ adv_obj.update_time|date:"Y-m-d H:i:s" }}
                                    </td>
                                    <td>
                                        <img src="/media/{{ adv_obj.img }}/" alt="" style="height: 30px;width: auto">
                                    </td>
                                    <td>{{ adv_obj.is_background_img }}</td>
                                    <td>
                                        <a href="" class="btn btn-danger btn-xs" role="button">编辑</a>
                                        <a href="{% url 'adv_del' adv_obj.pk %}" class="btn btn-danger btn-xs"
                                           role="button">删除</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr class="active">
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>7</td>
                                <td>8</td>
                                <td>
                                    <a href="" class="btn btn-danger btn-xs" role="button">编辑</a>
                                    <a href="" class="btn btn-danger btn-xs" role="button">删除</a>
                                </td>
                            </tr>
                        {% endif %}
                        </tbody>
                    </table>
                    {# 使用分页器对总数据进行分页处理 #}
                    <div class="text-center">
                        {{ page_obj.page_html|safe }}
                    </div>
                </div>
            </div>
        </div>
    </div>




    <script>
        // 轮播图展示栏
        $(document).ready(
            layui.use(function () {
                var carousel = layui.carousel;
                // 渲染 - 图片轮播
                carousel.render({
                    // 获取轮播图对应的地址
                    elem: '#ID-carousel-demo-image',
                    // 宽度自适应
                    width: 'auto',
                    // 高度 480 像素
                    height: '480px',
                    // 自动切换时间间隔
                    interval: 3000
                });
            }),
        )
    </script>
{% endblock %}

（3）添加广告页#

  • blog/templates/advertisement_add.html
{% extends 'home.html' %}
{% load static %}
{% block content_outer %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                {# 定义form表单，但是仍然不走 form 表单提交数据，而是使用ajax #}
                <form id="form_adv">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="adv_title">广告标题 : </label>
                        <input type="text" class="form-control" name="adv_title" id="adv_title"
                               placeholder="title">
                    </div>
                    <div class="form-group">
                        <label for="adv_mobile">
                            联系方式: </label>
                        <input type="text" class="form-control" name="adv_mobile" id="adv_mobile"
                               placeholder="mobile">
                    </div>
                    <div class="form-group">
                        <label for="adv_content">广告内容 : </label>
                        <input type="text" class="form-control" name="adv_content" id="adv_content"
                               placeholder="content">
                    </div>
                    <div class="form-group">
                        <label for="adv_img">
                            广告图片 :
                            <br>
                            <img src="{% static 'advImg/腐团儿.jpg' %}" alt=""
                                 style="width: 420px;height: auto" id="adv_img_show">
                        </label>
                        <input type="file" class="form-control" name="adv_img"
                               id="adv_img"
                               placeholder="img" style="display: none" value="{% static 'advImg/腐团儿.jpg' %}">
                    </div>
                    <div class="radio">
                        是否作为轮播图 :
                        <label class="radio-inline">
                            <input type="radio" name="is_background_img" value="1">
                            是
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="is_background_img" value="0" checked>
                            否
                        </label>
                    </div>
                    {# 定义点击修改按钮 #}
                    <div class="form-group">
                        <input type="button" class="btn btn-warning btn-block" value="确认添加"
                               id="btn_add_adv">
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        $(document).ready(
            // 广告图片动态展示
            $('#adv_img').change(function () {
                // 【1】产生一个文件阅读器对象
                let fileReader = new FileReader();
                // 【2】获取当前上传的文件对象
                let fileFata = $(this)[0].files[0];
                // 【3】将文件对象交给阅读器对象加载数据
                fileReader.readAsDataURL(fileFata); // IO操作读取文件数据需要消耗时间，异步操作不会等待
                // 【4】修改 img 标签的src属性
                // 等待阅读器对象加载完毕文件数据后再修改 img 标签的src属性
                fileReader.onload = function () {
                    // 等待当前阅读器对象加载完毕后执行内部代码
                    $('#adv_img_show').attr('src', fileReader.result);
                };
            }),


            // 点击发送Ajax数据
            $("#btn_add_adv").click(function () {
                let data = new FormData();
                $.each($("#form_adv").serializeArray(), (index, dataDict) => {
                    data.append(dataDict.name, dataDict.value)
                });
                data.append("adv_img", $("#adv_img")[0].files[0])
                // 发送Ajax请求
                $.ajax({
                    url: "{% url 'adv_add' %}",
                    type: "post",
                    // 携带的数据为 formData 对象
                    data: data,
                    // 设置为 false 是为了防止 jQuery 自动将 formData 转换为字符串格式
                    processData: false,
                    // 设置为 false 是为了防止 jQuery 自动添加 "Content-Type" 请求头
                    contentType: false,
                    success: function (response) {
                        if (response.code === 200) {
                            layer.msg(response.message);
                            window.location.href = response.next_url;
                        } else {
                            layer.msg(response.errors)
                            window.location.reload()
                        }
                    }
                })
            })
        )
    </script>
{% endblock %}

（4）完善首页#

  • blog/templates/home.html
{# 加载静态文件 #}
{% load static %}
{# 加载 inclusion_tag #}
{% load CommonInclusionTag %}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
    {#    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#}
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
    <script src="{% static 'plugins/layui/layui/layui.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/layui/layui/css/layui.css' %}">
</head>
<body>
{# 导航条开始 #}
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'home' %}">BBS</a>
        </div>


        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">新闻 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">精华</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">发现 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="https://www.cnblogs.com/dream-ze" target="_blank">博客园</a></li>
                        <li><a href="https://blog.csdn.net/Chimengmeng" target="_blank">CSDN</a></li>
                        <li><a href="https://juejin.cn/" target="_blank">掘金</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="https://gitee.com/chi-meng/bbs-related-projects" target="_blank">Gitee</a></li>
                    </ul>
                </li>
            </ul>
            {#    搜索框 跳转百度页面    #}
            <form class="navbar-form navbar-left" id="searchForm">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="放松一刻" id="searchText">
                </div>
                <button type="submit" class="btn btn-default">百度一下</button>
            </form>
            {# 右侧登录注册导航栏 #}
            <ul class="nav navbar-nav navbar-right">
                {# 利用auth模块的登陆认证功能，利用 Django的 模版语法，判断当前用户是否登录 #}
                {# 如果当前用户处于登陆状态则将右侧登录注册隐藏，渲染当前个人信息 #}
                {% if request.user.is_authenticated %}
                    {# 渲染当前用户的头像 #}
                    <li>
                        {# static 写法 #}
                        {# <img src="{{ request.user.avatar }}" alt="缓冲中 ~~~ " class="img-circle" style="height: 48px;width: 48px"> #}
                        {# media写法 #}
                        <img src="/media/{{ request.user.avatar }}/" alt="缓冲中 ~~~ " class="img-circle"
                             style="height: 48px;width: 48px">
                    </li>
                    {# 页面显示当前登录的用户名 #}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            {{ request.user.username }}[
                            {% if request.user.is_superuser %}
                                管理员
                            {% else %}
                                用户
                            {% endif %}
                            ]
                            <span class="caret"></span>
                        </a>
                        {# 点开下拉框显示个人信息 #}
                        <ul class="dropdown-menu">
                            {# 根据下面模态框中的属性弹出指定的模态框 #}
                            <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
                            <li><a href="#">修改头像</a></li>
                            <li><a href="#">个人信息</a></li>
                            <li><a href="{% url 'adv' %}">添加广告</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'logout' %}">注销登陆</a></li>
                        </ul>
                    </li>
                    {# 如果当前用户处于未登录的状态，则渲染注册和登陆框 #}
                {% else %}
                    <li><a href="{% url 'register' %}">注册</a></li>
                    <li><a href="{% url 'login' %}">登陆</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{# 导航条结束 #}


{# 修改密码模态框开始 #}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                {# 右上角关闭模态框的 x  #}
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                {# 大标题 ： 修改密码页面 #}
                <h4 class="modal-title text-center" id="myLargeModalLabel">修改密码</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        {# 定义form表单，但是仍然不走 form 表单提交数据，而是使用ajax #}
                        <form id="reset_password_form">
                            <div class="form-group">
                                <label for="inputUsername">用户名 : </label>
                                <input type="text" class="form-control" name="username" id="inputUsername"
                                       value="{{ request.user.username }}" disabled>
                            </div>
                            <div class="form-group">
                                <label for="inputOldPassword">旧密码 : </label>
                                <input type="text" class="form-control" name="old_password" id="inputOldPassword"
                                       placeholder="old_password">
                            </div>
                            <div class="form-group">
                                <label for="inputNewPassword">新密码 : </label>
                                <input type="text" class="form-control" name="new_password" id="inputNewPassword"
                                       placeholder="new_password">
                            </div>
                            <div class="form-group">
                                <label for="inputConfirmPassword">确认密码 : </label>
                                <input type="text" class="form-control" name="confirm_password"
                                       id="inputConfirmPassword"
                                       placeholder="confirm_password">
                            </div>
                            {# 定义点击修改按钮 #}
                            <div class="form-group">
                                <input type="button" class="btn btn-warning btn-block" value="确认修改"
                                       id="btn_reset_password">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{# 修改密码模态框结束 #}


{# 主题框架搭建开始 #}
{% block content_outer %}
    <div class="container-fluid">
        <div class="row">
            {# 左侧广告栏 #}
            <div class="col-md-2">
                {% home_adv %}
            </div>


            {# 中间主题内容 #}
            <div class="col-md-8">
                {% block content_main %}
                    {# 渲染所有用的文章 #}
                    {% for article_obj in article_all %}
                        {# 每一篇文章对象都是一个小的组件 #}
                        <div class="media">
                            {# 渲染文章标题 #}
                            <h4 class="media-heading"><a href="">{{ article_obj.title }}</a></h4>
                            {# 渲染左侧侧边头像 #}
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                         src="{{ article_obj.blog.userinfo.avatar }}" data-holder-rendered="true"
                                         style="width: 64px; height: 64px;">
                                </a>
                            </div>
                            {# 渲染文章的简介信息 #}
                            <div class="media-body">
                                {# 有文章简介时渲染文章简介 #}
                                {% if article_obj.desc %}
                                    {{ article_obj.desc }}
                                    {# 没有文章简介时，渲染当前文章内容的前 30 个字符 #}
                                {% else %}
                                    {{ article_obj.content|truncatechars:30 }} ...
                                {% endif %}
                            </div>
                            {# 加一个换行美观页面 #}
                            <br>
                            {# 渲染底部的 作者 发布日期 点赞数 点踩数 评论数 #}
                            <div>
                                {# 当前文章作者 跨表查询 从文章表出发 --> 个人站点表 ---> 用户表 #}
                                <a href="" style="padding-right: 10px">{{ article_obj.blog.userinfo.username }}</a>
                                {# 文章发布时间，做前端模板的格式化输出语法 #}
                                <span style="padding-right: 10px">{{ article_obj.create_time|date:"Y-m-d H:i:s" }}</span>
                                {# 当前文章的点赞数图标及数量 ， 图标来自于 bootstrap #}
                                <span style="padding-right: 10px">
                                    <span class="glyphicon glyphicon-thumbs-up"></span>
                                    {{ article_obj.up_num }}
                                </span>
                                {# 当前文章的点踩数图标及数量 ， 图标来自于 bootstrap #}
                                <span style="padding-right: 10px">
                                    <span class="glyphicon glyphicon-thumbs-down"></span>
                                    {{ article_obj.down_num }}
                                </span>
                                {# 当前文章的评论数图标及数量 ， 图标来自于 bootstrap #}
                                <span style="padding-right: 10px">
                                    <span class="glyphicon glyphicon-comment"></span>
                                    {{ article_obj.comment_num }}
                                </span>
                            </div>
                        </div>
                        {# 美化页面，每一篇文章信息都加一个横线划分 #}
                        <hr>
                    {% endfor %}
                {% endblock %}
            </div>


            {# 右侧广告栏 #}
            <div class="col-md-2">
                {% home_adv %}
            </div>
        </div>
    </div>
{% endblock %}


{# 主题框架搭建结束 #}


{# js文件书写位置 #}
{# 百度搜索框点击搜索事件开始 #}
<script>
    $(document).ready(function () {
        // 定义函数
        function search() {
            // 使用jQuery获取输入框中的值
            let keyword = $("#searchText").val();
            // 构造跳转到百度搜索的链接
            let urlTag = "https://www.baidu.com/s?wd=" + encodeURIComponent(keyword);
            // 在新窗口中打开链接
            window.open(urlTag, "_blank");
        }


        // 给搜索按钮绑定点击事件
        $("#searchForm").submit(function (event) {
            // 阻止表单默认提交行为
            event.preventDefault();
            // 调用搜索函数
            search();
        });


        // 修改密码按钮点击事件
        $("#btn_reset_password").on("click", function () {
            // 使用 sweetalert 的弹框确认事件
            swal({
                title: "修改密码操作不可逆!",
                text: "一旦密码被修改，无法找回原密码，确认修改吗？",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willReset) => {
                // 判断用户是否点击了确认按钮
                if (willReset) {
                    let data = {}
                    $.each($("#reset_password_form").serializeArray(), function (index, dataDict) {
                        data[dataDict.name] = dataDict.value
                    })
                    data["csrfmiddlewaretoken"] = "{{ csrf_token }}"
                    $.ajax({
                        url: "{% url 'reset_password' %}",
                        type: "post",
                        data: data,
                        success: (response) => {
                            if (response.code === 200) {
                                swal({
                                    title: response.message,
                                    icon: "success",
                                    button: true,
                                }).then(() => {
                                    window.location.href = response.next_url;
                                });
                            } else {
                                swal({
                                    title: response.errors,
                                    icon: "error",
                                    button: true,
                                }).then(() => {
                                    window.location.reload()
                                });
                            }
                        }
                    })
                } else {
                    swal("好好想一想哦 ~ ~ ~ ");
                }
            });
        })
    });
</script>
{# 百度搜索框点击搜索事件结束 #}


</body>
</html>

支持与分享

如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！

打赏
个人站点相关功能
https://firefly.cuteleaf.cn/posts/framework/python/django/base/bbs专题/70个人站点相关功能/
作者
Dream
发布于
2024-10-20
许可协议
CC BY-NC-SA 4.0
文章相关功能
用户相关功能
相关文章智能推荐
1
C 语言发展史
编程语言了解 C 语言从 BCPL、B 语言到现代标准 C 的发展历程、核心特点与应用领域。
2
C 语言开发环境的安装与配置
编程语言在 Windows、Linux 与 macOS 上安装 C 工具链，配置编辑器，并编译运行第一个 C 程序。
3
C 语言初识：程序运行机制与基本结构
编程语言认识 C 程序从源代码到运行的完整流程，以及基础语法和程序的基本结构。
4
C 语言基础：注释、关键字、变量与数据类型
编程语言学习 C 语言的注释、关键字、标识符、常量、变量和基本数据类型等基础知识。
5
C 语言数据类型
编程语言理解 C 语言的数据类型体系，包括基本类型、整数类型、浮点类型和逻辑类型。
随机文章随机推荐
Profile Image of the Author
Dream
Hello, I'm Dream.
公告
欢迎来到我的博客！爱学习爱进步。
分类
标签
更多
最新动态
站点统计
文章
169
分类
3
标签
26
总字数
334,507
运行时长
0 天
最后活动
0 天前
站点信息
构建平台
Vercel
博客版本
Firefly v6.16.8
文章许可
CC BY-NC-SA 4.0
文章目录
1
【一】首页搭建
【1】需求分析
【2】视图函数
【3】路由映射
【4】前端页面
2
【二】广告投放
【1】需求分析
【2】视图函数
【3】路由映射
【4】侧边inclusion_tag
【5】前端页面
（1）侧边广告栏
（2）广告详情页
（3）添加广告页
（4）完善首页