使用Django構建個人網站（八）——使用AJAX完成瀏覽量的增加

這篇博客的涉及的內容就比較多了，主要是爲了完善每一篇博客的基本信息。如下圖中的

主要還是數據庫的操作，點贊部分的功能我決定使用ajax前後端交互來完成，剩下的評論部分先留個坑，以後增加了多用戶管理的時候再來進行。

這部分涉及到前端知識，我已經很久沒有複習前端的知識了，可能用起來比較生疏，正好寫下這篇博客加深一下印象 。

目錄

一、瀏覽量統計

二、AJAX動態加載

---

一、瀏覽量統計

這裏的瀏覽量統計，比較簡單，我不打算區分每個IP地址，我的想法是，只要這個博客被點進去一次，瀏覽量就加一，那麼問題來了，我們還沒有完成任何一個“單個博客的顯示界面”，先隨便寫一個吧。

{%for blog in blogs %}
                <div style="margin-top: 15px;">
                    <div style="background: #F5F5F5;padding-left: 5px;">
                        <h1><a href=""><img
                                    src="https://gw.alipayobjects.com/zos/rmsportal/tJPyCvjhWOixZmGqXHSS.png">&nbsp;{{blog.category}}</a>
                <!-- 在這裏增加href，顯示單個博客的界面 -->
                            <a href="/blog/{{blog.id}}"><small>{{blog.title}}</small></a>
                        </h1>
                        <div class="row">
                            <div class="col-md-3">
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/tJPyCvjhWOixZmGqXHSS.png"
                                    width="100%">
                            </div>
                            <div class="col-md-9">
                                <p>{{blog.body|truncatechars:30}}</p>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-2 col-md-offset-2"><span class="glyphicon glyphicon-user"></span>
                                    {{blog.author}}
                                </div>
                                <div class="col-md-1"><span class="glyphicon glyphicon-eye-open"></span>

                                </div>
                                <div class="col-md-1"><span class="glyphicon glyphicon-heart-empty"></span>
                                </div>
                                <div class="col-md-1"><span class="glyphicon glyphicon-pencil"></span>
                                </div>
                                <div class="col-md-4"><span class="glyphicon glyphicon-time"></span>
                                    {{blog.published}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}

看代碼，單個博客的訪問路徑是/blog/{{blog.id}}，也就是說要傳一個id參數，那麼就要增加一個新的url，在./blog/urls.py中增加如下代碼：

urlpatterns = [
    path('', blog_list),
    path('<int:blog_id>', blog_detail)
]

在/blog/views.py中增加如下代碼:

def blog_detail(request, blog_id):
    return HttpResponse("第%s個博客詳細界面" % blog_id)

現在再訪問，就可以獲得這個界面了：

OK，既然要設計瀏覽功能，那我就是想只要有人進入這個界面，就給這個博客的某個屬性+1，即可。

爲博客增加點贊屬性，修改/blog/models.py，增加see字段：

class Blog(models.Model):
    title = models.CharField(max_length=30)
    # 設置外鍵引用，引用作者
    author = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name="blogs")
    # 設置外鍵引用，引用分類
    category = models.ForeignKey(
        Category, on_delete=models.CASCADE, related_name="blogs")
    body = models.TextField()
    # 設置自動添加時間戳
    published = models.DateTimeField(auto_now_add=True)
    #瀏覽量，默認爲0
    see = models.IntegerField(default=0)

    class Meta:
        # 按時間倒序排列在後臺管理器
        ordering = ["-published"]

    def __str__(self):
        return self.title

 加完了以後記得提交

python manage.py makemigrations ,  python manage.py migrate

再修改視圖處理函數/blog/views.py，

def blog_detail(request, blog_id):
    blog = Blog.objects.get(id=blog_id)
    blog.see += 1
    return HttpResponse("第%s個博客詳細界面" % blog_id)

 接下來，在前端界面展示即可，修改blog.html的for循環部分，如下:

                {%for blog in blogs %}
                <div style="margin-top: 15px;">
                    <div style="background: #F5F5F5;padding-left: 5px;">
                        <h1><a href=""><img
                                    src="https://gw.alipayobjects.com/zos/rmsportal/tJPyCvjhWOixZmGqXHSS.png">&nbsp;{{blog.category}}</a>
                            <a href="/blog/{{blog.id}}"><small>{{blog.title}}</small></a>
                        </h1>
                        <div class="row">
                            <div class="col-md-3">
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/tJPyCvjhWOixZmGqXHSS.png"
                                    width="100%">
                            </div>
                            <div class="col-md-9">
                                <p>{{blog.body|truncatechars:30}}</p>
                            </div>
                            <div class="col-md-12">
                                <div class="col-md-2 col-md-offset-2"><span class="glyphicon glyphicon-user"></span>
                                    {{blog.author}}
                                </div>
<!-- 在這裏設置瀏覽量 -->
                                <div class="col-md-1"><span class="glyphicon glyphicon-eye-open"></span>{{blog.see}}

                                </div>
                                <div class="col-md-1"><span class="glyphicon glyphicon-heart-empty"></span>
                                </div>
                                <div class="col-md-1"><span class="glyphicon glyphicon-pencil"></span>
                                </div>
                                <div class="col-md-4"><span class="glyphicon glyphicon-time"></span>
                                    {{blog.published}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}

 這樣子，每瀏覽一次，這個see就會加一，這篇博文的第二部分將講解瀏覽量的AJAX動態加載.

二、AJAX動態加載

我個人學習前端已經是很久以前的事情了，對於ajax可能就忘記的更多了，爲了回憶ajax的使用方法，也爲了給後面點贊功能做好一個功課，我就先把ajax整一下。

話說做起來的時候發現忘性是真的非常厲害的！

首先複習一下AJAX四部曲：

1、建立對象

var xhr = createXHR();
//第一個參數是請求方法，第二個參數時請求的url,第三個參數是確定同步還是異步。
//同步方式會ajax執行完畢後再執行下面的代碼，異步與之相反
xhr.open('get', '/blog/view', true);

2、響應函數

xhr.onreadystatechange = function(){

}

3、發送請求

xhr.send(null);

上面的事例中，我已經確定了使用get方式，url爲/blog/view

因此，在./blog/urls.py中添加url：

from django.contrib import admin
from django.urls import path
from .views import *

urlpatterns = [
    path('', blog_list),
    path('<int:blog_id>', blog_detail),
    #新添加url
    path('view', blog_view),
]

接下來在./blog/views.py中寫視圖函數blog_view：

def blog_view(request):
    blogs = Blog.objects.all()
    List = list()
    for blog in blogs:
        List.append(str(blog.see) + ',')
    return HttpResponse(List)

它的作用就是返回瀏覽量數組給js文件。

js文件引入，在blog.html最後加入如下代碼：

                <script src="/static/js/blog.js">
                </script>

在/static/js/blog.js中寫下這些ajax代碼即可：

var xhr = new XMLHttpRequest();
xhr.open('get', '/blog/view', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        response = xhr.responseText;
        console.log(this.response);
        var list = this.response.split(',');
        console.log(list[0]);
        num = document.getElementsByClassName('bloginfo').length;
        console.log(num);
        for (var i = 0; i < num; i++){
            document.getElementsByClassName('viewNum')[i].innerHTML = '<span class="glyphicon glyphicon-eye-open"></span>&nbsp;' + list[i];
        }
    }
}
xhr.send(null);

在這裏我用for循環爲每一個顯示在這裏的博客都設置了瀏覽量，值得注意的是，我還要把瀏覽量前面的文字圖標也加上，仔細看for循環應該就是看得懂了

三、總結

這一部分難度不大，主要就是js的應用確實忘了太久了，紅寶書翻了一陣子，研究透了纔敢來寫。頭大，後面的點贊功能怕是涉及到更復雜的ajax請求呢！

點贊功能我先跳過了，因爲涉及到用戶層次，而我還沒做好這個準備，下次我計劃把側邊欄完善清楚。

側邊欄也有難點，按時間日期對博客進行分類，看起來挺容易，其實還是很難的，加油！每次寫博客都是一次進步！