bbs 第三天 1. BBS 首页 2. BBS 个人页面

主页:

　　index.html：

　　　　index页面的左上角是博客log，文章，招聘，右上角是用户信息，登录成功显示个人头像，个人姓名，个人中心下拉注销，未登录的话就显示登录注册

　　　　然后文章占页面中间:

　　　　　　显示头像加文章内容，底部是用户发表时间信息等等...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bbs主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/mystyle.css">
    <link rel="stylesheet" href="/static/mybbs.css">

</head>
<body>
<nav class="navbar navbar-default">
    <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="#">SSH 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="#">文章</a></li>
                <li><a href="#">招聘</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">
                {% if request.user.username %}

                    <li><img class="avatar" src="/media/{{ request.user.avatar }}" alt=""></li>
                    <li><a href="#">{{ request.user.username }}</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="#">Action</a></li>#}
                            {#                            <li><a href="#">Another action</a></li>#}
                            {#                            <li><a href="#">Something else here</a></li>#}
                            {#                            <li role="separator" class="divider"></li>#}
                            <li><a href="/login/">注销</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="/login/">登录</a></li>
                    <li><a href="/reg/">注册</a></li>
                {% 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-success">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>


        <div class="col-md-8">
            {# 文章列表 #}
            <div class="article-list">
                {% for article in article_list %}
                    <div class="article">

                        <div class="article-top">
                            {# 博客文章标题 #}
                            <h2>{{ article.title }}</h2>
                        </div>

                        <div class="article-middle">
                            <div class="media">
                                <div class="media-left media-middle">
                                    <a href="#">
                                        {# 用户头像 #}
                                        <img class="media-object article-avatar" src="/media/{{ article.user.avatar }}"
                                             alt="...">
                                    </a>
                                </div>
                                <div class="media-body">
                                    {# 博客文章内容 #}
                                    {{ article.desc }}
                                </div>
                            </div>
                        </div>

                        {# 博客文章底部内容 #}
                        <div class="article-footer">
                            <span class="article-user"><a
                                    {# 写一个二级跳转路由 #}
                                    href="/blog/{{ article.user.username }}/">{{ article.user.username }}</a></span>发布于
                            <span>{{ article.create_time }}</span>
                            <span class="glyphicon glyphicon-thumbs-up">点赞({{ article.up_count }})</span>
                            <span class="glyphicon glyphicon-comment">评论({{ article.comment_count }})</span>
                        </div>
                    </div>
                    <hr>
                {% endfor %}
            </div>
        </div>


        <div class="col-md-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

View Code

　　 views.py：

　　　　通过models拿到所有的文章，然后把文章发送到index页面中；

def index(request):
    # 把所有文章拿出来
    data = models.Article.objects.all()
    return render(request, "index.html", {'article_list': data})

View Code

　　 admin.py：注册表信息

from django.contrib import admin
from blog import models
# Register your models here.


admin.site.register(models.Article)
admin.site.register(models.UserInfo)
admin.site.register(models.ArticleDetail)
admin.site.register(models.Blog)
admin.site.register(models.Category)
admin.site.register(models.Tag)
admin.site.register(models.Comment)
admin.site.register(models.ArticleUpDown)

View Code

　　　 urls.py 二级路由

urlpatterns = [
    url(r'(.*)/$', views.home),  # home(request, username)
]


 url(r'^blog/', include(blog_urls)),  # 二级路由的写法


include

View Code

　　　　home.html 个人主页文章分类文章标签日期归档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/mybbs.css">
    <link rel="stylesheet" href="/media/themes/{{ blog.theme }}">
</head>
<body>

<div class="header">
    <h3>{{ blog.title }}</h3>
</div>

<div class="container-fluid main">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">文章分类</h3>
                </div>
                <div class="panel-body">

                <ul class="list-unstyled">
                    {% for category in category_list %}
{#                        <li><a href="">{{ category.title }}({{ category.article_set.count }})</a></li>#}
                        <li><a href="">{{ category.title }}({{ category.num }})</a></li>
                    {% endfor %}
                </ul>

                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">文章标签</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">日期归档</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="article-list">
                {% for article in article_list %}
                    <div class="article">
                        <div class="article-top">
                            <h2>{{ article.title }}</h2>
                        </div>
                        <div class="article-middle">
                            <div class="media">
                                <div class="media-left media-middle">
                                    <a href="#">
                                        <img class="media-object article-avatar" src="/media/{{ article.user.avatar }}" alt="...">
                                    </a>
                                </div>
                                <div class="media-body">
                                    {{ article.desc }}
                                </div>
                            </div>
                        </div>
                        <div class="article-footer">
                            <span class="article-user"><a href="/blog/{{ article.user.username }}/">{{ article.user.username }}</a></span>发布于 <span>{{ article.create_time }}</span>
                            <span class="glyphicon glyphicon-thumbs-up">点赞({{ article.up_count }})</span>
                            <span class="glyphicon glyphicon-comment">评论({{ article.comment_count }})</span>
                        </div>
                    </div>
                    <hr>
                {% endfor %}

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

</body>
</html>

View Code

进入个人主页：

通过index.html中间个人博客的展示信息，有个用户名的超链接，点击跳转到blog/用户名.html就是通过二级路由跳转过去的；

然后home个人主页函数需要把用户名的值也传过来，默认是get请求所以可以取到username；

注意点:

1.右上角，需要判断用户是否已登录，存在显示头像，用户名，个人中心，未登录就else显示登录和注册；

通过request.user. 里面拿到这些数据，头像也是；

2.admin里面需要去填写注册表信息

bbs 第三天 1. BBS 首页 2. BBS 个人页面

猜你喜欢