返回介绍
文江博客 开发文档 深入实践 Spring Boot 文章详情

3.4 视图设计

发布于 2025-04-26 13:26:32 字数 17887 浏览 0 评论 0 收藏

视图设计包括列表视图、新建视图、查看视图、修改视图和删除视图设计等 5 个方面有关数据的增删查改的内容。

我们知道，视图上的数据存取不是直接与模型打交道，而是通过控制器来处理。在视图中对于控制器的请求，大多使用 jQuery 的方式来实现。jQuery 是一个优秀的 JavaScript 程序库，并且具有很好的兼容性，几乎兼容了现有的所有浏览器。

下面的视图设计将以电影的视图设计为例说明，演员的视图设计与此类似，不再赘述。

3.4.1 列表视图设计

电影的列表视图是电影视图的主页，它引用了 3.3 节使用 Thymeleaf 设计的页面框架模板 layout.html，在这里主要实现对数据的分页查询请求和列表数据显示，并提供了一部电影的新建、查看、修改和删除等超链接。

1.分页设计

电影的列表视图的分页设计使用了“jquery.pagination.js”分页插件，编写如代码清单 3-15 所示的脚本，其中 getOpt 定义了分页工具条的一些基本属性，pageaction 通过“./list”调用控制器取得分页数据列表，fillData 函数将列表数据填充到 HTML 控件 tbodyContent 中。

代码清单 3-15 分页设计的 js 编码

// 分页的参数设置





var getOpt = function(){
    var opt = {
        items_per_page: 10,         // 每页记录数





        num_display_entries: 3,     // 中间显示的页数，默认为




10
        current_page:0,             // 当前页





        num_edge_entries:1,         // 头尾显示的页数，默认为




0
        link_to:"javascript:void(0)",
        prev_text:"上页




",
        next_text:"下页




",
        load_first_page:true,
        show_total_info:true ,
        show_first_last:true,
        first_text:"首页




",
        last_text:"尾页




",
        hasSelect:false,
        callback: pageselectCallback  // 回调函数





    }
    return opt;
}
// 分页开始





var currentPageData = null ;
var pageaction = function(){
    $.get('./list?t='+new Date().getTime(),{
        name:$("#name").val()
    },function(data){
        currentPageData = data.content;
        $(".pagination").pagination(data.totalElements, getOpt());
    });
}
var pageselectCallback = function(page_index, jq, size){
    if(currentPageData!=null){
        fillData(currentPageData);
        currentPageData = null;
    }else
        $.get('./list?t='+new Date().getTime(),{
            size:size,page:page_index,name:$("#name").val()
        },function(data){
            fillData(data.content);
        });
}
// 填充分页数据





function fillData(data){
    var $list = $('#tbodyContent').empty();
    $.each(data,function(k,v){
        var html = "" ;
        html += '<tr> ' +
                '<td>'+ (v.id==null?'':v.id) +'</td>' +
                '<td>'+ (v.name==null?'':v.name) +'</td>' +
                '<td>'+ (v.createDate==null?'': getSmpFormatDateByLong(v.create
Date,true)) +'</td>' ;
        html += '<td><a class="c-50a73f mlr-6" href="javascript:void(0)" onclick=
"detail(\''+ v.id+'\')">查看




</a><a class="c-50a73f mlr-6" href=
"javascript:void(0)" onclick="edit(\''+ v.id+'\')">修改




</a><a class="c-50a73f 
mlr-6" href="javascript:void(0)" onclick="del(\''+ v.id+'\')">删除




</a></td>' ;
        html +='</tr>' ;
        $list.append($(html));
    });
}
// 分页结束

2.列表页面设计

电影列表的显示页面主要定义了列表字段的名称和提供显示数据内容的控件 ID，即 tbodyContent，如代码清单 3-16 所示。

代码清单 3-16 电影列表页面 HTML 编码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="fragments/layout">
<head>
    <title>电影管理




</title>
    <link th:href="@{/scripts/pagination/pagination.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/scripts/artDialog/default.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/scripts/My97DatePicker/skin/WdatePicker.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/styles/index.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/scripts/pagination/jquery.pagination.js}"></script>
    <script th:src="@{/scripts/jquery.smartselect-1.1.min.js}"></script>
    <script th:src="@{/scripts/My97DatePicker/WdatePicker.js}"></script>
    <script th:src="@{/scripts/movie/list.js}"></script>
</head>
<body>
<div class="locationLine" layout:fragment="prompt">
    当前位置：首页




 &gt; <em >电影管理




</em>
</div>
<div class="statisticBox w-782"  layout:fragment="content">
    <form id="queryForm" method="get">
    <div class="radiusGrayBox782">
        <div class="radiusGrayTop782"></div>
        <div class="radiusGrayMid782">
            <div class="dataSearchBox forUserRadius">
                <ul>
                    <li>
                        <label class="preInpTxt f-left">电影名称




</label>
                        <input type="text" class="inp-list f-left w-200" place
holder="按电影名称搜索




" id="name"  name="name"/>
                    </li>
                    <li>
                        <a href="javascript:void(0)" class="blueBtn-62X30 f-right"
id="searchBtn">查询




</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </form>
    <div class="newBtnBox">
        <input type="hidden" id="m_ck" />
        <a id="addBtn" class="blueBtn-62X30" href="javascript:void(0)">新增




</a>
    </div>
    <div class="dataDetailList mt-12">
        <table id="results" class="dataListTab">
            <thead>
            <tr>
                <th>ID</th>
                <th>电影




</th>
                <th>出版日期




</th>
                <th>操作




</th>
            </tr>
            </thead>
            <tbody id="tbodyContent">
            </tbody>
        </table>
        <div class="tableFootLine">
            <div class="pagebarList pagination"/>
        </div>
    </div>
</div>
</body>
</html>

3.列表视图设计效果

电影数据列表视图设计的最终显示效果如图 3-2 所示。

图 3-2 电影列表视图设计效果图

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  onfocus="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 新建电影视图设计效果图

3.4.3 查看视图设计

1.查看对话框设计

在电影的主页中单击一部电影的查看链接，将打开一个查看电影的对话框，对话框的设计如代码清单 3-20 所示，其中“./{id}”是提取数据的链接，它将向控制器请求数据，并以 HTML 页面方式显示出来。

代码清单 3-20 查看电影对话框 js 编码

function detail(id){
    $.get("./"+id,{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.查看页面设计

电影查看页面的设计，即将数据展示出来的 HTML 编码，如代码清单 3-21 所示，需要注意的是，日期数据需要进行格式化，而演员表则使用 Thymeleaf 中的一个“th：each”循环语句来输出。

代码清单 3-21 电影查看页面 HTML 编码

<div class="addInfBtn">
    <h3 class="itemTit"><span>电影信息




</span></h3>
    <table class="addNewInfList">
        <tr>
            <th>名称




</th>
            <td width="240"><input class="inp-list w-200 clear-mr f-left" type=
"text" th:value="${movie.name}" id="name" name="name" maxlength="16" /></td>
            <th>日期




</th>
            <td>
                <input  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" type="text" class="inp-list w-200 clear-mr f-left" th:value="${movie.createDate} ? ${#dates.format(movie.createDate,'yyyy-MM-dd HH:mm:ss')} :''" id="createDate" name="createDate"/>
            </td>
        </tr>
        <tr>
            <th>剧照




</th>
            <td width="240">
                <img th:src="${movie.photo}"/>
            </td>
            <th>演员表




</th>
            <td width="240">
                <ul>
                    <li th:each="role:${movie.roles}" th:text="${role.actor.
name}+' 饰




 '+${role.name}"></li>
                </ul>
            </td>
        </tr>
    </table>
    <div class="bottomBtnBox">
        <a class="btn-93X38 backBtn" href="javascript:closeDialog(0)">返回




</a>
    </div>
</div>

3.查看视图的设计效果

电影查看视图设计最终完成的效果如图 3-4 所示。

图 3-4 查看电影视图设计效果图

3.4.4 修改视图设计

1.修改对话框设计

在电影的主页中修改一部电影，首先打开一个修改电影的对话框，这个对话框的设计如代码清单 3-22 所示。其中通过“$.get”访问“./edit/{id}”取得数据和修改视图的 HTML 页面元素。

代码清单 3-22 修改电影对话框 js 编码

function edit(id){
    $.get("./edit/"+id,{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-23 所示，其中剧照的下拉列表框中增加了“选中”的代码：th：selected="${movie.photo==file}"，即如果电影中的剧照与下拉框列表中的剧照相同，则选中它。

在修改界面上，还增加了“增加角色”和“选择演员”的编辑项。为了简化设计这里的角色名称我们也使用了预先定义的数据。

代码清单 3-23 修改电影页面 HTML 编码

<link th:href="@{/styles/imageselect.css}" rel="stylesheet" type="text/css" />
<script th:src="@{/scripts/imageselect.js}"></script>
<script th:src="@{/scripts/movie/edit.js}"></script>
<form id="saveForm" method="post">
    <input type="hidden" name="id" id="id" th:value="${movie.id}"/>
<div class="addInfBtn" >
    <h3 class="itemTit"><span>编辑信息




</span></h3>
    <table class="addNewInfList">
        <tr>
            <th>电影名称




</th>
            <td width="240"><input class="inp-list w-200 clear-mr f-left" type=
"text" th:value="${movie.name}" id="name" name="name" maxlength="16" /></td>
            <th>电影剧照




</th>
            <td width="240">
                <select name="photo" id="photo">
                    <option th:each="file:${files}"
                            th:value="${file}"
                            th:text="${file}"
                            th:selected="${movie.photo == file}">
                    </option>
                </select>
            </td>
        </tr>
        <tr>
            <th>出版日期




</th>
            <td>
                <input  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
type="text" class="inp-list w-200 clear-mr f-left" th:value="${movie.createDate} ? ${#dates.format(movie.createDate,'yyyy-MM-dd HH:mm:ss')} :''" id="createDate" name="createDate"/>
            </td>
        </tr>
        <tr>
            <th>增加角色




</th>
            <td width="240">
                <select name="rolename" id="rolename">
                    <option value="">增加角色




</option>
                    <option th:each="role:${rolelist}"
                            th:value="${role}"
                            th:text="${role}">
                    </option>
                </select>
            </td>
            <th>选择演员




</th>
            <td width="240">
                <select name="actorid" id="actorid">
                    <option value="">选择演员




</option>
                    <option th:each="actor:${actors}"
                            th:value="${actor.id}"
                            th:text="${actor.name}">
                    </option>
                </select>
            </td>
        </tr>
    </table>
    <div class="bottomBtnBox">
        <a class="btn-93X38 saveBtn" href="javascript:void(0)">确定




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




</a>
    </div>
</div>
</form>
<script type="text/javascript">
    $(document).ready(function(){
        $('select[name=photo]').ImageSelect({dropdownWidth:425});
    });
</script>

3.修改视图的设计效果

最终完成的修改电影视图的显示效果如图 3-5 所示。

图 3-5 修改电影视图设计效果图

3.4.5 删除视图设计

1.删除确认对话框

如果有删除的操作，首先要给出确认提示框，只有用户单击确定后才能删除数据，否则将不做任何操作。确认提示框是调用了 Windows 中的确认对话框，如代码清单 3-24 所示。

代码清单 3-24 删除确认对话框 js 编码

function del(id){
    if(!confirm("您确定删除此记录吗？




")){
        return false;
    }
    $.get("./delete/"+id,{ts:new Date().getTime()},function(data){
        if(data==1){
            alert("删除成功




");
            pageaction();
        }else{
            alert(data);
        }
    });
}

2.删除确认设计效果

执行删除操作的确认效果如图 3-6 所示。

图 3-6 删除电影确认对话框效果图

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。