ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

垂直盒子布局和水平盒子布局非常灵活易用，在很大程度上能够取代锚点布局，行布局和列布局，因此希望大家能够熟练掌握。

 

 

垂直盒子布局的结构

一个典型的垂直盒子布局的结构如下：

   1:  <ext:Panel Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"
   2:      BoxConfigChildMargin="0 0 5 0">
   3:      <Items>
   4:          <ext:Panel BoxFlex="1"></ext:Panel>
   5:          <ext:Panel Height="100px"></ext:Panel>
   6:          <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
   7:      </Items>
   8:  </ext:Panel>
 
    
 
   
 
  
 
   
   
   
   
  
有如下几个关键点：
 
  
     
   
  • 为父容器控件设置Layout属性为VBox，还可以设置其他几个属性： 
    
       
     
    • BoxConfigAlign：用来控制容器子控件的尺寸，有四种取值。 
      
         
       
      • Start：所有子控件位于父容器的开始位置（默认值）
        •  
       
      • Center：所有子控件位于父容器的中间位置；
        •  
       
      • Stretch：所有子控件被拉伸至父容器的大小；
        •  
       
      • StretchMax：所有子控件被拉伸至最大子控件的大小。
        •  
      
       
      •  
     
    • BoxConfigPosition：用来控制子容器的位置，有三种取值。 
      
         
       
      • Start：子控件靠父容器的开始位置排列（默认值）；
        •  
       
      • End：子控件靠父容器的结束位置排列；
        •  
       
      • Center：子控件靠父容器的中间位置排列；
        •  
      
       
      •  
     
    • BoxConfigChildMargin：每个子容器的外边距。 
      
         
       
      • 如果是四个数字组成的字符串，分别表示上边距、右边距、下边距、左边距；
        •  
       
      • 如果是三个数字组成的字符串，分别表示上边距、右边距、下边距，左边距同右边距；
        •  
       
      • 如果是两个数字组成的字符串，分别表示上边距、右边距，左边距同右边距，下边距同上边距；
        •  
       
      • 如果是一个数字组成的字符串，四个方面的边距都为此值。
        •  
      
       
      •  
     
    • BoxConfigPadding：父容器的内边距（规则同上）。 
      
         
       
      • 此属性和BodyPadding的作用相同，只不过此时BodyPadding失效了，需要使用此属性设置内边距。
        •  
      
       
      •  
    
     
    •  
   
  • 对于需要固定高度的子容器控件，设置Height属性；也可以设置Width属性，其行为取决于父容器BoxConfigAlign属性。
    •  
   
  • 对于需要自适应高度的子容器控件，设置BoxFlex属性（整型值）。 
    
       
     
    • BoxFlex属性是一个相对值，相对于其他具有BoxFlex属性的子容器。
      •  
     
    • 在本例中，第一个子容器BoxFlex=1，第三个子容器BoxFlex=2。所以第一个子容器占据（除去第二个固定高度的子容器）1/3的高度，相应的第三个子容器占据2/3的高度。并且第一个和第三个子容器的高度随着父容器的高度变化而变化。
      •  
    
     
    •  
   
  • 对于需要自定义外边距的子容器控件，设置BoxMargin属性。 
    
       
     
    • 这个属性一般用来覆盖父容器的BoxConfigChildMargin属性。
      •  
    
     
    •  
  
 
  
 
 
  
来看下上面结构生成的界面截图：
 
  
image
 
  
 
 
  
这里有个小技巧，父容器设置了BoxConfigChildMargin=0 0 5 0，也即是说每个子容器的下边距为5px，不过最后一个子容器通过BoxMargin=0覆盖了这一属性，从而保证最后一个子容器距离父容器下边界也是5px。
 
  
 
 
  
为了让大家对这些属性有更深入的了解，下面通过几个示例来展示。
 
  
 
 
  
垂直盒子布局示例一
 
  
 
   
   1:  <ext:Panel Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="End" BoxConfigPadding="5"
 
   
   2:      BoxConfigChildMargin="0 0 5 0">
 
   
   3:      <Items>
 
   
   4:          <ext:Panel BoxFlex="1"></ext:Panel>
 
   
   5:          <ext:Panel Height="100px"></ext:Panel>
 
   
   6:          <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
 
   
   7:      </Items>
 
   
   8:  </ext:Panel>
 
  
 
   
  
 
 
  
image
 
  
 
 
  
垂直盒子布局示例二
 
  
 
   
   1:  <ext:Panel Layout="VBox" BoxConfigAlign="Start" BoxConfigPosition="Center" BoxConfigPadding="5"
 
   
   2:      BoxConfigChildMargin="0 0 5 0">
 
   
   3:      <Items>
 
   
   4:          <ext:Panel BoxFlex="1"></ext:Panel>
 
   
   5:          <ext:Panel Height="100px"></ext:Panel>
 
   
   6:          <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
 
   
   7:      </Items>
 
   
   8:  </ext:Panel>
 
  
 
   
  
 
 
  
image
 
  
 
 
  
垂直盒子布局示例三
 
  
 
   
   1:  <ext:Panel Layout="VBox" BoxConfigAlign="StretchMax" BoxConfigPosition="Center" BoxConfigPadding="5"
 
   
   2:      BoxConfigChildMargin="0 0 5 0">
 
   
   3:      <Items>
 
   
   4:          <ext:Panel BoxFlex="1"></ext:Panel>
 
   
   5:          <ext:Panel Height="100px"></ext:Panel>
 
   
   6:          <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
 
   
   7:      </Items>
 
   
   8:  </ext:Panel>
 
   
 
 
  
 
   
  
image
 
  
 
 
  
 
 
  
水平盒子布局的结构
 
  
一个典型的水平盒子布局的结构如下：
 
  
 
   
 
    
 
     
 
      
   1:  <ext:Panel Layout="HBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"
 
      
   2:      BoxConfigChildMargin="0 5 0 0">
 
      
   3:      <Items>
 
      
   4:          <ext:Panel BoxFlex="1"></ext:Panel>
 
      
   5:          <ext:Panel Width="100px"></ext:Panel>
 
      
   6:          <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
 
      
   7:      </Items>
 
      
   8:  </ext:Panel>
 
     
 
     
 
    
 
   
 
  
 
   
   
   
   
  
其中参数的含义和垂直盒子布局的类似，这里就不再赘述。
 
  
 
 
  
来看下上面结构生成的界面截图：
 
  
image
 
  
 
 
  
水平盒子布局示例一
 
  
 
   
   1:  <ext:Panel Layout="HBox" BoxConfigAlign="Stretch" BoxConfigPosition="End" BoxConfigPadding="5"
 
   
   2:      BoxConfigChildMargin="0 5 0 0">
 
   
   3:      <Items>
 
   
   4:          <ext:Panel Width="200px"></ext:Panel>
 
   
   5:          <ext:Panel Width="200px"></ext:Panel>
 
   
   6:          <ext:Panel Width="200px" BoxMargin="0"></ext:Panel>
 
   
   7:      </Items>
 
   
   8:  </ext:Panel>
 
   
 
 
  
 
   
  
image
 
  
 
 
  
水平盒子布局示例二
 
  
 
   
   1:  <ext:Panel Layout="HBox" BoxConfigAlign="Center" BoxConfigPosition="Center" BoxConfigPadding="5"
 
   
   2:      BoxConfigChildMargin="0 5 0 0">
 
   
   3:      <Items>
 
   
   4:          <ext:Panel Width="200px" Height="100px"></ext:Panel>
 
   
   5:          <ext:Panel Width="200px" Height="150px"></ext:Panel>
 
   
   6:          <ext:Panel Width="200px" Height="200px" BoxMargin="0"></ext:Panel>
 
   
   7:      </Items>
 
   
   8:  </ext:Panel>
 
   
 
 
  
 
   
  
image
 
  
 
 
  
水平盒子布局示例三
 
  
 
   
   1:  <ext:Panel Layout="HBox" BoxConfigAlign="StretchMax" BoxConfigPosition="Center" BoxConfigPadding="5"
 
   
   2:      BoxConfigChildMargin="0 5 0 0">
 
   
   3:      <Items>
 
   
   4:          <ext:Panel Width="200px" Height="100px"></ext:Panel>
 
   
   5:          <ext:Panel Width="200px" Height="150px"></ext:Panel>
 
   
   6:          <ext:Panel Width="200px" Height="200px" BoxMargin="0"></ext:Panel>
 
   
   7:      </Items>
 
   
   8:  </ext:Panel>
 
   
 
 
  
 
   
  
image
 
  
 
 
  
 
 
  
太棒了太棒了太棒了
 
  
使用垂直盒子布局替代锚点布局示例
 
  
还记得我们在讲解锚点布局时最后一个示例吗？
 
  
image_thumb8_thumb
 
  
当时我们提到需要为下面的表格设置AnchorValue=”100% -62”，其中62这个数值是通过Firebug查看渲染后的HTML得到的。
 
  
这种做法令人有点尴尬，类似莫名其妙的常数也给项目的维护带来一定的麻烦。
 
  
 
 
  
下面使用垂直盒子布局来轻松解决这个问题：
 
  
 
   
   1:  <ext:Panel EnableBackgroundColor="true" Layout="VBox"
 
   
   2:      BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="3" BoxConfigChildMargin="0"
 
   
   3:      ShowBorder="True" ShowHeader="True" Width="750px" Height="350px" >
 
   
   4:      <Items>
 
   
   5:          <ext:Form ShowBorder="False" BodyPadding="5px" EnableBackgroundColor="true" ShowHeader="False">
 
   
   6:              <Rows>
 
   
   7:                  <ext:FormRow>
 
   
   8:                      <Items>
 
   
   9:                          // 此处省略...
 
   
  10:                      </Items>
 
   
  11:                  </ext:FormRow>
 
   
  12:                  <ext:FormRow>
 
   
  13:                      <Items>
 
   
  14:                          // 此处省略...
 
   
  15:                      </Items>
 
   
  16:                  </ext:FormRow>
 
   
  17:              </Rows>
 
   
  18:          </ext:Form>
 
   
  19:          <ext:Panel ShowBorder="True" ShowHeader="false" BoxFlex="1" Layout="Fit">
 
   
  20:              <Toolbars>
 
   
  21:                  <ext:Toolbar ID="Toolbar3">
 
   
  22:                      <Items>
 
   
  23:                          // 此处省略...
 
   
  24:                      </Items>
 
   
  25:                  </ext:Toolbar>
 
   
  26:              </Toolbars>
 
   
  27:              <Items>
 
   
  28:                  <ext:Grid Title="Grid3" PageSize="3" ShowBorder="false" ShowHeader="False"
 
   
  29:                      EnableCheckBoxSelect="True" DataKeyNames="Id,Name" EnableRowNumber="True">
 
   
  30:                      <Columns>
 
   
  31:                          // 此处省略...
 
   
  32:                      </Columns>
 
   
  33:                  </ext:Grid>
 
   
  34:              </Items>
 
   
  35:          </ext:Panel>
 
   
  36:      </Items>
 
   
  37:  </ext:Panel>
 
  
 
   
  
使用垂直盒子布局避免了锚点布局时引入的常数，同时产生的界面效果和之前的一模一样。
 
  
 
 
  
 
 
  
太棒了太棒了太棒了
 
  
使用水平盒子布局替代列布局示例
 
  
还记得我们在讲解列布局时最后一个示例吗？
 
  
image_thumb13[3]
 
  
 
 
  
为了实现各列之间的间隔，我们需要为列容器设置CssClass="columnpanel"，其中columnpanel是预先定义的CSS类。
 
  
 
 
  
而使用水平盒子布局，ASPX标签将更加简单直观：
 
  
 
   
   1:  <ext:Panel Height="350px" Width="750px" Layout="HBox" BoxConfigAlign="Stretch"
 
   
   2:      BoxConfigPosition="Start" BoxConfigPadding="5" BoxConfigChildMargin="0 5 0 0">
 
   
   3:      <Items>
 
   
   4:          <ext:Panel BoxFlex="1" ShowBorder="false" ShowHeader="false">
 
   
   5:              <Items>
 
   
   6:                  <ext:Panel Height="150px" CssClass="rowpanel" BodyPadding="5px"></ext:Panel>
 
   
   7:                  <ext:Panel Height="100px" BodyPadding="5px"></ext:Panel>
 
   
   8:              </Items>
 
   
   9:          </ext:Panel>
 
   
  10:          <ext:Panel BoxFlex="1" BoxMargin="0" ShowBorder="false" ShowHeader="false">
 
   
  11:              <Items>
 
   
  12:                  <ext:Panel Height="100px" CssClass="rowpanel" BodyPadding="5px"></ext:Panel>
 
   
  13:                  <ext:Panel Height="150px" BodyPadding="5px"></ext:Panel>
 
   
  14:              </Items>
 
   
  15:          </ext:Panel>
 
   
  16:      </Items>
 
   
  17:  </ext:Panel>
 
  
 
   
  
 
 
  
小结
 
  
垂直盒子布局和水平盒子布局非常灵活，在实际项目中出镜率也很高，在某些情况甚至可以取代锚点布局、列布局等其他布局，因此需要大家熟练掌握。关于布局就先介绍到这里，剩下的绝对定位布局和表格布局相对简单，大家可以仿照官方示例自己学习。
 
  
接下来，我们将学习ExtAspNet的重头戏 - 数据表格控件。
 
  
 
 
  
 
 
  
注：《ExtAspNet秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录 官方论坛


                            

                        

                    

                    
                    

                    
                    
                    

                

                

                    
                

            

        

    

    

        
你可能感兴趣的:(ext)

        

            

                
    
                    
  • android系统selinux中添加新属性property
                        辉色投像

                        
    1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
    
                    
    • 
                    
  • swagger访问路径
                        igotyback
swagger
                        
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
    
                    
    • 
                    
  • C#中使用split分割字符串
                        互联网打工人no1
c#
                        
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
    
                    
    • 
                    
  • LLM 词汇表
                        落难Coder
LLMsNLP大语言模型大模型llama人工智能
                        
    Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数
    
                    
    • 
                    
  • 第六集如何安装CentOS7.0，3分钟学会centos7安装教程
                        date分享

                        
    从光盘引导系统按回车键继续进入引导程序安装界面，选择语言这里选择简体中文版点击继续选择桌面安装下面给系统分区选择磁盘，点击完成选择基本分区，点击加号swap分区,大小填内存的两倍在选择根分区，使用所有可用的磁盘空间选择文件系统ext4点击完成，点击开始安装设置root密码，点击完成设置普通用户和密码，点击完成整个过程持续八分钟左右根据个人配置不同，时间长短不同好，现在点击重启系统进入重启状态点击本
    
                    
    • 
                    
  • Xinference如何注册自定义模型
                        玩人工智能的辣条哥
人工智能AI大模型Xinference
                        
    环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
    
                    
    • 
                    
  • 关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解
                        秋刀prince
mysqlmysql数据库
                        
    提示：啰嗦一嘴，数据库的任何操作和验证前，一定要记得先备份！！！不会有错；文章目录问题发现一、问题导致的可能原因1、页大小2、行格式2.1compact格式2.2Redundant格式2.3Dynamic格式2.4Compressed格式3、BLOB和TEXT列二、解决办法1、修改页大小（不推荐）2、修改行格式3、修改数据类型为BLOB和TEXT列4、其他优化方式（可以参考使用）4.1合理设置数据
    
                    
    • 
                    
  • Armv8.3 体系结构扩展--原文版
                        代码改变世界ctw
ARM-TEE-Androidarmv8嵌入式arm架构安全架构芯片TrustzoneSecureboot
                        
    快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
    
                    
    • 
                    
  • 光盘文件系统 (iso9660) 格式解析
                        穷人小水滴
光盘文件系统iso9660denoGNU/Linuxjavascript
                        
    越简单的系统,越可靠,越不容易出问题.光盘文件系统(iso9660)十分简单,只需不到200行代码,即可实现定位读取其中的文件.参考资料:https://wiki.osdev.org/ISO_9660相关文章:《光盘防水嘛?DVD+R刻录光盘泡水实验》https://blog.csdn.net/secext2022/article/details/140583910《光驱的内部结构及日常使用》ht
    
                    
    • 
                    
  • 科幻游戏 《外卖员模拟器》 主要地理环境设定 (1)
                        穷人小水滴
游戏科幻设计
                        
    游戏名称:《外卖员模拟器》(英文名称:waimai_se)作者:穷人小水滴本故事纯属虚构,如有雷同实属巧合.故事发生在一个(架空)平行宇宙的地球,21世纪(超低空科幻流派).相关文章:https://blog.csdn.net/secext2022/article/details/141790630目录1星球整体地理设定2巨蛇国主要设定3海蛇市主要设定3.1主要地标建筑3.2交通3.3能源(电力)
    
                    
    • 
                    
  • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net
                        佛一脚
errorreactmongodb数据库
                        
    背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
    
                    
    • 
                    
  • TextFiled 中输入金额
                        宁梓茞

                        
    要求:输入的金额不能超过六位,小数点后面只能输入两位小数如果textFIled中第一位输入的是0,后面必须输入小数点,否则禁止输入用到textfiled代理方法#pragmamark----textFiledDelegate-----(BOOL)textField:(UITextField*)textFieldshouldChangeCharactersInRange:(NSRange)range
    
                    
    • 
                    
  • JAVA·一个简单的登录窗口
                        MortalTom
java开发语言学习
                        
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
    
                    
    • 
                    
  • 自定义队列
                        junjun2018

                        
    队列：像排队吃饭一样，先到的先点菜，后来的后点菜。以下代码展示使用单向列表实现的队列。//链表是以节点为单位的，对于单向链表，每个节点中包含一个值和指向下一个对象的引用publicclassNode{Objectvalue;Nodenext;publicNode(Objectvalue){this.value=value;}publicObjectgetValue(){returnvalue;}p
    
                    
    • 
                    
  • 2019-07-09 AutoCompleteTextView 问题
                        皮皮铭

                        
    实现自定义Adapter要实现Filterable接口，不然会报错重写getFilter()方法performFiltering()方法实现过滤数据的操作publishResults()用来接收performFiltering()的返回值，发布。
    
                    
    • 
                    
  • HarmonyOS开发实战（ Beta5.0）搜索框热搜词自动切换
                        让开，我要吃人了
OpenHarmonyHarmonyOS鸿蒙开发harmonyos华为鸿蒙移动开发鸿蒙系统前端开发语言
                        
    鸿蒙HarmonyOS开发往期必看：HarmonyOSNEXT应用开发性能实践总结最新版！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）介绍本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。效果图预览使用说明页面顶部搜索框内热搜词条自动切换，编辑搜索框时自动隐藏。实现思路使用TextInput实现搜索框TextInput({te
    
                    
    • 
                    
  • leetcode中等.数组(21-40)python
                        九日火
pythonleetcode
                        
    80.RemoveDuplicatesfromSortedArrayII(m-21)Givenasortedarraynums,removetheduplicatesin-placesuchthatduplicatesappearedatmosttwiceandreturnthenewlength.Donotallocateextraspaceforanotherarray,youmustdoth
    
                    
    • 
                    
  • uniapp使用内置地图选择插件，实现地址选择并在地图上标点
                        神夜大侠
Uniappvue.jsuniapp
                        
    uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
    
                    
    • 
                    
  • HarmonyOS Next鸿蒙扫一扫功能实现
                        JohnLiu_
HarmonyOSNextharmonyos华为扫一扫鸿蒙
                        
    直接使用的是华为官方提供的api，封装成一个工具类方便调用。import{common}from'@kit.AbilityKit';import{scanBarcode,scanCore}from'@kit.ScanKit';exportnamespaceScanUtil{exportasyncfunctionstartScan(context:common.Context):Promise{if
    
                    
    • 
                    
  • golang 实现文件上传下载
                        wangwei830
go
                        
    Gin框架上传下载上传（支持批量上传）httpRouter.POST("/upload",func(ctx*gin.Context){forms,err:=ctx.MultipartForm()iferr!=nil{fmt.Println("error",err)}files:=forms.File["fileName"]for_,v:=rangefiles{iferr:=ctx.SaveUplo
    
                    
    • 
                    
  • linux 安装Sublime Text 3
                        hhyiyuanyu
Python学习linuxsublimetext
                        
    方法/步骤打开官网http://www.sublimetext.com/3，选择64位进行下载执行命令wgethttps://download.sublimetext.com/sublime_text_3_build_3126_x64.tar.bz2进行下载3、下载完成进行解压,执行tar-xvvfsublime_text_3_build_3126_x64.tar.bz解压4、解压完成以后，移动到
    
                    
    • 
                    
  • sublime个人设置
                        bawangtianzun
sublimetext编辑器
                        
    如何拥有jiangly蒋老师同款编译器(sublimec++配置竞赛向）_哔哩哔哩_bilibiliSublimeText4的安装教程（新手竞赛向）-知乎(zhihu.com)创建文件自动保存为c++打开SublimeText软件。转到"Tools"（工具）>"Developer"（开发者）>"NewPlugin"（新建插件）。在打开的新文件中，粘贴以下代码：importsublimeimport
    
                    
    • 
                    
  • 自定义分区
                        我的K8409
Hadoophdfshadoop大数据
                        
    通过简单例子了解partition分区类的重写方法分区是在MR的过程中进行的，属于Shuffle阶段但是在Job端不要忘记进行调用：job.setPartitionerClass(xxx.class)按照年龄分区：classAgePartitionerextendsPartitioner{@OverridepublicintgetPartition(MyComparablekey,NullWrit
    
                    
    • 
                    
  • html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    
                    
    • 
                    
  • spring mvc @RequestBody String类型参数
                        zoyation
spring-mvcspringmvc
                        
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
    
                    
    • 
                    
  • el-table实现全选整表，单元一页复选框功能
                        周bro
vue.jselementuijavascript前端
                        
    全选整表单选一页0":popper-append-to-body="false":total="tableData.length":page-size="pageObj.pagesize":page-sizes="[10,50,100]"layout="total,sizes,prev,pager,next"@size-change="handleSizeChange"@current-chang
    
                    
    • 
                    
  • 处理标签包裹的字符串，并取出前250字符
                        周bro
前端javascript开发语言
                        
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
    
                    
    • 
                    
  • css设置当字数超过限制后以省略号（...）显示
                        周bro
css前端vuecss3html经验分享
                        
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
    
                    
    • 
                    
  • 360前端星计划-动画可以这么玩
                        马小蜗

                        
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    
                    
    • 
                    
  • 解决SDK Manager 中 没有 Support Library
                        木鱼wzh

                        
    1、直接修改SDK-MANAGER打开sdk-manager—->Tools—->options然后点击packages—->showobsoletepackages即可在最下面的Extras目录下找到推荐两个自己使用的镜像服务器：mirrors.neusoft.edu.cn端口80mirrors.dormforce.net端口802、去官网下载SupportLibrar点击这里进入官网进入百度云
    
                    
    • 
                                
  • tomcat基础与部署发布
                                    暗黑小菠萝
Tomcat java web
                                    
    从51cto搬家了，以后会更新在这里方便自己查看。 
做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 
Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。 
一、Tomcat安装 
    安装方式：①运行.exe安装包 
     &n
    
                                
    • 
                                
  • 网站架构发展的过程
                                    ayaoxinchao
数据库应用服务器网站架构
                                    
    1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 
2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 
3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 
4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何
    
                                
    • 
                                
  • [信息与安全]数据库的备份问题
                                    comsci
数据库
                                    
     
 
      如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题 
  
 如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢? 
 
   是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢? 
 
 &n
    
                                
    • 
                                
  • 使用maven tomcat plugin插件debug关联源代码
                                    商人shang
mavendebug查看源码tomcat-plugin
                                    
    *首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 
*配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的
    
                                
    • 
                                
  • 大访问量高并发
                                    oloz
大访问量高并发
                                    
    大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简 
 
要列出几点解决方案： 
 
01、优化你的代码和查询语句，合理使用索引 
 
02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 
 
03、采用服务器集群、负载均衡分担大访问量高并发压力 
 
04、数据读写分离 
 
05、合理选用框架，合理架构(推荐分布式架构)。 
 
    
                                
    • 
                                
  • cache 服务器
                                    小猪猪08
cache
                                    
    Cache   即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。 
　　1.Cache   是怎么样工作的? 
　　Cache   是分配在服务器上
    
                                
    • 
                                
  • mysql存储过程
                                    香水浓
mysql
                                    
    Description:插入大量测试数据 
 
use xmpl;

drop procedure if exists mockup_test_data_sp;

create procedure mockup_test_data_sp(
	in number_of_records int
)
begin
	declare cnt int;
	declare name varch
    
                                
    • 
                                
  • CSS的class、id、css文件名的常用命名规则
                                    agevs
JavaScriptUI框架Ajaxcss
                                    
      CSS的class、id、css文件名的常用命名规则 
    (一)常用的CSS命名规则 
　　头：header 
　　内容：content/container 
　　尾：footer 
　　导航：nav 
　　侧栏：sidebar 
　　栏目：column 
　　页面外围控制整体布局宽度：wrapper 
　　左右中：left right 
    
                                
    • 
                                
  • 全局数据源
                                    AILIKES
javatomcatmysqljdbcJNDI
                                    
    实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 
1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l
    
                                
    • 
                                
  • MYSQL的随机查询的实现方法
                                    baalwolf
mysql
                                    
    MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，
    
                                
    • 
                                
  • JAVA的getBytes()方法
                                    bijian1013
javaeclipseunixOS
                                    
        在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！  
    String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： 
    byte[] b_gbk = "
    
                                
    • 
                                
  • AngularJS中操作Cookies
                                    bijian1013
JavaScriptAngularJSCookies
                                    
            如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。 
        幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎
    
                                
    • 
                                
  • [Maven学习笔记五]Maven聚合和继承特性
                                    bit1129
maven
                                    
    Maven聚合 
  
在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块：   
1. 模型和数据持久化层user-core, 
2. 业务逻辑层user-service以 
3. web展现层user-web， 
user-service依赖于user-core 
user-web依赖于user-core和use
    
                                
    • 
                                
  • 【JVM七】JVM知识点总结
                                    bit1129
jvm
                                    
      1. JVM运行模式 
1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 
1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler 
    
                                
    • 
                                
  • linux下查看nginx、apache、mysql、php的编译参数
                                    ronin47

                                    
    在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 
1、nginx 
[root@361way ~]# /App/nginx/sbin/nginx -V
nginx: nginx version: nginx/
    
                                
    • 
                                
  • unity中运用Resources.Load的方法？
                                    brotherlamp
unity视频unity资料unity自学unityunity教程
                                    
    问：unity中运用Resources.Load的方法？ 
答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 
1、unity实时替换的物体即是依据环境条件
    
                                
    • 
                                
  • 线段树-入门
                                    bylijinnan
java算法线段树
                                    
    


/**
 * 线段树入门
 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次
 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i]
 * 
 * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18
 * @author lijinna
    
                                
    • 
                                
  • 全选与反选
                                    chicony
全选
                                    
      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>

    
                                
    • 
                                
  • vim一些简单记录
                                    chenchao051
vim
                                    
    mac在/usr/share/vim/vimrc linux在/etc/vimrc 
  
1、问：后退键不能删除数据，不能往后退怎么办？ 
      答：在vimrc中加入set backspace=2 
  
2、问：如何控制tab键的缩进？ 
      答：在vimrc中加入set tabstop=4 (任何
    
                                
    • 
                                
  • Sublime Text 快捷键
                                    daizj
快捷键sublime
                                    
    [size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：
    
                                
    • 
                                
  • php 引用(&)详解
                                    dcj3sjt126com
PHP
                                    
    在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容   复制代码代码如下:   
<?  
$a="ABC";  
$b =&$a;  
echo
    
                                
    • 
                                
  • SVN中trunk,branches,tags用法详解
                                    dcj3sjt126com
SVN
                                    
    Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。
    
                                
    • 
                                
  • 对软件设计的思考
                                    e200702084
设计模式数据结构算法ssh活动
                                    
    软件设计的宏观与微观  
 
   软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传
    
                                
    • 
                                
  • 同步、异步、阻塞、非阻塞
                                    geeksun
非阻塞
                                    
    同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。 
  
同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。 
场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。 
  
异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。 
实现：
    
                                
    • 
                                
  • Reverse SSH Tunnel 反向打洞實錄
                                    hongtoushizi
ssh
                                    
    實際的操作步驟：  
# 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port
ssh -NfR 12345:localhost:22 [email protected]

# 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器
ssh localhost -p 1
    
                                
    • 
                                
  • Hibernate中的缓存
                                    Josh_Persistence
一级缓存Hiberante缓存查询缓存二级缓存
                                    
    Hibernate中的缓存 
  
一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 
Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存
    
                                
    • 
                                
  • 对象关系行为模式之延迟加载
                                    home198979
PHP架构延迟加载
                                    
    形象化设计模式实战     HELLO!架构 
  
一、概念 
Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。 
延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。 
  
  
二、实现延迟加载 
实现Lazy Load主要有四种方法：延迟初始化、虚
    
                                
    • 
                                
  • xml 验证
                                    pengfeicao521
xmlxml解析
                                    
    有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 
 
public static void testPattern() { 
 
 // 含有非法字符的串 
 String str =       "Jamey&#52828;&#01;&#02;&#209;&#1282
    
                                
    • 
                                
  • div设置半透明效果
                                    spjich
css半透明
                                    
    为div设置如下样式： 
  
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}  
  
  
  
 说明： 
1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci
    
                                
    • 
                                
  • 你真的了解单例模式么？
                                    w574240966
java单例设计模式jvm
                                    
        单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。 
  
一，单例模式的5中写法。（回字的四种写法，哈哈。） 
    1，懒汉式 
          （1）线程不安全的懒汉式 
    public cla
    
                                
    • 
                

            

        

    




    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他