學習隨筆:Vue.js與Django交互以及Ajax和axios

1. Vue.js地址

• Staticfile CDN(國內):

  https://cdn.staticfile.org/vue/2.2.2/vue.min.js

• unpkg：會保持和npm發佈的最新的版本一致

  https://unpkg.com/vue/dist/vue.js

• cdnjs:

  https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

2. django 和vue語法衝突處理 : {{}}

2.1 方法1:

在new Vue設置:

`delimiters:['[[', ']]']`,

而後在html使用 `[[ ]]` 代替 `{{}}`

2.2 方法2:

使用

`{% verbatim myblock %} {% endverbatim myblock %}`

包裹vue裏面的`{{}}`,

此標籤包裹的代碼將不會被Django的模板引擎渲染

3. Django的數據傳遞給Vue

• django服務端代碼:

  def vue_views(request):
      List = [{'age':18},200]
      OBJ = {"name":"隔壁老王"}
      dic = {
          'list':json.dumps(List),
          'obj':json.dumps(OBJ)
      }
  
      return render(request,'Vue.html',dic)

  • 傳遞數據是用json傳遞過去的，不然會報錯

• Vue前端代碼:

  <script>
      var list = {{ list | safe }}
      var obj = {{ obj | safe }}
      console.log(list,obj)
  </script>

4. Vue的數據傳遞給Django

4.1 axios方法

4.1.1 get傳遞方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get('/newmodle?a=1&b=2')
    .then(function (response) { 
    console.log(response)
    console.log(response.data)
    })
</script>

4.1.2 post傳遞方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<script>
    function getCookie (name) {
        var value = '; ' + document.cookie
        var parts = value.split('; ' + name + '=')
        if (parts.length === 2) return parts.pop().split(';').shift()
    }

    axios({
        url: '/newmodle/',
        method: 'post',
        responseType: 'json', // 默認的
        data: Qs.stringify({
            'a': 1,
            'b': 2, 
        }),
        headers: {
            'X-CSRFToken': this.getCookie('csrftoken')
        }
    })
    .then(function (response) {
        console.log(response)
        console.log(response.data)
    })
</script>

• django會在瀏覽器的cookie裏面保存一項csrftoken,當進行POST請求時會進行驗證

4.2 ajax方法

• 使用全局對象方式 Vue.http 或者在一個 Vue 實例的內部使用 this.$http來發起 HTTP 請求

• Vue 要實現異步加載須要使用到 vue-resource 庫

  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

4.2.1 get傳遞方式

this.$http.get('/user/newmodle?a=1&b=2')
.then(function(response){
    console.log(response);
    console.log(response.data)
}

4.2.2 post傳遞方式

<script src="/static/vue.min.js"></script> 
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>  
<script>
    function getCookie (name) {
        var value = '; ' + document.cookie
        var parts = value.split('; ' + name + '=')
        if (parts.length === 2) return parts.pop().split(';').shift()
    }
    
    var app = new Vue({ 
        el : '#app',
        data : {
            text:''
        },
        mounted:function(){
            this.$http({
            url: '/newmodle',
            method: 'post',
            responseType: 'json',
            data: Qs.stringify({
                'a': 1,
                'b': 2, 
            }),
            headers: {'X-CSRFToken': getCookie('csrftoken')}
            })
            .then(function (response) {
            console.log(response);
            console.log(response.data);
            })
        }
    })
</script>

5. Ajax 與 axios

• Ajax

  Ajax 即「Asynchronous Javascript And XML」,是指一種建立交互式網頁應用的網頁開發技術

  • Ajax = 異步 JavaScript 和 XML(標準通用標記語言的子集)
  • Ajax是一種用於建立快速動態網頁的技術
  • Ajax是一種在無需從新加載整個網頁的狀況下,可以更新部分網頁的技術
  • 經過在後臺與服務器進行少許數據交換,Ajax 能夠使網頁實現異步更新.這意味着能夠在不從新加載整個網頁的狀況下,對網頁的某部分進行更新
  • 傳統的網頁（不使用 Ajax）若是須要更新內容，必須重載整個網頁頁面

• axios：

  用於瀏覽器和node.js的基於Promise的HTTP客戶端

  1. 從瀏覽器製做XMLHttpRequests
  2. 讓HTTP從node.js的請求
  3. 支持Promise API
  4. 攔截請求和響應
  5. 轉換請求和響應數據
  6. 取消請求
  7. 自動轉換爲JSON數據
  8. 客戶端支持防止XSRF