1. 自定义业务

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

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

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

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

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

2. 范例

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

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

  2. 代码预览 自定义模型 复制自定义模型json代码

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

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

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

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

2.2. 在线留言制作

首先，修改yml配置，ms.xss.exclude-url中添加/**/mdiy/model/** 再使用 代码生成器 拖拽出留言的表单，导入 自定义业务，选择允许前端提交

第一种方法:通过提供的js库，动态渲染自定义业务表单

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


<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的实例名称必须为 form
    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;
                //将验证码值复制到自定义模型
                window.formModel.form.rand_code = this.form.rand_code;
                //调用自定义模型的保存
                window.formModel.save(function(res) {
                    if (res.result) {
                        that.$notify({
                            title: '成功',
                            type: 'success',
                            message: '保存成功!'
                        });
                        window.formModel.form = {}
                        that.form.rand_code = "";
                        that.$refs.form.resetFields(); //清空表单
                    } else {
                        that.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                    that.isLoading = false;
                    that.code();
                });
            },
            code: function () {
                this.verifCode = ms.base + "/code?t=" + (new Date).getTime();
            }
        },
        created: function() {
            window.formVue = this;
            this.$nextTick(function () {
                ms.mdiy.model.form("formModel", { "modelName": "留言板" }).then(function(obj) {
                    window.formModel = obj;
                    window.formModel.form.modelName = obj.modelName;
                });
            });
        }
    });
</script>

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

第二种方法: 开发者自己编写表单提交数据

<!-- 注意这里省略了基础库的引入，具体参考本文档的 目录 章节 -->
<!-- 引入自定义库 -->
<script>
    ms.base = "{ms:global.contextpath/}";
</script>

HTML

<div id="form">
    <el-form ref="form" :model="form" :rules="rules" label-position="right" size="large">
        <el-form-item  label="名字" prop="username">
            <el-input
                    v-model="form.username"
                    :disabled="false"
                    :readonly="false"
                    :style="{width:  '100%'}"
                    :clearable="true"
                    placeholder="请输入名字">
            </el-input>
        </el-form-item>
        <el-form-item  label="邮箱" prop="email">
            <el-input
                    v-model="form.email"
                    :disabled="false"
                    :readonly="false"
                    :style="{width:  '100%'}"
                    :clearable="true"
                    placeholder="请输入邮箱">
            </el-input>
        </el-form-item>
        <el-form-item  label="留言" prop="content">
            <el-input
                    type="textarea" :rows="5"
                    :disabled="false"
                    v-model="form.content"
                    :style="{width: '100%'}"
                    placeholder="请输入留言">
            </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="rand_code">
            <el-row>
                <el-col :span="10">
                    <el-input v-model="form.rand_code"
                              :disabled="false" :readonly="false" :clearable="true"
                              placeholder="请输入验证码">
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <img height="40px" :src="verifCode" @click="code" style="margin-left: 10px"/>
                </el-col>
            </el-row>
        </el-form-item>
        <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>
    var form = new Vue({
        el: '#form',
        data: function () {
            return {
                verifCode: "/code.do?" + new Date().getTime(),
                isLoading: false,
                form: {
                    modelName: "留言板", //modelName需要填写自己的模型昵称
                    // 名字
                    username:'',
                    // 邮箱
                    email:'',
                    // 留言
                    content:'',
                    // 验证码
                    rand_code:''
                },
                rules:{
                    // 名字
                    username: [{"required":true,"message":"名字不能为空"},{"min":0,"max":255,"message":"名字长度必须为0-255"}],
                    // 邮箱
                    email: [{"required":true,"message":"邮箱不能为空"},{"pattern":/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,"message":"邮箱格式不匹配"},{"min":0,"max":255,"message":"邮箱长度必须为0-255"}],
                    // 留言
                    content: [{"required":true,"message":"留言不能为空"}],
                    // 验证码
                    rand_code: [{"required":true,"message":"验证码不能为空"}],
                },
            }
        },
        methods: {
            code: function () {
                this.verifCode = "/code.do?" + new Date().getTime();
            },
            save: function (e) {
                e.preventDefault();//阻止默认事件跳转
                var that = this;
                that.$refs.form.validate(function (valid) {
                    if (valid) {
                        // 通过模型渲染的表单 则放开下面的注释(3行) 
                        //1 window.formModel.form.rand_code = that.form.rand_code;
                        //2 ms.http.post("/mdiy/form/data/save.do", window.formModel.form).then(function (res) {
                        ms.http.post("/mdiy/form/data/save.do", that.form).then(function (res) {
                            if (res.result) {
                                that.$notify({
                                    title: '成功',
                                    type: 'success',
                                    message: '感谢您的参与!'
                                });
                                //3 window.formModel.form = {}
                                that.form.rand_code = "";
                                that.$refs.form.resetFields(); //清空表单
                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                            that.code();
                        })
                    }
                })

            }
        }
    })
</script>

[!tip] modelName（业务名称） 必须 代码生成器 的名称一致，否则保存不成功

前台可以通过调用接口获取留言数据，具体查看swagger接口中前端-自定义模块接口

Copyright © mingsoft.net 2012-2022 all right reserved，powered by Gitbook该文件修订时间： 2023-12-26 11:25:26

results matching ""

    No results matching ""

    results matching ""

      No results matching ""