第六十九天 BBS專案之五 js與模板語法 inclusion_tag實操,文章詳情,點贊點踩

暧昧的花蝴蝶發表於2024-03-11

一、昨日內容回顧

# 1 首頁文章的渲染
	-模板語法的for迴圈
    -bootstrap的媒體組
    -顯示頭像: articel.blog.userinfo  有可能沒有 :在admin中建立關係
    	-註冊---》申請開啟部落格功能
    -圖示庫
    	-font-awesome-4.7.0
        
# 2 個人站點樣式
	-頭部導航欄
    -左側篩選:3個皮膚
    -右側文章列表:首頁文章列表差不多
    
    -使用了模板繼承---》base.html----》儘量多的寫block
# 3 個人站點左側 標籤,分類,隨筆檔案的渲染
	-查詢出標籤id,名字,標籤下的文章數
    -查詢出分類id,名字,分類下的文章數
    -查詢出時間名字,時間下的文章數
    
    -查分類id,名字,當前部落格下的----》單表查詢+過濾
    -查分類id,名字,當前部落格下的,分類下的文章數---》分組  group by
    selcet category.id,category.name,count(article.id) as c from category,article where category.id=article.cagegory and category.blog=2 group by category.id; Category.object.filter(blog=user.blog).values('id').annotate(c=Count(articel__id)).values('id','name','c')

    
# 4 左側點選過濾
	-設計路由
    	-按標籤過濾:/lqz/tag/標籤id號.html
        -按分類過濾:/lqz/category/分類id號.html
        -按時間過濾:/lqz/archive/202209.html
    -三個路由歸一
    	re_path('^(?P<name>\w+)/(?P<type_name>tag|category|archive)/(?P<condition>\d+).html', views.site),

    -檢視函式,統一用site檢視函式
    	-

### 擴充套件作業
# 原來輪播圖使用模板語法渲染的
# 輪播圖使用ajax渲染
-當頁面載入完成傳送ajax請求

    $(function () {
       $.ajax({
           url:'/get_banner/',
           type:'get',
           success:function (data){
               console.log(data)
               // {code:100,msg:成功,data:[{id:1,img:/banner/bannner1.jpg,name:'asdf',link:'/login/'},{id:1,img:/banner/bannner1.jpg,name:'asdf',link:'/login/'}]}
               // 透過dom操作,把img地址,放到 輪播圖img的src中即可
           }
       })
    })

def get_banner(request):
    res = Banner.objects.all().values('id', 'img', 'name')[:2]
    # 如果這裡用JsonResponse序列化不了,把res轉成列表套字典的形式
    return JsonResponse({'code': 100, 'msg': '成功', 'data': res})
"""
$(function ()就是檔案載入完成的意思
windows.onload也行
"""

二、模板和模板語法的區別

# 模板語言---》模板---》不是前端頁面---》區分開
-django中:模板語法,dtl:django template language,django自己設計,寫的
-flask中:模板語法:jinja2,第三方
-java: jsp  理解為:java web 的模板語言
-php:  php  <? php語言 >

-xx.html 中寫了python程式碼,這個不是前端頁面,叫模板
"""
個人的理解是前端就是用前端自己的語言寫的。模板的渲染是後端完成的,所以前端中的python語言理論上為模板
"""

相關文章