BBS--首页、个人站点、ORM

首页

首页文章排版渲染

登录不登录两种情况

1、bootstrap导航条

点击session

创建登陆后创建人物图表

bootstrap--样式

 <li><a href="#"><span id="user_img" class="glyphicon glyphicon-user"></span>{{ request.user }}</a></li>
-----

<style type="text/css">
    #user_img{margin-right: 20px;font-size: 18px}
</style>

2、栅格系统设计主体页面

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

利用Django--admin组件插入文章数据

admin组件

admin（不是必需的）:

    Django内部的一个组件：后台数据管理组件（web页面）

    python manage.py createsuperuser    针对用户认证组件对应的用户表

    admin注册：

       admin.site.register(models.UserInfo)

python manage.py createsuperuser

 admin注册：

       admin.site.register(models.UserInfo)

在admin.py文件中做注册

再刷新得到：

如何利用admin录入数据

利于超级用户登录的

一个用户对应一个blog对象

在Article表中录入数据

文章列表的渲染

在settings.py调整一下时区

TIME_ZONE = 'Asia/shanghai'

views.py

def index(request):

    article_list=models.Article.objects.all()

    return render(request, 'index.html', locals())

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="/static/JS/jquery-3.2.1.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="/static/blog/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">

        #user_img{margin-right: 20px;font-size: 18px}

        .pub_info{margin-top: 10px}

        .pub_info .glyphicon-comment{vertical-align: }

    </style>

</head>

<body>

{#{{ request.user }}#}

{#<h3>this is my index</h3>#}

<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="#">博客园</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><a href="#">博文</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                {% if request.user.is_authenticated %}

                    <li><a href="#"><span id="user_img" class="glyphicon glyphicon-user"></span>{{ request.user }}</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="/logout/">注销</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">Separated link</a></li>

                    </ul>

                </li>

                    {% else %}

                    <li><a href="/login/">登录</a></li>

                    <li><a href="/register/">注册</a></li>

                {% endif %}

            </ul>

        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</nav>

<div class="container-fluid">

    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-info">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-warning">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

             <div class="panel panel-danger">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

        </div>

        <div class="col-md-6">

{#            文章样式#}

            <div class="article_list">

                {% for article in article_list %}

                    <div class="article-item small">

                        <h5><a href="/{{ article.user.username }}/articles/{{ article.pk }}">{{ article.title }}</a>

                        </h5>

                        <div class="article-desc">

                        <span class="media-left">

                            <a href="/{{ article.user.username }}/"><img width="" height=""

                                                                         src="media/{{ article.user.avatar }}"

                                                                         alt=""></a>

                        </span>

                            <span class="media-right">

{#                                文章摘要#}

                            {{ article.desc }}

                        </span>

                        </div>

                        <div class="small pub_info">

                            <span><a href="/{{ article.user.username }}/">{{ article.user.username }}</a></span> &nbsp;&nbsp;&nbsp;

                            <span>发布于 &nbsp;&nbsp;{{ article.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;

{#                            对应图表#}

                            <span class="glyphicon glyphicon-comment"></span>评论({{ article.comment_count }})&nbsp;&nbsp;

                            <span class="glyphicon glyphicon-thumbs-up"></span>点赞({{ article.up_count }})&nbsp;&nbsp;

                        </div>

                    </div>

                    <hr>

                {% endfor %}

            </div>

        </div>

        <div class="col-md-3">

            <div class="panel panel-success">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-default">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-primary">

                <div class="panel-heading">Panel heading without title</div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

（1）class="media-left

（2）class="small ---字体小号

（3）垂直对齐 vertical-align: -1px;

BBS--首页、个人站点、ORM的更多相关文章

关于ASP.NET 中站点地图sitemap 的使用
在ASP.NET MVC 如此火热的时期,我竟然不适时宜的谈起ASP.NET ,恐怕会引来一阵嘲笑.最为无趣的是,讲解的竟然还是其中的一个控件.oh~~ my god!my out! ^_^ Si ...
BBS总结
表设计 from django.db import models from django.contrib.auth.models import AbstractUser # Create your m ...
启动Nginx目录浏览功能及让用户通过用户名密码认证访问web站点
一.启动Nginx目录浏览功能 [root@abcdocker extra]# cat w.conf server { listen 80; server_name IP地址; location / ...
1209 BBS 登录
目录上周内容今日内容 url.py views.py login home.html 逻辑流程登录功能上周内容 bbs项目项目开发流程需求分析架构设计分组开发我们一般情况下都只是作用 ...
简单BBS项目开始（一）
1.BBS需求分析和创建ORM 1. 需要哪些表 1. UserInfo 1. username 2. password 3. avatar #头像图片 2. 文章表: title publish_d ...
django——bbs
今日内容概要 bbs是一个前后端不分离的全栈项目,前端和后端都需要我们自己一步步的完成表创建及同步注册功能 forms组件用户头像前端实时展示 ajax 登陆功能自己实现图片验证码 ajax ...
[Asp.net]站点地图SiteMap
原文:[Asp.net]站点地图SiteMap 引言在项目中发现使用站点地图的控件,之前没总结过这方面的东西,就写了一个demo测试了一下,这里记录一下,算是总结吧. Web.sitemap < ...
SEO优化上首页之搜索引擎作弊案例与反作弊原理
搜索引擎流量价值巨大,有不少人专门研究排名机制,利用搜索引擎漏洞作弊,寻求快速提高网站排名,进而获取更多的流量和利益,甚至有的网站优化公司专门提供作弊服务.搜索引擎为了杜绝这种情况,必须能过滤大量垃圾 ...
BBS项目知识点汇总
目录 bbs项目知识点汇总一. JavaScript 1 替换头像 2 form表单拿数据 3 form组件error信息渲染 4 添加html代码 5 聚焦操作二 . html在线编辑器三 . ...
Nginx多站点虚拟主机实现单独启动停止php-fpm、单独控制权限设置
Nginx多站点虚拟主机实现单独启动停止php-fpm.单独控制权限设置来源:osyunwei.com 作者:qihang01 发表于:2012-08-19 21:26 点击: 说明: 站点1:bb ...

随机推荐

基于JavaScript 声明全局变量的三种方式详解
原文地址:http://www.jb51.net/article/36548.htm JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符) ...
mysql锁文章
http://www.genshuixue.com/i-cxy/p/15285416 http://blog.csdn.net/hw_libo/article/details/39080809 htt ...
docker构建tomcat镜像
下载centos镜像 # docker pull daocloud.io/centos:7 [root@localhost ~]# docker pull daocloud.io/centos: : ...
Jmeter（二十三）Jmeter-Question之“批量造数据”
日常工作中,无论是在做功能测试.接口测试还是性能测试,经常会有这么一个场景出现,“那个谁谁谁,帮我加几条订单”,“那个某某某,给购物车增添几个产品”,“在数据库加几百条数据”...等等,通常少数量,或 ...
[UE4]反射
1.根据名字获得类(C++支持,蓝图本身不支持但可以通过工厂模式模拟) 国外大神提供的封装好的C++实现: https://github.com/getsetgames/BlueprintReflec ...
[UE4]关于分支Sequence和条件分支的组合用法
当需要不管条件语句是否成立的后面都需要执行的语句,可以使用“Sequence”来分支,达到简化蓝图连线的目的.如下图所示:
Java给整数部分的字符串加上千分位分隔符
本来想网上找个例子,结果让人很失望,网上的大部分用的DecimalFormat .NumberFormat,我随便搞了一个长点的字符串,发现大部分都有小数进度问题. 而且网上的人,都不测试的,写的例子 ...
Mybatis 系列7-结合源码解析核心CRUD 配置及用法
[Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...
(error) MOVED 5798 172.17.0.3:6379
登录没有启动集群模式(即缺少了那个"-c"): redis-cli -c -h yourhost -p yourpost
第10课 std::bind和std::function（1）_可调用对象
1. 几种可调用对象(Callable Objects) (1)普通函数指针或类成员的函数指针 (2)具有operator()成员函数的类对象(仿函数).如c++11中的std::function类模 ...