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://122.227.135.243:9888

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

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

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

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

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

html 复制代码
<!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 结点。

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

相关推荐
无尽夏_9 小时前
HTML5(前端基础)
前端·html·html5
Jagger_9 小时前
敏捷开发流程-精简版
前端·后端
FIN666810 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing10 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女12710 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿10 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN666810 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy10 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴10 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc10 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构