Day 18 BBS项目03 主页以及个人站点搭建

Day 18 BBS项目03 主页以及个人站点搭建

一、首页轮播图的实现

前端

    <div class="col-8">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5></h5>
                        <p></p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5></h5>
                        <p></p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5></h5>
                        <p></p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div>
            {% for article in articles %}
                <div class="media" style="margin-top: 15px">
                    <img src="/media/{{ article.blog.user_info.avatar }}" class="mr-3" alt="..."
                         style="width: 40px;height: 40px">
                    <div class="media-body">
                        <h5 class="mt-0"><a href="">{{ article.title }}</a></h5>
                        {{ article.introduction }}
                        <div>
                            <span style="font-size: 12px;height: 12px"><a
                                    href="/{{ article.blog.user_info.username }}">{{ article.blog.user_info.username }} </a>
                                   &nbsp;&nbsp;{{ article.publish_time|date:'Y-m-d H-i-s' }} <i
                                        class="iconfont icon-dianzan-copy"
                                        style="font-size: 12px;color: grey;margin-left: 15px">{{ article.likeandcollect_set.count }}</i><i
                                        class="iconfont icon-pinglun"
                                        style="font-size: 12px;color: grey;margin-left: 15px"> {{ article.commit_num }}</i></span>
                        </div>
                    </div>
                </div>
            {% endfor %}

        </div>
    </div>


    {#修改密码操作#}
    $('#set_password').click(function () {
        $.ajax({
            url: '/set_password/',
            method: 'post',
            data: {
                'password': $('input[name="password"]').val(),
                're_password': $('input[name="re_password"]').val(),
                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
            },
            success: (result) => {
                alert(result.msg)
                location.href = result.path
            }
        })
    })

后端

# 获取轮播图
def get_carousel(request):
    carousel = [{
        'title': '腾讯云·开元之道',
        'desc_': '歪比歪比',
        'url': '/media/image/carousel1.jpg',
    }, {
        'title': '极客·社区',
        'desc_': '外比巴卜',
        'url': '/media/image/carousel2.png',
    }, {
        'title': '海思·AI学习',
        'desc_': '玛卡巴卡',
        'url': '/media/image/carousel3.jpg',
    }, ]
    return JsonResponse(carousel, safe=False)

二、admin后台管理

1. 路由配置

# 默认已经配置路由
# urls

urlpatterns = [
    url(r'^admin/', admin.site.urls),
]

2. settings中配置国际化

image-20201029190759824

3. 表名显示为中文

# models.py

# 文章信息
class Article(models.Model):
    title = models.CharField(max_length=32)
    introduction = models.CharField(max_length=254)
    content = models.TextField()
    publish_time = models.DateTimeField(null=True)
    blog = models.ForeignKey(to='Blog', on_delete=models.CASCADE)
    tag = models.ManyToManyField(to='Tag')
    category = models.ForeignKey(to='Category', on_delete=models.CASCADE)
    
    class Meta:
 # admin中显示的表名称  由于是外国人编写 默认复数形式 +s
        verbose_name = '用户信息表'
        # verbose_name加s   变为不加s   可以仅仅只使用这个
        verbose_name_plural = '用户信息表'
    
    # 这里修改调用时返回的 名称对象
    # 默认返回的是对象名字
    def __str__(self):
        return self.name
        
        
# 这里我们给所有的类 都加上

注意:修改表段 一定要数据迁移

4.创建管理员用户

image-20201029191859415

image-20201029192001312

登录进来后,我们发现并没有数据,因为我们没有在admin中注册文件 ,现在我们来完善它

# admin.py

# 导入类的 py文件
from blog import models


# 一一注册
admin.site.register(models.Article)
admin.site.register(models.Tag)
admin.site.register(models.Category)
admin.site.register(models.Commit)
admin.site.register(models.LikeAndCollect)
admin.site.register(models.User_info)
admin.site.register(models.Blog)

注册完成 我们来看管理员界面

image-20201029193309460

已经有了内容,现在我们个他添加内容

6. 其他字段添加

image-20201029195023414

这是已经添加的

三、首页文章显示

后端代码

def index(request):
    # 查到找所有的文章 并按照发行时间 逆序 输出
    articles = models.Article.objects.all().order_by('-publish_time')
    
    return render(request, 'home.html', context={'articles': articles, })

前端代码

        <div>
            {% for article in articles %}
                <div class="media" style="margin-top: 15px">
                    <img src="/media/{{ article.blog.user_info.avatar }}" class="mr-3" alt="..."
                         style="width: 40px;height: 40px">
                    <div class="media-body">
                        <h5 class="mt-0"><a href="">{{ article.title }}</a></h5>
                        {{ article.introduction }}
                        <div>
                            <span  style="font-size: 12px;height: 12px"><a href="">{{ article.blog.user_info.username }} </a>
                                   &nbsp;&nbsp;{{ article.publish_time|date:'Y-m-d H-i-s' }} <i
                                        class="iconfont icon-dianzan-copy" style="font-size: 12px;color: grey;margin-left: 15px">{{ article.likeandcollect_set.count }}</i><i
                                        class="iconfont icon-pinglun" style="font-size: 12px;color: grey;margin-left: 15px"> {{ article.commit_num }}</i></span>
                        </div>
                    </div>
                </div>
            {% endfor %}

        </div>

ps——

commit_num = models.IntegerField(default=0)这是在文章表中新加的字段

四、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}),
    
# 但是这样还不够,我们还要在前端把 路径 拼接上去
<img src="/media/{{ article.blog.user_info.avatar }}" class="mr-3" alt="..."

五、图片防盗链

为了防止别人从 别的地方 访问我们的数据库 给我们的数据库增加压力,这种吃力没得钱的事情,我们要拒绝,所以要给我们的 图片做上防盗链

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

六、个人站点文章展示

后端

def user_info(request, name):
    user = models.User_info.objects.filter(username=name).first()
    if user:
        articles = user.blog.article_set.all()
        return render(request, 'userinfo.html', {'articles': articles,'user':user})
    return render(request, 'userinfo.html')

前端

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <img src="/media/{{ user.avatar }}"
             class="rounded float-right" width="80px" height="80px">
        <h4 class="display-4">我是{{ user.blog.site_title }}</h4>
        <p class="lead">{{ user.blog.site_name }}</p>
        <h1>欢迎!{{ user.username }}</h1>
    </div>
</div>


<div class="row">
    <div class="col-2">
        <ul class="list-group list-group-flush text-center">
            <li class="list-group-item">首页</li>
            <li class="list-group-item">分类</li>
            <li class="list-group-item">关注</li>
            <li class="list-group-item">收藏</li>
            <li class="list-group-item">帮助</li>
        </ul>
    </div>
    <div class="col-8">
        <div>
            {% for article in articles %}
                <div class="media" style="margin-top: 15px">
                    <img src="/media/{{ article.blog.user_info.avatar }}" class="mr-3" alt="..."
                         style="width: 40px;height: 40px">
                    <div class="media-body">
                        <h5 class="mt-0"><a href="">{{ article.title }}</a></h5>
                        {{ article.introduction }}
                        <div>
                            <span style="font-size: 12px;height: 12px"><a
                                    href="/{{ article.blog.user_info.username }}">{{ article.blog.user_info.username }} </a>
                                   &nbsp;&nbsp;{{ article.publish_time|date:'Y-m-d H-i-s' }} <i
                                        class="iconfont icon-dianzan-copy"
                                        style="font-size: 12px;color: grey;margin-left: 15px">{{ article.likeandcollect_set.count }}</i><i
                                        class="iconfont icon-pinglun"
                                        style="font-size: 12px;color: grey;margin-left: 15px"> {{ article.commit_num }}</i></span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

image-20201029224129497

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页