zoukankan html css js c++ java

博客系统-当前用户的家目录

url配置

#个人站点配置
    url(r'^blog/',include("blog.urls")),

# 分发url
from django.conf.urls import url,include
from blogCMS import settings
from blog import views


urlpatterns = [
    url(r'^(?P<username>.*)/(?P<condition>tag|category|date)/(?P<para>.*)', views.homeSite),
    url(r'^(?P<username>.*)/article/(?P<article_id>d+)', views.homeSite),
    url(r'^(?P<username>.*)', views.homeSite,name="blog"),

]

视图相关处理

def homeSite(request,username,**kwargs):
    current_user = models.UserInfo.objects.filter(username=username).first()     #当前用户
    current_blog = current_user.blog          #反向查询到博客表

    if not current_user:
        return render(request,"notFound.html")

    # 分类归档    通过category表过滤出当前用户的站点，聚合查询反向
    category_list = models.Category.objects.all().filter(blog=current_blog).annotate(c=Count("article__nid")).values_list("title","c")
    #  标签归档   通过标签过滤出当前用户的站点，聚合反向查询
    tag_list = models.Tag.objects.all().filter(blog=current_blog).annotate(c=Count("article__nid")).values_list("title","c")
    # # 日期归档
    data_list = models.Article.objects.filter(user=current_user).extra(select={"filter_create_date":"strftime('%%Y/%%m',create_time)"}).values_list("filter_create_date").annotate(Count("nid"))

    if kwargs:
        if kwargs.get("condition")=="category":
            article_list=models.Article.objects.filter(user=current_user,category__title=kwargs.get("para"))
        elif kwargs.get("condition") == "tag":
            article_list = models.Article.objects.filter(user=current_user, tags__title=kwargs.get("para"))
        elif kwargs.get("condition") == "date":
            year, month = kwargs.get("para").split("/")
            article_list = models.Article.objects.filter(user=current_user, create_time__year=year,create_time__month=month)

    if kwargs.get("article_id"):
        print("======>",request.path)
        user_obj = request.user
        article_obj = models.Article.objects.filter(nid=kwargs.get("article_id")).first()
        comment_obj_list = article_obj.comment_set.all()
        obj = render(request,"article_deatil.html",locals())
        obj.set_cookie("next_path",request.path)
        print(request.COOKIES.get("next_path"),"======================>")

        return obj

    else:
        article_list = models.Article.objects.filter(user=current_user)
        paginator = Paginator(article_list, 3)
        page_range = paginator.page_range
        num = request.GET.get("page", 1)
        article_list = paginator.page(num)
        
        return render(request,"homeSite.html",locals())

前端页面展示

{#<!DOCTYPE html>#}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ current_user.nickname }}</title>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/blog/article_detail.css">


    <script src="/static/jquery/jquery-3.2.1.min.js"></script>
    <script src="/static/jquery/jquery.cookie.js"></script>
    <script src="/static/jquery/jquery.session.js"></script>
    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="/static/blog/homesite.js"></script>
    <script src="/static/kindeditor/kindeditor-all.js"></script>
    <script src="/static/kindeditor/lang/zh-CN.js"></script>
    <link rel="stylesheet" href="/static/theme/{{ current_user.blog.theme }}">


    <style>
        .tops a {
            margin-right: 20px;
        }

        #comment_con {
            width: 500px;
            height: 250px;
        }

        .comment_tree_list {
            margin-left: -40px;
        }

        .offset {
            margin-left: 40px;
        }
    </style>
</head>
<body>


{#    顶部博客名字#}
<div class="headding">
    <div class="container"><h2>welcome {{ username }} to myhome_page </h2></div>
</div>

{#    顶部导航#}
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header tops">
            <a class="navbar-brand" href="/index/"><span class="glyphicon glyphicon-home">博客园首页</span></a>
            <a class="navbar-brand" href=""><span class="glyphicon glyphicon-phone-alt">联系</span></a>
            <a class="navbar-brand" href=""><span class="glyphicon glyphicon-file">订阅</span></a>
            <a class="navbar-brand" href="/blog/{{ request.user.username }}/backindex/"><span
                    class="glyphicon glyphicon-cog">管理</span></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">

                <li><a href="">随笔：{{ article_list.count }}</a></li>
                <li><a href="">文章：{{ article_list.count }}</a></li>
                <li><a href="">评论：{{ article_list.first.comment_count }}</a></li>


            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

{#    博客主体部分#}
<div class="container">

    <div class="row">

        <div class="col-md-3">
            <div class="panel panel-danger">
                <div class="panel-heading">个人资料</div>
                <div class="panel-body">
                    <p>头像：<img src="{{ current_user.avatar.url }}" width="80" height="80" alt=""
                               style="border-radius: 10px"></p>
                    <p>昵称：{{ current_user.nickname }}</p>
                    <p>园龄：{{ current_user.create_time }}</p>
                    <p>关注：{{ current_user.fans.count }}</p>
                    <p>粉丝：{{ current_user.users.count }}</p>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">分类归档</div>
                <div class="panel-body">
                    {% for category in category_list %}
                        <p>
                            <a href="/blog/{{ current_user.username }}/category/{{ category.0 }}">{{ category.0 }}({{ category.1 }})</a>
                        </p>
                    {% endfor %}

                </div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">标签归档</div>
                <div class="panel-body">
                    {% for tag in tag_list %}
                        <p><a href="/blog/{{ current_user.username }}/tag/{{ tag.0 }}">{{ tag.0 }}({{ tag.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">日期归档</div>
                <div class="panel-body">
                    {% for data in data_list %}
                        <p><a href="/blog/{{ current_user.username }}/date/{{ data.0 }}">{{ data.0 }}({{ data.1 }})</a>
                        </p>
                    {% endfor %}

                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">最新评论</div>
                <div class="panel-body">
                    <p>评论一</p>
                    <p>评论二</p>
                    <p>评论三</p>
                </div>
            </div>
        </div>


        <div class="col-md-8">
            {#        主体#}

            {% block content %}

                <div class="panel panel-primary">
                    <div class="panel-heading"><h4>个人博客文章</h4></div>
                    <div class="panel-body">
                        {% for article in article_list %}
                            <div class="row">
                                <div class="article_title"><h4><a
                                        href="/blog/{{ current_user.username }}/article/{{ article.nid }}">{{ article.title }}</a>
                                </h4></div>
                                <div class="article_desc">
                                    <p>{{ article.desc }}</p>
                                </div>
                                <div class="info">
                                    发表于 <span>{{ article.create_time|date:"Y-m-d" }}</span>
                                    <span>评论({{ article.comment_count }})</span>
                                    <span>点赞({{ article.up_count }})</span>
                                    <span>阅读({{ article.read_count }})</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

            {% endblock %}

            <div class="page_page" style="text-align: center">

                {#        分页按钮功能#}
                {% block page %}

                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {% if article_list.has_previous %}
                                <li>
                                    <a href="/blog/{{ current_user.username }}?page={{ article_list.previous_page_number }}"
                                       aria-label="Previous">上一页</a>
                                </li>
                            {% else %}
                                <li class="disabled"><a href="" aria-label="Previous">上一页</a></li>
                            {% endif %}


                            {% for index in page_range %}
                                {% if num == index %}
                                    <li class="active"><a
                                            href="/blog/{{ current_user.username }}?page={{ index }}">{{ index }}</a>
                                    </li>
                                {% else %}
                                    <li><a href="/blog/{{ current_user.username }}?page={{ index }}">{{ index }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}


                            {% if article_list.has_next %}
                                <li><a href="/blog/{{ current_user.username }}?page={{ article_list.next_page_number }}"
                                       aria-label="Previous">下一页</a></li>
                            {% else %}
                                <li class="disabled"><a href="" aria-label="Previous">下一页</a></li>
                            {% endif %}

                        </ul>
                    </nav>

                {% endblock %}
            </div>

        </div>


    </div>

</div>

</body>
</html>

css页面

article_detail样式

.title{
    color: #2aabd2;
}


.article_region .article_con{
    margin-left: 20px;
}


.updown .diggit{
     46px;
    height: 52px;
    background: url("/static/img/upup.gif") no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}

.updown .buryit{
    margin-left:20px;
     46px;
    height: 52px;
    background: url("/static/img/downdown.gif") no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}
/*.updown{*/
    /*margin-left: 0;*/
/*}*/

.subComment_region #tbCommentAuthor{
        background-position: 3px -3px;
        background-image: url("/static/img/icon_form.gif");
        background-repeat: no-repeat;
        border: 1px solid #ccc;
        padding: 4px 4px 4px 30px;
         300px;
        font-size: 13px;
}

#commentform_title {
    background-image: url("/static/img/icon_addcomment.gif");
    background-repeat: no-repeat;
    padding: 0 0 0 25px;
    margin-bottom: 10px;
}
.author_avatar{
    margin-left: 20px;
}



.had_comment_region input.author{
    background-image: url("/static/img/icon_form.gif");
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    padding: 4px 4px 4px 30px;
     300px;
    font-size: 13px;
}

#author_profile {
    float: left;
     280px;
    margin-top: 0;
    margin-bottom: 10px;
    color: #000;
    margin-left: 0;
    font-size: 12px;
}
.author_profile_info {
    float: left;
    line-height: 18px;
}
div {
    display: block;
}

.author_avatar {
    vertical-align: top;
    float: left;
    margin-right: 5px;
    padding-top: 5px;
    padding-left: 2px;
    border: 0;
}

.author_profile_info {
    float: left;
    line-height: 18px;
}


.author_profile .author_profile_info .author_profile_detail a{
    border-bottom: 2px dotted #333;
    color: #000;
    text-decoration: none;
}

.sendMsg2This:link, .sendMsg2This:visited, .sendMsg2This:active {
    font-size: 12px;
    text-decoration: none;
    background: url("/static/img/icoMsg.gif") no-repeat top left;
    padding-left: 20px;
}

.feedbackListSubtitle a:hover {
    color: #f60;
    text-decoration: none;
}


.sendMsg2This:hover {
    background: url("/static/img/icoMsg.gif") no-repeat bottom left;
}


.sp:hover{
    color: #f60;
    text-decoration: none;
}
.sp {
    color: #666;
    font-weight: normal;
}




.pl{
    margin-left: 0;
    margin-top: 3px;
    border-bottom: 1px solid #EDD9B8;
}

.comment{
    margin-left: 20px;
}

homesitejs样式
//         var nb = parseInt($(".nb:last").text()) + 1;     // {# 建楼层用的 #}
//
//         // {# 格式化时间 #}
//         Date.prototype.Format = function (fmt) { //author: meizz
//             var o = {
//                 "M+": this.getMonth() + 1, //月份
//                 "d+": this.getDate(), //日
//                 "h+": this.getHours(), //小时
//                 "m+": this.getMinutes(), //分
//                 "s+": this.getSeconds(), //秒
//                 "q+": Math.floor((this.getMonth() + 3) / 3), //季度
//                 "S": this.getMilliseconds() //毫秒
//             };
//             if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
//             for (var k in o)
//                 if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
//             return fmt;
//         };
//
//         var createTime = new Date().Format("yyyy年MM月dd日 hh:mm");
//
//
//         // {#        提交评论#}
//         $(".submit").click(function () {
//             var cont = $(".text").val();
//             // {#   当前输入的内容   #}
//
//             $.ajax({
//                 url: "/blog/{{ current_user }}/com/",
//                 type: "POST",
//                 data: {
//                     csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
//                     article_id:{{ article_obj.nid }},
//                     text: $(".text").val()
//                 },
//                 success: function (data) {
//                     data = JSON.parse(data);
//                     if (data["success"]) {
//
//                         var tr = '
// <div class="row pl">
//                         <div class="col-md-12">
//                             <div class="row">
//                                 <div class="pull-left">
//                                     <a href="" style="white-space:pre;">#&nbsp;' +  nb  + '&nbsp;楼</a>&nbsp;&nbsp;
//                                      ' + createTime + ' &nbsp;&nbsp;<a href="">{{ user_obj }}</a>
//                                 </div>
//                                 <a href="" class="sendMsg2This"></a>
//                                 <div class="pull-right"><a href="">回复</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">引用</a></div>
//                             </div>
//                             <div></div>
//                             <div class="cont">' + cont + '</div>
//                             <br>
//                         </div>
//                     </div>
// '
//                         $(".contcont").append(tr);
//
//
//                         $(".text").val("");
//
//                     } else {
//                         alert($.session.get("urls"));
//                         location.href = "/login/"
//                     }
//                 }
//             })
//         });
//
//
//         function foo() {
//             $(".diggnum_error").html("")
//         }
//
//
//         // {#        正常用户#}
//         $(".diggit").click(function () {
//             $.ajax({
//                 url: "/blog/up_count/",
//                 type: "POST",
//                 data: {
//                     csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
//                     article_id:{{ article_obj.nid }}
//                 },
//                 success: function (data) {
//                     data = JSON.parse(data);
//                     if (data["state"]) {
//                         var val = parseInt($("#digg_count").html()) + 1;
//                         $("#digg_count").html(val)
//
//                     } else {
//                         $(".diggnum_error").html("请不要重复点赞").css("color", "red");
//                         setTimeout(foo, 3000)
//
//                     }
//
//                 }
//             })
//         });
//
//
//         $(".buryit").click(function () {
//             $.ajax({
//                 url: "/blog/down_count/",
//                 type: "POST",
//                 data: {
//                     csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
//                     article_id:{{ article_obj.nid }}
//                 },
//                 success: function (data) {
//                     data = JSON.parse(data);
//                     console.log(data);
//                     if (data["state"]) {
//                         var val = parseInt($("#bury_count").html()) + 1;
//                         $("#bury_count").html(val)
//
//                     } else {
//
//                         $(".diggnum_error").html("去你大爷的，").css("color", "red")
//                         setTimeout(foo, 3000)
//
//                     }
//
//                 }
//             })
//         });
//
//
//
//
//         // {#        游客进来之后吧当前的url写到session中，跳转到login页面#}
//         $("#wu_diggnum").click(function () {
//             $.session.set("urls", window.location.href);
//             location.href = "/login/"
//         });
//
//
//         $(".reply").click(function () {
//             alert("没有资格评论")
//         })

查看全文

相关阅读:
基于 HTML5 WebGL 构建智能数字化城市 3D 全景
 基于 H5 + WebGL 实现 3D 可视化地铁系统
 基于 HTML5 WebGL 的 3D 科幻风机
 基于 HTML5 + WebGL 的太阳系 3D 展示系统
 HT Vue 集成
 基于 HTML5 + WebGL 的地铁 3D 可视化系统
 基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
 String、StringBuffer和StringBuilder的区别
 Python--Numpy基础
 python中的next()以及iter()函数

原文地址：https://www.cnblogs.com/52-qq/p/8669402.html