BBS項目day3

• 一 首頁頁面搭建（輪播圖）
• • 前端
  • js
  • js升級版
  • 后端
• 二 admin后臺管理
• • 路由
  • admin.py中注冊
  • setting中配置國際化
  • 表名顯示中文
  • 字段顯示中文
  • 字段下方的提示文本（不影響數據）
  • 一行行數據顯示中文
  • blank
• 三 首頁文章顯示
• • 后臺
  • 前臺
• 四 media及頭像顯示
• 五 圖片防盜鏈
• 六 個人站點文章顯示
• • 路由
  • 視圖
  • 頁面

一 首頁頁面搭建（輪播圖）

前端

<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"><imgsrc="https://csdnimg.cn/feed/20201021/8e58d6d12982c68fedc8941246dfbcda.jpg" # 之后會用ajax替換掉圖片與文本alt="..." class="img"></a><div class="carousel-caption">廣告位招商</div></div><div class="item"><a href=""><imgsrc="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) { // 遍歷從后端傳來的列表l1console.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><spanclass="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><spanclass="glyphicon glyphicon-comment"><iclass="fa fa-flickr1 fa-lg"></i> {{ article.commit_num }}</span><span><a href="">編輯</a></span></div></div>{% endfor %}</div></div></div></div> </body> </html>

總結

以上是生活随笔為你收集整理的Django学习 day74之BBS项目day3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。