Vue与Django是如何传递参数的?

踏过山河，踏过海

已于 2025-03-13 10:30:30 修改

阅读量248

点赞数 1

分类专栏：全栈-前端文章标签： Vue

于 2025-03-12 17:47:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52668597/article/details/146210892

版权

全栈-前端专栏收录该内容

4 篇文章

订阅专栏

Vue与Django是如何传递参数的?

为什么需要传递?
如何做

为什么需要传递?

比如说你要一个用户名,你就必要用到request,那request就只能出现在def view_job(request)中

如何做

Django说白了,还是一堆Python脚本,就比如说下面这个例子:

Django 视图 (views.py)

def view_job(request):
    currentUser = request.user.username  # 拿到当前登录的用户名
    return render(request, 'admin/view.html', {'currentUserName': currentUser})# 注意一定要用{}括起来,可以看做我们c++中的赋值,即 currentUserName = currentUser

Django 模板 (admin/view.html)
那我们现在是可以从views.py脚本中拿到currentUserName这个变量的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>View</title>
    
    2.为了确保currentUserName传过来了,我们直接用一个标签来展示这个变量,注意要使用这个变量,你要用两个{{}}括住才可以进行转义!!!
    <div id="app">
        <!-- Your Vue template here -->
        <p>Current User: {{ currentUserName }}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    xxxxxx: [],
                    xxxx: [],
                    xxxxxx: '',
                    xxxxxxxx: false,
                    xxxxxxxxxxxxx: null,
                    1.我们直接就用下面这种写法,就可以拿到currentUserName这个变量.
                    currentUserName: '{{ currentUserName }}',  // 将 Django 变量传递给 Vue
                };
            },
            mounted() {
  
            }
        });
    </script>
</body>
</html>

computed: {
        filteredData() {
          if (this.search) {
            return this.tableData.filter(item =>
              item.sampleName.toLowerCase().includes(this.search.toLowerCase())
            );
          } else {
          	//直接在这里进行过滤,
          	//item.userName是保存在数据库中,这项操作的用户名;this.currentUserName是当前登录的账号
          	//只有在相等时,才会显示
          	//也就说,自己只能看到自己的操作
            // return this.tableData;
            return this.tableData.filter(item => item.userName === this.currentUserName);
          }
        },
      },