学习随笔:Vue.js与Django交互以及Ajax和axios

Posted 2021-02-13 汪小鹏

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