深入实践Spring Boot3.4.2 新建视图设计

    xiaoxiao2024-03-10  125

    3.4.2 新建视图设计

    1.?新建对话框设计

    新建电影时,在电影主页中打开一个对话框显示新建的操作界面,对话框设计引用了“artDialog.js”的对话框插件,然后编写一个脚本来打开对话框,如代码清单3-17所示。其中“./new”是连接控制器的请求URL,注意这里使用了相对路径,这个URL通过“$.get”请求返回新建电影的HTML页面,请求链接中的ts参数传递的是当前时间,这是为了保证该链接是一个全新的链接,以使浏览器能显示一个最新的内容页面。

    代码清单3-17 新建电影对话框设计js编码

    function create(){

        $.get("./new",{ts:new Date().getTime()},function(data){

            art.dialog({

                lock:true,

                opacity:0.3,

                title: "新增",

                width:'750px',

                height: 'auto',

                left: '50%',

                top: '50%',

                content:data,

                esc: true,

                init: function(){

                    artdialog = this;

                },

                close: function(){

                    artdialog = null;

                }

            });

        });

    }

    2.?新建页面设计

    新建电影的页面设计,如代码清单3-18所示,这里只是部分HTML编码,其中的日期控件使用“WdatePicker.js”插件来实现。对于一部电影来说,我们需要输入名称、剧照和日期三个属性,其中剧照的图片下拉列表框使用“imageselect.js”图片下拉列表框插件来实现,并且为了简化设计,剧照中的图片文件使用了预先定义的文件,这里只要选择使用哪一个图片即可。

    代码清单3-18 新建电影页面HTML编码

    <link th:href="@{/styles/imageselect.css}" rel="stylesheet" type="text/css" />

    <script th:src="@{/scripts/imageselect.js}"></script>

    <script th:src="@{/scripts/movie/new.js}"></script>

     

    <form id="saveForm" action="./save" method="post">

        <table class="addNewInfList">

            <tr>

                <th>名称</th>

                <td><input class="inp-list w-200 clear-mr f-left" type="text"   id=

    "name" name="name"  maxlength="120" /></td>

                <th>剧照</th>

                <td width="240">

                    <select name="photo" id="photo">

                        <option th:each="file:${files}"

                                th:value="${file}"

                                th:text="${file}">

                        </option>

                    </select>

                </td>

            </tr>

            <tr>

                <th>日期</th>

                <td>

                    <input  οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"

    type="text" class="inp-list w-200 clear-mr f-left" id="createDate" name="createDate"/>

                </td>

            </tr>

        </table>

        <div class="bottomBtnBox">

            <a class="btn-93X38 saveBtn" href="javascript:void(0)">确定</a>

            <a class="btn-93X38 backBtn" href="javascript: closeDialog()">返回</a>

        </div>

    </form>

    <script type="text/javascript">

        $(document).ready(function(){

            $('select[name=photo]').ImageSelect({dropdownWidth:425});

        });

    </script>

    3.?表单验证与提交设计

    验证新建电影表单的提交时使用“jquery.validate.min.js”插件中的验证方法来实现,如代码清单3-19所示。保存时调用经典的“$.ajax”方式利用POST方法进行提交,其中headers: {"Content-type": "application/x-www-form-urlencoded;charset=UTF-8"}用于保证数据在传输过程中中文字符的正确性。在表单验证中,只对name和createDate两个属性进行简单的非空验证,表单的参数传递使用一个表单序列化函数serialize()来实现,它将表单控件上的对象序列化为一个个含有“键-值”对的字符串进行提交。

    代码清单3-19 新建电影中表单验证和提交的js编码

    $(function(){

            $('#saveForm').validate({

                    rules: {

                name       :{required:true},

                createDate      :{required:true}

                    },messages:{

                name :{required:"必填"},

                createDate :{required:"必填"}

            }

            });

        $('.saveBtn').click(function(){

            if($('#saveForm').valid()){

                $.ajax({

                    type: "POST",

                    url: "./save",

                    data: $("#saveForm").serialize(),

                    headers: {"Content-type": "application/x-www-form-urlencoded;

    charset=UTF-8"},

                    success: function (data) {

                        if (data == 1) {

                            alert("保存成功");

                            pageaction();

                            closeDialog();

                        } else {

                            alert(data);

                        }

                    },

                    error:function(data){

                        var e;

                        $.each(data,function(v){

                            e += v + " ";

                        });

                        alert(e);

                    }

                });

            }else{

                alert('数据验证失败,请检查!');

            }

        });

    });

    4.?新建视图设计效果

    新建电影的视图设计最后的显示效果如图3-3所示。

     

    图3-3 新建电影视图设计效果图

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)