1. 自定义业务
零代码实现一张表的增、删、改、查业务。
通过 代码生成器
导入自定义业务
,可以快速实现基础后台数据管理,也可以实现表单数据提交,
通过代码生成器设计好配置表单
导入模型后直接后台就可以录入数据,可以实现日常简单的数据收集工作。
[!tip] 可以设置为前台游客模式提交数据,就可以实现留言反馈、报名收集等一些基本的信息收集
2. 范例
2.1. 快速创建一个业务数据管理
代码生成器
拖拽留言表单
自定义业务
导入 代码生成器中的
自定义模型`json代码数据预览
就可以进行增、删、改、查
操作表单预览
可以展示代码生成器生成的表单
[!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