美文网首页
vue+django前后端不分离页面跳转转发请求踩坑

vue+django前后端不分离页面跳转转发请求踩坑

作者: 我很惊讶 | 来源:发表于2019-04-04 13:26 被阅读0次

    这是工作中的一个练手项目,总结一下得失,因为水平有限,不保证使用的术语和实现方法是正确的,如果有读者发现问题,希望能帮忙指出,这里表示感谢

    本篇文章不展示完整的代码,不适用于初学者学习,但遇到的问题可以借鉴

    正文开始

    • 这个项目后端使用了djang,由于不需要对数据库进行操作,实际上只用到了视图(views)系统
    • 前端使用了Element ui,而vue则直接采用了声明式渲染(这里埋下了一个大坑)
    <div id="app">
      {{ message }}
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    

    声明式渲染示例

    • 发送请求使用了axios,但是页面跳转则通过django的TemplateResponse()函数实现,所以并没有前后端分离
    // 发送请求
    var instance = axios.create({
      baseURL: 'http://127.0.0.1:8000/',
      timeout: 60000,
      // 这里是第一个坑
      headers: {'X-CSRFtoken': csrftoken}
     });
    instance.post('user/', that.form)
      .then(function (response) {
      url = `/sign?mobile=${response.data.mobile}&bankNo=${that.form.bankNo}&type=${that.form.type}`;
      window.location.href = url;
    }
    

    这里发送请求后,返回了403错误,可以看到我的请求地址是本地"127.0.0.1",查找资料后发现使用axios后会出现跨域请求问题,网上大多是资料的解决办法是跳过跨域验证,但防跨域是一个生产中经常用到的一个技术。
    django的解决办法是CSRF,这是我参考的文章:
    https://blog.csdn.net/qq_41000891/article/details/82784489

    在编写页面的过程中,由于同时使用了vue和django,导致模板发生冲突,默认情况下使用{{}}用的是django的模板语法,想用vue的{{}},可以屏蔽掉django模板,代码如下

    {% verbatim %}
        {{ vue }}
    {% endverbatim %}
    

    这是我参考的文章:
    https://blog.csdn.net/jyfu2_12/article/details/79058819

    还遇到一种情况是,我需要从页面上取数据,既然vue不推荐直接操作dom,那按照官网上的文档,使用refs,代码如下

    <p hidden="true" ref="type">{{ type }}</p>
    
    this.$refs.type.innerText;
    

    这个方法在vue官网的:迁移——v-ef和v-ref中

    相关文章

      网友评论

          本文标题:vue+django前后端不分离页面跳转转发请求踩坑

          本文链接:https://www.haomeiwen.com/subject/pbkfiqtx.html