Django学习 day74之BBS项目day3

一 首页页面搭建（轮播图）

前端

<div class="lbt">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">

                <a href="http://www.baidu.com"><img
                        src="https://csdnimg.cn/feed/20201021/8e58d6d12982c68fedc8941246dfbcda.jpg"  # 之后会用ajax替换掉图片与文本
                        alt="..." class="img"></a>
                <div class="carousel-caption">
                    广告位招商
                </div>

            </div>
            <div class="item">
                <a href=""><img
                        src="https://csdnimg.cn/feed/20201021/8e58d6d12982c68fedc8941246dfbcda.jpg"
                        alt="..." class="img"></a>
                <div class="carousel-caption">
                    点我
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button"
           data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button"
           data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

js

$(function () {
     $.ajax({
         url: '/get_banner/',
         method: 'get',
         success: function (data) {
             $.each(data, function (k, v) {  // 遍历从后端传来的列表l1
                 console.log(k)  // 列表的索引
                 console.log(v)  // 遍历出来的字典
                 $('.img')[k].src = v.img_url  // 将img类中的的src属性替换

             })
         }
     })
 })

js升级版

$(function () {
    let images = $('.img')
    $.ajax({
        url: '/get_banner/',
        method: 'get',
        success: function (data) {
            $.each(images, function (k, v) {
                $(v).attr('src', data[k].img_url)
                $(v).parent().attr('href', data[k].url)
                $(v).parent().next().html(data[k].msg)
            })
        }
    })
})

后端

def get_banner(request):
    # 正常逻辑，有个表存banner图
    # 我们写死了，用于从后台传入轮播图等等
    ll = [{'url': 'http://www.baidu.com',
           'img_url': '/static/img/banner1.jpg',
           'msg': '1024程序员节'},
          {'url': 'http://www.bilibi.com',
           'img_url': '/static/img/banner2.jpg',
           'msg': '我们跟bilibil合作了'}
          ]
    return JsonResponse(ll,safe=False)

二 admin后台管理

路由

path('admin/', admin.site.urls),

admin.py中注册

from blog import models
admin.site.register(models.UserInfo)
admin.site.register(models.Article)
admin.site.register(models.Blog)
admin.site.register(models.UpAndDown)
admin.site.register(models.Commit)
admin.site.register(models.Tag)
admin.site.register(models.Category)
admin.site.register(models.TagToArticle)

setting中配置国际化

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

表名显示中文

如下是在Tag表的创建class里写的子class

class Meta:
    verbose_name_plural='标签表'

字段显示中文

在创建字段的参数中写入，如：

username = models.CharField(max_length=32, verbose_name='文章标题')

字段下方的提示文本（不影响数据）

也是在创建字段的参数中写入，如：

username = models.CharField(max_length=32, help_text='这里是用户名哦')

一行行数据显示中文

不写的出现的是如表名 object(1)字样

def __str__(self):
   return self.name

blank

admin后台键入数值，是否必填，与表中字段是否必填无关，可能表中default=null，但没有blank=True，于是后台键入时强制让你填，就很烦，也是放在建表参数里的

三 首页文章显示

后台

def index(request):
    # 通过模板语言把文章渲染在页面中
    article_list=models.Article.objects.all().order_by('-create_time')
    return render(request, 'index.html',context={'article_list':article_list})

前台

这里的点赞数量与评论数量显示，是在创建文章表（Article）字段里新增了，点赞数字段(up_num)跟评论数字段(commit_num)，以免每次显示这俩信息时都要多隔表查询两次

<div class="article">
    {% for article in article_list %}
        <hr>
        <div class="media">
        	<!--文章标题-->
            <h4 class="media-heading"><a href="">{{ article.title }}</a></h4>
            <div class="media-left">
                <a href="#">
                	<!--作者头像-->
                    <img class="media-object" src="{{ article.blog.userinfo.avatar }}" alt="..."
                         width="60"
                         height="60">
                </a>
            </div>
            <div class="media-body">
            	<!--文章摘要-->
                {{ article.desc }}
            </div>
            <!--这一行分别显示：作者名、创建时间、点赞数、评论数-->
            <div class="article_bottom"><span><a href="">{{ article.blog.userinfo.username }}</a></span>
                <span>{{ article.create_time|date:'Y-m-d H-i-s' }}</span>
                <!--需要提前引入font awesome样式-->
                <span><i class="fa fa-stethoscope fa-lg"></i> {{ article.up_num }}</span><span
                        class="glyphicon glyphicon-comment"><i class="fa fa-flickr1 fa-lg"></i> {{ article.commit_num }}</span>
            </div>
        </div>
    {% endfor %}

</div>

四 media及头像显示

1. 用户上传的头像能够在浏览器中访问到

2. 默认情况下，static下的都能访问

3. medis文件夹下的图片不能访问， 需要手动打开

4. 使用方式

   1. 项目根路径下新建media文件夹
   2. setting中配置MEDIA_ROOT=os.path.join(BASE_DIR,'media')
   3. 路由中：

   from django.views.static import serve
   # 建议使用这个setting
   from django.conf import settings  # 整个项目的配置文件
   re_path('^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
   

五 图片防盗链

1. 我们如何做图片防盗链
   -请求头中referer：地址 上一个地址是什么
   防盗链就是判断上一个地址是否属于自己的网址，如果不是就禁用
2. 具体代码实现（了解即可）

六 个人站点文章显示

路由

用人名来拼写，注意一定要放在最下面一个路由，因为这个正则基本匹配所有网站了，在它之下的路由根本就过不去

re_path('^(?P<name>\w+)$',views.site)

视图

def site(request,name):
    user=models.UserInfo.objects.filter(username=name).first()
    if user:
        # 这个人写的所有文章
        article_list=user.blog.article_set.all()
        return render(request,'site.html',locals())
    else:
        return render(request,'error.html')

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
    <title>{{user.username}}-博客园</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">{{ user.blog.site_title }}</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/index/">首页 <span class="sr-only">(current)</span></a></li>

                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">广告位招商</h3>
                </div>
                <div class="panel-body">
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">重金求子</h3>
                </div>
                <div class="panel-body">
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">重金求子</h3>
                </div>
                <div class="panel-body">
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                    <hr>
                    详情联系：<a href="">点我</a>
                </div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="article">
                {% for article in article_list %}
                    <hr>
                    <div class="media">
                        <h4 class="media-heading"><a href="">{{ article.title }}</a></h4>

                        <div class="media-body">
                            {{ article.desc }}
                        </div>
                        <div class="article_bottom pull-right">
                            <span>posted@</span>
                            <span>{{ article.create_time|date:'Y-m-d H-i-s' }}</span>
                            <span>{{ user.username}}</span>
                            <span><i class="fa fa-stethoscope fa-lg"></i> {{ article.up_num }}</span><span
                                    class="glyphicon glyphicon-comment"><i
                                    class="fa fa-flickr1 fa-lg"></i> {{ article.commit_num }}</span>
                            <span><a href="">编辑</a></span>
                        </div>
                    </div>
                {% endfor %}


            </div>

        </div>
    </div>

</div>
</body>
</html>