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

Posted 汪小鹏

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习随笔:Vue.js与Django交互以及Ajax和axios相关的知识,希望对你有一定的参考价值。

1. Vue.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

以上是关于学习随笔:Vue.js与Django交互以及Ajax和axios的主要内容,如果未能解决你的问题,请参考以下文章

vue.js事件,属性,以及交互

如何将 vue.js 与 django 集成?

python学习随笔--django 上

19_《基于Vue.js和Javalin框架的学生宿舍社交平台WebAPP应用程序的设计与开发》随笔

使用 Vue.js 开发富交互式应用

vue.js学习笔记一