django与vue交互的错误问题

yhwu123

已于 2023-05-24 11:07:10 修改

阅读量158

点赞数 1

文章标签： django vue

于 2023-05-22 18:34:03 首次发布

本文链接：https://blog.csdn.net/yhwu123/article/details/130812714

版权

2023.5.22
在vue与django传递数据中出现了一个问题。当django向vue传递数据后，vue接受数据，值已发生改变。但是前端页面并不会显示数据而且模板语法({{ }})失效，无法观察到对应变化。

前端代码
<div id="box">
   <button @click="handleClick">加载数据</button>
    <p>{{ myText }}</p>
</div>

  let vm = new Vue({
        el: '#box',
        data: {
            myText: 'change'
        },
        methods: {
            handleClick() {
                $.ajax({
                    url:
                    method: 'get',
                    success: (data) => {
                        console.log(data)
                        this.myText = data
                    }
                })
            },
        }
    })

后端代码
def login(request):
    print('到这里')
    res = 'hello world'
    return HttpResponse(res)

结果
1.进入页面看不到myText的值。
2.点击handleClik按钮没有反应,但是myText的值已经发生改变。

改进方法

#将以下代码
 <p>{{ myText }}</p>
 this.myText = data
#改成下面这样，成功显示数据
<p v-html="myText"></p>
vm.myText = data
归根到底是因为this指向的不同的对象
更多方法请看
https://blog.csdn.net/qq_26780317/article/details/120130388

2023.5.23
又是vue与django之间传输数据的问题，区别在于今天不是用ajax而是用了axios。原因在于axios更方便，但不出意外的又出现了问题！当前端后后端传递值的时候，前端有值而且已经发生了变化但是后端接受时，发现接受到的数据为空。

前端
<body>
        <div id="signin">
            <h3>登录账号</h3>
            <form>
                <div class="form-elem">
                    <span>账号：</span>
                    <input v-model="signinName" type="text" placeholder="输入用户名">
                </div>

                <div class="form-elem">
                    <span>密码：</span>
                    <input v-model="signinPwd" type="password" placeholder="输入密码">
                </div>

                <div class="form-elem">
                    <button @click="login">登录</button>
                </div>
            </form>
        </div>
</body>
<script>
    let vm = new Vue({
        el : '#signin',
        data: {
            signinName: '',
            signinPwd: ''
        },
        methods: {
            login(){
               axios.post('/app01/login/',{
               		'username':this.signinName,
               		'password':this.signinPwd
               }
                ).then(function (response){
                    console.log(response)
                })
            }
        }
    })
</script>

后端
def login(request):
    print('到这里')
    if request.method == 'POST':
        print('进来了')
        print(request.POST)
        return HttpResponse('已经收到')
    return render(request,'login.html')
运行程序后发现，无论页面框内填入什么值都是传递无效的，因此我找了大量博客终于找到了解决办法。
将代码
login(){
         axios.post('/app01/login/',{
         		'username':this.signinName,
         		'password':this.signinPwd
         }
          ).then(function (response){
              console.log(response)
          })
      }
  }
改为
login(){
    var params = new URLSearchParams();
    params.append('username',this.signinName)
    params.append('password',this.signinPwd)
   axios.post('/app01/login/',params
    ).then(function (response){
        console.log(response)
    })
}
原因在于请看这个
https://blog.csdn.net/lucky__peng/article/details/120399235
除此之外，这个大佬还用了好多种办法，真的厉害！

2023.5.24
今天是前端问题，通过button按钮发送请求时会发送两次请求

<button  @click="login">登录</button>
原因在于提交方法是因为：1.button的type是submit；2.该button的onclick也执行了一次。
改正方式为
button默认type为submit，所以可以设置为type="button",或者将button用a标签代替
<button type=button  @click="login">登录</button>就可以了

yhwu123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
django与vue交互的错误问题

在vue与django传递数据中出现了一个问题。当django向vue传递数据后，vue接受数据，值已发生改变。但是前端页面并不会显示数据而且模板语法({{ }})失效，无法观察到对应变化。
复制链接

扫一扫