1. 自定义字典

1.1. 范例：自定义字典新增订单类型

使用场景：该数据为一个枚举类型，数据库存储的是对应的英文缩写或者数字，页面需要显示类型对应的中文名称

1.2. Http发送请求接口

关键类：net.mingsoft.mdiy.action.DictAction.java 关键方法：save(....)

<html>
<head>
    <meta charset="utf-8">
    <title>新增字典</title>
    <meta http-equiv="content-type" content="text/html"/>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="app-mobile-web-app-capable" content="yes"/>
    <meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--通用图标-->
    <link rel="stylesheet" href="https://cdn.mingsoft.net/iconfont/iconfont.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcss.com/qs/6.9.0/qs.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://cdn.mingsoft.net/ms/1.0/ms.js"></script>
    <script src="http://cdn.mingsoft.net/ms/1.0/ms.http.js"></script>
    <script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
        .custom-body {
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body class="custom-body">
<div id="app" v-cloak>
    <table border="1" cellspacing="0" >
        <tr>
            <td>请输入类型名：</td>
            <td><input type="text" v-model="typeName"></td>
        </tr>
        <tr>
            <td>请输入标签名：</td>
            <td><input type="text" v-model="labelName"></td>
        </tr>
        <tr>
            <td>请输入对应值：</td>
            <td><input type="text" v-model="fieldValue"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><button style="width: 100%" @click="saveDict">保存</button></td>
        </tr>
    </table>
</div>

</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            //类型名
            typeName:'订单类型',
            //对应标签名
            labelName:'待付款',
            //对应字段值
            fieldValue: '1'
        },
        methods: {
            saveDict: function () {
                var that = this;
                //新增字典
                ms.http.post("/ms//mdiy/dict/save.do",{
                    dictType: that.typeName,
                    dictLabel:that.labelName,
                    dictValue: that.fieldValue
                }).then(function (data) {
                    if (data.result){
                        alert("添加成功！");
                    }else {
                        alert(data.msg);
                    }
                })

            }
        }
    })
</script>

1.3. 范例：获取标签为自定义页面类型的分类

使用场景：自定义字典新增了自定义页面类型，这时可以选择获取页面分类为自定义页面类型的分类

1.4. Http发送请求接口

关键类：net.mingsoft.mdiy.action.DictAction.java 关键方法：list(....)

<html>
<head>
    <meta charset="utf-8">
    <title>自定义页面类型分类</title>
    <meta http-equiv="content-type" content="text/html"/>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="app-mobile-web-app-capable" content="yes"/>
    <meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
    <!--引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--通用图标-->
    <link rel="stylesheet" href="https://cdn.mingsoft.net/iconfont/iconfont.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcss.com/qs/6.9.0/qs.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://cdn.mingsoft.net/ms/1.0/ms.js"></script>
    <script src="http://cdn.mingsoft.net/ms/1.0/ms.http.js"></script>
    <script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        .custom-body {
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body class="custom-body">
<div id="app" v-cloak>
    <table border="1" cellspacing="0">
        <tr>
            <td>请输入页面名</td>
            <td><input type="text" v-model="pageName"></td>
        </tr>
        <tr>
            <td>请选择分类：</td>
            <td>
                <select v-if="hasDiyType">
                    <option>请选择</option>
                    <option v-for="item in categoryList" value="item.dictLabel">{{item.dictLabel}}</option>
                </select>
                <span v-else style="color: red">请先到自定义字典新增自定义页面类型</span>
            </td>
        </tr>

    </table>
</div>

</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            //页面名
            pageName: '',
            //自定义页面分类列表
            categoryList: [],
            //是否有自定义页面类型
            hasDiyType: false
        },
        created() {
            var that = this;
            //获取自定义页面类型
            ms.http.get("/ms/mdiy/dict/list.do", {
                pageNo: 1,
                dictType: '自定义页面类型',
                pageSize: 999
            }).then(function (data) {
                if (data.result) {
                    if (data.data.total >= 1) {
                        that.categoryList = data.data.rows;
                        that.hasDiyType = true;
                    }
                }
            })
        }
    })
</script>

1.5. DictUtil字典工具类

关键类：net.mingsoft.mdiy.util.DictUtil.java

1.5.1. 范例一：获取字典实体

关键方法：DictUtil.get

2. 自定义表单

关键类：net.mingsoft.mdiy.action.web.PostAction.java

关键方法：save(....)

使用场景：反馈意见的提交

2.1. 实例：反馈意见自定义表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>反馈意见</title>
</head>
<body>
    <form class="ms-content-form" method="post" id="postForm">
        <input class="ms-content-form-name" type="text" name="name" placeholder="姓名">
        <input class="ms-content-form-phone" type="text" name="phone" placeholder="手机">
        <textarea class="ms-content-form-message" name="words" placeholder="留言"></textarea>
        <input  class="submit" type="button" value="提交">
    </form>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    var flag = false;
    $(".submit").click(function () {
        if (!flag) {
            $.ajax({
                type: "POST",
                url: "/mdiy/post/7df6529f9eaa26da7ae4e01c7f73aa06.do",
                data: $("#postForm").serialize(),
                success: function (msg) {
                    flag = true;
                    alert("提交成功");
                    location.reload();
                }
            });
        } else {
            alert("您已经提交过了！");
        }
    })
</script>

接口