1. 自定义业务
零代码实现一张表的增、删、改、查业务。
通过 代码生成器
导入自定义业务
,可以快速实现基础后台数据管理,也可以实现表单数据提交,
通过代码生成器设计好配置表单
导入模型后直接后台就可以录入数据,可以实现日常简单的数据收集工作。
[!tip] 可以设置为前台游客模式提交数据,就可以实现留言反馈、报名收集等一些基本的信息收集
2. 范例
2.1. 快速创建一个业务数据管理
代码生成器
拖拽留言表单
代码预览
自定义模型
复制自定义模型json代码自定义业务
导入 代码生成器中的
自定义模型json代码数据预览
就可以进行增、删、改、查
操作表单预览
可以展示代码生成器生成的表单
[!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接口中前端-自定义模块接口
2.3. 前台获取自定义业务表单数据
data: function () {
return {
form: {
modelName: "在线留言", //modelName需要填写自己的模型昵称
},
datalist: [], // 自定义业务返回的数据集
total: 1, // 自定义业务返回的数据总数
}
},
methods:{
// 前台获取自定义业务数据
list: function(){
var that = this
ms.http.get("/mdiy/form/data/list.do",{modelName:that.form.modelName}).then (function (data){
if (res.result) {
that.datalist = res.data.rows
that.total=res.total
} else {
that.$notify({
title: '失败',
message: res.msg,
type: 'warning'
});
}
})
},
}
2.4. 其他数据库导入模型
如果是非mysql数据库,但模型中json的sql项为mysql语法(开启数据库忽略大小写)
- 在数据库中手动创建表,表名需要为MDIY_MODEL_ + 代码生成器业务表名,字段和代码生成器中拖拽的保持一致
- 将模型json中的sql项置为空串 "sql": "", 再导入模型即可
- 其他数据库不支持更新操作,如需要更新操作,请重新导入模型