Web页面插码

概述

• 最近在忙一些项目，同时也在学习Vue.js和Go开发，发现Vue.js的组件封装功能真的太强大了，可以很快并且便捷的完成页面的开发，不需要去考虑那么多的样式和排版，直接引用社区大神们封装完成的样例模板，已经很好地满足我对前端开发的需求了。
• 手上有些项目的，包括zabbix这些前端已经写得差不多的产品或者项目，想要在这个交互前端上面增加一些按钮或者报表，来辅助用户更好地完成页面的交互，总不可能去推倒重来，所以这里我用了页面插码的方式来进行功能的完善。

原理

• 我们知道，无论是jsp或者php写的前端代码，本质上都是需要后端进行渲染后，生成浏览器能够识别的html语言才能展示到给用户进行查看。所以，我们在这个渲染页面里面加入我们的自己的vue组件，就可以达到在不侵入原有的代码上，增加一些功能按钮或者视图等。

插入代码

<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
<!-- 引入脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<div id="app">
    <vxe-button @click="businessShow = !businessShow">新增业务系统</vxe-button>
    <vxe-modal v-model="businessShow" width="600" title="新增业务系统" show-footer>
        <template v-slot>
            <vxe-form :data="formData" @submit="addBusiness" @reset="resetBusiness">
                <vxe-form-item title="名称" field="name">
                    <template v-slot>
                        <vxe-input v-model="formData.name" placeholder="请输入业务系统名称" clearable></vxe-input>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template v-slot>
                        <vxe-button type="submit" status="primary">增加</vxe-button>
                        <vxe-button type="reset">重置</vxe-button>
                    </template>
                </vxe-form-item>
            </vxe-form>
        </template>
    </vxe-modal>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            businessShow: false,
            formData: {}
        },
        methods: {
            addBusiness: function () {
                console.log(this.formData.name)
            },
            resetBusiness:function () {
               this.formData.name = ""
                console.log("reset")
            }
        }
    }
    )
</script>

• 这是一段vue的演示代码，只要插入到对应的渲染页面就可以实现一个按钮弹框功能，同理，我们可以利用echart.js来更好地展示我们的数据。

效果

• 在这个页面里面多了一个新增业务系统的按钮，点击可以弹出以下编辑内容。