首页展示文章搭建

首页展示文章搭建

一、后端

头像渲染配置，图片防盗链

1.文章展示

# 个人站点展示
@login_required
def index(request):
    article_list = models.Article.objects.all()
    # 分页器
    page_obj = Pagination(current_page=request.GET.get('page', 1), all_count=article_list.count())
    article_list = article_list[page_obj.start: page_obj.end]
    return render(request, '03index.html', locals())

# 账号注销
def logout(request):
    """
    注销
    :param request:
    :return:
    """
    auth.logout(request)
    return redirect('/login/')

# 重置密码
def set_password(request):
    print(request.POST)
    back_dic = {"code": 1000, 'msg': ''}
    if request.POST:
        old_password = request.POST.get('old_password')
        new_password = request.POST.get('new_password')
        confirm_password = request.POST.get('confirm_password')
        # 判断两次密码是否一样
        if new_password == confirm_password:
            if request.user.check_password(old_password):
                request.user.set_password(new_password)
                request.user.save()
            else:
                back_dic['code'] = 2000
                back_dic['msg'] = '旧密码输入错误！'
        else:
            back_dic['code'] = 3000
            back_dic['msg'] = '两次密码输入不一样！'
        return JsonResponse(back_dic)
    return redirect('/index/')

2.文章分页

class Pagination(object):
    def __init__(self, current_page, all_count, per_page_num=4, pager_count=5):
        """
        封装分页相关数据
        :param current_page: 当前页
        :param all_count:    数据库中的数据总条数
        :param per_page_num: 每页显示的数据条数
        :param pager_count:  最多显示的页码个数

        用法:
        queryset = model.objects.all()
        page_obj = Pagination(current_page,all_count)
        page_data = queryset[page_obj.start:page_obj.end]
        获取数据用page_data而不再使用原始的queryset
        获取前端分页样式用page_obj.page_html
        """
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1

        if current_page < 1:
            current_page = 1

        self.current_page = current_page

        self.all_count = all_count
        self.per_page_num = per_page_num

        # 总页码
        all_pager, tmp = divmod(all_count, per_page_num)
        if tmp:
            all_pager += 1
        self.all_pager = all_pager

        self.pager_count = pager_count
        self.pager_count_half = int((pager_count - 1) / 2)

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_num

    @property
    def end(self):
        return self.current_page * self.per_page_num

    def page_html(self):
        # 如果总页码 < 11个：
        if self.all_pager <= self.pager_count:
            pager_start = 1
            pager_end = self.all_pager + 1
        # 总页码  > 11
        else:
            # 当前页如果<=页面上最多显示11/2个页码
            if self.current_page <= self.pager_count_half:
                pager_start = 1
                pager_end = self.pager_count + 1

            # 当前页大于5
            else:
                # 页码翻到最后
                if (self.current_page + self.pager_count_half) > self.all_pager:
                    pager_end = self.all_pager + 1
                    pager_start = self.all_pager - self.pager_count + 1
                else:
                    pager_start = self.current_page - self.pager_count_half
                    pager_end = self.current_page + self.pager_count_half + 1

        page_html_list = []
        # 添加前面的nav和ul标签
        page_html_list.append('''
                    <nav aria-label='Page navigation>'
                    <ul class='pagination'>
                ''')
        first_page = '<li><a href="?page=%s">首页</a></li>' % (1)
        page_html_list.append(first_page)

        if self.current_page <= 1:
            prev_page = '<li class="disabled"><a href="#">上一页</a></li>'
        else:
            prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)

        page_html_list.append(prev_page)

        for i in range(pager_start, pager_end):
            if i == self.current_page:
                temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)
            else:
                temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)
            page_html_list.append(temp)

        if self.current_page >= self.all_pager:
            next_page = '<li class="disabled"><a href="#">下一页</a></li>'
        else:
            next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)
        page_html_list.append(next_page)

        last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)
        page_html_list.append(last_page)
        # 尾部添加标签
        page_html_list.append('''
                                           </nav>
                                           </ul>
                                       ''')
        return ''.join(page_html_list)

二、前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'bootstrap/js/jquery.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.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="#">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="#">文章</a></li>
                        <li><a href="#">作者</a></li>
                        <li><a href="#">时间</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">站点</a></li>
                        <li role="separator" class="divider">站点</li>
                        <li><a href="#">用户</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    <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="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a>
                            </li>
                            <li><a href="/backend/">后台管理</a></li>
                            <li><a href="#">修改样式</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/logout/">注销</a></li>
                        </ul>
                    </li>
                {% else %}

                    <ul class="dropdown-menu">
                        <li><a href="/login/">登录</a></li>
                        <li><a href="/register">注册</a></li>

                    </ul>


                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">
    <div class="row">
        {#        左边广告#}
        <div class="col-md-2">

            {#            一#}
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">招聘广告位</h3>
                </div>
                <div class="panel-body">
                    联系方式
                </div>
            </div>
            {#二#}
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">百度文库下载</h3>
                </div>
                <div class="panel-body">
                    点击链接
                </div>
            </div>
            {#            三#}
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">免费视频观看</h3>
                </div>
                <div class="panel-body">
                    视频地址
                </div>
            </div>
            {#            四#}
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">广告位招聘</h3>
                </div>
                <div class="panel-body">
                    联系地址
                </div>
            </div>
        </div>

        {#        中间内容#}
        <div class="col-md-8">
            <ul class="media-list">
                {#            显示文章内容#}
                {% for article in article_list %}
                    <li class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded" width="150px" height="150px"
                                     src="/media/{{ article.blog.userinfo.avatar }}" alt="..."
                                     style="border-radius: 50%">
                            </a>
                        </div>
                        <div class="media-body">
                            <a href="/{{ article.blog.userinfo.username }}/article/{{ article.pk }}">
                                <h4 class="media-heading">{{ article.title }}</h4>
                            </a>

                            <p>{{ article.desc }}</p>

                        </div>
                        <br>
                        {#                     名称 发布于 2019-11-05 08:49 评论(0)阅读(56)#}
                        <a href="/{{ article.blog.userinfo.username }}/">
                            <span><span
                                    class="glyphicon glyphicon-user"></span>&nbsp;{{ article.blog.userinfo.username }}</span>
                        </a>
                        <span><span
                                class="glyphicon glyphicon-time"></span>发布于&nbsp; {{ article.create_time|date:'Y-m-d' }}</span>
                        <span><span
                                class="glyphicon glyphicon-comment"></span>评论数&nbsp; ({{ article.comment_num }})</span>
                        <span><span class="glyphicon glyphicon-thumbs-up"></span>点赞数&nbsp; ({{ article.up_num }})</span>

                    </li>
                    <hr>
                {% endfor %}


            </ul>
            {{ page_obj.page_html|safe }}

        </div>


        {#        右边内容#}
        <div class="col-md-2 pull-right">

            {# 一#}
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">招聘广告位</h3>
                </div>
                <div class="panel-body">
                    联系方式
                </div>
            </div>
            {#二#}
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">百度文库下载</h3>
                </div>
                <div class="panel-body">
                    点击链接
                </div>
            </div>
            {#            三#}
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">免费视频观看</h3>
                </div>
                <div class="panel-body">
                    视频地址
                </div>
            </div>
            {#            四#}
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">广告位招聘</h3>
                </div>
                <div class="panel-body">
                    联系地址
                </div>
            </div>
        </div>

    </div>

</div>

<!-- Large modal -->
{# 修改密码#}
<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">
            <h2 class="text-center">修改密码</h2>
            <div class="row">
                <div class="col-md-6 col-lg-offset-3">
                    <div class="form-group">
                        <label for="">用户名</label>
                        <input type="text" name="username" id="username" disabled value="{{ request.user.username }}"
                               class="form-control">
                    </div>

                    <div class="form-group">
                        <label for="old_password">旧密码</label>
                        <input type="password" name="old_password" id="old_password" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="new_password">新密码</label>
                        <input type="password" name="new_password" id="new_password" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="new_password">确认密码</label>
                        <input type="password" name="confirm_password" id="confirm_password" class="form-control">
                    </div>

                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="b1">修改密码</button>
                    <span style="color: red;" id="error"></span>
                    <br>
                    <br>
                </div>
            </div>

        </div>
    </div>
</div>

<script>

    $('#b1').on('click', function () {
        alert(12)
        $.ajax({
            url: "/set_password/",
            type: 'post',
            data: {
                'old_password': $("#old_password").val(),
                'new_password': $('#new_password').val(),
                'confirm_password': $('#confirm_password').val(),
                // 'csrfmiddlewaretoken': '{{ csrf_token }}'
                'csrfmiddlewaretoken': '{{ csrf_token }}',
            },

            success: function (data) {
                if (data.code == 1000) {
                    window.location.href = data.url
                } else {
                    $('#error').text(data.msg)
                }

            }
        });
alert()
    });
</script>

</body>
</html>