1. 程式人生 > >10.2博客項目

10.2博客項目

img 復制粘貼 -- render 是否 事件 獲取 article 定義

2018-10-2 17:47:48

越努力越幸運!永遠不要高估自己!

放上github連接: https://github.com/TrueNewBee/bbs_demo

 增添了評論和回復評論的功能!並且在文章詳情頁面通過AJjax顯示了評論樹

評論功能的實現:

  1.先在html中寫好div 這個可以復制粘貼,畢竟做開發呀

  2. Ajax 獲取數據評論表所需要的數據,然後發給後端

  3.後端接受數據,去評論表裏面創建數據,判斷一下是根評論,還是子評論,就是pid是否有值.空則是根評論,有值則是子評論

  4.返回給前端,然後通過在html添加數據,顯示添加過後的評論就好了

回復評論,: 

  1. 也在html中寫好div

  2. 通過在回復這個a標簽綁定一個 fuction函數,就焦點函數,點到這個標簽就跳轉到input框中

  3.直接在input框中賦好值

  技術分享圖片

  4.因為提交按鈕綁定的都是同一個事件,只是pid的變量值不一樣而已!所以周免都一樣

評論樹的操作!

  1.先在html中寫好div

  2. 通過Ajax請求向後端傳入文章的id

  3.後端發給前端相應的數據

  4.Ajax拿到數據,然後動態的添加div標簽吧數據填上去

    然後把$.each循環一下

    增加個if判斷,判斷是根評論還是子評論

    父評論

      子評論

        子評論

  類似於這樣,就是一個div套著一個div 顯示層級的關系

技術分享圖片

以上就是這個功能實現的思路!

還有那個回復評論的 Ajax 樣式沒有添加其實和那個評論的Ajax如出一轍!

這裏只註重邏輯實現 樣式什麽的等做完這個項目再一點一點來!

貼上筆記

作業
    1.一旦js文件變為靜態文件,點贊js代碼如何重構
    
    可以把需要查到的變量先定義到html代碼中,然後在js靜態文件中用
    jQuery 查找哪個變量,然後取到值就好了 
    <div class="info" article_id="{{article.pk}}}"></div>
    然後在js中拿
    var article_id 
= $(".info").attr("article_id") 評論 1 提交根評論 2 顯示根評論 --- render顯示 --- ajax顯示 3 提交子評論 4 顯示子評論 ---- render顯示 ---- Ajax顯示(擴展) 5 評論樹 111 222 333 444 555 111 444 555 222 333 博客:富文本編輯器 beautfulSoup模塊 ret=Book.objects.all().exist() # sql; limit 1 if ret: print("OK") Book.objects.all().distinct() # XXXX select distinct(age) from Book Book.objects.all().values("title").distinct()

10.2博客項目