Flask template+Vue +项目中include引入其他模版（其他模版也会用到vue）的使用探索

news2024/11/19 23:18:08

项目背景是：团队的历史项目，是flask tmeplate写的前段页面。然后我在一个页面A.html中引入了vue文件，使用了vue+element_ui技术。现在想在此A页面中插入另外一个页面B.html的内容（试图tab分开），因为入口只有A页面作为入口，想要在B.html中实现不同与A的功能。

尝试1，html文件中可以存在多个vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="{{ url_for('static', filename='js/vue.js') }}" type="text/javascript"></script>
        <script src="{{ url_for('static', filename='js/axios.min.js') }}" type="text/javascript"></script>

        <!-- 引入样式 -->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
{{done}}
    <div id="app">

        <h1>
        {{ "{{" }} msg {{ "}}" }}</h1>
        <div>hello</div>
    </div>
    <div id="app-body">
        <h4>

        {{ "{{" }} title {{ "}}" }}</h4>
        <div>hello</div>
    </div>
    <div class="app-footer">
        <h4>
        {{ "{{" }} footer {{ "}}" }}</h4>
        <div>hello</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    msg: "前段vue使用",
                }
            }
        });
</script>
    <script>
        const vmBody = new Vue({
            el: '#app-body',
            data: function () {
                return {
                    title: "vue实例2"
                }
            }
        });
</script>
    <script>
        const vmFooter = new Vue({
            el: '.app-footer',
            data: function () {
                return {
                    footer: "vue实例3",
                }
            }
        });
</script>
</body>
</html>

前端：

但是全都写到一起，虽然可以分为两个vue实例来处理，但是不想两个功能的html代码和vue代码参和在一个文件中，导致一个文件太大太乱。 

尝试2，可以通过 flask template的jinjia语法 include来引入外部模块 （注意此种用法不是很大众，出现了问题，并未解决，急需大牛帮我看看问题所在，不胜感激！！）

比如在A.html中的某个位置

{% include './new_module/B.html' %}

导入B的内容。A.html内容如下：

div id="order">
  <el-tabs type="border-card" v-model="active_tab_name">
        <el-tab-pane name="pc_side">
            <span slot="label" class="order_tab_title"><i class="el-icon-s-platform
"></i> A部门工单申请</span>
            <div id="main_index">  
                      
                          A页面的主要内容

           </div>
</el-tab-pane>
        <el-tab-pane  name="">
        <span slot="label" class="order_tab_title"><i class="el-icon-search
"></i> B部门工单申请</span>
   {% include './order_manage/param_test.html' %}

 </el-tab-pane>
    </el-tabs>

注意：导入的内容是无法解析<script>标签的。若B.html的内容如下存在script标签。


<div id="param_order_search">
        <div>
        <el-form ref="form" :model="form" label-width="80px">
             <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

            <el-form-item>
    <el-button type="primary" @click="is_test_method()">立即创建sss</el-button>
    <el-button type="primary" @click="bye_msg='bye2bye2'">立即创建222</el-button>
    <el-button>取消</el-button>
  </el-form-item>

        </el-form>
    </div>
    <div>
          再见再见 {{"{{"}} bye_msg {{"}}"}}

   </div>
</div>



<script>
     var create_param_search = new Vue({
            el: "#param_order_search",
            data: function () {
                return {
                    sub_msg: "感谢阅读",
                    bye_msg: "bye bye",
                    form:{
                        name:"参数名称"
                    }
                }
            },
               mounted:function (){
                console.log("create_param_search mounted")
                this.is_test_method()
               },
              methods:{
                is_test_method(){
                    console.log("is_test_method")
                }
              }
        })
</script>

出现的错误如下： 

vue.js:634 [Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed

于是想了迂回的方法：使用 template 的jinjia方法：macro

如是B.html变为：

<div id="param_order_search">
        <div>
        <el-form ref="form" :model="form" label-width="80px">
             <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

            <el-form-item>
    <el-button type="primary" @click="is_test_method()">立即创建sss</el-button>
    <el-button type="primary" @click="bye_msg='bye2bye2'">立即创建222</el-button>
    <el-button>取消</el-button>
  </el-form-item>

        </el-form>
    </div>
    <div>
          再见再见 {{"{{"}} bye_msg {{"}}"}}

   </div>
</div>

{% macro create_param_search() %}

          var create_param_search = new Vue({
            el: '#param_order_search',
            data: function () {
                return {
                    sub_msg: "感谢阅读",
                    bye_msg: "bye bye",
                    form:{
                        name:"参数名称"
                    }
                }
            },
             template:"#tem",
               mounted:function (){
                console.log("create_param_search mounted")
                is_test_method()
               },
              methods:{
                is_test_method(){
                    console.log("is_test_method")
                }
              }
        })
{% endmacro %}

在A.html的scipt中（与第一个vue实例一起的script中）

于是A.html的script变为：

 <script>

 {% from "./order_manage/param_test.html" import create_param_search %}
        {{ create_param_search() }}
 

        var order= new Vue({
            el: "#order",
            data: {
               ........
</script>

页面也能正常加载

查看页面源码，发现B.hmtl的代码已经加载进入A.html中，但是控制台查看元素中button中是没有绑定相关click代码的。

  <el-tab-pane >
        <span slot="label" class="order_tab_title"><i class="el-icon-search
"></i> B部门工单申请</span>




                    


<div id="param_order_search">
        <div>
        <el-form ref="form" :model="form" label-width="80px">
             <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

            <el-form-item>
    <el-button type="primary" @click="is_test_method()">立即创建sss</el-button>
    <el-button type="primary" @click="bye_msg='bye2bye2'">立即创建222</el-button>
    <el-button>取消</el-button>
  </el-form-item>

        </el-form>
    </div>
    <div>
          再见再见 {{ bye_msg }}

   </div>
</div>


 ......

 <script>
          var create_param_search = new Vue({
            el: '#param_order_search',
            data: function () {
                return {
                    sub_msg: "感谢阅读",
                    bye_msg: "bye bye",
                    form:{
                        name:"参数名称"
                    }
                }
            },
               mounted:function (){
                console.log("create_param_search mounted")
                is_test_method()
               },
              methods:{
                is_test_method(){
                    console.log("is_test_method")
                }
              }
        })

        
        
     

        var order= new Vue({
            el: "#order",
            data: {
                    ......
</script>

但是出现了问题：方法无法调用！！！至今没找到解决办法

点击页面的按钮，方法没有被调用，隐约觉得原因是因为include加载模块后渲染没有识别vue的代码写法丢弃了。但是为啥能识别elment_ui的写法呢？不解....

尝试3，使用import导入script vue代码，然后vue实例加载template模版

此种方法B.html内容是：


<template id="param_order_search">
    <div >
        <div>
        <el-form ref="form" :model="form" label-width="80px">
             <el-form-item label="活动名称">
    <el-input v-model="bye_msg"></el-input>
  </el-form-item>

            <el-form-item>
    <el-button type="primary" @click="is_test_method()">立即创建sss</el-button>
    <el-button type="primary" @click="bye_msg='bye2bye2'">立即创建222</el-button>
    <el-button>取消</el-button>
  </el-form-item>

        </el-form>
    </div>
    <div>
          再见再见 {{"{{"}} bye_msg {{"}}"}}

   </div>
</div>
</template>

{% macro create_param_search() %}

          var create_param_search = new Vue({
            el: '#param_order_search_top',
            data: function () {
                return {
                    sub_msg: "感谢阅读",
                    bye_msg: "bye bye",
                    form:{
                        name:"参数名称"
                    }
                }
            },
               mounted:function (){
                console.log("create_param_search mounted")
                this.is_test_method()
               },
              methods:{
                is_test_method(){
                    console.log("is_test_method")
                }
              }
        })
{% endmacro %}

 A.html中展示B内容的区域的代码为：

 <div id="param_order_search_top">
                 下面是挑战性内容哦！！
                            <create_param_search></create_param_search>

            </div>

.......

 <script>
 {% from "./order_manage/param_test.html" import create_param_search %}
        {{ create_param_search() }}

var order= new Vue({
            el: "#order",
            data: {
.....

结果就是报错：

Unknown custom element: <create_param_search> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

应该是 模版渲染+vue解析 时机和import代码解析时机是有时差的，所以导致没发现import的vue代码

尝试4：目前看下来是可行的。使用iframe来加载B.html到A.html中,b。html中写html代码及js代码。

可参考我的另外一篇博客：

Flask template中使用iframe-CSDN博客 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1294405.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

matplot绘图时图像太大报错但能保存

matplot绘图时图像太大报错但能保存

matplot绘图时&#xff0c;图像太大&#xff0c;可能在jupyter里面报错&#xff0c;但是图像可以保存。 报错&#xff1a;Image size of 12237479x675 pixels is too large. It must be less than 2^16 in each direction. 在这里插入图片描述
阅读更多...
数字图像处理（实践篇）十九 漫水填充

数字图像处理（实践篇）十九 漫水填充

目录 一 漫水填充算法--FloodFill 二 涉及的函数 三 实践 一 漫水填充算法--FloodFill FloodFill漫水填充算法就是选中与种子点相连接的区域&#xff0c;利用指定颜色进行区域颜色填充。可以通过设置连通方式或像素的范围控制填充的效果。通常是用来标记或者分离图像的一部…
阅读更多...
（c语言进阶）联合

（c语言进阶）联合

一.定义 联合体与结构体极其相似&#xff0c;只不过联合体的所有成员是共用同一块内存的。 二.联合体大小的计算 联合体共用内存的大小为联合体成员大小的最大值来定 #include<stdio.h> union Un {int a;char c; }; int main() {union Un u;printf("%zu",s…
阅读更多...
Leetcode—213.打家劫舍II【中等】

Leetcode—213.打家劫舍II【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—213.打家劫舍II 算法思路 实现代码 class Solution { public:// 左闭右开int rob1(vector<int>& nums, int start, int end) {int n nums.size();int f0 0, f1 0, new_f 0;for(int i start; i < end…
阅读更多...
新生儿出生缺陷筛查的关键注意事项

新生儿出生缺陷筛查的关键注意事项

引言&#xff1a; 新生儿的出生缺陷是一个复杂而广泛的问题&#xff0c;及早的筛查和诊断对于预防和管理这些缺陷至关重要。出生缺陷可能涉及各个系统&#xff0c;包括心脏、神经、遗传等&#xff0c;因此及时而全面的筛查对新生儿的健康至关重要。本文将深入探讨新生儿出生缺…
阅读更多...
AMC8竞赛第一题很简单？来看看历年的真题体会一下（含详细解析）

AMC8竞赛第一题很简单？来看看历年的真题体会一下（含详细解析）

作为具有全球影响力的&#xff0c;面向中小学生的数学竞赛&#xff0c;AMC8在中国的知名度和参与人数也越来越多。 和国内的各种数学比赛相比&#xff0c;AMC8有一个很有意思的地方&#xff1a;全部是单项选择题&#xff0c;没有其他题型。所以不用担心做不完&#xff0c;毕竟…
阅读更多...
利用proteus实现串口助手和arduino Mega 2560的串口通信

利用proteus实现串口助手和arduino Mega 2560的串口通信

本例用到的proteus版本为8.13&#xff0c;ardunio IDE版本为2.2.1&#xff0c;虚拟串口vspd版本为7.2&#xff0c;串口助手SSCOM V5.13.1。软件的下载安装有很多教程&#xff0c;大家可以自行搜索&#xff0c;本文只介绍如何利用这4种软件在proteus中实现arduino Mega 2560的串…
阅读更多...
P3613 【深基15.例2】寄包柜（map）

P3613 【深基15.例2】寄包柜（map）

本题我之前尝试用过vector&#xff0c;但是内存会超&#xff0c;所以用了map就过了 注意二维map的写法 map<int,map<int,int>> mp map<a,map<b,c>> mp; 会创立一个mp[b][c] a;的数组&#xff0c;其中a&#xff0c;b&#xff0c;c为数据类型 #inc…
阅读更多...
Java网络编程 *TCP与UDP协议*

Java网络编程 *TCP与UDP协议*

网络编程 什么是计算机网络? 把分布在不同地理区域的具有独立功能的计算机,通过通信设备与线路连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统 简单来说就是把不同地区的计算机通过设备连接起来,实现不同地区之前的数据传输 网络编程是干什么的? 网络…
阅读更多...
【PyTorch】 暂退法（dropout）

【PyTorch】 暂退法（dropout）

文章目录 1. 理论介绍2. 实例解析2.1. 实例描述2.2. 代码实现2.2.1. 主要代码2.2.2. 完整代码2.2.3. 输出结果 1. 理论介绍 线性模型泛化的可靠性是有代价的&#xff0c;因为线性模型没有考虑到特征之间的交互作用&#xff0c;由此模型灵活性受限。泛化性和灵活性之间的基本权…
阅读更多...
JavaSE基础50题：20. 创建一个int类型的数组,元素为100,并把每个元素依次设置为1 - 100

JavaSE基础50题：20. 创建一个int类型的数组,元素为100,并把每个元素依次设置为1 - 100

概述 数组练习题 创建一个int类型的数组,元素为100,并把每个元素依次设置为1 - 100. 代码 public static void main(String[] args) {int[] array new int[100]; //没有赋值的情况下&#xff0c;里面存的是100个0//获取数组的长度,依次赋值for (int i 0; i < array.len…
阅读更多...
P1 Qt的认识及环境配置

P1 Qt的认识及环境配置

目录 前言 01 下载Qt Creator windows下载安装包拷贝到Linux Linux直接下载 02 Linux 安装Qt 前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《Linux C应用编程&#xff08;概念类…
阅读更多...
HarmonyOS4.0开发应用(三)【ArkUI组件使用】

HarmonyOS4.0开发应用(三)【ArkUI组件使用】

ArkUI组件使用 这里会详细演示以下组件使用: ImageTextTextInputButtonSliderColumn&&RowList自定义组件以及相关函数使用 Image 可以是网络图片、可以是本地图片、也可以是像素图 Image("https://ts1.cn.mm.bing.net/th?idOIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&…
阅读更多...
查看电脑cuda版本

查看电脑cuda版本

1.找到NVODIA控制面板 输入NVIDIA搜索即可 出现NVIDIA控制面板 点击系统信息 2.WINR 输入nvidia-smi 检查了一下&#xff0c;电脑没用过GPU&#xff0c;连驱动都没有 所以&#xff0c;装驱动…… 选版本&#xff0c;下载 下载后双击打开安装 重新输入nvidia-smi 显示如下…
阅读更多...
【Lidar】Python实现点云CSF布料滤波算法提取地面点

【Lidar】Python实现点云CSF布料滤波算法提取地面点

这两天会持续更新一下Python处理点云数据的教程&#xff0c;大家可以点个关注。今天给大家分享一下点云的经典算法&#xff1a;CSF布料模拟算法。 1 CSF算法简介 CSF算法&#xff0c;全称为Cloth Simulation Filtering&#xff0c;是一种基于欧几里得空间中最小生成树思想的聚类…
阅读更多...
iPaaS架构深入探讨

iPaaS架构深入探讨

在数字化时代全面来临之际&#xff0c;企业正面临着前所未有的挑战与机遇。技术的迅猛发展与数字化转型正在彻底颠覆各行各业的格局&#xff0c;不断推动着企业迈向新的前程。然而&#xff0c;这一数字化时代亦衍生出一系列复杂而深奥的难题&#xff1a;各异系统之间数据孤岛、…
阅读更多...
生成式人工智能在采购场景落地 隆道AI产品亮相甲子引力年终盛典

生成式人工智能在采购场景落地 隆道AI产品亮相甲子引力年终盛典

11月30日&#xff0c;以“致追风赶月的你”为主题的“2023甲子引力年终盛典”在北京举办。北京隆道网络科技有限公司总裁吴树贵受邀出席本次会议&#xff0c;并在企业数字化专场会议中做主题发言&#xff0c;探讨了人工智能在采购业务场景中的应用&#xff0c;重点向参会人员介…
阅读更多...
老电脑重置后能连上WIFI但是打开360网页老是提示该网址不是私密连接

老电脑重置后能连上WIFI但是打开360网页老是提示该网址不是私密连接

看了一下可以忽略这次提示&#xff0c;能够上网&#xff0c;但是每次打开新网页都会有“该网址不是私密连接”提示&#xff0c;这个提示非常大&#xff0c;严重影响上网。 强行下载了谷歌浏览器并打开后&#xff0c;提示“您的时钟慢了”&#xff0c;然后看了一下电脑右下角日期…
阅读更多...
UDP实现群聊

UDP实现群聊

代码&#xff1a; import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.net.*; import java.io.IOException; import java.lang.String;public class liaotian extends JFrame{private static final int DEFAULT_PORT8899;private JLabel stateLB…
阅读更多...
JAVA实现敏感词高亮或打码过滤：sensitive-word

JAVA实现敏感词高亮或打码过滤：sensitive-word

练手项目中实现发表文章时检测文章是否带有敏感词&#xff0c;以及对所有敏感词的一键过滤功能 文章目录 效果预览实现步骤 效果预览 随便复制一篇内容到输入框 机器审核文章存在敏感词&#xff0c;弹消息提示并进入人工审核阶段&#xff08;若机器审核通过&#xff0c;则无需审…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023