《深入实践Spring Boot》一3.4　视图设计

3.4　视图设计

视图设计包括列表视图、新建视图、查看视图、修改视图和删除视图设计等5个方面有关数据的增删查改的内容。
我们知道，视图上的数据存取不是直接与模型打交道，而是通过控制器来处理。在视图中对于控制器的请求，大多使用jQuery的方式来实现。jQuery是一个优秀的JavaScript程序库，并且具有很好的兼容性，几乎兼容了现有的所有浏览器。
下面的视图设计将以电影的视图设计为例说明，演员的视图设计与此类似，不再赘述。

3.4.1　列表视图设计

电影的列表视图是电影视图的主页，它引用了3.3节使用Thymeleaf设计的页面框架模板layout.html，在这里主要实现对数据的分页查询请求和列表数据显示，并提供了一部电影的新建、查看、修改和删除等超链接。
1.?分页设计
电影的列表视图的分页设计使用了“jquery.pagination.js”分页插件，编写如代码清单3-15所示的脚本，其中getOpt定义了分页工具条的一些基本属性，pageaction通过“./list”调用控制器取得分页数据列表，f?illData函数将列表数据填充到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.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.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.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 == f?ile}"，即如果电影中的剧照与下拉框列表中的剧照相同，则选中它。
在修改界面上，还增加了“增加角色”和“选择演员”的编辑项。为了简化设计这里的角色名称我们也使用了预先定义的数据。
代码清单3-23　修改电影页面HTML编码

3.?修改视图的设计效果
最终完成的修改电影视图的显示效果如图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所示。

时间： 2024-03-14 19:37:59

《深入实践Spring Boot》一3.4　视图设计的相关文章

《深入实践Spring Boot》一第3章 Spring Boot界面设计3.1　模型设计

本节书摘来自华章出版社<深入实践Spring Boot>一书中的第3章,第3.1节,作者陈韶健,更多章节内容可以访问"华章计算机"公众号查看. 第3章 Spring Boot界面设计 用Spring Boot框架设计Web显示界面,我们还是使用MVC(Model View Controller,模型-视图-控制器)的概念,将数据管理.事件控制和界面显示进行分层处理,实现多层结构设计.界面设计,即视图的设计,主要是组织和处理显示的内容,界面上的事件响应最终交给了控制器进行处理

《深入实践Spring Boot》一3.2　控制器设计

本节书摘来自华章出版社<深入实践Spring Boot>一书中的第3章,第3.2节,作者陈韶健,更多章节内容可以访问"华章计算机"公众号查看. 3.2 控制器设计 怎样将视图上的操作与模型--数据管理模块联系起来,这中间始终是控制器在起着通信桥梁的作用,它响应视图上的操作事件,然后根据需要决定是否访问数据管理模块,最后再将结果返回给合适的视图,由视图处理显示.下面将按照电影控制器的设计来说明控制器中增删查改的实现方法,演员控制器的设计与此类似,不再赘述. 3.2.1 新建控

《深入实践Spring Boot》一2.4　使用Neo4j

本节书摘来自华章出版社<深入实践Spring Boot>一书中的第2章,第2.14节,作者陈韶健,更多章节内容可以访问"华章计算机"公众号查看. 2.4 使用Neo4j 有没有既具有传统关系型数据库的优点,又具备NoSQL数据库优势的一种数据库呢?Neo4j就是一种这样的数据库.Neo4j是一个高性能的NoSQL图数据库,并且具备完全事务特性.Neo4j将结构化数据存储在一张图上,图中每一个节点的属性表示数据的内容,每一条有向边表示数据的关系.Neo4j没有表结构的概念,它

《深入实践Spring Boot》一2.3　使用MongoDB

本节书摘来自华章出版社<深入实践Spring Boot>一书中的第2章,第2.3节,作者陈韶健,更多章节内容可以访问"华章计算机"公众号查看. 2.3 使用MongoDB 在当前流行的NoSQL数据库中,MongoDB是大家接触比较早而且用得比较多的数据库.MongoDB是文档型的NoSQL数据库,具有大数据量.高并发等优势,但缺点是不能建立实体关系,而且也没有事务管理机制. 2.3.1 MongoDB依赖配置 在Spring Boot中使用MongoDB也像使用JPA一样

深入实践Spring Boot导读

Preface?前 言 Spring Boot作为Java编程语言的一个全新开发框架,在国内外才刚刚兴起,还未得到普及使用.相比于以往的一些开发框架,Spring Boot不但使用更加简单,而且功能更加丰富,性能更加稳定而健壮.使用Spring Boot开发框架,不仅能提高开发速度,增强生产效率,从某种意义上,可以说是解放了程序员的劳动,而且一种新技术的使用,更能增强系统的稳定性和扩展系统的性能指标.本书就是本着提高开发效率,增强系统性能,促进新技术的普及使用这一目的而写的. Spring Bo

《深入实践Spring Boot》一导读

Preface前 言 Spring Boot作为Java编程语言的一个全新开发框架,在国内外才刚刚兴起,还未得到普及使用.相比于以往的一些开发框架,Spring Boot不但使用更加简单,而且功能更加丰富,性能更加稳定而健壮.使用Spring Boot开发框架,不仅能提高开发速度,增强生产效率,从某种意义上,可以说是解放了程序员的劳动,而且一种新技术的使用,更能增强系统的稳定性和扩展系统的性能指标.本书就是本着提高开发效率,增强系统性能,促进新技术的普及使用这一目的而写的. Spring Boo

深入实践Spring Boot第3章

第3章 Spring Boot界面设计 用Spring Boot框架设计Web显示界面,我们还是使用MVC(Model View Controller,模型-视图-控制器)的概念,将数据管理.事件控制和界面显示进行分层处理,实现多层结构设计.界面设计,即视图的设计,主要是组织和处理显示的内容,界面上的事件响应最终交给了控制器进行处理,由控制器决定是否调用模型进行数据的存取操作,然后再将结果返回给合适的视图显示. 本章的实例工程使用分模块管理,如表3-1所示,即将数据管理独立成为一个工程模块,专门

《深入实践Spring Boot》一3.3　使用Thymeleaf模板

3.3 使用Thymeleaf模板 完成了模型和控制器的设计之后,接下来的工作就是视图设计了.在视图设计中主要使用Thymeleaf模板来实现.在进行视图设计之前,先了解一下Thymeleaf模板的功能.Thymeleaf是一个优秀的面向Java的XML/XHTML/HTML 5页面模板,并具有丰富的标签语言和函数.使用Spring Boot框架进行界面设计,一般都会选择Thymeleaf模板. 3.3.1 Thymeleaf配置 要使用Thymeleaf模板,首先,必须在工程的Maven管理中

《深入实践Spring Boot》一第一部分 Part 1基础应用开发

第一部分 Part 1 基础应用开发 第1章 Spring Boot入门 第2章 在Spring Boot中使用数据库 第3章 Spring Boot界面设计 第4章 提高数据库访问性能 第5章 Spring Boot安全设计 这一部分从搭建开发环境,简单入门,到使用数据库.界面设计.安全管理等一系列内容,介绍了使用Spring Boot框架进行基础应用开发的方法. 第1章介绍了开发环境的搭建和开发工具的选择和安装,并以一个非常简单的实例,演示了如何使用Spring Boot框架创建工程和发布应