Vue页面集成

最新推荐文章于 2024-05-14 11:14:39 发布
最新推荐文章于 2024-05-14 11:14:39 发布
阅读量1k 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44840242/article/details/88979533
版权 
main.thml主页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../vue/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="../element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-footer{
            line-height: 30px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 0px;/*距离顶部位置*/
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 10px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        /*自定义
         *.el-container
         *   自适应  特别注意：有一点，否则没效果
        */
        html,body,#app,.el-container{
            margin: 0px;
            padding: 0px;
            height: 100%;
        }
        .el-main{
            padding:0px;
        }
    </style>
</head>


<body>

<div id="app">
    <el-container>

            <!--导航部-->
            <el-aside width="200px">
                <!--头像-->
               <div>
                    <img src="1.jpg" height="60px" width="100%"/>
                </div>
                <el-menu
                        default-active="4"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>组织架构</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">
                                <a @click="employeeList('/employee')">员工管理</a>
                            </el-menu-item>
                            <el-menu-item index="1-2">部门管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">角色管理</el-menu-item>
                            <el-menu-item index="2-2">权限管理</el-menu-item>
                            <el-menu-item index="2-2">菜单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <!--头部-->
                <el-header >四川工商大学后台图书管理系统</el-header>

                <!--主页面-->
                <el-main>

                    <iframe id="iframe" frameborder="0"
                            width="100%" height="100%" :src="employeeUrl" >
                    </iframe>

                </el-main>

                <!--尾部-->
                <el-footer>
                    邮箱：yuandaima@itsource.cn法律顾问：北京京师(成都)律师事务所<br>
                    ®2006-2018成都源代码教育咨询有限公司 版权所有蜀ICP备14030149号-1蜀公网安备
                    510114990541站长统计
                </el-footer>
            </el-container>
        </el-container>
    </el-container>

</div>

<script>

    var employeeUrl="http://localhost:63342/vue/element/02_element.html?_ijt=pbfjj9tbuk1n7t9mfr3forcppf";
    new Vue({
        el:'#app',
        data:{
            //把后台得到的菜单地址赋值给vue的属性:在点击对应的菜单的时候绑定
            employeeUrl:""
        },
        methods: {
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            },
            employeeList:function (u) {
                // u赋值给iframe的src属性
                //原始的:document.getElementById("iframe").src=u;
                //我们想在点击菜单的时候才真正把这个对应的地址赋值给iframe的src
                this.employeeUrl=employeeUrl;
            }
        }
    })
</script>
</body>
</html>

#######################################################################################

数据展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../vue/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="../element-ui/lib/index.js"></script>
    <style>
        html,body,#app{
            padding: 0px;
            margin: 0px ;
            height: 100%;

        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;height: 70%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </template>
    <template>
        <div class="block" style="text-align: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </template>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            formInline: {
                user: '',
                region: ''
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
        },
        methods:{
            handleSizeChange:function(val) {
                // 每页 ${val} 条
                var v = `${val}`;
                alert(v)
            },
            handleCurrentChange:function(val) {
                console.log(`当前页: ${val}`);
            },
            onSubmit:function() {
                console.log('submit!');
            }
        }
    })
</script>
</body>
</html>

 

java后生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue页面插值操作
qq_44534541的博客
04-22 1262
用样例详细的说明插值表达式{{}}的使用，将模型数据插入到页面当中。 <div id="app" style="background-color:springgreen"> <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--> <h2>{{firstName.length}}（使用‘.’获取属性）</h2> <h2>{{firstName + lastName}}（字符串拼接）</h2&g
海康威视有插件版本-vue3集成开发，可云台控制
02-02
首先，让我们深入理解“Vue3集成开发”。Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue3是其最新版本，带来了许多改进和优化，如Composition API、更好的性能以及TypeScript支持。Vue3的...
vue如何实现web端与h5端整合在一起
yinzisang的博客
06-19 1884
如果报错-----无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统中禁止执行脚本。第四步：在router文件夹里设置h5端的路由和web端的路由，切记在h5main.js和main.js引入对应的路由，我这里h5main.js引入的是h5端的路由。前言：由于已经提前写好web端的系统，h5端与web端展示的内容不一样，所以需要在一套系统里写两版代码，这就需要我们使用webpack打包工具来实现。
了解一下iframe页面嵌入使用，轻松实现页面集成
deerxiaoluaa的博客
03-14 7680
前言 　　在跨域请求不同服务方或是兼容先前系统的页面时，你可能想利用AJAX从网页上下载HTML并粘贴到div中，这将带来不安全注入的问题。 　　此时，通过iframe页面嵌入可以很好地解决上述问题。 本文带您了解iframe内联框架，帮助您提高页面集成效率和复用率，一次开发，多次使用。同时，解决在使用iframe跨域访问时，第三方cookie暂存转发问题。 ​iframe安全嵌入方案 　　iframe嵌入是一种快速的表示集成方法，具有以下三方面优点： 　　1.iframe是一个全新的独
Spring Boot集成前端页面 实现分页及增删改查功能
最新发布
小蜜蜂vs码农
05-14 876
Spring Boot集成前端页面 实现分页及增删改查功能
通过url访问Vue页面无法在url中加入传递的参数，前端页面不报错
skye_fly的博客
07-04 1572
最近在b站学习尚硅谷的项目“谷粒学院”时发现一个坑，在p120中由一个页面跳转到另一个页面并且url带有参数时，发现无法显示跳转的页面，同时前端不报错。只显示如下信息： 后来发现自己在router里的js文件中定义相应页面的路由时，path属性值没有加上可带的参数，即错误示范如下： 如果这样定义，那么访问info页面时，url无法带参数。正确的方式应该如下： 应该加上":id"，这样便允许url地址栏中带参数访问页面。 ...
vue页面与现有工程的几种集成方法
dualvencsdn的博客
01-09 4297
Vue是一种很优秀的语言，使用它，简单快捷。 生产出一些好的页面后，如何与现有的工程进行结合呢。以express工程为例 （1） 页面很多，自成体系。 且页面是通过vue的脚手架工程里编译而成的。 编译后的工程放在这个目录 /dist/ 将此目录作为静态目录，可以直接访问 app.use(express.static(path.join(__dirname, 'dist
vue是如何把多个页面放在一起
weixin_42604188的博客
02-15 1326
Vue 通过使用路由和组件来将多个页面组合在一起。在 Vue 应用程序中，每个页面都是一个 Vue 组件。使用路由，可以在不同的 URL 路径下加载不同的组件，从而实现不同的页面。 首先，需要安装 Vue 路由库，然后在 Vue 应用程序中引入该库。接下来，需要配置路由并在路由中定义各个路径所对应的组件。最后，使用 vue-router 提供的 标签在页面上显示当前匹配的组件。 通过这种方式，可...
Vue集成Iframe页面的方法示例
08-28
在本篇文章中，我们将主要介绍如何将Iframe页面集成到Vue项目中，并实现切换tab回来的问题。下面是详细的知识点总结： 一、项目需求 在项目中，我们需要切换为Vue框架，但是之前的一些功能页面是用jsp页面写的，...
vue写h5页面的方法总结
11-28
在使用Vue.js编写H5页面时，我们需要考虑的首要任务是布局、样式和不同设备的适配。Vue.js作为一个强大的渐进式JavaScript框架，能够帮助我们构建高效、可维护的前端应用，同样适用于H5页面的开发。以下是一些关键...
springBoot集成vue-admin-template实现动态路由使用sql
07-18
springBoot集成vue-admin-template实现动态路由所使用的数据库数据sql
Vue集成Iframe页面
weixin_33805992的博客
12-10 1187
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 如何实现多页面应用（简单版）
weixin_38687522的博客
06-18 3024
简单版（待实践后补充 ，先放转载链接）
高级信息系统项目管理-企业内的应用集成
yyq916的博客
02-06 1500
企业内的应用集成包括表示集成，数据集成，控制集成和业务流程集成 1.表示集成也称为页面集成，是比较原始，层次最浅但又最常用的一种集成，因其无需了解程序与数据库的内部构造，所以其属于黑盒集成，常用的集成技术包括屏幕集成和输入模拟技术。 2.数据集成： 为了完成控制集成和业务流程集成，必须首先要解决数据和数据库的集成问题。在集成之前首先对数据进行标识编成目录，另外还要确定元数据模型，保证数据在数据库系统中分布和共享。因此可以断定数据集成是白盒集成。所以数据集成相较于表示集成更加灵活。 3.控制集成也称为功
Vue中嵌入html页面并相互通信
qq_43842093的博客
09-21 9720
可以通过将src中修改需要展示的页面地址，这样做的好处是vue与iframe之间不需要通信，与后端的通信可以直接通过js发请求与后端进行交互。
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
朝花夕拾的博客
08-10 4042
html页面同样也要根据传递过来不同的参数 去调整自己的逻辑，首先知道html是如何接收到vue传来的消息的，window监听message即可接收postMessage发送来的消息。通过window.parent['vue里面绑定的名称']（需要传递的参数） 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦！html页面接收时是通过message统一接收的，针对发送多个消息的情况下， 我们这里做下区分，将html页面通过iframe的方式嵌入进来之后，发现页面是空白的，不显示任何元素，
Vue3项目中引入html页面
weixin_42560947的博客
11-24 1万+
Vue3项目中引入html页面
vue如何集成和使用其他前端框架和库
2301_77795034的博客
06-01 1050
要集成这些框架和库，我们通常需要在HTML文件中引入相应的CSS和JavaScript文件，并在Vue组件中使用相应的UI组件、DOM操作、事件处理函数、HTTP请求、数据处理函数、图表等功能。总之，集成和使用其他前端框架和库是Vue开发过程中必不可少的一部分，而合理、高效地使用这些框架和库可以帮助我们更快速地构建出优秀的应用程序。嘿，新手小伙伴们，你们是否在学习vue的过程中，想要使用其他前端框架和库，比如Bootstrap、jQuery等，但是不知道如何集成和使用呢？别担心，我来给你们介绍一下。
在HTML页面中引入vue组件
热门推荐
zysskt的博客
10-20 1万+
vue2
vue iframe解析集成动态页面
09-06
Vue框架中，可以通过使用`<iframe>`元素来解析集成动态页面。 在Vue中，可以通过给`<iframe>`元素的`src`属性绑定一个动态的URL来实现页面的动态加载。通过在Vue的data中定义一个变量`dynamicUrl`，然后将它绑定给`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值