老王和小杨

Bootstrap-table 使用总结

一、什么是Bootstrap-table？

　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。本篇随笔介绍bootstrap-table插件在我实际项目中的应用情况，总结相关使用中碰到的问题处理经验。

二、怎么使用Bootstrap-table？

Bootstrap-Table显示数据到表格的方式有两种，一种是客户端（client）模式，一种是服务器（server）模式。

　　客户端模式：指的是在服务器中把要显示到表格的数据一次性加载出来，然后转换成JSON格式传到要显示的界面中，客户端模式较为简单，它是把数据一次性加载出来放到界面上，然后根据你设置的每页记录数，自动生成分页。当点击第二页时，会自动加载出数据，不会再向服务器发送请求。同时用户可以使用其自带的搜索功能，可以实现全数据搜索。对于数据量较少的时候，可以使用这个方法。

　　服务器模式：指的是根据设定的每页记录数和当前要显示的页码，发送数据到服务器进行查询，然后再显示到表格中。该方法可以根据用户的需要动态的加载数据，节省了服务器的资源，但是不能使用其自带的全数据搜索功能。

Bootstrap-table是基于Boostrap开发的插件，因此使用的时候，需要引入Bootstrap的脚本和样式。

如果我们项目中没有引入相关的文件，则需要引入这些样式和脚本文件，如下所示。

1 
2 
3

然后是Bootstrap-table的依赖引用：

CSS文件引入

脚本文件引入

1 
2 <--汉化文件，放在 bootstrap-table.js 后面-->
3

bootstrap-table在页面中的使用，可以分为两种，一种是纯粹用HTML5的写法，通过data-*的方式指定各种属性设置，一种是HTML+JS方式实现弹性设置。

如果我们采用HTML5标识的方式初始化HTML代码，则是下面的代码。

1 23456789
     
         
             Item ID
             Item Name
             Item Price

如果我们采用JS代码方式来初始化表格插件，那么只需要在HTML上声明一个表格对象即可，如下代码。

js代码如下：

 1 $('#table').bootstrapTable({
 2     url: 'data1.json',
 3     columns: [{
 4         field: 'id',
 5         title: 'Item ID'
 6     }, {
 7         field: 'name',
 8         title: 'Item Name'
 9     }, {
10         field: 'price',
11         title: 'Item Price'
12     }, ]
13 });

不过实际上我们使用 bootstrap-table的JS配置功能肯定比这个复杂很多，下面界面效果是实际表的数据展示。

三、Bootstrap-table详解：

1）整个JS属性配置

以上图为例，上图展示结果的JS代码如下所示：

 1 var $table;
 2         //初始化bootstrap-table的内容
 3         function InitMainTable () {
 4             //记录页面bootstrap-table全局变量$table，方便应用
 5             var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
 6             $table = $('#grid').bootstrapTable({
 7                 url: queryUrl,                      //请求后台的URL（*）
 8                 method: 'GET',                      //请求方式（*）
 9                 //toolbar: '#toolbar',              //工具按钮用哪个容器
10                 striped: true,                      //是否显示行间隔色
11                 cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
12                 pagination: true,                   //是否显示分页（*）
13                 sortable: true,                     //是否启用排序
14                 sortOrder: "asc",                   //排序方式
15                 sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
16                 pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
17                 pageSize: rows,                     //每页的记录行数（*）
18                 pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
19                 search: false,                      //是否显示表格搜索
20                 strictSearch: true,
21                 showColumns: true,                  //是否显示所有的列（选择显示的列）
22                 showRefresh: true,                  //是否显示刷新按钮
23                 minimumCountColumns: 2,             //最少允许的列数
24                 clickToSelect: true,                //是否启用点击选中行
25                 //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
26                 uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
27                 showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
28                 cardView: false,                    //是否显示详细视图
29                 detailView: false,                  //是否显示父子表
30                 //得到查询的参数
31                 queryParams : function (params) {
32                     //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
33                     var temp = {   
34                         rows: params.limit,                         //页面大小
35                         page: (params.offset / params.limit) + 1,   //页码
36                         sort: params.sort,      //排序列名  
37                         sortOrder: params.order //排位命令（desc，asc） 
38                     };
39                     return temp;
40                 },
41                 columns: [{
42                     checkbox: true,  
43                     visible: true                  //是否显示复选框  
44                 }, {
45                     field: 'Name',
46                     title: '姓名',
47                     sortable: true
48                 }, {
49                     field: 'Mobile',
50                     title: '手机',
51                     sortable: true
52                 }, {
53                     field: 'Email',
54                     title: '邮箱',
55                     sortable: true,
56                     formatter: emailFormatter
57                 }, {
58                     field: 'Homepage',
59                     title: '主页',
60                     formatter: linkFormatter
61                 }, {
62                     field: 'Hobby',
63                     title: '兴趣爱好'
64                 }, {
65                     field: 'Gender',
66                     title: '性别',
67                     sortable: true
68                 }, {
69                     field: 'Age',
70                     title: '年龄'
71                 }, {
72                     field: 'BirthDate',
73                     title: '出生日期',
74                     formatter: dateFormatter
75                 }, {
76                     field: 'Height',
77                     title: '身高'
78                 }, {
79                     field: 'Note',
80                     title: '备注'
81                 }, {
82                     field:'ID',
83                     title: '操作',
84                     width: 120,
85                     align: 'center',
86                     valign: 'middle',
87                     formatter: actionFormatter
88                 }, ],
89                 onLoadSuccess: function () {
90                 },
91                 onLoadError: function () {
92                     showTips("数据加载失败！");
93                 },
94                 onDblClickRow: function (row, $element) {
95                     var id = row.ID;
96                     EditViewById(id, 'view');
97                 },
98             });
99         };

上面JS代码的配置属性，基本上都加了注释说明，是比较容易理解的了。

2）查询及分页

这里的表格数据分页是采用服务器分页的方式，根据搜索条件从服务器返回数据记录的，并使用了排序的处理方式，这里的queryParams参数就是提交到服务器端的参数了。

 1 //得到查询的参数
 2 queryParams : function (params) {
 3 //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
 4      var temp = {   
 5            rows: params.limit,                         //页面大小
 6            page: (params.offset / params.limit) + 1,   //页码
 7            sort: params.sort,      //排序列名  
 8            sortOrder: params.order //排位命令（desc，asc） 
 9      };
10    return temp;
11 },

另外我们看到返回数据的URL地址接口是FindWithPager，我们来看看这个MVC控制器方法是如何处理数据返回的。

 1 /// 
 2         /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
 3         /// 
 4         /// 指定对象的集合
 5         public override ActionResult FindWithPager()
 6         {
 7             //检查用户是否有权限，否则抛出MyDenyAccessException异常
 8             base.CheckAuthorized(AuthorizeKey.ListKey);
 9 
10             string where = GetPagerCondition();
11             PagerInfo pagerInfo = GetPagerInfo();
12             var sort = GetSortOrder();
13 
14             List list = null;
15             if (sort != null && !string.IsNullOrEmpty(sort.SortName))
16             {
17                 list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
18             }
19             else
20             {
21                 list = baseBLL.FindWithPager(where, pagerInfo);
22             } 
23 
24             //Json格式的要求{total:22,rows:{}}
25             //构造成Json的格式传递
26             var result = new { total = pagerInfo.RecordCount, rows = list };
27             return ToJsonContent(result);
28         }

面代码处理了两个部分的对象信息，一个是分页实体类信息，一个是排序信息，然后根据这些条件获取记录，返回类似

{total:22,rows:{}}

格式的JSON数据记录。

1 var result = new { total = pagerInfo.RecordCount, rows = list };
2 return ToJsonContent(result);

获取分页的参数信息如下所示

 1 /// 
 2         /// 根据Request参数获取分页对象数据
 3         /// 
 4         /// 
 5         protected virtual PagerInfo GetPagerInfo()
 6         {
 7             int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
 8             int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
 9 
10             PagerInfo pagerInfo = new PagerInfo();
11             pagerInfo.CurrenetPageIndex = pageIndex;
12             pagerInfo.PageSize = pageSize;
13 
14             return pagerInfo;
15         }

获取排序参数信息的代码如下所示

 1 /// 
 2         /// 获取排序的信息
 3         /// 
 4         /// 
 5         protected SortInfo GetSortOrder()
 6         {
 7             var name = Request["sort"];
 8             var order = Request["sortOrder"];
 9             return new SortInfo(name, order);
10         }

最后就是具体实现具体条件、具体页码、具体排序条件下的数据记录了，这部分可以根据自己的要求实现逻辑，这里只是给出一个封装好的处理调用即可。

baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);

实际情况下，我们列表的展示，一般需要使用不同的条件进行数据的查询的，虽然这个Bootstrap-table控件提供了一个默认的查询按钮，不过一般是在客户端分页的情况下使用，而且略显简单，我们一般使用自己查询条件进行处理，如下界面所示。

或者如下：

那么这样对于上面的js属性就需要调整下接受查询条件参数queryParams 了

 1 //得到查询的参数
 2                 queryParams : function (params) {
 3                     //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
 4                     var temp = {   
 5                         rows: params.limit,                         //页面大小
 6                         page: (params.offset / params.limit) + 1,   //页码
 7                         sort: params.sort,      //排序列名  
 8                         sortOrder: params.order //排位命令（desc，asc） 
 9                     };
10                     return temp;
11                 },

对于自定义查询条件，我们可以用下面的常规方式增加参数，如下所示

但是查询条件的参数我们不方便一一设置，我们想通过一种较为快捷的方式来处理，那么就需要对这个处理方式进行一个特别的修改了，首先添加一个扩展函数来处理表单的条件（参考博客http://www.cnblogs.com/zcsj/p/6635677.html的介绍）

 1 //自定义函数处理queryParams的批量增加
 2         $.fn.serializeJsonObject = function () {
 3             var json = {};
 4             var form = this.serializeArray();
 5             $.each(form, function () {
 6                 if (json[this.name]) {
 7                     if (!json[this.name].push) {
 8                         json[this.name] = [json[this.name]];
 9                     }
10                     json[this.name].push();
11                 } else {
12                     json[this.name] = this.value || '';
13                 }
14             });
15             return json;
16         }

然后我们就可以批量处理表单的查询条件了

 1 queryParams : function (params) {
 2                     //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
 3                     var temp = $("#ffSearch").serializeJsonObject();
 4                     temp["rows"] = params.limit;                        //页面大小
 5                     temp["page"] = (params.offset / params.limit) + 1;  //页码
 6                     temp["sort"] = params.sort;                         //排序列名
 7                     temp["sortOrder"] = params.order;                   //排位命令（desc，asc） 
 8 
 9                     //特殊格式的条件处理
10                     temp["WHC_Age"] = $("#WHC_Age").val() + "~" + $("#WHC_Age2").val();
11                     temp["WHC_BirthDate"] = $("#WHC_BirthDate").val() + "~" + $("#WHC_BirthDate2").val();
12 
13                     return temp;
14                 },

然后后端统一按照逻辑处理查询参数即可。

3）格式化输出函数及其他

对于上面JS的配置信息，我们再来回顾一下，例如对于数据转义函数，可以格式化输出的内容的，如下界面代码。

格式化的数据转义函数如下，主要就是根据内容进行格式化输出的JS函数，好像是需要放在一个文件内。

 1 //连接字段格式化
 2         function linkFormatter(value, row, index) {                
 3             return "" + value + "";
 4         }
 5         //Email字段格式化
 6         function emailFormatter(value, row, index) {
 7             return "" + value + "";
 8         }
 9         //性别字段格式化
10         function sexFormatter(value) {
11             if (value == "女") { color = 'Red'; }
12             else if (value == "男") { color = 'Green'; }
13             else { color = 'Yellow'; }
14 
15             return '' + value + '
';
16         }

另外，我们看到行记录的最后增加了几个操作按钮，方便对当前记录的查看、编辑和删除操作，如下效果图所示。

这部分我们也是通过格式化函数进行处理的

 1 //操作栏的格式化
 2         function actionFormatter(value, row, index) {
 3             var id = value;
 4             var result = "";
 5             result += "";
 6             result += "";
 7             result += "";
 8 
 9             return result;
10         }

如果我们需要双击弹出编辑界面的层，我们可以处理表格的双击事件，如下代码所示。

1 onDblClickRow: function (row, $element) {
2                     var id = row.ID;
3                     EditViewById(id, 'view');
4                 },

如果我们需要设置行的不同的样式展示，可以通过增加rowStyle的JS处理函数即可，如下代码所示

1 rowStyle: function (row, index) { //设置行的特殊样式
2                     //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
3                     var strclass = "";
4                     if (index == 0) {
5                         strclass = "warning";
6                     }
7                     return { classes: strclass }
8                 }

对于表格记录的获取，我们可以通过下面的代码进行获取：$table.bootstrapTable('getSelections')

1   var rows = $table.bootstrapTable('getSelections');
2             if (rows.length > 0) {
3                 ID = rows[0].ID;
4             }

如果是多条记录的处理，例如删除记录

 1 //实现删除数据的方法
 2         function Delete() {
 3             var ids = "";//得到用户选择的数据的ID
 4             var rows = $table.bootstrapTable('getSelections');
 5             for (var i = 0; i < rows.length; i++) {
 6                 ids += rows[i].ID + ',';
 7             }
 8             ids = ids.substring(0, ids.length - 1);
 9 
10             DeleteByIds(ids);
11         }

如果需要设置显示列显示，如下界面所示

以及排序处理

这些需要在JS代码开启相关的属性即可。

还有就是一种CardView的卡片视图格式，如下所示。

另外一种是父子表的展开明细的格式，如下所示

以上就是bootstrap-table插件在我实际项目中的应用情况，基本上对JS各个属性的使用进行了一些介绍了，具体的应用我们可以参考它的文档，获取对应属性、方法、事件的详细说明，这样我们就可以更加详细的应用这个插件的各种功能了。

http://bootstrap-table.wenzhixin.net.cn/documentation/

PS：以上为转载内容，经过自己的梳理后重新发布，感谢原作者伍华聪，原文路径：https://www.cnblogs.com/wuhuacong/p/7284420.html

四、怎么在Spring MVC及SpringBoot项目中使用Bootstrap-table进行分页？

话不多说，直接上代码。

前端代码块：

　　页面：
1 "test-table"class="col-xs-12" data-toolbar="#toolbar">
　　JS: 2function initTable(){ 3 $('#test-table').bootstrapTable({ 4 method: 'get', 5 toolbar: '#toolbar', //工具按钮用哪个容器 6 striped: true, //是否显示行间隔色 7 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） 8 pagination: true, //是否显示分页（*） 9 sortable: false, //是否启用排序10 sortOrder: "asc", //排序方式11 pageNumber:1, //初始化加载第一页，默认第一页12 pageSize: 10, //每页的记录行数（*）13 pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）14 url: "/testProject/page4list.json",//这个接口需要处理bootstrap table传递的固定参数15 queryParamsType:'', //默认值为 'limit' ,在默认情况下传给服务端的参数为：offset,limit,sort 16// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber 1718//queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数19 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） 20//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大21 strictSearch: true, 22//showColumns: true, //是否显示所有的列 23//showRefresh: true, //是否显示刷新按钮24 minimumCountColumns: 2, //最少允许的列数25 clickToSelect: true, //是否启用点击选中行26 searchOnEnterKey: true, 27 columns: [{ 28 field: 'id', 29 title: 'id', 30 align: 'center'31 }, { 32 field: 'testkey', 33 title: '测试标识', 34 align: 'center'35 }, { 36 field: 'testname', 37 title: '测试名字', 38 align: 'center'39 },{ 40 field: 'id', 41 title: '操作', 42 align: 'center', 43 formatter:function(value,row,index){ 44//通过formatter可以自定义列显示的内容 45//value：当前field的值，即id 46//row：当前行的数据47var a = '测试'; 48 } 49 }], 50 pagination:true51 }); 52 }

在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。

服务端代码：

 1  @RequestMapping(value = "/page4list.json")
 2 public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
 3             HttpServletResponse response) {
 4 
 5         //搜索框功能
 6         //当查询条件中包含中文时，get请求默认会使用ISO-8859-1编码请求参数，在服务端需要对其解码
 7         if (null != searchText) {
 8             try {
 9                 searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8");
10             } catch (Exception e) {
11                 e.printStackTrace();
12             }
13         }
14         //在service通过条件查询获取指定页的数据的list
15         List list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText);
16         //根据查询条件，获取符合查询条件的数据总量
17         int total = mwMsgQueueService.queryCountBySearchText(searchText);
18         //自己封装的数据返回类型，bootstrap-table要求服务器返回的json数据必须包含：totlal，rows两个节点
19         PageResultForBootstrap page = new PageResultForBootstrap();
20         page.setTotal(total);
21         page.setRows(list);
22         //page就是最终返回给客户端的数据结构，可以直接返回给前端
23 
24         //下边这段，只是我自己的代码有自定义的spring HandlerInterceptor处理返回值，可以忽略。
25         request.setAttribute(Constants.pageResultData, page);
26 
27     }

完成上述代码，即可实现服务器端自动分页，bootstrap-table根据服务器端返回的total，以及table设定的pageSize，自动生成分页的页面元素，每次点击下一页或者指定页码，bootstrap-table会自动给参数pageNumber赋值，服务器返回指定页的数据。

如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。

这时就需要在bootstrap-table的参数列表中显式设置：

1 contentType: "application/x-www-form-urlencoded"

设置成form表单的形式，tomcat内部就会自动将requset payload中的数据部分解析放到request.getParameter()中，之后就可以直接通过@RequestParam映射参数获取

再次感谢该博文作者：闪电Wade

你可能感兴趣的:(Bootstrap-table 使用总结)

Spring Cloud云架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4) 初夏_91fb
上一篇我根据框架中OAuth2.0的使用总结，画了SSO单点登录之OAuth2.0登出流程，今天我们看一下根据用户token获取yoghurt信息的流程：image/***根据token获取用户信息*@paramaccessToken*@return*@throwsException*/@RequestMapping(value="/user/token/{accesstoken}",method
elementui Cascader 级联选择器的使用总结 XUE_雪 elementui 前端 javascript
实现效果技术要点总结如下：1、点击添加自动增加多行，实现自主选择增加多条节点数据2、节点地址使用的是Cascader级联选择器，需要动态生成，涉及到一个技术要点是：因v-modal只能获取value不能获取label，故需要解决在多个动态生成的Cascader分别获取他们选中的label和value,下面开始展示相关代码：html:添加删除确定取消js:handleChange(index){va
「iOS学习」——Masonry学习归辞... ios 学习 cocoa
iOS学习前言Masonry的属性Masonry的使用基础APIAutoBoxing修饰语倍数中心点设置边距优先级使用总结前言暑假我们学习了使用CocoaPods引入第三方库，实现使用SVG图片。而Masonry作为一个轻量级的布局架构，在使用中可以节省很多时间。故进行简单学习。Masonry的属性UI设计是iOS开发的必须一环，直接影响了app的观感和使用体验。我们通常使用frame框架直接确定
Python实现BASE64 算法闲人编程密码学 python 算法开发语言 BASE64 加解密密码学
目录使用Python实现BASE64算法的博客引言BASE64算法的工作原理BASE64编码表Python面向对象实现BASE64算法代码解析应用场景：在文件传输中的使用总结使用Python实现BASE64算法的博客引言在计算机科学中，BASE64是一种常用的数据编码方式，主要用于在处理文本时对二进制数据进行编码。BASE64编码的主要用途是在需要以文本形式传输二进制数据的场景下（例如电子邮件、U
Flybirds框架使用总结自动化测试框架
运行环境Python版本：3.9.9Node版本：20.5.1Pycharm版本：2021.3专业版安装flybirds包打开Pycharm终端，输入如下命令：pipinstallflybirds安装完成后继续输入flybirdscreate然后输入项目名、平台，设备名和包名可以后面再填运行用例以Android自动化测试为例在生成的项目路径fbTest/features/test/android新
echarts使用总结 LeoValiant echarts 堆叠图自适应
1、修改echarts指示线的长度：labelLine:{//指示线长度normal:{length:10}},2、echarts自适应window.addEventListener(‘resize’,function(){myChart.resize();})3、echarts柱形堆叠图注意添加stack属性。series:[{name:‘邮件营销’,type:‘line’,stack:‘总量’
go语言channle使用总结 xyt001
前言：channel提供了一种通信机制，通过它，一个goroutine可以想另一goroutine发送消息。channel本身还需关联了一个类型，也就是channel可以发送数据的类型。例如:发送int类型消息的channel写作chanint。channel很强大，但是还是有点坑，下面是我个人的总结。1.使用两个值接收channel：<-channel能够返回一个值或者两个值，当返回两个值的时候
Java 中Lambada表达式中双冒号 ::使用总结何以解忧，唯有.. java 开发语言
一、前言双冒号运算操作符是类方法的句柄，lambda表达式的一种简写表达式：person->person.getName();可以替换成：Person::getName表达式：()->newHashMaplist=Arrays.asList("a","b","c");//静态方法引用ClassName::methodNamelist.forEach(Colon::print);//上一行等价于//
自然语言处理系列四十五》Elasticsearch搜索引擎》Elasticsearch入门及技术原理陈敬雷-充电了么-CEO兼CTO 搜索引擎自然语言处理 elasticsearch ai chatgpt gpt 人工智能
注：此文章内容均节选自充电了么创始人，CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》（人工智能科学与技术丛书）【陈敬雷编著】【清华大学出版社】文章目录自然语言处理系列四十五Elasticsearch搜索引擎》Elasticsearch入门及技术原理Elasticsearch安装部署和使用总结自然语言处理系列四十五Elasticsearch搜索引擎》Elasticsearch入门及技术原理
CPU/内存/综合性能评估工具汇总-1:lmbench So_shine linux调试工具和性能量化性能优化
目录一、概括二、lmbench一、概括嵌入式开发中对要设计的产品、立项的项目进行设计时，往往需要对关键芯片进行性能评估，本文主要总结基于linux系统的产品在性能评估时的工具使用总结，在aarch64(arm64平台下测试)，板卡根文件系统为debian系统。工具列表如下：名称作用git源码链接lmbench带宽测评，反应时间测评https://github.com/redrose2100/lmb
【嵌入式模块】步进电机使用总结记录无知岁月 #嵌入式设备嵌入式硬件步进电机
关于本博客此前上了一门课《自动控制元件》，但是由于学时有限，讲到步进电机就不讲了，留下了一个小遗憾，导致需要使用步进电机时就有点懵，于是找了一篇博客，链接在这里，推荐具有电机知识（如直流电机，异步电机等）的朋友看，如果完全不懂，建议先啃书。
JVM级缓存本地缓存Caffeine 旺仔爱Java JVM专题 jvm JVM缓存本地缓存 Caffeine Guava Cache
JVM级缓存本地缓存Caffeine和GuavaCache前言一、创建缓存的代码逻辑二、Caffeine的优化方面淘汰算法W-TinyLFU三、Caffeine的业务使用总结前言最新的Java面试题，技术栈涉及Java基础、集合、多线程、Mysql、分布式、Spring全家桶、MyBatis、Dubbo、缓存、消息队列、Linux…等等，会持续更新。一、创建缓存的代码逻辑Caffeine：publ
整合spring cloud云架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4) 初夏_91fb
上一篇我根据框架中OAuth2.0的使用总结，画了SSO单点登录之OAuth2.0登出流程，今天我们看一下根据用户token获取yoghurt信息的流程：image/***根据token获取用户信息*@paramaccessToken*@return*@throwsException*/@RequestMapping(value="/user/token/{accesstoken}",method
git命令使用雄柱
git命令使用总结本文档分为两部分：1、git命令的使用，本地git仓库管理。2、git服务端搭建和使用。初始状态：设置用户名和邮箱：gitconfig--giobaluser.name"用户名"gitconfig--giobaluser.email"邮箱"一、git命令的使用，本地git仓库管理：git基本命令：gitinit创建版本库（repository）手动创建一个目录，进入该目录下执行该
Alert 组件使用总结爱绑架的猫
安装局部注册test.vueimport{Alert}from'vux'exportdefault{components:{Alert}}直接看属性：Alert-属性.png这里主要使用value这个属性控制Alert消息弹出框的显示与否，然后使用title控制标题，Content控制提示内容，button-text控制按钮的文字，其他属性暂时没有用到，一般的情况下默认就可以了。事件：Alert-
curl编译linux静态库及使用总结搬砖的小青年儿
一、安装OPENSSH1、上传文件并解压openssl-1.0.2k.tar.gz2、执行./configno-asmmakemakeinstall备注：如果要编译动态库，需要增加参数如下：./configno-asm--shared3、生成的文件目录在：/usr/local/ssl下二、安装curl1、上传文件并解压curl-7.53.1.tar.gz2、执行CPPFLAGS="-I/usr/l
C语言第二十六弹---字符串函数(下) 小林熬夜学编程 C语言详解 c语言开发语言算法
✨个人主页：熬夜学编程的小林系列专栏：【C语言详解】【数据结构详解】目录1、strncat函数的使用2、strncmp函数的使用3、strstr函数的使用和模拟实现4、strtok函数的使用5、strerror函数的使用6、perror函数的使用总结1、strncat函数的使用char*strncat(char*destination,constchar*source,size_tnum);•Ap
C语言第二十五弹---字符函数和字符串函数(上) 小林熬夜学编程 C语言详解 c语言开发语言算法
✨个人主页：熬夜学编程的小林系列专栏：【C语言详解】【数据结构详解】目录1、字符分类函数2、字符转换函数3、strlen的使用和模拟实现4、strcpy的模拟实现5、strcat的模拟实现6、strcmp的模拟实现7、strncpy函数的使用总结在编程的过程中，我们经常要处理字符和字符串，为了方便操作字符和字符串，C语言标准库中提供了⼀系列库函数，接下来我们就学习⼀下这些函数。1、字符分类函数C语
C语言第二十七弹---内存函数小林熬夜学编程 C语言详解 c语言开发语言
✨个人主页：熬夜学编程的小林系列专栏：【C语言详解】【数据结构详解】内存函数1、memcpy使用和模拟实现2、memmove使用和模拟实现3、memset函数的使用4、memcmp函数的使用总结前面两弹讲解了字符函数和字符串函数，但是在我们实际运用中不仅仅只有这些函数，因此下面我们继续需要几个常见的内存函数。1、memcpy使用和模拟实现void*memcpy(void*destination,c
【记录】Vue 高德地图使用总结（全地图/点聚合、单独区域、行政区划分、自定义图层） vue.js高德地图
全地区展示/点聚合单独区域展示行政区划分自定义图层样图展示一、全地区展示/点聚合注意点：1、把AMap.Map绑定dom放到search行政查询之外；2、使用AMap.MarkerClusterer插件点聚合3、不用再把点位map.add/*加载地图*/asyncgetMaps(){this.loading=true;awaitMapLoader().then((AMap)=>{constmap=
C语言指针进阶空杯心！ c语言算法 c++
常见的几种类型的指针前言一、字符指针(char*)1.字符常量2.字符串常量二、指针数组三、数组指针1.数组指针的定义2.数组名vs&数组名3.数组指针的使用总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、字符指针(char*)指
React中Dva状态管理（model）的使用总结和理解小流至江河 React Dva UmiJS React状态管理
一概述React中全局状态管理官方推荐使用Redux，Redux的使用场景其实在单个应用中是处于使用率只有20%，却有80%的学习成本。可是说是React全家桶中最难理解的部分了，相信很多人学习它时，各个概念整很迷糊。我就是要放弃Redux的时候，了解React-redux和redux-saga，它们是对redux的简化处理工具。可他们配置和文件结构，依然麻烦。直到Dva（低洼）的出现将React
C++STL总结笔记（一）—— 容器和容器适配器人狮子 C++c++容器数据结构
文章目录前言一、概念1.1顺序容器1.2容器适配器1.3关联容器二、程序示例1.vector和Set自定义数据类型的访问2.vector容器嵌套3.list容器排序4.pair对组的使用总结前言STL是C++中的基于数据结构和算法的标准模板库，可以大量节约系统开发时间，增加程序复用性。STL的六大件包括容器、算法、迭代器、仿函数、适配器和空间配置器，其中几乎所有代码均使用了模板类和模板函数的概念。
Jest框架使用总结海的那一边
先俗气一下，Firstofall，什么是Jest?Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架。1.jest安装：https://www.jianshu.com/p/16c604d1e0c42.测试执行前的准备及测试执行后的清理（setupandteardown）：afterAll(fn):在此文件中的所有测试都完成后，运行的功能。通常用在你想要清
关于拖拽插件murri.js的使用总结——iframe拖拽卡顿问题我有一个橙
做一个教务系统的界面，需要用到拖拽功能，要求可以拖拽到任意位置，支持自适应用户体验度高等在网上找了很多类似插件，对比后决定使用murri.js这款插件没有中文文档，github上有英文介绍和丰富的案例，所以做起来还是比较顺手的首先放一个已完成的界面：首页murri的案例中展示了很多种类的拖拽，大家可以根据自己的需要选择使用我这里使用的是比较基础的拖拽，没有排序功能等但是中间遇到一个问题：每个拖拽的
pandas数据分割pd.cut使用总结数据分析成长记
用途pandas.cut用来把一组数据分割成离散的区间。比如有一组年龄数据，可以使用pandas.cut将年龄数据分割成不同的年龄段并打上标签。原型参数含义x：被切分的类数组（array-like）数据，必须是1维的（不能用DataFrame）；bins：bins是被切割后的区间（或者叫“桶”、“箱”、“面元”），有3中形式：一个int型的标量、标量序列（数组）或者pandas.IntervalI
clickhouse 表引擎使用总结逆风飞翔的小叔 clickhouse 入门到精通 clickhouse 表引擎
表引擎特点表引擎是ClickHouse的一大特色。可以说，表引擎决定了如何存储表的数据。需要关注的点包括：数据的存储方式和位置，写到哪里以及从哪里读取数据；支持哪些查询以及如何支持；并发数据访问；索引的使用（如果存在）；是否可以执行多线程请求；数据复制参数；表引擎的使用方式就是必须显式在创建表时定义该表使用的引擎，以及引擎使用的相关参数。特别注意：引擎的名称大小写敏感；
sysrepo使用总结 c后端linux
前言搞sdwan也搞了一段时间了，数据交互用的是netconf，sysrepo相当于是一个数据库。本文着重介绍一下sysrepo的使用方式。sysrepoSysrepo是一个开源的配置数据存储库，它用于存储网络设备的配置和状态数据。它提供了一个层次化的数据模型，允许将配置和状态信息以树形结构的方式组织和管理。Sysrepo支持YANG数据模型，这是一种用于描述网络设备配置和状态的标准化语言。其与n
FLUME-NG 使用总结 .道不虚行 hadoop flume 大数据数据收集
FLUME-NG使用总结1、Flume-NG概述2、Flume-NG架构设计要点3、FlowPipeline4、FlumeNG三个组件概要4.1、FlumeSource4.2、FlumeChannel4.3、FlumeSink5、入门应用5.1、flume-ng通过网络端口采集数据5.2、flume-ng通过Exectail采集数据5.3、可能遇到的问题1、Flume-NG概述Flume-NG是一
Java 进阶—— super 和 this 的用法 zqixiao_09 Java 进阶 Java super this
一、thisJava关键字this只能用于方法方法体内。当一个对象创建后，Java虚拟机（JVM）就会给这个对象分配一个引用自身的指针，这个指针的名字就是this。因此，this只能在类中的非静态方法中使用，静态方法和静态的代码块中绝对不能出现this，这在“Java关键字static、final使用总结”一文中给出了明确解释。并且this只和特定的对象关联，而不和类关联，同一个类的不同对象有不同
jsonp 常用util方法 hw1287789687 jsonp jsonp常用方法 jsonp callback
jsonp 常用java方法 (1)以jsonp的形式返回:函数名(json字符串) /*** * 用于jsonp调用 * @param map : 用于构造json数据 * @param callback : 回调的javascript方法名 * @param filters : <code>SimpleBeanPropertyFilter theFilt
多线程场景 alafqq 多线程
0 能不能简单描述一下你在java web开发中需要用到多线程编程的场景？0 对多线程有些了解，但是不太清楚具体的应用场景，能简单说一下你遇到的多线程编程的场景吗？ Java多线程 2012年11月23日 15:41 Young9007 Young9007 4 0 0 4 Comment添加评论关注(2) 3个答案按时间排序按投票排序 0 0 最典型的如： 1、
Maven学习——修改Maven的本地仓库路径 Kai_Ge maven
安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹下放置了Maven本地仓库.m2/repository。所有的Maven构件(artifact)都被存储到该仓库中，以方便重用。但是windows用户的操作系统都安装在C盘，把Maven仓库放到C盘是很危险的，为此我们需要修改Maven的本地仓库路径。
placeholder的浏览器兼容 120153216 placeholder
【前言】自从html5引入placeholder后，问题就来了，不支持html5的浏览器也先有这样的效果，各种兼容，之前考虑，今天测试人员逮住不放，想了个解决办法，看样子还行，记录一下。【原理】不使用placeholder，而是模拟placeholder的效果，大概就是用focus和focusout效果。【代码】 <scrip
debian_用iso文件创建本地apt源 2002wmj Debian
1.将N个debian-506-amd64-DVD-N.iso存放于本地或其他媒介内，本例是放在本机/iso/目录下 2.创建N个挂载点目录如下： debian:~#mkdir –r /media/dvd1 debian:~#mkdir –r /media/dvd2 debian:~#mkdir –r /media/dvd3 …. debian:~#mkdir –r /media
SQLSERVER耗时最长的SQL 357029540 SQL Server
对于DBA来说，经常要知道存储过程的某些信息： 1. 执行了多少次 2. 执行的执行计划如何 3. 执行的平均读写如何 4. 执行平均需要多少时间列名 &
com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 7454103 eclipse
今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误，并且工程文件打不开了，在网上找了一下资料，然后按照方法操作了一遍，好了，解决方法如下：错误提示信息： An error has occurred.See error log for more details. Reason: com/genuitec/
用正则删除文本中的html标签 adminjun java html 正则表达式去掉html标签
使用文本编辑器录入文章存入数据中的文本是HTML标签格式，由于业务需要对HTML标签进行去除只保留纯净的文本内容，于是乎Java实现自动过滤。如下： public static String Html2Text(String inputString) { String htmlStr = inputString; // 含html标签的字符串 String textSt
嵌入式系统设计中常用总线和接口 aijuans linux 基础
嵌入式系统设计中常用总线和接口任何一个微处理器都要与一定数量的部件和外围设备连接，但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接，那么连线
Java函数调用方式——按值传递 ayaoxinchao java 按值传递对象基础数据类型
Java使用按值传递的函数调用方式，这往往使我感到迷惑。因为在基础数据类型和对象的传递上，我就会纠结于到底是按值传递，还是按引用传递。其实经过学习，Java在任何地方，都一直发挥着按值传递的本色。首先，让我们看一看基础数据类型是如何按值传递的。 public static void main(String[] args) { int a = 2;
ios音量线性下降 bewithme ios音量
直接上代码吧 //second 几秒内下降为0 - (void)reduceVolume:(int)second { KGVoicePlayer *player = [KGVoicePlayer defaultPlayer]; if (!_flag) { _tempVolume = player.volume;
与其怨它不如爱它 bijian1013 选择理想职业规划
抱怨工作是年轻人的常态，但爱工作才是积极的心态，与其怨它不如爱它。一般来说，在公司干了一两年后，不少年轻人容易产生怨言，除了具体的埋怨公司“扭门”，埋怨上司无能以外，也有许多人是因为根本不爱自已的那份工作，工作完全成了谋生的手段，跟自已的性格、专业、爱好都相差甚远。
一边时间不够用一边浪费时间 bingyingao 工作时间浪费
一方面感觉时间严重不够用，另一方面又在不停的浪费时间。每一个周末，晚上熬夜看电影到凌晨一点，早上起不来一直睡到10点钟，10点钟起床，吃饭后玩手机到下午一点。精神还是很差，下午像一直野鬼在城市里晃荡。为何不尝试晚上10点钟就睡，早上7点就起，时间完全是一样的，把看电影的时间换到早上，精神好，气色好，一天好状态。控制让自己周末早睡早起，你就成功了一半。有多少个工作
【Scala八】Scala核心二：隐式转换 bit1129 scala
Implicits work like this: if you call a method on a Scala object, and the Scala compiler does not see a definition for that method in the class definition for that object, the compiler will try to con
sudoku slover in Haskell (2) bookjovi haskell sudoku
继续精简haskell版的sudoku程序，稍微改了一下，这次用了8行，同时性能也提高了很多，对每个空格的所有解不是通过尝试算出来的，而是直接得出。 board = [0,3,4,1,7,0,5,0,0, 0,6,0,0,0,8,3,0,1, 7,0,0,3,0,0,0,0,6, 5,0,0,6,4,0,8,0,7,
Java-Collections Framework学习与总结-HashSet和LinkedHashSet BrokenDreams linkedhashset
本篇总结一下两个常用的集合类HashSet和LinkedHashSet。它们都实现了相同接口java.util.Set。Set表示一种元素无序且不可重复的集合；之前总结过的java.util.List表示一种元素可重复且有序
读《研磨设计模式》-代码笔记-备忘录模式-Memento bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; /* * 备忘录模式的功能是，在不破坏封装性的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态，为以后的状态恢复作“备忘”
《RAW格式照片处理专业技法》笔记 cherishLC PS
注意，这不是教程！仅记录楼主之前不太了解的一、色彩（空间）管理作者建议采用ProRGB（色域最广），但camera raw中设为ProRGB，而PS中则在ProRGB的基础上，将gamma值设为了1.8（更符合人眼）注意：bridge、camera raw怎么设置显示、输出的颜色都是正确的（会读取文件内的颜色配置文件），但用PS输出jpg文件时，必须先用Edit->conv
使用 Git 下载 Spring 源码编译 for Eclipse crabdave eclipse
使用 Git 下载 Spring 源码编译 for Eclipse 1、安装gradle，下载 http://www.gradle.org/downloads 配置环境变量GRADLE_HOME，配置PATH %GRADLE_HOME%/bin，cmd，gradle -v 2、spring4 用jdk8 下载 https://jdk8.java.
mysql连接拒绝问题 daizj mysql 登录权限
mysql中在其它机器连接mysql服务器时报错问题汇总一、[running][email protected]:~$mysql -uroot -h 192.168.9.108 -p //带-p参数，在下一步进行密码输入 Enter password: //无字符串输入 ERROR 1045 (28000): Access
Google Chrome 为何打压 H.264 dsjt apple html5 chrome Google
Google 今天在 Chromium 官方博客宣布由于 H.264 编解码器并非开放标准，Chrome 将在几个月后正式停止对 H.264 视频解码的支持，全面采用开放的 WebM 和 Theora 格式。 Google 在博客上表示，自从 WebM 视频编解码器推出以后，在性能、厂商支持以及独立性方面已经取得了很大的进步，为了与 Chromium 现有支持的編解码器保持一致，Chrome
yii 获取控制器名和方法名 dcj3sjt126com yii framework
1. 获取控制器名在控制器中获取控制器名: $name = $this->getId(); 在视图中获取控制器名: $name = Yii::app()->controller->id; 2. 获取动作名在控制器beforeAction()回调函数中获取动作名: $name =
Android知识总结（二） come_for_dream android
明天要考试了，速速总结如下 1、Activity的启动模式 standard：每次调用Activity的时候都创建一个（可以有多个相同的实例，也允许多个相同Activity叠加。） singleTop：可以有多个实例，但是不允许多个相同Activity叠加。即，如果Ac
高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元 gcq511120594 工作项目管理
高洛峰，兄弟连IT教育合伙人、猿代码创始人、PHP培训第一人、《细说PHP》作者、软件开发工程师、《IT峰播》主创人、PHP讲师的鼻祖！首期现在的进程刚刚过半，徒弟们真的很棒，人品都没的说，团结互助，学习刻苦，工作认真积极，灵活上进。我几乎会把他们全部留下来，现在已有一多半安排了实际的工作，并取得了很好的成绩。等他们出徒之日，凭他们的能力一定能够拿到高薪，而且我还承诺过一个徒弟，当他拿到大学毕
linux expect heipark expect
1. 创建、编辑文件go.sh #!/usr/bin/expect spawn sudo su admin expect "*password*" { send "13456\r\n" } interact 2. 设置权限 chmod u+x go.sh 3.
Spring4.1新特性——静态资源处理增强 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
idea ubuntuxia 乱码 liyonghui160com
1.首先需要在windows字体目录下或者其它地方找到simsun.ttf 这个字体文件。 2.在ubuntu 下可以执行下面操作安装该字体： sudo mkdir /usr/share/fonts/truetype/simsun sudo cp simsun.ttf /usr/share/fonts/truetype/simsun fc-cache -f -v
改良程序的11技巧 pda158 技巧
有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：尽量保持方法简短永远永远不要把同一个变量用于多个不同的
300个涵盖IT各方面的免费资源（下）——工作与学习篇 shoothao 创业免费资源学习课程远程工作
工作与生产效率: A. 背景声音 Noisli:背景噪音与颜色生成器。 Noizio:环境声均衡器。 Defonic:世界上任何的声响都可混合成美丽的旋律。 Designers.mx:设计者为设计者所准备的播放列表。 Coffitivity:这里的声音就像咖啡馆里放的一样。 B. 避免注意力分散 Self Co
深入浅出RPC uule rpc
深入浅出RPC-浅出篇深入浅出RPC-深入篇 RPC Remote Procedure Call Protocol 远程过程调用协议它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP或UDP，为通信程序之间携带信息数据。在OSI网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他