AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Mr_HJ / form-generator项目文档学习与记录（续1）

2024-05-11 39
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Mr_HJ / form-generator项目文档学习与记录（续1）

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://218.75.87.38:9888

今天主要讲讲form-generator 的预览功能

预览本质就是要将转换后的代码渲染出来；

form-generator 这里运行的时候加载这里加了一个 iframe，iframe 加载的是提前写好的 html

<iframe
              v-show="isIframeLoaded"
              ref="previewPage"
              class="result-wrapper"
              frameborder="0"
              src="/preview.html"
              @load="iframeLoad"
            />

这里调用了preview.html,这个文件在/public下面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>form-generator-preview</title>
    <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://lib.baomitu.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
    <style>
      body{
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        height: calc(100vh - 33px);
        padding: 12px;
        box-sizing: border-box;
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
      }
      input, textarea{
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>抱歉，javascript被禁用，请开启后重试。</strong>
    </noscript>
    <div id="previewApp"></div>
    <script type="text/javascript">
      Vue.prototype.$axios = axios
      const childAttrs = {
        file: '',
        dialog: ' width="600px" class="dialog-width" v-if="visible" :visible.sync="visible" :modal-append-to-body="false" '
      }
      window.addEventListener('message', init, false)
      function init(event) {
        if (event.data.type === 'refreshFrame') {
          const code = event.data.data
          const attrs = childAttrs[code.generateConf.type]
          let links = ''
          if (Array.isArray(code.links) && code.links.length > 0) {
            links = buildLinks(code.links)
          }
          document.getElementById('previewApp').innerHTML = `${links}<style>${code.css}</style><div id="app"></div>`
          if (Array.isArray(code.scripts) && code.scripts.length > 0) {
            this.loadScriptQueue(code.scripts, () => {
              newVue(attrs, code.js, code.html)
            })
          } else {
            newVue(attrs, code.js, code.html)
          }
        }
      }
      function buildLinks(links) {
        let strs = ''
        links.forEach(url => {
          strs += `<link href="${url}" rel="stylesheet">`
        })
        return strs
      }
      function newVue(attrs, main, html) {
        main = eval(`(${main})`)
        main.template = `<div>${html}</div>`
        new Vue({
          components: {
            child: main
          },
          data() {
            return {
              visible: true
            }
          },
          template: `<div><child ${attrs}/></div>`
        }).$mount('#app')
      }
    </script>
  </body>
</html>
  • head 部分提前加载 vue、vue-router、element-ui 的 CDN 文件
  • body 部分声明一个 id 为 previewApp 的 div 结点

这个 previewApp 的根结点并不直接挂载 vue 实例，实际执行预览时，还会往里加入 style 标签包裹的样式（上一步生成的 css 部分的代码）、一个 id 为 app 的 div 结点。

所以需要显示自己定义的组件的话，需要进行引入才行，否则模拟显示就会有问题。

文章标签：
JavaScript
前端开发
CDN
移动开发
宁波阿成.
目录
相关文章
1288912195458132
|
3月前
|
Shell 开发工具 Docker
GitlabCI学习笔记之二：GitLabRunner pipeline语法之job script stages
GitlabCI学习笔记之二：GitLabRunner pipeline语法之job script stages
1288912195458132
35 1
宁波阿成.
|
6月前
|
JSON 移动开发 前端开发
Mr_HJ / form-generator项目学习-增加自定义的超融组件（一）
Mr_HJ / form-generator项目学习-增加自定义的超融组件（一）
宁波阿成.
62 3
宁波阿成.
|
6月前
|
移动开发 前端开发
Mr_HJ / form-generator项目学习-增加自定义的超融组件（二）
Mr_HJ / form-generator项目学习-增加自定义的超融组件（二）
宁波阿成.
54 3
宁波阿成.
|
6月前
|
移动开发 前端开发
Mr_HJ / form-generator项目文档学习与记录（续2）
Mr_HJ / form-generator项目文档学习与记录（续2）
宁波阿成.
28 0
宁波阿成.
|
6月前
|
JSON JavaScript 数据格式
Mr_HJ / form-generator项目文档学习与记录（续）
Mr_HJ / form-generator项目文档学习与记录（续）
宁波阿成.
33 0
宁波阿成.
|
6月前
|
JSON JavaScript 前端开发
Mr_HJ / form-generator项目文档学习与记录
Mr_HJ / form-generator项目文档学习与记录
宁波阿成.
73 0
阿甘兄
|
前端开发 JavaScript Android开发
02HUI - 部署及文档结构
02HUI - 部署及文档结构
阿甘兄
61 0
阿兵云原生
|
Kubernetes Shell 调度
【k8s 系列】k8s 学习十六，Label 2
在 k8s 中，我们会轻轻松松的部署几十上百个微服务，这些微服务的版本，副本数的不同进而会带出更多的 pod
阿兵云原生
175 0
小小工匠
|
缓存 Java 数据挖掘
白话Elasticsearch50-深入聚合数据分析之doc values机制
白话Elasticsearch50-深入聚合数据分析之doc values机制
小小工匠
104 0
auqbllxiu
《成功案例-Par...[幸运杰哥].1512720360.pdf》电子版地址
成功案例-Par...[幸运杰哥].1512720360.pdf
auqbllxiu
69 0
《成功案例-Par...[幸运杰哥].1512720360.pdf》电子版地址