django框架前后端混合项目之首页轮播图、主页、后台管理、头像显示等相关内容-79

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

前端

<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"
                                        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) {
                    console.log(k)
                    console.log(v)
                    $('.img')[k].src = v.img_url
​
                })
​
​
            }
        })
​
    })

后端

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)

2 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
​
## 表名显示中文
class Meta:
    verbose_name_plural='标签表'
## 一行行数据显示中文
def __str__(self):
   return self.name
## 其它字段
    -verbose_name='文章摘要'     # 这个是改在admin中新增数据时，字段的名字，写在models的各个字段的属性后面
    -help_text='小伙子，这里填文章摘要'
    -blank

 

3 首页文章显示

后台

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

前台

<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>
                <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>

4 media及头像显示

1 用户上传的头像能够在浏览器中访问到
2 默认情况下，static下的都能访问
3 medis文件夹下的图片不能访问， 需要手动打开
​
4 使用方式
    -项目根路径下新建media文件加
    -setting中配置MEDIA_ROOT=os.path.join(BASE_DIR,'media')
    -路由中
    re_path('^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),

 

5 图片防盗链

1 我们如何做图片防盗链
    -请求头中referer：地址    上一个地址是什么
2 具体代码实现（了解即可）

 

6 个人站点文章显示

路由

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>