【三】手动录入数据#

从文章表入手
录入文章需要个人站点 --- 创建个人站点
录入文章需要文章标签 --- 创建文章标签
文章与标签进行绑定
用户与个人站点进行绑定

【四】主页文章渲染#

【1】需求分析#

【2】视图函数#

1
def home(request, *args, **kwargs):
2
    article_all = Article.objects.all()
3
    return render(request, "home.html", locals())

【3】路由映射#

1
from django.contrib import admin
2
from django.urls import path
3
from django.urls.conf import include
4
from blog.views import home
5

6
urlpatterns = [
7
    path('admin/', admin.site.urls),
8
    path("", home, name="home"),
9
    path("user/", include("user.urls")),
10
    path("blog/", include("blog.urls")),
11
    path("article/", include("article.urls")),
12
]

【4】前端页面#

1
{# 加载静态文件 #}
2
{% load static %}
3
{# 加载 inclusion_tag #}
4
{% load CommonInclusionTag %}
5

6
<!DOCTYPE html>
7
<html lang="en">
8
<head>
9
    <meta charset="UTF-8">
10
    <title>Title</title>
11
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
12
    {#    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#}
13
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
14
    <script src="{% static 'js/jquery.min.js' %}"></script>
15
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
16
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
17
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
18
    <script src="{% static 'plugins/layui/layui/layui.js' %}"></script>
19
    <link rel="stylesheet" href="{% static 'plugins/layui/layui/css/layui.css' %}">
20
</head>
21
<body>
22
{# 导航条开始 #}
23
<nav class="navbar navbar-inverse">
24
    <div class="container-fluid">
25
        <!-- Brand and toggle get grouped for better mobile display -->
26
        <div class="navbar-header">
27
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
28
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
29
                <span class="sr-only">Toggle navigation</span>
30
                <span class="icon-bar"></span>
31
                <span class="icon-bar"></span>
32
                <span class="icon-bar"></span>
33
            </button>
34
            <a class="navbar-brand" href="{% url 'home' %}">BBS</a>
35
        </div>
36

37
        <!-- Collect the nav links, forms, and other content for toggling -->
38
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
39
            <ul class="nav navbar-nav">
40
                <li class="active"><a href="#">新闻 <span class="sr-only">(current)</span></a></li>
41
                <li><a href="#">精华</a></li>
42
                <li class="dropdown">
43
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
44
                       aria-expanded="false">发现 <span class="caret"></span></a>
45
                    <ul class="dropdown-menu">
46
                        <li><a href="https://www.cnblogs.com/dream-ze" target="_blank">博客园</a></li>
47
                        <li><a href="https://blog.csdn.net/Chimengmeng" target="_blank">CSDN</a></li>
48
                        <li><a href="https://juejin.cn/" target="_blank">掘金</a></li>
49
                        <li role="separator" class="divider"></li>
50
                        <li><a href="https://gitee.com/chi-meng/bbs-related-projects" target="_blank">Gitee</a></li>
51
                    </ul>
52
                </li>
53
            </ul>
54
            {#    搜索框 跳转百度页面    #}
55
            <form class="navbar-form navbar-left" id="searchForm">
56
                <div class="form-group">
57
                    <input type="text" class="form-control" placeholder="放松一刻" id="searchText">
58
                </div>
59
                <button type="submit" class="btn btn-default">百度一下</button>
60
            </form>
61
            {# 右侧登录注册导航栏 #}
62
            <ul class="nav navbar-nav navbar-right">
63
                {# 利用auth模块的登陆认证功能，利用 Django的 模版语法，判断当前用户是否登录 #}
64
                {# 如果当前用户处于登陆状态则将右侧登录注册隐藏，渲染当前个人信息 #}
65
                {% if request.user.is_authenticated %}
66
                    {# 渲染当前用户的头像 #}
67
                    <li>
68
                        <img src="{{ request.user.avatar }}" alt="缓冲中 ~~~ " class="img-circle"
69
                             style="height: 48px;width: 48px">
70
                    </li>
71
                    {# 页面显示当前登录的用户名 #}
72
                    <li class="dropdown">
73
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
74
                           aria-expanded="false">
75
                            {{ request.user.username }}[
76
                            {% if request.user.is_superuser %}
77
                                管理员
78
                            {% else %}
79
                                用户
80
                            {% endif %}
81
                            ]
82
                            <span class="caret"></span>
83
                        </a>
84
                        {# 点开下拉框显示个人信息 #}
85
                        <ul class="dropdown-menu">
86
                            {# 根据下面模态框中的属性弹出指定的模态框 #}
87
                            <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
88
                            <li><a href="#">修改头像</a></li>
89
                            <li><a href="#">个人信息</a></li>
90
                            <li><a href="{% url 'adv' %}">添加广告</a></li>
91
                            <li role="separator" class="divider"></li>
92
                            <li><a href="{% url 'logout' %}">注销登陆</a></li>
93
                        </ul>
94
                    </li>
95
                    {# 如果当前用户处于未登录的状态，则渲染注册和登陆框 #}
96
                {% else %}
97
                    <li><a href="{% url 'register' %}">注册</a></li>
98
                    <li><a href="{% url 'login' %}">登陆</a></li>
99
                {% endif %}
100
            </ul>
101
        </div><!-- /.navbar-collapse -->
102
    </div><!-- /.container-fluid -->
103
</nav>
104
{# 导航条结束 #}
105

106
{# 修改密码模态框开始 #}
107
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
108
     aria-labelledby="myLargeModalLabel">
109
    <div class="modal-dialog modal-lg" role="document">
110
        <div class="modal-content">
111
            <div class="modal-header">
112
                {# 右上角关闭模态框的 x  #}
113
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
114
                        aria-hidden="true">×</span></button>
115
                {# 大标题 ： 修改密码页面 #}
116
                <h4 class="modal-title text-center" id="myLargeModalLabel">修改密码</h4>
117
            </div>
118
            <div class="modal-body">
119
                <div class="row">
120
                    <div class="col-md-6 col-md-offset-3">
121
                        {# 定义form表单，但是仍然不走 form 表单提交数据，而是使用ajax #}
122
                        <form id="reset_password_form">
123
                            <div class="form-group">
124
                                <label for="inputUsername">用户名 : </label>
125
                                <input type="text" class="form-control" name="username" id="inputUsername"
126
                                       value="{{ request.user.username }}" disabled>
127
                            </div>
128
                            <div class="form-group">
129
                                <label for="inputOldPassword">旧密码 : </label>
130
                                <input type="text" class="form-control" name="old_password" id="inputOldPassword"
131
                                       placeholder="old_password">
132
                            </div>
133
                            <div class="form-group">
134
                                <label for="inputNewPassword">新密码 : </label>
135
                                <input type="text" class="form-control" name="new_password" id="inputNewPassword"
136
                                       placeholder="new_password">
137
                            </div>
138
                            <div class="form-group">
139
                                <label for="inputConfirmPassword">确认密码 : </label>
140
                                <input type="text" class="form-control" name="confirm_password"
141
                                       id="inputConfirmPassword"
142
                                       placeholder="confirm_password">
143
                            </div>
144
                            {# 定义点击修改按钮 #}
145
                            <div class="form-group">
146
                                <input type="button" class="btn btn-warning btn-block" value="确认修改"
147
                                       id="btn_reset_password">
148
                            </div>
149
                        </form>
150
                    </div>
151
                </div>
152
            </div>
153
        </div>
154
    </div>
155
</div>
156
{# 修改密码模态框结束 #}
157

158
{# 主题框架搭建开始 #}
159
{% block content_outer %}
160
    <div class="container-fluid">
161
        <div class="row">
162
            {# 左侧广告栏 #}
163
            <div class="col-md-2">
164
                {% home_adv %}
165
            </div>
166

167
            {# 中间主题内容 #}
168
            <div class="col-md-8">
169
                {% block content_main %}
170
                    {# 渲染所有用的文章 #}
171
                    {% for article_obj in article_all %}
172
                        {# 每一篇文章对象都是一个小的组件 #}
173
                        <div class="media">
174
                            {# 渲染文章标题 #}
175
                            <h4 class="media-heading"><a href="">{{ article_obj.title }}</a></h4>
176
                            {# 渲染左侧侧边头像 #}
177
                            <div class="media-left">
178
                                <a href="#">
179
                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
180
                                         src="{{ article_obj.blog.userinfo.avatar }}" data-holder-rendered="true"
181
                                         style="width: 64px; height: 64px;">
182
                                </a>
183
                            </div>
184
                            {# 渲染文章的简介信息 #}
185
                            <div class="media-body">
186
                                {# 有文章简介时渲染文章简介 #}
187
                                {% if article_obj.desc %}
188
                                    {{ article_obj.desc }}
189
                                    {# 没有文章简介时，渲染当前文章内容的前 30 个字符 #}
190
                                {% else %}
191
                                    {{ article_obj.content|truncatechars:30 }} ...
192
                                {% endif %}
193
                            </div>
194
                            {# 加一个换行美观页面 #}
195
                            <br>
196
                            {# 渲染底部的 作者 发布日期 点赞数 点踩数 评论数 #}
197
                            <div>
198
                                {# 当前文章作者 跨表查询 从文章表出发 --> 个人站点表 ---> 用户表 #}
199
                                <a href="" style="padding-right: 10px">{{ article_obj.blog.userinfo.username }}</a>
200
                                {# 文章发布时间，做前端模板的格式化输出语法 #}
201
                                <span style="padding-right: 10px">{{ article_obj.create_time|date:"Y-m-d H:i:s" }}</span>
202
                                {# 当前文章的点赞数图标及数量 ， 图标来自于 bootstrap #}
203
                                <span style="padding-right: 10px">
204
                                    <span class="glyphicon glyphicon-thumbs-up"></span>
205
                                    {{ article_obj.up_num }}
206
                                </span>
207
                                {# 当前文章的点踩数图标及数量 ， 图标来自于 bootstrap #}
208
                                <span style="padding-right: 10px">
209
                                    <span class="glyphicon glyphicon-thumbs-down"></span>
210
                                    {{ article_obj.down_num }}
211
                                </span>
212
                                {# 当前文章的评论数图标及数量 ， 图标来自于 bootstrap #}
213
                                <span style="padding-right: 10px">
214
                                    <span class="glyphicon glyphicon-comment"></span>
215
                                    {{ article_obj.comment_num }}
216
                                </span>
217
                            </div>
218
                        </div>
219
                        {# 美化页面，每一篇文章信息都加一个横线划分 #}
220
                        <hr>
221
                    {% endfor %}
222
                {% endblock %}
223
            </div>
224

225
            {# 右侧广告栏 #}
226
            <div class="col-md-2">
227
                {% home_adv %}
228
            </div>
229
        </div>
230
    </div>
231
{% endblock %}
232

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

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

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

257
        // 修改密码按钮点击事件
258
        $("#btn_reset_password").on("click", function () {
259
            // 使用 sweetalert 的弹框确认事件
260
            swal({
261
                title: "修改密码操作不可逆!",
262
                text: "一旦密码被修改，无法找回原密码，确认修改吗？",
263
                icon: "warning",
264
                buttons: true,
265
                dangerMode: true,
266
            }).then((willReset) => {
267
                // 判断用户是否点击了确认按钮
268
                if (willReset) {
269
                    let data = {}
270
                    $.each($("#reset_password_form").serializeArray(), function (index, dataDict) {
271
                        data[dataDict.name] = dataDict.value
272
                    })
273
                    data["csrfmiddlewaretoken"] = "{{ csrf_token }}"
274
                    $.ajax({
275
                        url: "{% url 'reset_password' %}",
276
                        type: "post",
277
                        data: data,
278
                        success: (response) => {
279
                            if (response.code === 200) {
280
                                swal({
281
                                    title: response.message,
282
                                    icon: "success",
283
                                    button: true,
284
                                }).then(() => {
285
                                    window.location.href = response.next_url;
286
                                });
287
                            } else {
288
                                swal({
289
                                    title: response.errors,
290
                                    icon: "error",
291
                                    button: true,
292
                                }).then(() => {
293
                                    window.location.reload()
294
                                });
295
                            }
296
                        }
297
                    })
298
                } else {
299
                    swal("好好想一想哦 ~ ~ ~ ");
300
                }
301
            });
302
        })
303
    });
304
</script>
305
{# 百度搜索框点击搜索事件结束 #}
306

307
</body>
308
</html>

【五】个人站点文章#

【1】需求分析#

【2】视图函数#

1
# 个人站点视图
2
def site(request, username, *args, **kwargs):
3
    # 【一】校验当前用户是否存在，如果不存在则返回 404 error 页面
4
    if not UserInfo.objects.filter(username=username).exists():
5
        return render(request, "errors/404.html", locals())
6
    # 【二】用户名存在则返回当前用户视图
7
    # 筛选出当前用户下的所有文章数据
8
    article_list = Article.objects.filter(blog__userinfo__username=username).all()
9

10
    return render(request, "site.html", locals())

【3】路由映射#

1
# 个人站点路由
2
path("site/<slug:username>/", site, name="site"),

【4】前端页面#

（1）注册侧边栏#

blog/templatetags/CommonInclusionTag.py

1
@register.inclusion_tag("inclusion_tags/article_left.html")
2
def article_left(user_obj):
3
    # user_obj : 当前登录的用户对象
4

5
    # 【一】获取当前用户下所有的标签分类名称
6
    # 跨表查询：从关联的 用户 表中查询出当前用户的个人站点
7
    # article_category_class = CategoryClass.objects.filter(blog=user_obj.blog)
8
    # 【二】获取当前用户下的所有分类及分类下的文章数
9
    article_category_class = CategoryClass.objects.filter(blog=user_obj.blog).annotate(
10
        article_num=Count('article__pk')).values("name", "article_num")
11

12
    # 【三】获取当前用户下所有的标签名称
13
    # article_category_tags = CategoryTag.objects.filter(blog=user_obj.blog)
14
    # 【四】获取当前用户下的所有标签及标签下的文章数
15
    article_category_tags = CategoryTag.objects.filter(blog=user_obj.blog).annotate(
16
        article_num=Count('article__pk')).values("name", "article_num")
17

18
    # 【四】获取当前用户下的所有文章的日期（按照年月分组）
19
    # 日期归档 官网提供了一个关于日期字段的切割数据的方法
20
    # https://docs.djangoproject.com/zh-hans/3.2/ref/models/database-functions/#trunc
21
    # 不要忘了修改配置
22
    # 切换时区为亚洲上海 ： TIME_ZONE = 'Asia/Shanghai'
23
    # USE_TZ = False
24
    article_list = Article.objects.filter(blog=user_obj.blog).annotate(month=TruncMonth("create_time")).annotate(
25
        article_num=Count("pk")).values("month", "article_num")
26
    print(article_list)
27

28
    # 【五】获取当前用户下的所有文章点赞数
29
    article_up = Article.objects.filter(blog=user_obj.blog).order_by("-up_num").values("title", "up_num")
30

31
    return locals()

blog/templates/inclusion_tags/article_left.html

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
7
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
8
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
9

10
</head>
11
<body>
12
{# 随笔分类 块 #}
13
<div class="list-group">
14
    {# 头部 标题 #}
15
    <a href="#" class="list-group-item active">
16
        随笔分类
17
    </a>
18
    {# 遍历每一个文章对象 #}
19
    {% for article_category_class_obj in article_category_class %}
20
        <a href="#" class="list-group-item">
21
            {{ article_category_class_obj.name }} ({{ article_category_class_obj.article_num }})
22
        </a>
23
    {% endfor %}
24
</div>
25
{# 随笔标签块 #}
26
<div class="list-group">
27
    {# 头部 标题 #}
28
    <a href="#" class="list-group-item active">
29
        随笔标签
30
    </a>
31
    {# 遍历每一个文章标签和文章对象 #}
32
    {% for article_category_tag_obj in article_category_tags %}
33
        <a href="#" class="list-group-item">
34
            {{ article_category_tag_obj.name }} ({{ article_category_tag_obj.article_num }})
35
        </a>
36
    {% endfor %}
37

38
</div>
39
{# 随笔归档块 #}
40
<div class="list-group">
41
    {# 头部 标题 #}
42
    <a href="#" class="list-group-item active">
43
        随笔档案
44
    </a>
45
    {# 遍历所有筛选过后的文章对象 #}
46
    {% for article_obj in article_list %}
47
        {# 获取每一个文章对象中的 归档后的月份 和 文章数 #}
48
        <a href="#" class="list-group-item">{{ article_obj.month|date:"Y-m" }} ({{ article_obj.article_num }})</a>
49
    {% endfor %}
50

51
</div>
52
<div class="list-group">
53
    <a href="#" class="list-group-item active">
54
        点赞排行
55
    </a>
56
    {% for article_obj in article_up %}
57
        <a href="#" class="list-group-item">{{ article_obj.title }} ({{ article_obj.up_num }})</a>
58
    {% endfor %}
59
</div>
60
</body>
61
</html>

（2）个人站点页#

1
{% extends 'home.html' %}
2

3
{% block title %}
4
    {{ request.user.blog.site_title }}
5
{% endblock %}
6
{% block content_outer %}
7
    <div class="container-fluid">
8
        <div class="row">
9
            {# 左面三分为侧边 展示栏 #}
10
            <div class="col-md-2">
11
                {# 加载 inclusion_tag 标签 #}
12
                {% load CommonInclusionTag %}
13
                {# 调用自定义的标签，参数为当前登录用户的对象 #}
14
                {% article_left request.user %}
15
            </div>
16
            {# 右边九份为文章展示栏 #}
17
            <div class="col-md-10">
18
                {# 右上角的随笔总数 #}
19
                <div class="pull-right">
20
                    随笔 - {{ article_list.count }}
21
                </div>
22
                {# 换行为了好看 #}
23
                <br>
24
                {# 遍历每一篇文章对象进行渲染 #}
25
                {% for article_obj in article_list %}
26
                    <div class="media">
27
                        {# 主体 部分 渲染 文章的标题和简介 #}
28
                        <div class="media-body">
29
                            <h4 class="media-heading"><a href="">{{ article_obj.title }}</a></h4>
30
                            <hr>
31
                            <span>{{ article_obj.desc }}</span>
32
                        </div>
33
                        {# 底部渲染 文章的发布日期，作者，点赞数，点踩数，评论数，编辑按钮等 #}
34
                        <div class="media-bottom pull-right">
35
                            posted
36
                            @ {{ article_obj.create_time|date:"Y-m-d H:i:s" }}
37
                            <a href="">{{ article_obj.blog.userinfo.username }}</a>
38
                            点赞 {{ article_obj.up_num }}
39
                            点踩 {{ article_obj.down_num }}
40
                            评论 {{ article_obj.comment_num }}
41
                            <a href="">编辑</a>
42
                        </div>
43
                    </div>
44
                    {# 换行是为了好看 #}
45
                    <br>
46
                {% endfor %}
47
            </div>
48
        </div>
49
    </div>
50
{% endblock %}

音乐

音乐

【三】手动录入数据#

【四】主页文章渲染#

【1】需求分析#

【2】视图函数#

【3】路由映射#

【4】前端页面#

【五】个人站点文章#

【1】需求分析#

【2】视图函数#

【3】路由映射#

【4】前端页面#

（1）注册侧边栏#

（2）个人站点页#

支持与分享

音乐

文章相关功能

【三】手动录入数据#

【四】主页文章渲染#

【1】需求分析#

【2】视图函数#

【3】路由映射#

【4】前端页面#

【五】个人站点文章#

【1】需求分析#

【2】视图函数#

【3】路由映射#

【4】前端页面#

（1）注册侧边栏#

（2）个人站点页#

支持与分享