精华内容
下载资源
问答
  • boostrap动态更新数据(ztree点击)(webapi数据转换Json对象)
    千次阅读
    2019-03-26 16:15:25

    先贴个界面,即点击ztree的目录,然后让bootstrap更新目录下的数据(webapi)
    在这里插入图片描述

    1. 先是在刚打开页面时,加载全部文件
      这是刚开始加载页面用到的的Js ,初始化ztree和bootstrap
    var clickmenu = "";
    var oTable;
    $(function () {
        oTable = new TableInit();
       
        oTable.Init();
    })
    var oTableInit = new Object();
    
    var TableInit = function () {
        
        //初始化Table
        oTableInit.Init = function () {
            $('#menuTable').bootstrapTable({
                url: '/menu/text',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数(*)
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber: 1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 700,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                uniqueId: "no",                     //每一行的唯一标识,一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [
                    { field: 'selectItem', radio: true },
                {
                    field: 'fileid',
                    title: 'ID'
                }, {
                    field: 'filename',
                    title: '文件名'
                }, {
                    field: 'filetype',
                    title: '文件类型'
                },
                {
                    field: 'CreaateData',
                    title: '创建时间'
                },
                {
                    field: 'operate',
                    title: '操作',
                    formatter: operateFormatter //自定义方法,添加操作按钮
                },
                ],
                rowStyle: function (row, index) {
                    var classesArr = ['success', 'info'];
                    var strclass = "";
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[0];
                    } else {//奇数行
                        strclass = classesArr[1];
                    }
                    return { classes: strclass };
                },//隔行变色
            });
            //console.log(data);
        };
    
    
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,
                menu: clickmenu
            };
            return temp;
        };
        return oTableInit;
    };
    
    
    function operateFormatter(value, row, index) {//赋予的参数
        return [
            '<button class="btn active disabled" id="openfile">打开文件</button>'
    
        ].join('');
    }
    
    
    
    var zTreeObj;
    // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
    var setting = {};
    // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
    //var zNodes = [
    //{name:"test1", open:true, children:[
    //   {name:"test1_1"}, {name:"test1_2"}]},
    //{name:"test2", open:true, children:[
    //   {
    //       name: "test2_1", children: [
    //           { name: "teeee" }, {name:"sfds"}
    //       ]
    //   }, { name: "test2_2" }]
    //}
    //];
    var setting = {             //这样设置了,才能用下面那种Json格式
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {   //这是定义开启click按钮的
            onClick: onClick
        }
    };
    

    2、controller接收请求并且返回数据

      // GET api/menu/
            [Route("menu/ss")]
            public string getztreenode()
            {         
                try
                {
                    SqlConnection sqlConnection =
                        new SqlConnection(
                            "Data Source=(local);Initial Catalog=filemaneger;Persist Security Info=True;User ID=sa;Password=123456");
                    sqlConnection.Open();
                    string sql = "select menuid as id,previousid as pId,Name as name,isParent from menu";
                    DataSet dataSet = new DataSet();
                    SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sql, sqlConnection);
                    sqlDataAdapter.Fill(dataSet);        //将数据填充进dataset 
                    
                    return JsonConvert.SerializeObject(dataSet);   //将数据转换成json格式
                }
                catch (Exception ex)
                {
                    return ex.ToString();
                }
            }
            /// <summary>
            /// 当menu为空时,即是没选定目录,此时查询全部文件,当选定时会重新调用这个函数
            /// 这个是用来遍历文件的函数
            /// </summary>
            /// <param name="limit">一页显示的条数</param>
            /// <param name="offset">代表从第几行数据开始</param>
            /// <param name="menu">表示在目录中选定的目录</param>
            /// <returns></returns>
            [Route("menu/text")]
            public IHttpActionResult gettable(int limit, int offset, string menu)
            {
                try
                {
                    SqlConnection sqlConnection =
                        new SqlConnection(
                            "Data Source=(local);Initial Catalog=filemaneger;Persist Security Info=True;User ID=sa;Password=123456");
                    sqlConnection.Open();
                    string sql = "select fileid,filename,filetype,CreateDate from fileall where 1=1 ";
                    if (menu != null && menu != "")
                    {
                        sql += " and menuid=" + menu;
                    }
                    DataSet dataSet = new DataSet();
                    SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sql, sqlConnection);
                    sqlDataAdapter.Fill(dataSet);        //将数据填充进dataset 
    
                    List<table> lt = DataSetToList<table>(dataSet, 0);
                    var total = lt.Count;        //总数
                    var rows = lt.Skip(offset).Take(limit).ToList();      //分页存储到List中
                    return Json(new { total = total, rows = rows });
                
                }
                catch (Exception ex)
                {
    
                    return Ok(ex.Message);
                }
                    
                
            }
    
            /// <summary>
            /// DataSetToList
            /// </summary>
            /// <typeparam name="T">转换类型</typeparam>
            /// <param name="ds">一个DataSet实例,也就是数据源</param>
            /// <param name="tableIndext">DataSet容器里table的下标,只有用于取得哪个table,也就是需要转换表的索引</param>
            /// <returns></returns>
            public List<T> DataSetToList<T>(DataSet ds, int tableIndext)
            {
                //确认参数有效
                if (ds == null || ds.Tables.Count <= 0 || tableIndext < 0)
                {
                    return null;
                }
                DataTable dt = ds.Tables[tableIndext]; //取得DataSet里的一个下标为tableIndext的表,然后赋给dt
     
                IList<T> list = new List<T>();  //实例化一个list
                // 在这里写 获取T类型的所有公有属性。 注意这里仅仅是获取T类型的公有属性,不是公有方法,也不是公有字段,当然也不是私有属性                                               
                PropertyInfo[] tMembersAll = typeof(T).GetProperties();
     
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    //创建泛型对象。为什么这里要创建一个泛型对象呢?是因为目前我不确定泛型的类型。
                    T t = Activator.CreateInstance<T>();
     
     
                    //获取t对象类型的所有公有属性。但是我不建议吧这条语句写在for循环里,因为没循环一次就要获取一次,占用资源,所以建议写在外面
                    //PropertyInfo[] tMembersAll = t.GetType().GetProperties();
     
     
                    for (int j = 0; j < dt.Columns.Count; j++) 
                    {
                        //遍历tMembersAll
                        foreach (PropertyInfo tMember in tMembersAll)
                        {
                            //取dt表中j列的名字,并把名字转换成大写的字母。整条代码的意思是:如果列名和属性名称相同时赋值
                            if (dt.Columns[j].ColumnName.ToUpper().Equals(tMember.Name.ToUpper()))
                            {
                                //dt.Rows[i][j]表示取dt表里的第i行的第j列;DBNull是指数据库中当一个字段没有被设置值的时候的值,相当于数据库中的“空值”。 
                                if (dt.Rows[i][j] != DBNull.Value)
                                {
                                    //SetValue是指:将指定属性设置为指定值。 tMember是T泛型对象t的一个公有成员,整条代码的意思就是:将dt.Rows[i][j]赋值给t对象的tMember成员,参数详情请参照http://msdn.microsoft.com/zh-cn/library/3z2t396t(v=vs.100).aspx/html
     
                                    tMember.SetValue(t, dt.Rows[i][j], null);
     
     
                                }
                                else
                                {
                                    tMember.SetValue(t, null, null);
                                }
                                break;//注意这里的break是写在if语句里面的,意思就是说如果列名和属性名称相同并且已经赋值了,那么我就跳出foreach循环,进行j+1的下次循环
                            }
                        }
                    }
     
                    list.Add(t);
                }
                return list.ToList();
     
            }
    

    有些函数是为了转换json对象格式而弄得
    3、点击ztree时,js

    
    //当菜单树被点击时
    function onClick(event, treeId, treeNode, clickFlag) {
        clickmenu = treeNode.id;    //点击的话会获取到该节点的id号,至于为什么是这个,你可以用console.log(treeNode)自己看下该对象的值
        var queryData = {};
    
        queryData['limit'] =10;  //这里不自己弄的话就把上面那个转换成全局变量
        queryData['offset'] =0;
        queryData['menu'] =clickmenu;   
        //调用这个函数来进行刷新数据
        $('#menuTable').bootstrapTable('refresh', queryData);
        //console.log(treeNode);
        
    }
    

    4、然后刷新的话会再调用处理boostrap的controller函数,然后就行啦,不明白的话仔细看下sql语句,是动态赋值的
    5、忘记说了,需要定义个实体类,原理就是用dataset获取数据,然后用实体类对应,然后再将其转换成List存储,然后再转换成json对象,然后才传到bootsrap,下面这个是代码

     public class table
        {
            public string fileid { get; set; }
            public string filename { get; set; }
            public string filetype { get; set; }
            public string path { get; set; }
            public DateTime CreateDate { get; set; }
    
        }
    
    更多相关内容
  • Excel表格转换成web(html)

    千次阅读 2019-08-02 14:43:59
    推荐一个比较好用的转换的网页: 登录网页 http://www.docpe.com/excel/excel-to-html.aspx 选择文件,并点击转换 此时,转换下面会出现打开文件和下载文件: 打开文件:是直接跳转网页,可以预览效果 ... ...

    推荐一个比较好用的转换的网页:
    登录网页
    http://www.docpe.com/excel/excel-to-html.aspx

    选择文件,并点击转换
    此时,转换下面会出现打开文件和下载文件:
    打开文件:是直接跳转网页,可以预览效果
    下载文件:把文件放到自己想存放的文件里,里面是表格的html格式

    在这里插入图片描述

    展开全文
  • 首先,不能显示完全的页面视图先不用管,直接调普遍视图,关键就在这,在这个页面最右边找到这个页面的边缘,往左拖,拖到页面白灰交界的地方(看顶部);然后再切回页面视图,这回再看一下,是不是显示完全了!!...

    他们都是瞎回答,我也遇到了这样的问题,自己试了好多方法,终于试出来了,面上跟本搜不到正确方法,所以只能自己弄了,这次完美解决。

    首先,不能显示完全的页面视图先不用管,直接调成普遍视图,关键就在这,在这个页面最右边找到这个页面的边缘,往左拖,拖到页面白灰交界的地方(看顶部);

    然后再切回页面视图,这回再看一下,是不是显示完全了!!整整搞了三个多小时啊(汗!!)

    参考资料:原创!

    在WORD中一个表格在一页显示不完全怎么回事

    在WORD中一个表格在一页显示不完全是因为设置问题。

    解决的具体步骤如下:

    我们需要准备的材料分别是:电脑、Word文档。

    1、首先我们打开需要编辑的Word文档。

    100557_20200424143532833.jpg

    2、然后我们右键单击表格选择打开“表格属性”。

    100557_20200424143526723_1.jpg

    3、然后我们在弹出来的窗口中点击打开“行”,之后选择打勾“允许跨页断行”,回车确定即可。

    100557_20200424143527067_2.jpg

    为什么word 表格 在一页显示不全

    Word表格换页不能显示完整的表格:出现上述问题的首要原因可能是没有开启“允许跨页断行”。这时,只需选中表格,单击右键 → 表格属性 → 行 → 勾选允许跨页断行 → 确定即可。

    经常,设置好了“允许跨页断行”,Word 表格文字依然无法自动换页,则有可能是由于有人给单元格设置了固定行高所导致的。

    解决方法的操作同上,只要把表格属性设置中的行尺寸的“指定高度”前面框框里的勾去掉即可。

    在Word中,遇到表格跨页的情况时,步骤如下:鼠标点击表格任意位置,将光标定位到表格中,然后单击鼠标右键,在弹出的右键菜单中选择“表格属性”。

    在弹出的“表格属性”对话框“表格”标签页下,将“文字环绕”设置为“无”,然后 单击“确定”即可。

    回到Word文档后,可以看到现在表格已经分两页显示了,问题解决。

    在用word文档的时候粘贴的图片为什么不能完全显示出来

    1、我现在插入的图片只显示了一部分,没有显示完全。

    100557_20200424143527473_3.jpg

    2、单击上面工具栏工具栏右下角的斜箭头。

    f69ad6acdc16e82ad44c11cb816b75cb.png

    3、弹出段落设置对话框, 准备修改行距。

    100557_20200424143528270_5.jpg

    4、点击行距设置, 将固定值行距、改为单折间距或多个间距, 根据自己的需要进行设置。

    100557_20200424143528739_6.jpg

    5、确定,返回,图片已经显示出来了。

    100557_20200424143529130_7.jpg

    word表格中文字显示不全怎么解决

    分各种情况:

    1、文字上面好像被削了一样:缩小字体,段落——行距——固定值 调整一下就ok,这个就是段落的问题,调整一下行距就好了。插入表格——在“自动调整”操作中——点上根据内容调整表格就可以了!

    2、都有边框的,左边可以明显看到,但是右边的边框不见了,最右边还缺了2个字,下面的表格也是,表格也不全,右边少了2行。

    这是由于表格过大造成的,可以按住边框,往里收缩,缩小后就可以看全了。或者把纸张设置大一些也行。或者可以尝试选中字体后,选择“清除格式”

    ------------------------------------------------------

    1、表格总高度太高,只能部分显示。调节表格高度或垂直方向页边距应该就行了。

    2、首先确保该单元格内部的左右边距是对称的,在表格属性》单元格》选项里看;然后光标定位到单元格内,右键》单元格对齐方式,选一个你需要的。

    如果奇偶页分别用一种页眉,这个直接可以设置“奇偶页不同”;如果每页都不同,那么需要在每页的底端和顶端分别插入分节符,令每页分属不同小节,然后各节的页眉脚均可单独设置了

    ------------------------------------------------------

    选中表格单击右键选择表格属性

    ------------------------------------------------------

    填写表格形式的word文档,从另外一个WORD里的表格资料复制到一个WORD文档资料里时,填满当前页表格之后没有自动生成第二页,而是直接在第一页的最下面,文字也没有显示,只想一页显示不出可以分两页。

    表格——自动调整,试一下先把表格里的所有字全都缩小,缩成一页后,再试,比如清除格式、重新设置;还有表格属性里的选项,比如自动调整适应文字多试试。

    一个表格文字太多也需要分页显示,新建一页,建一个与最后一页相同格式的表格就可以了

    右键点击表格左上角的十字箭头,表格属性中找到“允许跨页断行”这个选项,勾选他。

    在处理word表格时,会发现表格中某些文字无法显示,特别是在表格中的最后一行,你会发现该行后面的文字由于跑到的表格区域以外而无法显示,如图所示。

    可能是给表格指定了行高,并且设置为固定值?

    选中表格,设置表格的属性,去除表格属性中的“固定高度”格式和段落属性中的“孤行控制”格式

    word表格底部文字显示不全

    表格中的文字无法显示完全,就是到了表格的底部,有一大段的文字都没法显示。

    具体描述如下:

    1.无论如何调整表格边框都无用。

    2.已在表格“属性”中“行”选项卡里勾除了“指定高度”。

    3.每一个能设置“跨页断行”的地方都已设置“允许跨页断行”。

    4.“段落”中无论如何设置“缩进量”和“行距”都无效。

    这种情况一般都是从网上下载下来的,表格里有一些设置,导致超出了页面范围,显示不全,里面的设置好像很难更改。

    如果只是要里面的内容,只要将内容复制出来,另外自己做个表格,放进去。

    方法:将鼠标移到单元格左边,当出现黑色向右上倾斜的箭头时,单击选中整个单元格,然后复制下来,即可。

    如果怀疑下面还有,可以尝试将已经复制的行,删除,看看下面有没有了。

    原因在于,当文字的方向为竖直时,是不允许跨页断行的,就像古时候写字时竖得写,如果有些字在下一页,那就不成一段了,是不是啊,所以表格属性中的“允许跨页断行”也变成了灰色不可用状态了,就算你新建个空白表也是一样。

    解决办法是:将左列文字改成横向,将表格属性中“允许跨页断行”勾上,已经改好,不知能否解决你的疑惑。

    Word打印, 预览显示完全,打印出来的页面左边显示不全

    所需工具:Word 2010

    1、首先,打开电脑,在桌面上选择Word 2010软件并点击打开。

    100557_20200424143529552_8.jpg

    2、接着,新建一个空白的文档。

    100557_20200424143530223_9.jpg

    3、然后,点击工具栏中的文件,找到打印工具。

    100557_20200424143530583_10.jpg

    4、找到设置页面,左击打开打印所有页,选择这个文档,同时检查页面设置是不是A4。

    100557_20200424143530942_11.jpg

    5、接着打开页面设置窗口,将纸张大小设置为A4,点击确定关闭窗口,再次进行预览即可将纸张完整显示。

    100557_20200424143531349_12.jpg

    word文档中的表格为什么内容显示不全

    工具:office word

    步骤:

    1、打开office word,右击表格-自动调整-根据内容调整表格,使表格显示完整。

    100557_20200424143531755_13.jpg

    2、通过页面布局,调整纸张大小,让页面变大,使表格显示起来。

    100557_20200424143532161_14.jpg

    3、表格中的字显示不完全,这时右击段落-行距-不要选择固定值。

    100557_20200424143532552_15.jpg

    4、右击-表格属性-勾选允许跨行页断行。确定后即可完成。

    100557_20200424143532833_16.jpg

    我复制网页上的文章在word中,但是文字显示不全是怎么回事啊?

    你可以直接选中网页上要复制的内容,然后直接把它们全部拖到打开的word中后再松开,看看效果.....

    如果还是那样,那应该是你复制下来的东西有一个表格边框,试试把它们全选中后,'表格>>转换>>表格转换为文本'

    展开全文
  • 文章目录6.1 理解视图解析6.2 创建JSP视图6.3 小结 本章内容: 将模型数据渲染为HTML 使用JSP视图 通过tiles定义视图布局 使用Thymeleaf视图 在《Spring实战》的书中是包括6.3 使用Apache Tiles视图定义布局和6.4 ...

    《Spring实战》是学习Spring框架的一本非常经典的书籍,之前阅读了这本书,只是在书本上写写画画,最近整理了一下《Spring实战》的读书笔记,通过博客的方式进行记录分享。俗话说,好记性不如烂笔头,把学习到的知识记录下来,方便温故知新,让更多的读者可以学习到有关Spring框架的知识。

    序号内容链接地址
    1《Spring实战》读书笔记-第1章 Spring之旅https://blog.csdn.net/ThinkWon/article/details/103097364
    2《Spring实战》读书笔记-第2章 装配Beanhttps://blog.csdn.net/ThinkWon/article/details/103527675
    3《Spring实战》读书笔记-第3章 高级装配https://blog.csdn.net/ThinkWon/article/details/103536621
    4《Spring实战》读书笔记-第4章 面向切面的Springhttps://blog.csdn.net/ThinkWon/article/details/103541166
    5《Spring实战》读书笔记-第5章 构建Spring Web应用程序https://blog.csdn.net/ThinkWon/article/details/103550083
    6《Spring实战》读书笔记-第6章 渲染Web视图https://blog.csdn.net/ThinkWon/article/details/103559672
    7《Spring实战》读书笔记-第7章 Spring MVC的高级技术https://blog.csdn.net/ThinkWon/article/details/103562467

    本章内容:

    • 将模型数据渲染为HTML
    • 使用JSP视图
    • 通过tiles定义视图布局
    • 使用Thymeleaf视图

    在《Spring实战》的书中是包括6.3 使用Apache Tiles视图定义布局和6.4 使用Thymeleaf这两个小节的,但是考虑到平时开发使用的比较少,就不进行介绍了,感兴趣的小伙伴们可以自行学习

    上一章主要关注于如何编写处理Web请求的控制器。我们也创建了一些简单的视图,用来渲染控制器产生的模型数据,但我们并没有花太多时间讨论视图,也没有讨论控制器完成请求到结果渲染到用户的浏览器中的这段时间内到底发生了什么,而这正是本章的主要内容。

    6.1 理解视图解析

    Spring MVC定义了一个名为ViewResolver的接口,它大致如下所示:

    public interface ViewResolver {
        View resolveViewName(String viewName, Locale locale) throws Exception;
    }
    

    当给resolveViewName()方法传入一个视图名和Locale对象时,它会返回一个View实例。View是另外一个接口,如下所示:

    public interface View {
        String getContentType();
        void render(Map<String, ?> model,
                           HttpServletRequest request,
                           HttpServletResponse response) throws Exception;
    }
    

    View接口的任务就是接受模型以及Servlet的request和response对象,并将输出结果渲染到response中。

    尽管我们可以编写ViewResolver和View的实现,在有些特定的场景下,这样做也是有必要的,但一般来讲,我们并不需要关心这些接口。Spring提供了多个内置的实现。如下表所示,Spring自带了13个视图解析器,能够将逻辑视图名转换为物理实现。

    视图解析器描述
    BeanNameViewResolver将视图解析为Spring应用上下文的bean,其中bean的ID与视图的名字相同
    ContentNegotiatingViewResolver通过考虑客户端需要的内容类型来解析视图,委托给另外一个能够产生对应内容类型的视图解析器
    FreeMarkerViewResolver将视图解析为FreeMarker模版
    InternalResourceViewResolver将视图解析为Web应用的内部资源(一般为JSP)
    JasperReportsViewResolver将视图解析为JasperReports定义
    ResourceBundleViewResolver将视图解析为资源bundle(一般为属性文件)
    TilesViewResolver将视图解析为Apache Tile定义,其中tile ID与视图名称相同。注意有两个不同的TilesViewResolver实现,分别对应于Tiles 2.0和Tiles 3.0
    UrlBasedViewResolver直接根据视图的名称解析视图,视图的名称会匹配一个物理视图的定义
    VelocityLayoutViewResolver将视图解析为Velocity布局,从不同的Velocity模板中组合页面
    VelocityViewResolver将视图解析为Velocity模板
    XmlViewResolver将视图解析为特性XML文件中的bean定义。类似于BeanNameViewResolver
    XsltViewResolver将视图解析为XSLT转换后的结果

    Spring 4和Spring 3.2支持表6的所有视图解析器。Spring 3.1支持除Tiles 3 TilesViewResolver之外的所有视图解析器。

    6.2 创建JSP视图

    Spring提供了两种支持JSP视图的方式:

    • InternalResourceViewResolver会将视图名解析为JSP文件。另外,如果在你的JSP页面中使用了JSP标准标签库(JavaServer Pages Standard Tag Library, JSTL)的话,InternalResourceViewResolver能够将视图名解析为JstlView形式的JSP文件,从而将JSTL本地化和资源bundle变量暴露给JSTL的格式化(formatting)和信息(message) 标签。
    • Spring提供了两个JSP标签库,一个用于表单到模型的绑定,另一个提供了通用的工具类特性。

    不管使用JSTL,还是准备使用Spring的JSP标签库,配置解析JSP的视图解析器都是非常重要的。尽管Spring还有其他的几个视图解析器都能将视图名映射为JSP文件,但就这项任务来讲,InternalResourceViewResolver是最简单和最常用的视图解析器。

    配置适用于JSP的视图解析器

    InternalResourceViewResolver遵循一种约定,会在视图名上添加前缀和后缀,进而确定一个Web应用中视图资源的物理路径。

    通用的实践是将JSP文件放到Web应用的WEB-INF目录下,防止对它的直接访问。假设逻辑视图名为home,那么可以确定物理视图的路径就是逻辑视图名home再加上“/WEB-INF/views/”前缀和“.jsp”后缀。

    img

    InternalResourceViewResolver解析视图时,会在视图名上添加前缀和后缀

    当使用@Bean注解的时候,我们可以按照如下的方法配置InternalResourceViewResolver,使其在解析视图时,遵循上述的约定。

    @Bean
    public ViewResolver viewResolver(){   // 配置jsp视图解析器
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/views/");
        resolver.setSuffix(".jsp");
        return resolver;
    }
    

    作为替代方案,如果更喜欢使用基于XML的Spring配置,那么可以按照如下的方式配置InternalResourceViewResolver

    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/WEB-INF/views/" p:suffix=".jsp" />
    

    InternalResourceViewResolver配置就绪之后,它就会将逻辑视图名解析为JSP文件,如下所示:

    • home将会解析为“/WEB-INF/views/home.jsp”
    • productList将会解析为“/WEB-INF/views/productList.jsp”
    • books/detail将会解析为“/WEB-INF/views/books/detail.jsp”

    重点看一下最后一个样例。当逻辑视图名中包含斜线时,这个斜线也会带到资源的路径名中。因此,它会对应到prefix属性所引用目录的子目录下的JSP文件。这样的话,我们就可以很方便地将视图模板组织为层级目录,而不是将它们都放到同一个目录之中。

    解析JSTL视图

    如果JSP使用JSTL标签来处理格式化和信息的话,那么我们会希望InternalResourceViewResolver将视图解析为JstlView。

    JSTL的格式化标签需要一个Locale对象,以便于恰当地格式化地域相关的值,如日期和货币。信息标签可以借助Spring的信息资源和Locale,从而选择适当的信息渲染到HTML之中。通过解析JstlView,JSTL能够获得Locale对象以及Spring中配置的信息资源。

    如果想让InternalResourceViewResolver将视图解析为JstlView,而不是InternalResourceView的话,那么我们只需设置它的viewClass属性即可:

    @Bean
    public ViewResolver viewResolver(){   // 配置jsp视图解析器
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/views/");
        resolver.setSuffix(".jsp");
        resolver.setViewClass(org.springframework.web.servlet.view.JstlView.class);
        return resolver;
    }
    

    同样,我们也可以使用XML完成这一个任务:

    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/WEB-INF/views/" p:suffix=".jsp" p:viewClass="org.springframework.web.servlet.view.JstlView" />
    

    不管使用Java配置还是使用XML,都能确保JSTL的格式化和信息标签能够获得Locale对象以及Spring中配置的信息资源。

    使用Spring的JSP库

    Spring提供了两个JSP标签库,用来帮助定义Spring MVC Web的视图。其中一个标签库会用来渲染HTML表单便签,这些标签可以绑定model中的某个属性。另外一个标签库包含了一些工具类标签,我们随时都可以非常便利地使用它们。

    我们将会看到如何将Spittr应用的注册表单绑定到模型上,这样表单就可以预先填充值,并且在表单提交失败后,能够展现校验错误。

    将表单绑定到模型上

    Spring的表单绑定JSP标签库包含了14个标签,它们中的大多数都用来渲染HTML中的表单标签。但是,它们与原生HTML标签的区别在于它们会绑定模型中的一个对象,能够根据模型中对象的属性填充值。标签库中还包含了一个为用户展示错误的标签,它会将错误信息渲染到最终的HTML之中。

    为了使用表单绑定库,需要在JSP页面中对其进行声明:

    <%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
    

    需要注意,我们将前缀指定为“sf”,但通常也可能使用“form”前缀,可以自定义前缀。

    在声明完表单绑定标签库之后,你就可以使用14个相关的便签了。如下表

    JSP标签描述
    <sf:checkbox>渲染成一个HTML 标签,其中type属性设置为checkbox
    <sf:checkboxes>渲染成多个HTML 标签,其中type属性设置为checkbox
    <sf:errors>在一个HTML 中渲染输入域的错误
    <sf:form>渲染成一个HTML 标签,并为其内部标签暴露绑定路径,用于数据绑定
    <sf:hidden>渲染成一个HTML 标签,其中type属性设置为hidden
    <sf:input>渲染成一个HTML 标签,其中type属性设置为text
    <sf:label>渲染成一个HTML
    <sf:option>渲染成一个HTML 标签,其中selected属性根据所绑定的值进行设置
    <sf:options>按照绑定的集合、数组或Map,渲染成一个HTML 标签的列表
    <sf:password>渲染成一个标签,其中type属性设置为password
    <sf:radiobutton>渲染成一个标签,其中type属性设置为radio
    <sf:select>渲染为一个HTML 标签
    <sf:textarea>渲染为一个HTML 标签

    我们在Spittr的样例中,在注册JSP中可以使用<sf:form><sf:input><sf:password>WW

    <sf:form method="POST" commandName="spitter" >
        First Name:<sf:input path="firstName"/><br/>
        Last Name:<sf:input path="lastName" /><br/>
        Email:<sf:input type="email" path="email" /><br/>
        Username: <sf:input path="username"/><br/>
        Password:  <sf:password path="password"/><br/>
        <input type="submit" value="Register" />
    </sf:form>
    

    <sf:form>会渲染一个HTML <form>标签,但它也会通过commandName属性构建针对某个模型对象的上下文信息。在其他的表单绑定标签中,会引用这个模型对象的属性。

    在之前的代码中,我们将commandName属性设置为spitter。因此,在模型中必须要有一个key为spitter的对象,否则的话,表单不能正常渲染(会出现JSP错误)。这意味着我们需要修改一下SpitterController,以确保模型中存在以spitter为key的Spitter对象:

    @RequestMapping(value="/register", method=GET)
    public String showRegistrationForm(Model model) {
        model.addAttribute(new Spitter());   
        return "registerForm";
    }
    

    修改后,模型中的key根据对象类型推断得出spitter就是新增的Spitter实例。

    回到这个表单中,前四个输入域将HTML<input>标签改成了<sf:input>。这个标签会渲染成一个HTML <input>标签,并且type属性将会设置为text。我们在这里设置了path属性,<input>标签的value属性值将会设置为模型对象中path属性所对应的值。

    对于password输入域,我们使用<sf:password>来代替<sf:input><sf:password><sf:input>类似,但是它所渲染的HTML <input>标签中,会将type属性为password,这样当输入的时候,它的值不会直接明文显示。

    值得注意的是,从Spring 3.1开始,<sf:input>标签能够允许我们指定type属性,这样的话,除了其他可选的类型外,还能指定HTML5特定类型的文本域,如date、range和email。

    Email:  <sf:input path="email" type="email" /><br/>
    

    为了指导用户矫正错误,我们需要使用<sf:errors>

    如果存在校验错误的话,请求中会包含错误的详细信息,这些信息是与模型数据放到一起的。我们所需要做的就是到模型中将这些数据抽取出来,并展现给用户。

    <sf:form method="POST" commandName="spitter">
        First Name:  <sf:input path="firstName" />
        <sf:errors path="firstName"/><br/>
    ...
    </sf:form>
    

    尽管值展示了将<sf:errors>用到First Name输入域的场景,但是它可以按照同样简单的方式用到注册表单的其他输入域中。在这里,它的path属性设置成了firstName,也就是指定了要显示Spitter模型对象中哪个属性的错误。如果firstName属性没有错误的话,那么<sf:errors>不会渲染任何内容。但如果有校验错误的话,那么将会在HTML<span>标签中显示错误信息。

    现在,我们已经可以为用户展现错误信息,这样他们就能修正这些错误了。我们还可以修改错误的样式,使其更加突出显示。为了做到这一点,可以设置cssClass属性:

    <sf:form method="POST" commandName="spitter">
        First Name:  <sf:input path="firstName" />
        <sf:errors path="firstName" cssClass="error"/><br/>
    ...
    </sf:form>
    

    定义这个css样式

    span.error {
       color: red;
    }
    

    展示显示结果
    img

    在表单输入域的旁边展现校验错误信息

    除了这种方式,还有另一种处理校验错误方式就是将所有的错误信息在同一个地方进行显示。为了做到这一点,我们可以移除每个输入域上的<sf:errors>元素,并将其放到表单的顶部

    <sf:form method="POST" commandName="spitter">
        <sf:errors path="*" element="div" cssClass="error"/> 
    ...
    </sf:form>
    

    跟之前相比,值得注意的不同之处在于它的path被设置成了“*”。这是一个通配符选择器,会告诉<sf:errors>展现所有属性的所有错误。

    同样需要注意的是,我们将element属性设置成了div。默认情况下,错误都会渲染在HTML 标签中,如果只显示一个错误的话,这是不错的选择。但是,如果要渲染所有输入域的错误的话,很可能要展现不止一个错误,这时候使用<span>标签(行内元素)就不合适了。像<div>这样的块级元素会更为合适。因此,我们可以将element属性设置成了div。

    像之前一样,cssClass属性被设置errors,这样我们就能为<div>设置样式了。

    div.errors {
       background-color: #ffcccc;
       border: 2px solid red;
    }
    

    现在,我们在表单的上方显示所有的错误,这样页面布局可能会更加容易一些。但是,我们还没有着重显示需要修正的输入域。通过为每个输入域设置cssErrorClass属性,这个问题很容易解决。我们也可以将每个label都替换为<sf: label>,并设置它的cssErrorClass属性。如下就是做完必要修改后的FirstName输入域:

    <sf:form method="POST" commandName="spitter">
        <sf:label path="firstName" cssErrorClass="error">First Name</sf:label>: 
        <sf:input path="firstName" cssErrorClass="error" /><br/>
    ...
    </sf:form>
    

    <sf:label>标签像其他的表单绑定标签一样,使用path来指定它属于模型对象中的哪个属性。在本例中,我们将其设置为firstName,因此它会绑定Spitter对象的firstName属性。假设没有校验错误的话,它将会渲染为如下的HTML <label>元素:

    <label for="firstName">First Name</label>
    

    就其自身来说,设置<sf:label>的path属性并没有完成太多的功能,但是,我们还同时设置了cssErrorClass属性。如果它所绑定的属性有任何错误的话,在渲染得到的<label>元素中,class属性将会被设置为 error,如下所示:

    <label for="firstName" class="error">First Name</label>
    

    与之类似,<sf:input>标签的cssErrorClass属性被设置为error,如果有任何校验错误,class属性将会被设置为error。下面设置css

    label.error {
       color: red;
    }
    
    input.error {
       background-color: #ffcccc;
    }
    

    为了让这些错误信息更加易读,我们重新改造Spitter类

    @NotNull
    @Size(min=5, max=16,message = "{username.size}")
    private String username;
    
    @NotNull
    @Size(min=5, max=25,message = "{password.size}")
    private String password;
    
    @NotNull
    @Size(min=2, max=30,message = "{firstName.size}")
    private String firstName;
    
    @NotNull
    @Size(min=2, max=30,message = "{lastName.size}")
    private String lastName;
    
    @NotNull
    @Email(message = "{email.valid}")
    private String email;
    

    对于上面每个域,我们都将其@Size注解的messgae设置为一个字符串,这个字符串是用大括号括起来的。如果没有大括号的话,message中的值将会作为展现给用户的错误信息。但是使用了大括号之后,我们使用的就是属性文件中的某一属性,该属性包含了实际的信息。

    接下来需要做的就是创建一个名为ValidationMessage.properties的文件,并将其放在根类路径下:

    firstName.size=First name must be between {min} and {max} characters long.
    lastName.size=Last name must be between {min} and {max} characters long.
    username.size=Username must be between {min} and {max} characters long.
    password.size=Password must be between {min} and {max} characters long.
    email.valid=The email address must be valid.
    

    ValidationMessage.properties文件中每天信息的key值对应于注解中message属性占位符的值。同时,最小和最大长度以占位符的方式({min}和{max})保存文件中,它们会引用@Size注解上所设置的min和max属性。

    当用户提交的注册表单校验失败的话,他们在浏览器中应该可以看到如下界面。

    img

    显示校验错误,其中这些对用户友好的信息是从属性文件中获取到的

    我们可以按需创建任意数量的ValidationMessage.properties文件,使其涵盖我们想支持的所有语言和地域。

    Spring通用的标签库

    除了表单绑定标签库之外,Spring还提供了更为通用的JSP标签库。

    要使用Spring通用的标签库,我们必须要在页面上对其进行声明:

    <%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
    

    标签库声明之后,我们就可以使用下表的十个JSP标签了。

    JSP标签描述
    <s:bind>将绑定属性的状态导出到一个名为status的页面作用域属性中,与<s:path>组合使用获取绑定属性的值
    <s:escapeBody>将标签体中的内容进行HTML和/或JavaScript转义
    <s:hasBindErrors>根据指定模型对象(在请求属性中)是否有绑定错误,有条件地渲染内容
    <s:htmlEscape>为当前页面设置默认的HTML转义值
    <s:message>根据给定的编码获取信息,然后要么进行渲染(默认行为),要么将其设置为页面作用域、请求作用域、会话作用域应用作用域的变量(通过使用var和scope属性实现)
    <s:nestedPath>设置嵌入式的path,用于<s:bind>之中
    <s:theme>根据给定的编码获取主题信息,然后要么进行渲染(默认行为),要么将其设置为页面作用域、请求作用域、会话作用域应用作用域的变量(通过使用var和scope属性实现)
    <s:transform>使用命名对象的属性编辑器转换命令对象中不包含的属性
    <s:url>创建相对于上下文的URL,支持URI模板变量以及HTML/XML/JavaScript转义。可以渲染URL(默认行为),要么将其设置为页面作用域、请求作用域、会话作用域应用作用域的变量(通过使用var和scope属性实现)
    <s:eval>计算符合Spring表达式语言(Spring Expression Language SpEL)语法的某个表达式的值,然后要么进行渲染(默认行为),要么将其设置为页面作用域、请求作用域、会话作用域应用作用域的变量(通过使用var和scope属性实现)

    展现国际化信息

    如果要修改JSP模板中的文本,就不那么容易,而且,没有办法根据用户的语言设置国际化这些文本。
    例如:

    <h1>Welcome to Spitter!</h1>
    

    如果想把其中的文本做成国际化的版本,对于渲染文本来说,是很好的方案,文本能够位于一个或多个属性文件中。借助<s:message>,我们可以将硬编码的欢迎信息替换为如下的形式:

    <h1><s:message code="spitter.welcome" /></h1>
    

    按照这里的方式,<s:message>将会根据key为spitter.welcome的信息源来渲染文本。

    Spring有多个信息源的类,它们都实现了MessageSource接口。在这些类中,更为常见和有用的是ResourceBundleMessageSource。它会从一个属性文件中加载信息,这个属性文件的名称是根据基础名称(base name)衍生而来的。如下的@Bean方法配置了ResourceBundleMessageSource:

    @Bean
    public MessageSource messageSource(){
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
        messageSource.setBasename("message");
        messageSource.setDefaultEncoding("UTF-8");
        return messageSource;
    }
    

    在这个bean声明中,核心在于设置basename属性。你可以将其设置为任意你喜欢的值,在这里,我将其设置为message。将其设置为message后,ResourceBundleMessageSource就会试图在根路径的属性文件中解析信息,这些属性文件的名称是根据这个基础名称衍生得到的。

    另外的可选方案是使用ReloadableResourceBundleMessageSource,它的工作方式与ResourceBundleMessageSource非常类似,但是它能够重新加载信息属性,而不必重新编译或重启应用。如下是配置ReloadableResourceBundleMessageSource的样例:

    @Bean
    public MessageSource messageSource(){
        ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();
        messageSource.setBasename("file:///etc/spittr/messages");
        messageSource.setCacheSeconds(10);
        return messageSource;
    }
    

    这里的关键区别在于basename属性设置为在应用的外部查找。basename属性可以设置为类路径下(以“classpath:”作为前缀)、文件系统中(以“file:”作为前缀)或Web应用的根路径下(没有前缀)查找属性。

    现在,我们来创建这些属性文件。首先创建默认的属性文件,名为message.properties。它要们位于根类路径下(如果使用ResourceBundleMessageSource的话),要么位于basename属性指定的路径下(如果使用ReloadableResourceBundleMessageSource的话)。对spittr.welcome信息来讲,它需要如下的条目:

    spittr.welcome=Welcome to Spittr!
    

    我们已经具备了对信息进行国际化的重要组成部分。例如,如果想要为语言设置为西班牙语的用户展示西班牙语的欢迎信息,那么需要创建另外一个名为message_es.properties的属性文件,并包含如下的条目:

    spittr.welcome=Bienvenidos a Spittr!
    

    创建URL

    <s:url>的主要任务就是创建URL,然后将其赋值给一个变量或者渲染到响应中。它是JSTL中<c:url>标签的替代者,但是它具备几项特殊的技巧。

    <s:url>会接受一个相对Servlet上下文的URL,并在渲染的时候,预先添加上Servlet上下文路径。例如,考虑如下<s:url>的基本用法:

    <a href="<s:url href="/spitter/register" />">Register</a>
    

    如果应用的Servlet上下文名为spittr,那么在响应中将会渲染如下的HTML:

    <a href="/spittr/spitter/register">Register</a>
    

    这样,我们在创建URL的时候,就不必再担心Servlet上下文路径是什么了,<s:url>将会负责这件事。

    另外,我们还可以使用<s:url>创建URL,并将其赋值给一个变量供模板在稍后使用:

    <s:url href="/spitter/register" var="registerUrl" />
    
    <a href="${registerUrl}">Register</a>
    

    默认情况下,URL是在页面作用域内创建的。但是通过设置scope属性,我们可以让<s:url>在应用作用域内、会话作用域内或请求作用域内创建URL:

    <s:url href="/spitter/register" var="registerUrl" scope="request" /> 
    

    如果希望在URL上添加参数的话,那么你可以使用<s:param>标签。比如,如下的<s:url>使用两个内嵌的<s:param>标签,来设置“/spittles”的max和count参数:

    <s:url href="/spittles" var="spittlesUrl">
        <s:param name="max" value="60" />
        <s:param name="count" value="20" />
    </s:url>
    

    如果我们需要创建带有路径(path)参数的URL,我们该如何设置》

    例如,假设我们需要为特定用户的基本信息页面创建一个URL。那没有问题,<s:param>标签可以承担此任务:

    <s:url href="/spitter/{username}" var="spittlesUrl">
        <s:param name="username" value="jbauer" />
    </s:url>
    

    当href属性中的占位符匹配<s:param>中所指定的参数时,这个参数将会插入到占位符的位置中。如果<s:param>参数无法匹配href中的任何占位符,那么这个参数将会作为查询参数。

    <s:url>标签还可以解决URL的转义需求。例如,如果你希望将渲染得到的URL内容展现在Web页面上(而不是作为超链接),那么你应该要求<s:url>进行HTML转义,这需要将htmlEscape属性设置为true。例如,如下<s:url>将会渲染HTML转义后的URL:

    <s:url href="/spittles" htmlEscape="true">
        <s:param name="max" value="60" />
        <s:param name="count" value="20" />
    </s:url>
    

    所渲染的URL结果如下所示:

    /spitter/spittles?max=60&amp;count=20
    

    另一方面,如果你希望在JavaScript代码中使用URL的话,那么应该将javaScriptEscape属性设置为true:

    <s:url href="/spittles" var="spittlesJSUrl" javaScriptEscape="true">
        <s:param name="max" value="60" />
        <s:param name="count" value="20" />
    </s:url>
    <script>
        var spittlesUrl = "${spittlesJSUrl}"
    </script>
    

    这会渲染如下的结果到响应之中:

    <script>
        var spittlesUrl = "\/spitter\/spittles?max=60&count=20"
    </script>
    

    转义内容

    <s:escapeBody>标签是一个通用的转义标签。它会渲染标签体中内嵌的内容,并且在必要的时候进行转义。

    例如,假设你希望在页面上展现一个HTML代码片段。为了正确显示,我们需要将“<”和“>”字符替换为“<”和“>”,否则的话,浏览器将会像解析页面上其他HTML那样解析这段HTML内容。

    当然,没有人禁止我们手动将其转义为“<”和“>”,但是这很繁琐,并且代码难以阅读。我们可以使用<s:escapeBody>,并让Spring完成这项任务:

    <s:escapeBody htmlEscape="true">
       <h1>Hello</h1>
    </s:escapeBody>
    

    它将会在响应体中渲染成如下的内容:

    &lt;h1&gt;Hello&lt;/h1&gt;
    

    虽然转义后的格式看起来很难读,但浏览器可以将其转换为未转义的HTML。

    通过设置javaScriptEscape属性,<s:escapeBody>标签还支持JavaScript转义:

    <s:escapeBody javaScriptEscape="true">
       <h1>Hello</h1>
    </s:escapeBody>
    

    <s:escapeBody>只完成一件事,并且完成得非常好。与<s:url>不同,它只会渲染内容,并不能将内容设置为变量。

    6.3 小结

    处理请求只是Spring MVC功能的一部分。如果控制器所产生的结果想要让人看到,那么它们产生的模型数据就要渲染到视图中,并展现到用户的Web浏览器中。Spring的视图渲染是很灵活的,并提供了多个内置的可选方案,包括传统的JavaServer Pages以及流行的Apache Tiles布局引擎。

    在本章中,我们首先快速了解了一下Spring所提供的视图和视图解析可选方案。我们还深入学习了如何在Spring MVC中使用JSP和Apache Tiles。

    我们还看到了如何使用Thymeleaf作为Spring MVC应用的视图层,它被视为JSP的替代方案。Thymeleaf是一项很有吸引力的技术,因为它能创建原始的模板,这些模板是纯HTML,能像静态HTML那样以原

    始的方式编写和预览,并且能够在运行时渲染动态模型数据。除此之外,Thymeleaf是与Servlet没有耦合关系的,这样它就能够用在JSP所不能使用的领域中。

    Spittr应用的视图定义完成之后,我们已经具有了一个虽然微小但是可部署且具有一定功能的Spring MVC Web应用。还有一些其他的特性需要更新进来,如数据持久化和安全性,我们会在合适的时候关注这些特性。但现在,这个应用开始变得有模有样了。

    在深入学习应用的技术栈之前,在下一章我们将会继续讨论Spring MVC,学习这个框架中一些更为有用和高级的功能。

    展开全文
  • 81. Domino视图Web展现技术胪列

    千次阅读 2014-10-15 17:14:21
    以列表形式显示大量数据是各种开发中最常见和基本的需求之一。在数据保存在关系型数据库的Web开发中,程序员要处理的是...预先设计的视图不仅定义了包含的文档,也设置了外观属性,集数据层和外观层的功能于一体。在
  • // First try a.download, then web filesystem, then object URLs var filesaver = this , type = blob.type , force = type === force_saveable_type , object_url , dispatch_all = function() { ...
  • 在前面的章节中,我们主要关注点在于编写控制来处理web请求,同时也创建了一些简单的视图来展现请求返回的model数据,本章我们将主要讨论在控制器完成请求处理之后和将返回结果展示到用户的浏览器之前,这个过程之间...
  • SpringMVC-视图视图解析器

    千次阅读 2019-05-06 22:56:46
    视图(View)和视图解析器(ViewResolver)的工作流程: 当请求处理方法处理完请求之后,会返回String、ModelAndView、或View对象,如return “success”,但这三种返回值最终都会被SpringMVC统一转化为ModelAndView对象...
  • 基于Python的Web开发

    万次阅读 2019-02-26 11:24:29
    下面来介绍一下基于Python语言的Web开发中几种常见的Web开发框架; 1、Python语言是第四代程序设计语言,是解释性的、交互性的和面向对象的。它在Web应用和非Web应用中都发挥了重要的作用。比如Google的核心代码是...
  • java web前面页面显示小方块问题

    千次阅读 2017-06-14 10:28:22
    上周项目组在测试工程师的测试报告中发现如下图中的bug,流程是新增或修改完之后,跳转到查询列表页面,偶尔出现一个小方块;而且还是小概率事件出现方块,这个问题在chrome上没有问题,只是在ie11中有问题。一开始...
  • 将webview的内容转换pdf输出

    千次阅读 2016-03-15 18:58:03
    我们需要的是webview中的web页面大小 ,而不是webview在手机上显示大小 webview内部有一个protected的方法computeVerticalScrollRange和computeHorizontalScrollRange可以给我们提供 但是...
  • spring(6) 渲染web视图

    千次阅读 2016-06-08 16:45:30
    1)本文部分文字描述转自:“Spring In Action(中/英文版)”,旨在review “spring(6) 渲染web视图” 的相关知识;   【1】 理解视图解析 【1.1】视图解析的基础知识以及spring 提供的其他视图解析器 1)...
  • 本章主要讲解了如何通过自定义视图,达到项目既能解析Jsp页面又能解析Html页面的目的。主要涉及的技术有: - InternalResourceViewResolver : 内部资源视图解析器,一般用来处理系统的视图解析。 - ...
  • WEB基础知识

    千次阅读 2020-09-23 17:00:58
    是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织一个互为关联的网状结构。 web发展史 起源 1989年...
  • 在一个Web应用中,通常会采用MVC设计模式来分别实现对应的模型、视图和控制器,其中,视图是用户看到并与之交互的界面。对最初的Web应用来说,视图是由HTML元素组成的静态界面,而后期的Web应用更倾向于使用动态模板...
  • 【Chromium】《Chromium 如何显示 Web 页面》《chromium多进程架构》
  • 在捣鼓Spring MVC的时候,我想让Spring MVC的前端控制器(DispatcherServlet)给用户返回的是HTML类型的视图而不是JSP类型的视图,于是我按照常规的思路,把Spring MVC配置文件里面的视图解析器配置修改HTML后缀的...
  • Django URL与视图

    千次阅读 2020-06-17 19:42:36
    在Django中,通过浏览器去请求一个页面时,使用视图函数来处理这个请求的,视图函数处理之后,要给浏览器返回页面内容。视图一般都写在app的views.py中。并且视图的第一个参数永远都是request(一个 HttpRequest)...
  • Python Django 强大的web mvc开发框架

    千次阅读 2019-11-25 23:57:54
    Django是一个开放源代码的Web应用框架,由Python写。采用了MTV的框架模式,即模型M,视图V和模版T。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是CMS(内容管理系统)软件。并于...
  • Flask框架之视图高级技巧

    千次阅读 2020-11-08 15:06:06
    文章目录4.1 app.route与app_url_rule简介4.1.1 app.route的使用4.1.2 add_url_rule的使用4.2 Flask类视图4.2.1 标准类视图4.2.2 基于方法的类视图4.3 Flask装饰器4.3.1 装饰器的定义和基本使用4.3.2 对带参数的函数...
  • 将我们的web项目打包成一个apk文件并不难,首先准备好软件HBuilder还有你的项目,注意这里只献给那些不是真正的安卓开发却想把web打包apk文件的老铁们看,接下来我们一步步看: QQ截图20180523231532.png ...
  • 如果如下图JRE环境不是自己的,最好也换成自己的 选择JRE System Library,Remove,然后Add Library,加上自己环境的jdk Apply and Close,项目不报错了。 如果这里按步骤没有看到jdk和tomact,说明你的编辑...
  • 倾力总结40条常见的移动端Web页面问题解决方案2016-05-30 JavaScript作者:佚名(本文作者可联系我们补上署名)1、安卓浏览器看背景图片,有些设备会模糊。用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因...
  • 详细SpringBoot教程之Web开发(三)

    万次阅读 多人点赞 2020-02-26 23:15:10
    我这里打算写一个SpringBoot系列的相关博文,目标呢是想让看了这一系列博文的同学呢,能够对SpringBoot略窥门径,这一系列的博文初步都定下来包括SpringBoot介绍、入门、配置、日志相关、web开发、数据访问、结合...
  • 说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目说明 二丶数据准备 三丶使用网络TCP开发一个基于WSGI协议的Web服务器 ...用户通过浏览器向Web服务器请求资源,Web服...
  • MVC中如何将后台封装好的Web控件发到前台视图显示

    千次阅读 热门讨论 2014-11-23 19:32:18
    最近在用MVC开发的时候,师姐说所有用到的控件都要写在后台,然后从后台发到前台,这样就改变了以前把页面做死了的缺点。但是在实现的时候,遇到了点儿问题,如图:    上面代码写了一个LinkButton,当调用这...
  • Web API系列教程】1.1 — ASP.NET Web API入门

    万次阅读 多人点赞 2016-02-24 18:48:01
    前言HTTP不仅仅服务于web页面,同时也是构建暴露服务和数据的API的强大平台。HTTP有着简单、灵活和无处不在的特点。你能想到的几乎所有平台都包含有一个HTTP库,所以HTTP服务可以遍及广泛的客户端,包括浏览器、移动...
  • Java Web(Servlet和JSP)

    千次阅读 2020-06-29 22:22:34
    1. Servlet与JSP 1.1 页面请求工作流程 基本页面访问请求的处理流程 1.用户通过浏览器输入连接地址请求所需的资源 ... 3.服务器接收到客户端...5.服务器通过将响应消息组装特定的消息格式返回给客户端,响应数据流主要
  • 练习2:创建SPA界面在本练习中,你将首先创建Geek Quiz的web前端,使用AngularJS专注于单页面应用程序的交互。然后你将使用CSS3来执行丰富的动画和提供一个当从一个问题转换到另一个问题时切换上下文的可视化效果以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,811
精华内容 31,524
关键字:

web视图版本换成页面