1. 自定义业务

零代码实现一张表的增、删、改、查业务。

通过 代码生成器 导入自定义业务，可以快速实现基础后台数据管理，也可以实现表单数据提交，

通过代码生成器设计好配置表单

导入模型后直接后台就可以录入数据，可以实现日常简单的数据收集工作。

[!tip] 可以设置为前台游客模式提交数据，就可以实现留言反馈、报名收集等一些基本的信息收集

2. 范例

2.1. 快速创建一个业务数据管理

1. 代码生成器 拖拽留言表单

2. 自定义业务导入 代码生成器中的自定义模型`json代码

3. 数据预览 就可以进行增、删、改、查操作

4. 表单预览 可以展示代码生成器生成的表单

[!tip] 通过 复制菜单JSON 在 权限管理 菜单管理 导入 到一个已有到菜单中，通过这种方式可以快速实现基本数据管理业务系统

2.2. 在线留言制作

先通过 代码生成器 拖拽出留言的表单，导入 自定义业务

库

<!-- 注意这里省略了基础库的引入，具体参考本文档的 目录 章节 -->
<!-- 引入自定义库 -->
<script src="/static/mdiy/index.js"></script>

HTML

<div id="form" v-cloak>
    <div id="formModel">
     <!--会自动渲染代码生成器的表单-->
    </div>

    <!--必须包含验证码-->
    <el-form ref="form" :model="form" :rules="rules" label-position="right" size="large" label-width="120px">
        <el-row  :gutter="0" justify="start" align="top">
            <el-col :span="12">
                <el-form-item label="验证码" prop="rand_code">
                    <el-input
                            v-model="form.rand_code"
                            :disabled="false"
                            :readonly="false"
                            :clearable="true"
                            placeholder="请输入验证码">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <div style="display: flex; height: 38px;justify-content: center; align-items: center; cursor: pointer">
                    <img :src="verifCode" class="code-img" @click="code"/>
                    <div @click="code" style="margin-left: 10px">
                        看不清？换一张
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-form-item label="  ">
            <el-button @click="save" type="primary" :loading="isLoading" style="width: 200px">
                {{isLoading?'保存中':'保存'}}
            </el-button>

        </el-form-item>
    </el-form>
</div>

JavaScript

<script>
    //vue的实例名称必须为 from
    var form = new Vue({
        el: '#form',
        data: {
                formModel: undefined, //自定义业务的vue对象
                verifCode:  "/code?t=" + new Date().getTime(),
                isLoading: false,                
                form: {
                    rand_code:''
                },
                rules: {
                    rand_code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                        {min: 1, max: 4, message: '长度不能超过4个字符', trigger: 'change'}
                    ],
                },
        },
        methods: {
            save: function() {
                var that = this;
                that.isLoading = true;
                //将验证码值复制到自定义模型
                form.formModel.form.rand_code = this.form.rand_code;
                //调用自定义模型的保存
                that.formModel.save(function(res) {
                    if (res.result) {
                        that.$notify({
                            title: '成功',
                            type: 'success',
                            message: '保存成功!'
                        });

                    } else {
                        that.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                    that.isLoading = false;
                });
            },
            code: function () {
                this.verifCode = ms.base + "/code?t=" + (new Date).getTime();
            }
        },
        created: function() {
            var that = this;
            ms.mdiy.model.form("formModel", { "modelName": "留言板" }).then(function(obj) {
                that.formModel = obj;
            });;
        }
    });
</script>

[!tip] modelName 必须与 代码生成器 上必须名称一致，vue定义必须为var form = new Vue