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及头像显示
-
用户上传的头像能够在浏览器中访问到
-
默认情况下,static下的都能访问
-
medis文件夹下的图片不能访问, 需要手动打开
-
使用方式
- 项目根路径下新建media文件夹
setting
中配置MEDIA_ROOT=os.path.join(BASE_DIR,'media')
- 路由中:
from django.views.static import serve # 建议使用这个setting from django.conf import settings # 整个项目的配置文件 re_path('^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
五 图片防盗链
- 我们如何做图片防盗链
-请求头中referer:地址
上一个地址是什么
防盗链就是判断上一个地址是否属于自己的网址,如果不是就禁用 - 具体代码实现(了解即可)
六 个人站点文章显示
路由
用人名来拼写,注意一定要放在最下面一个路由,因为这个正则基本匹配所有网站了,在它之下的路由根本就过不去
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>