当前位置: 首页 > article >正文

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

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

  • 为什么需要传递?
  • 如何做

为什么需要传递?

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

如何做

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

  1. Django 视图 (views.py)
def view_job(request):
    currentUser = request.user.username  # 拿到当前登录的用户名
    return render(request, 'admin/view.html', {'currentUserName': currentUser})# 注意一定要用{}括起来,可以看做我们c++中的赋值,即 currentUserName = currentUser
  1. 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);
          }
        },
      },

http://www.kler.cn/a/587812.html

相关文章:

  • python-53-分别使用flask和streamlit进行向量存储和检索的服务开发实战
  • C语言中的指针与函数
  • 【PyMySQL】Python操作MySQL
  • 利用Python爬虫根据关键词获取商品列表
  • OpenHarmony 5.0 MP4封装的H265视频播放失败的解决方案
  • idea 2023社区版自动生成 serialVersionUID
  • 洛谷P11043
  • Redisson 分布式锁全面解析:锁类型(可重入锁、公平锁、联锁、红锁、读写锁)和锁常见方法解读
  • redis删除与先判断再删除的区别
  • deepseek+kimi做ppt教程记录
  • VSCode通过SSH远程登录Windows服务器
  • docker网络问题导致dify添加API不能成功,如添加SearXNG
  • 人工智能之数学基础:如何将线性变换转换为矩阵?
  • 【视频】V4L2、ffmpeg、OpenCV中对YUV的定义
  • Mysql连接---语言连接和图形化界面
  • ssh转发笔记
  • K8S学习之基础三十:k8s的资源访问方式
  • 监控快手关注列表更新以及去视频水印视频
  • 【Linux】多线程互斥问题 和 锁
  • 电脑怎么控制机器人工作