整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文作者：HelloGitHub-kalifun
这是 HelloGitHub 推出的《讲解开源项目》系列，今天给大家推荐一个基于 Bootstrap 和 jQuery 的表格插件：Bootstrap-Table
一、介绍
从项目名称就可以知道，这是一款 Bootstrap 的表格插件。表格的展示的形式所有的前端几乎在工作中都有涉及过，Bootstrap Table 提供了快速的建表、查询、分页、排序等一系列功能。
项目地址：https://github.com/wenzhixin/bootstrap-table
可能 Bootstrap 和 jQuery 技术有些过时了，但如果因为历史的技术选型或者旧的项目还在用这两个库的话，那这个项目一定会让你的嘴角慢慢上扬，拿下表格展示方面的需求易如反掌！
二、模式
Boostatrp Table 分为两种模式：客户端（client）模式、服务端（server）模式。
三、实战操作
Tips： 解释说明均在代码中以注释方式展示，请大家注意阅读。
我们采用的是最简单的 CDN 引入方式，代码可直接运行。复制代码并将配置好 json 文件的路径即可看到效果。
3.1 快速上手
注释中的星号表示该参数必写，话不多说上代码。示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, Bootstrap Table!</title>
// 引入 css
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
// 需要填充的表格
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入js
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
window.operateEvents = {
// 当点击 class=delete 时触发
'click .delete': function (e,value,row,index) {
// 在 console 打印出整行数据
console.log(row);
}
};
$('#tb_departments').bootstrapTable({
url: '/frontend/bootstrap-table/user.json', //请求后台的 URL（*）
method: 'get', //请求方式（*）
// data: data, //当不使用上面的后台请求时，使用data来接收数据
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为 true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分页方式：client 客户端分页，server 服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 6, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以个人感觉意义不大
strictSearch: true, //启用严格搜索。禁用比较检查。
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置 height 属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true //复选框标题，就是我们看到可以通过复选框选择整行。
}, {
field: 'id', title: 'ID' //我们取json中id的值，并将表头title设置为ID
}, {
field: 'username', title: '用户名' //我们取 json 中 username 的值，并将表头 title 设置为用户名
},{
field: 'sex', title: '性别' //我们取 json 中 sex 的值，并将表头 title 设置为性别
},{
field: 'city', title: '城市' //我们取 json 中 city 的值，并将表头 title 设置为城市
},{
field: 'sign', title: '签名' //我们取 json 中 sign 的值，并将表头 title 设置为签名
},{
field: 'classify', title: '分类' //我们取 json 中 classify 的值，并将表头 title 设置为分类
},{
//ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
// events 触发事件
field: 'Button',title:"操作",align: 'center',events:operateEvents,formatter:function(value,row,index){
var del = '<button type="button" class="btn btn-danger delete">删除</button>'
return del;
}
}
],
responseHandler: function (res) {
return res.data //在加载远程数据之前，处理响应数据格式.
// 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
}
});
</script>
</body>
</html>上面的代码展示通过基本 API 实现基础的功能，示例代码并没有罗列所有的 API。该库还有很多好玩的功能等着大家去发现，正所谓师父领进门修行靠个人～
3.2 拆解讲解
下面对关键点进行阐述，为了更方便使用的小伙伴清楚插件的用法。
3.2.1 初始化部分
选择需要初始化表格。
$('#tb_departments').bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>3.2.2 阅读数据部分
columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]3.2.3 事件触发器
events:operateEvents
window.operateEvents = {
'click .download': function (e,value,row,index) {
console.log(row);
}
}因为很多时候我们需要针对表格进行处理，所以事件触发器是一个不错的选择。比如：它可以记录我们的行数据，可以利用触发器进行定制函数的执行等。
四、扩展
介绍几个扩展可以让我们便捷的实现更多的表格功能，而不需要自己造轮子让我们的工作更加高效（也可以进入官网查看扩展的具体使用方法，官方已经收集了大量的扩展）。老规矩直接上代码：
4.1 表格导出
<script src="js/bootstrap-table-export.js"></script> showExport: true, //是否显示导出 exportDataType: basic, //导出数据类型，支持：'基本'，'全部'，'选中' exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型
4.2 自动刷新
<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script> autoRefresh: true, //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新 autoRefreshStatus: true, //设置 true 为启用自动刷新。这是表加载时状态自动刷新 autoRefreshInterval: 60, //每次发生自动刷新的时间（以秒为单位） autoRefreshSilent: true //设置为静默自动刷新
4.3 复制行
<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script> showCopyRows: true, //设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板 copyWithHidden: true, //设置 true 为使用隐藏列进行复制 copyDelimiter: ', ', //复制时，此分隔符将插入列值之间 copyNewline: '\n' //复制时，此换行符将插入行值之间
五、总结
本篇文章只是简单的阐述 Bootstrap-Table 如何使用，正在对表格功能实现而忧愁的小伙伴，可以使用 HelloGitHub 推荐的这款插件。你会发现网页制作表格还可以如此快捷，期待小伙伴挖掘出更加有意思的功能哦。
注：上面 js 部分并没有采用函数形式，建议在使用熟悉之后还是采用函数形式，这样也方便复用及让代码看起来更加规范。
参考资料
[1]《讲解开源项目》: https://github.com/HelloGitHub-Team/Article
[2]Bootstrap-Table 项目地址: https://github.com/wenzhixin/bootstrap-table
[3]Bootstrap-Table 官方文档: https://bootstrap-table.com/docs/getting-started/introduction/
『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系我们、加入我们，让更多人爱上开源、贡献开源～
评分析平台-介绍
具体介绍见之前的视频：
差评分析助手-01-介绍
差评分析助手-02-技术
差评分析助手-03-演示
目标
一个涉及到Python基础，爬虫，数据分析，前端，web框架，数据库，缓存，任务队列，服务部署，上线优化的综合性可扩展的项目。
综合运用各种编程知识，培养全栈开发能力。
功能
前端
展示业务流程
分页
跳转
数据可视化
后端
制作API，获取状态和结果
根据分页返回数据
缓存优先
分页获取
异步执行任务
windows: pip install eventlet
> celery worker -A app.celery --loglevel=debug -P eventlet
前后端分离
跨域
restful
验证
docker服务部署
上线优化
技术
前端
vue
https://cn.vuejs.org/v2/guide/
vuex
https://vuex.vuejs.org/zh/guide/state.html
elementUI
https://element.eleme.cn/#/zh-CN
https://github.com/ElementUI/vue-cli-plugin-element
echarts
https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
https://www.echartsjs.com/tutorial.html
https://www.echartsjs.com/examples/
v-charts
https://v-charts.js.org/#/props
后端API
Python
基础知识
面向对象
网络基础
http
web框架
flask
http://flask.pocoo.org/
https://flask-restful.readthedocs.io/en/latest/
https://flask-httpauth.readthedocs.io/en/latest/
爬虫
优化
制作API
mongodb
存储爬取结果
redis
记录任务，爬虫状态
缓存分析结果
celery
任务队列
rabbitmq
pandas
提取有用数据
https://www.jianshu.com/p/161364dd0acf
https://pandas.pydata.org/pandas-docs/stable/getting_started/10min.html#merge
可视化
维度：观察数据的角度和对数据的描述
目标：使用图表展示数据，让用户快速抓住要点信息
要点：把握图表特点，使用不同维度，展示合适的数据。
图表分类
折线图
示意图
展示数据的趋势，在横轴的维度上展示纵轴数据的变化趋势
柱状图
示意图
比较数据大小，多个维度的变化分析，用大小和颜色区分
局限：分类过多则无法展示数据特点
饼图
示意图
表示一组数据的占比
工具
echarts:
https://www.echartsjs.com
http://echarts.apache.org/
pyecharts: https://pyecharts.org/#/zh-cn/intro
v-charts: https://v-charts.js.org/#/
后续会逐步推出前端到后端的开发过程，敬请关注。
ava识堂，一个高原创，高收藏，有干货的微信公众号，欢迎关注
sort 命令对 File 参数指定的文件中的行排序，并将结果写到标准输出。如果 File 参数指定多个文件，那么 sort 命令将这些文件连接起来，并当作一个文件进行排序。
sort语法
[root@www ~]# sort [-fbMnrtuk] [file or stdin] 选项与参数： -f ：忽略大小写的差异，例如 A 与 a 视为编码相同； -b ：忽略最前面的空格符部分； -M ：以月份的名字来排序，例如 JAN, DEC 等等的排序方法； -n ：使用『纯数字』进行排序(默认是以文字型态来排序的)； -r ：反向排序； -u ：就是 uniq ，相同的数据中，仅出现一行代表； -t ：分隔符，默认是用 [tab] 键来分隔； -k ：以那个区间 (field) 来进行排序的意思
对/etc/passwd 的账号进行排序 [root@www ~]# cat /etc/passwd | sort adm:x:3:4:adm:/var/adm:/sbin/nologin apache:x:48:48:Apache:/var/www:/sbin/nologin bin:x:1:1:bin:/bin:/sbin/nologin daemon:x:2:2:daemon:/sbin:/sbin/nologin
sort 是默认以第一个数据来排序，而且默认是以字符串形式来排序,所以由字母 a 开始升序排序。
/etc/passwd 内容是以 : 来分隔的，我想以第三栏来排序，该如何
[root@www ~]# cat /etc/passwd | sort -t ':' -k 3 root:x:0:0:root:/root:/bin/bash uucp:x:10:14:uucp:/var/spool/uucp:/sbin/nologin operator:x:11:0:operator:/root:/sbin/nologin bin:x:1:1:bin:/bin:/sbin/nologin games:x:12:100:games:/usr/games:/sbin/nologin
默认是以字符串来排序的，如果想要使用数字排序：
cat /etc/passwd | sort -t ':' -k 3n root:x:0:0:root:/root:/bin/bash daemon:x:1:1:daemon:/usr/sbin:/bin/sh bin:x:2:2:bin:/bin:/bin/sh
默认是升序排序，如果要倒序排序，如下
cat /etc/passwd | sort -t ':' -k 3nr nobody:x:65534:65534:nobody:/nonexistent:/bin/sh ntp:x:106:113::/home/ntp:/bin/false messagebus:x:105:109::/var/run/dbus:/bin/false sshd:x:104:65534::/var/run/sshd:/usr/sbin/nologin
如果要对/etc/passwd,先以第六个域的第2个字符到第4个字符进行正向排序，再基于第一个域进行反向排序。
cat /etc/passwd | sort -t':' -k 6.2,6.4 -k 1r sync:x:4:65534:sync:/bin:/bin/sync proxy:x:13:13:proxy:/bin:/bin/sh bin:x:2:2:bin:/bin:/bin/sh sys:x:3:3:sys:/dev:/bin/sh
查看/etc/passwd有多少个shell:对/etc/passwd的第七个域进行排序，然后去重:
cat /etc/passwd | sort -t':' -k 7 -u root:x:0:0:root:/root:/bin/bash syslog:x:101:102::/home/syslog:/bin/false daemon:x:1:1:daemon:/usr/sbin:/bin/sh sync:x:4:65534:sync:/bin:/bin/sync sshd:x:104:65534::/var/run/sshd:/usr/sbin/nologin
uniq命令可以去除排序过的文件中的重复行，因此uniq经常和sort合用。也就是说，为了使uniq起作用，所有的重复行必须是相邻的。
uniq语法
[root@www ~]# uniq [-icu] 选项与参数： -i ：忽略大小写字符的不同； -c ：进行计数 -u ：只显示唯一的行
testfile的内容如下
cat testfile hello world friend hello world hello
直接删除未经排序的文件，将会发现没有任何行被删除
#uniq testfile hello world friend hello world hello
排序文件，默认是去重
#cat words | sort |uniq friend hello world
排序之后删除了重复行，同时在行首位置输出该行重复的次数
#sort testfile | uniq -c 1 friend 3 hello 2 world
仅显示存在重复的行，并在行首显示该行重复的次数
#sort testfile | uniq -dc 3 hello 2 world
仅显示不重复的行
sort testfile | uniq -u friend
cut命令可以从一个文本文件或者文本流中提取文本列。
cut语法
[root@www ~]# cut -d'分隔字符' -f fields <==用于有特定分隔字符 [root@www ~]# cut -c 字符区间 <==用于排列整齐的信息 选项与参数： -d ：后面接分隔字符。与 -f 一起使用； -f ：依据 -d 的分隔字符将一段信息分割成为数段，用 -f 取出第几段的意思； -c ：以字符 (characters) 的单位取出固定字符区间；
PATH 变量如下
[root@www ~]# echo $PATH /bin:/usr/bin:/sbin:/usr/sbin:/usr/local/bin:/usr/X11R6/bin:/usr/games # 1 | 2 | 3 | 4 | 5 | 6 | 7
将 PATH 变量取出，我要找出第五个路径。
#echo $PATH | cut -d ':' -f 5 /usr/local/bin
将 PATH 变量取出，我要找出第三和第五个路径。
#echo $PATH | cut -d ':' -f 3,5 /sbin:/usr/local/bin
将 PATH 变量取出，我要找出第三到最后一个路径。
echo $PATH | cut -d ':' -f 3- /sbin:/usr/sbin:/usr/local/bin:/usr/X11R6/bin:/usr/games
将 PATH 变量取出，我要找出第一到第三个路径。
#echo $PATH | cut -d ':' -f 1-3 /bin:/usr/bin:/sbin:
将 PATH 变量取出，我要找出第一到第三，还有第五个路径。
echo $PATH | cut -d ':' -f 1-3,5 /bin:/usr/bin:/sbin:/usr/local/bin
实用例子:只显示/etc/passwd的用户和shell
#cat /etc/passwd | cut -d ':' -f 1,7 root:/bin/bash daemon:/bin/sh bin:/bin/sh
统计文件里面有多少单词，多少行，多少字符。
wc语法
[root@www ~]# wc [-lwm] 选项与参数： -l ：仅列出行； -w ：仅列出多少字(英文单字)； -m ：多少字符；
默认使用wc统计/etc/passwd
#wc /etc/passwd 40 45 1719 /etc/passwd
40是行数，45是单词数，1719是字节数
wc的命令比较简单使用，每个参数使用如下：
#wc -l /etc/passwd #统计行数，在对记录数时，很常用 40 /etc/passwd #表示系统有40个账户 #wc -w /etc/passwd #统计单词出现次数 45 /etc/passwd #wc -m /etc/passwd #统计文件的字节数 1719
原文：https://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858385.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
