前言
我在做后台管理系统的时候发现,我们的系统有大量的表格查询模块,几乎每个页面都有一个表格查询功能,所以我利用react hooks的特性以及查阅网上的文章,封装了一个适合业务的通用hooks表格组件,供大家参考。
组件目录结构
index.tsx 就是我们的组件主文件,index.less 用于自定义表格样式, type.ts 用于定义接口类型
组件实现
1. 组件的功能
支持自定义表头配置
支持自定义查询方法
查询时自动loading
支持翻页功能
支持配置是否初始化
2. 组件 Props
首先我们看一下组件接收哪些参数
也就是我们定义的接口 ArgTableProps
baseProps 用于接收Table组件的自带属性
owncolumns 是一个函数,用来生成 table组件需要的表头配置
queryAction 查询操作方法,返回一个异步查询方法
params 表格的查询参数
defaultCurrent 表格默认页码
noInit 初始化不直接查询操作
// types.ts
import { TableProps } from 'antd/lib/table/Table';
export interface Columns {
[propName: string]: any;
}
// 查询方法
interface queryActionType {
(arg: any): Promise;
}
// 生成表头方法
export interface ColumnFunc {
(updateMethod?: queryActionType): Array;
}
// 表格组件Props
export interface ArgTableProps {
baseProps?: TableProps;
owncolumns: ColumnFunc;
queryAction: queryActionType;
params?: any;
defaultCurrent?: number;
noInit?: boolean;
}
// 页码状态
export interface paginationInitialType {
current: number;
pageSize: number;
total: number;
}
// 表格初始化状态
export interface initialStateType {
loading: boolean;
pagination: paginationInitialType;
dataSource: Array;
}
// 操作类型
export interface actionType {
type: string;
payload?: any;
}
3. 使用useReducer集中管理组件状态
// 分页数据
const paginationInitial: paginationInitialType = {
current: defaultCurrent || 1,
pageSize: 10,
total: 0,
};
// table组件全量数据
const initialState: initialStateType = {
loading: false, // 加载状态
pagination: paginationInitial, // 分页状态
dataSource: [], // 表格数据
};
const reducer = useCallback((state: initialStateType, action: actionType) => {
const { payload } = action;
switch (action.type) {
case 'TOGGLE_LOADING':
return { ...state, loading: !state.loading };
case 'SET_PAGINATION':
return { ...state, pagination: payload.pagination };
case 'SET_DATA_SOURCE':
return { ...state, dataSource: payload.dataSource };
default:
return state;
}
}, []);
const [state, dispatch] = useReducer(reducer, initialState);
4. 表格的核心查询方法
我们封装的表格一个最主要的功能就是我们只需要传入一个定义好的接口方法,表格组件就可以自动查询数据,查询方法如下
async function fetchData(currentPage?: number | undefined) {
dispatch({
type: 'TOGGLE_LOADING',
});
// 分页字段名称转换
const { current: pageNum, pageSize } = state.pagination;
const concatParams = { pageNum: currentPage || pageNum, pageSize, ...params };
const res = await queryAction(concatParams).catch(err => {
console.log('请求表格数据出错了');
dispatch({ type: 'TOGGLE_LOADING' });
return { err };
});
// 关闭loading
dispatch({
type: 'TOGGLE_LOADING',
});
if (res && res.code && res.code === 1) { // 这里根据具体后台接口返回判断
const { body } = res;
const list = body && body.records ? body.records : body;
// 根据后端接口返回设置总页码数和数据总数
dispatch({
type: 'SET_PAGINATION',
payload: {
pagination: {
...state.pagination,
current: currentPage || pageNum,
total: (body && body.total) || 0,
},
},
});
// 回填list数据
dispatch({
type: 'SET_DATA_SOURCE',
payload: {
dataSource: list,
},
});
}
}
5. 组件结构
然后我们分析下组件结构,这里我们依赖 antd 的 table 组件和 paination 组件
这里 table 组件本身也有自带的页码组件,但是我们为了更好调整表格和页码布局自己引入了页码组件
return (
record.id}
pagination={false}
dataSource={state.dataSource}
loading={state.loading}
{...baseProps}
/>
`总共 ${total} 条数据`}
showSizeChanger
onChange={handleTableChange}
/>
);
6. 执行逻辑
我们使用 useCallback 得到两个函数 fetchDataWarp 和 paramsChangeFetch
fetchDataWarp 作用是翻页状态变化时调用查询方法
paramsChangeFetch 作用是查询条件参数变化时调用查询方法
const [isInit, setIsInit] = useState(true); // 是否是第一次加载数据
const [mount, setMount] = useState(false); // 表格组件是否已挂载
// useCallback包装请求,缓存依赖,优化组件性能
const fetchDataWarp = useCallback(fetchData, [
state.pagination.current,
state.pagination.pageSize,
]);
const paramsChangeFetch = useCallback(fetchData, [params]);
useEffect(() => {
if (!(noInit && isInit)) { // 如果是第一次加载且noInit参数为true则不执行查询方法
fetchDataWarp();
}
if (isInit) {
setIsInit(false);
}
}, [fetchDataWarp]);
// 查询参数变化重置页码
useEffect(() => {
if (mount) { // 只在第一次挂载后参数变化才执行查询方法
paramsChangeFetch(1);
}
setMount(true);
}, [paramsChangeFetch]);
7. 全部代码
// index.tsx
import { Table, Pagination, Row, Col } from 'antd';
import React, { useEffect, useReducer, useCallback, Fragment, useState } from 'react';
import { ArgTableProps, paginationInitialType, initialStateType, actionType } from './type';
import styles from './index.less';
const useAsyncTable: React.FC = props => {
const { owncolumns, queryAction, params, baseProps, defaultCurrent, noInit = false } = props;
// 分页数据
const paginationInitial: paginationInitialType = {
current: defaultCurrent || 1,
pageSize: 10,
total: 0,
};
// table组件全量数据
const initialState: initialStateType = {
loading: false,
pagination: paginationInitial,
dataSource: [],
};
const reducer = useCallback((state: initialStateType, action: actionType) => {
const { payload } = action;
switch (action.type) {
case 'TOGGLE_LOADING':
return { ...state, loading: !state.loading };
case 'SET_PAGINATION':
console.log('reducer更新', payload);
return { ...state, pagination: payload.pagination };
case 'SET_DATA_SOURCE':
return { ...state, dataSource: payload.dataSource };
default:
return state;
}
}, []);
const [state, dispatch] = useReducer(reducer, initialState);
const [isInit, setIsInit] = useState(true);
const [mount, setMount] = useState(false);
async function fetchData(currentPage?: number | undefined) {
dispatch({
type: 'TOGGLE_LOADING',
});
// 分页字段名称转换
const { current: pageNum, pageSize } = state.pagination;
const concatParams = { pageNum: currentPage || pageNum, pageSize, ...params };
const res = await queryAction(concatParams).catch(err => {
console.log('请求表格数据出错了');
dispatch({ type: 'TOGGLE_LOADING' });
return { err };
});
// 关闭loading
dispatch({
type: 'TOGGLE_LOADING',
});
if (res && res.code && res.code === 1) {
const { body } = res;
const list = body && body.records ? body.records : body;
dispatch({
type: 'SET_PAGINATION',
payload: {
pagination: {
...state.pagination,
current: currentPage || pageNum,
total: (body && body.total) || 0,
},
},
});
// 回填list数据
dispatch({
type: 'SET_DATA_SOURCE',
payload: {
dataSource: list,
},
});
}
}
// 改变页码
function handleTableChange(current: number, pageSize?: number) {
console.log('页码改变', current, pageSize);
dispatch({
type: 'SET_PAGINATION',
payload: {
pagination: {
...state.pagination,
current,
pageSize,
},
},
});
}
// useCallback包装请求,缓存依赖,优化组件性能
const fetchDataWarp = useCallback(fetchData, [
state.pagination.current,
state.pagination.pageSize,
]);
const paramsChangeFetch = useCallback(fetchData, [params]);
useEffect(() => {
console.log('页码改变,请求方法更新', `noInit: ${noInit}, isInit: ${isInit}`);
if (!(noInit && isInit)) {
console.log('执行数据列表更新');
fetchDataWarp();
}
if (isInit) {
setIsInit(false);
}
}, [fetchDataWarp]);
// 查询参数变化重置页码
useEffect(() => {
if (mount) {
paramsChangeFetch(1);
}
setMount(true);
}, [paramsChangeFetch]);
return (
record.id}
pagination={false}
dataSource={state.dataSource}
loading={state.loading}
{...baseProps}
/>
`总共 ${total} 条数据`}
showSizeChanger
onChange={handleTableChange}
/>
);
};
export default useAsyncTable;
组件使用方法
1. 代码示例
import React, { useCallback } from 'react';
import ArgTable from '@/components/Hooks/useAsyncTable';
import getColumnFunc from '@/utils/ColumnFunc';
import { getLogTableData } from '@/server/serverList'
const Page: React.FC = () => {
const [params, setParams] = useState({});
// 查询方法
const fetchData = (params: any) => getLogTableData(params);
// 获取表头方法
const getColumn = getColumnFunc.educationManage.operationLog();
// 获取表头字段(缓存数据) updateMethod 这里是刷新表格方法,用于表格内部操作调用
const cbGetColumn = useCallback(updateMethod => getColumn(updateMethod), []);
return (
)
}
简单说明一下,我们封装的表格组件主要接收三个参数 params 查询参数, owncolumns 生成表头函数方法, queryAction 查询表格接口
2. 分模块处理表格表头配置
因为我们有大量的表格表头配置,所以我选择分模块集中配置表头,方便后期维护,然后通过 getColumnFunc 方法来导出表头配置。
这里重点提一下 getColumnFunc 函数,主要是获取生成表头配置的函数,先看一下目录结构
代码实现如下:
// 生成column函数 index.ts
import educationManage, { IEducationManage } from './modules/educationManage';
import systemManage, { ISystemManage } from './modules/systemManage';
import operationManage, { IOperationManage } from './modules/operationManage';
import educationWorkbench, { IEducationWworkbench } from './modules/educationWorkbench';
import marketingWorkbench, { IMarketingWorkbench } from './modules/marketingWorkbench';
import systemClassManage, { ISystemClassManage } from './modules/systemClassManage';
import financialWorkbench, { IFinancialWorkbench } from './modules/financialWorkbench';
interface IColumnFunc {
educationManage: IEducationManage;
systemManage: ISystemManage;
operationManage: IOperationManage;
educationWorkbench: IEducationWworkbench;
marketingWorkbench: IMarketingWorkbench;
systemClassManage: ISystemClassManage;
financialWorkbench: IFinancialWorkbench;
}
const columnFunc: IColumnFunc = {
educationManage,
educationWorkbench,
systemManage,
operationManage,
marketingWorkbench,
systemClassManage,
financialWorkbench,
};
export default columnFunc;
其中一个模块的写法
// 生成column函数 xxx模块
import { ColumnProps } from 'antd/lib/table';
import React, { Fragment } from 'react';
import { formatTime } from '@/utils/utils';
export interface IEducationManage {
operationLog: () => (updata?: any) => ColumnProps[];
}
const operationLog = () => (): ColumnProps[] => [
{
title: '操作类型',
width: '20%',
dataIndex: 'actionType',
},
{
title: '操作说明',
dataIndex: 'msg',
width: '30%',
},
{
title: '操作人员',
width: '30%',
dataIndex: 'userName',
},
{
title: '操作时间',
dataIndex: 'createDate',
render: (text: any) => {formatTime(text)} ,
},
];
const educationManage: IEducationManage = {
operationLog,
};
export default educationManage;
这样我们就基本上实现了一个react hooks表格组件,如果有其他业务需求也可以在此基础上进行修改,如有大佬有更好的实现建议或者问题都可以留言,感谢阅读。
3. 最后效果
你可能感兴趣的:(React Hooks之封装表格组件)
2023-07-25
2023梦启支教团方一诺
赏象形文字之美,品中华文化史诗——记中国矿业大学梦启支教团象形字课程7月24日上午10时,中国矿业大学梦启支教团在贵州省金沙县第九小学(金沙县彩虹小学)开展象形字课程,该课程意在使孩子们了解汉字发展演变的历史,欣赏象形文字的美,感受中华文化史诗的魅力。该课程由梦启支教团成员李洋讲授,梦启一班全体成员参加。首先,李洋老师向孩子们讲解汉字的起源——结绳说,正如古语所言:“古者无文字,其有约誓之事,事大
结婚从来不是两个人的事
流年良辰
和邻座的姑娘偶然谈起结婚的话题,她说:“我不想结婚,太麻烦了,结婚又不是两个人的事,而是两个家庭的事”。的确,结婚自古以来就不是两个人的事,从古到今都流传着一句话:父母之命,媒妁之言。一对恋人想要走进婚姻的殿堂,必须通过父母的层层考核,才能在一起。或许正是由于这个原因才会有那么多的不婚主义者出现。去年国庆节,我的闺蜜也正式步入了婚姻。她结婚的那天,我和其他朋友们盛装出席,只为见证这美满幸福的时刻。
我喜欢橡树
哥舒
橡树代表的意思是:永恒。橡树材质坚硬,粗壮宽大,树冠繁茂,有“森林之王”的美称。在欧美文化中,橡树与人的生命相关,是力量的象征,与权威相连。它有着非凡的威仪、特别的气度和神秘的力量,被视为“神秘之树”。传说这种高大粗壮树木的掌管者是希腊主神宙斯、罗马爱神丘比特以及灶神维斯塔。在宙斯神殿里的山地森林里,矗立着一棵具有神力的参天橡树,橡树叶的沙沙声就是主神宙斯对希腊人的晓喻。许多国家皆将橡树视为圣树,
AI教你学Python 第5天:面向对象编程(OOP)基础
凡人的AI工具箱
AI教你学Python python 开发语言 人工智能 AIGC
第5天:面向对象编程(OOP)基础一、面向对象编程概述面向对象编程(OOP)是一种编程范式,使用“对象”来表示数据和数据上可用的操作。OOP的核心概念包括类、对象、继承、多态和封装。概念描述类一种蓝图,定义了对象的属性和方法。对象类的实例,包含具体的数据和方法。继承一个类可以继承另一个类的属性和方法,从而实现代码重用。多态同一操作作用于不同对象时,表现出不同的行为。封装把数据和操作数据的方法绑定在
什么是过敏性鼻炎?
鳌拜的弟弟熬夜
过敏性鼻炎即变应性鼻炎,是一个全球性健康问题,可导致许多疾病。秋季天气干燥,空气的污染比较严重,各种过敏因素也非常容易在秋季出现,刺激鼻黏膜,引起过敏性鼻炎。中医认为,过敏性鼻炎属于“鼻鼽”范畴,是本虚标实证,是因肺、脾、肾三脏虚损,并受风寒之邪所袭,肺为寒邪所束,鼻窍失养所致。临床上,过敏性鼻炎主要有以下几种中医常见分型:肺气虚寒证、肺脾气虚证、肾虚证。人体的肺气、脾气乃至肾气虚,所以抵御致病原
quartus pin 分配(三)
落雨无风
IC设计 fpga fpga开发
quartuspin分配如有需要,可查看quartusUI界面sdc配置(二)上次文章中,说了自己写sdc需要配置的分类点,这次将介绍管脚分配。已打开Quartus软件,导入设计,写好约束下一步,在Quartus软件的菜单栏打开Assignments中的二级菜单PinPlanner打开改界面即可看到选中的fpga型号,管脚图,封装类型等信息。在打开的界面中,大致可分为上下两个部分。上半部分,可分为
换一个人结婚,你的婚姻就会好吗?
安澜秀
同学群有个人发出一个帮忙抢票的链接。我一看这个链接就是我一开始以为可以抢票,并且用这个抢票抢了一个星期也没有结果的。我着急得很,把我现在抢票的方法给他。硬要我帮忙抢票。我很好奇你不是回家去广西做什么?得知我在福建鞋厂又问我这里有没有妹子。我就是那种打破砂锅问到底的,他也不介意跟我讲他们夫妻俩的事。结婚七年了,七年之痒啊!现在是处于离婚的边缘。同学认为对她老婆还可以,那只是他个人认为。这次就想买票去
平平淡淡才是真——《菜根谭》读书笔记
云卷韵舒
图片图片士君子之涉世,于人不可轻为喜怒,喜怒轻,则心腹肝胆皆为人所窥。于物不可重为爱憎。爱憎重,则意气精神悉为物所制。士大夫君子在世上,对人不能轻易流露自己的喜怒哀乐,否则,所有的心思都会被人看破;对世上万物,也不要过分喜欢或厌恶,否则,就会玩物丧志。心体澄澈,常在明镜止水之中,则天下自无可厌之事;意气和平,常在丽日光风之内,则天下自无可恶之人。如果心如明镜,世上就没有心烦之事;心态平和,世上就没
父母辈的爱情
晟沽
时代变了,谈恋爱的方式也变了,像我们父母辈都是通过别人说媒的,有些连对方见都没见过就订婚结婚了,现在虽然有说媒,相亲的但总体来说是恋爱自由的,过去是父母之命,媒妁之言。常听我爸给我们讲他和我妈以前的事,他告诉我们当时媒人说媒我妈不同意,我爸家是农民,还没上过学,我妈虽说是也农民但我妈读过书,那时候我妈非常不同意,我外婆我外祖父怎么说就是不同意,可是呢有谁会想到呢,我妈说来我爸家看看,然后来了后因为
python之requests模块详解
Vibe~
python语言 python 爬虫
目录requests使用requests请求方法requests响应对象属性Requests模块是一个用于网络请求的模块,主要用来模拟浏览器发请求。其实类似的模块有很多,比如urllib,urllib2,httplib,httplib2,他们基本都提供相似的功能。但是这些模块都复杂而且差不多过时了,requests模块简单强大高效,使得其在众多网络请求模块中脱引而出。requests使用环境安装:
数据分析-24-时间序列预测之基于keras的VMD-LSTM和VMD-CNN-LSTM预测风速
皮皮冰燃
数据分析 数据分析
文章目录1普通的LSTM模型1.1数据重采样1.2数据标准化1.3切分窗口1.4划分数据集1.5建立模型1.6预测效果2VMD-LSTM模型2.1VMD分解时间序列2.2对每一个IMF建立LSTM模型2.2.1IMF1—LSTM2.2.2IMF2-LSTM2.2.3统一代码2.3评估效果3CNN-LSTM模型3.1数据预处理3.2建立模型3.3效果预测4VMD-CNN-LSTM模型4.1VMD分解
日更第20天@获奖了很开心,但药不能停
经常想你
图片发自App今天在展览现场,有个大哥指着梅岭三章问我,这个是你写的?我说是的,他很惊讶,啊,不像嘛,太粗犷豪迈啦!哈哈哈,放眼今古前贤,若令其胸乏湖海豪迈之情素,无占天地之广大吞吐无穷之气慨,徒言格调高雅、气象恢宏,尚能立乎!?图片发自App当一件作品呈现出来时,无须更多诠释,有识者便可从其间品读出各种信息:或高尚或卑俗,或激进或平和,或愤怒或感动,或磊落坦荡或阴暗狭隘,不一而足。但是有一点可以
来猜谜语啦13120
今思迟
【每日释谜一选】13113谜面:二三好友俱英豪(贺铸词句)谜底:交结五都雄释谜byz:会意法“二三”之和是“五”;好友:结交的好朋友,扣“交结”;“俱”扣“都”;“英豪”,英雄豪杰,扣“雄”。组成贺铸的《六州歌头·少年侠气》中的诗句——“交结五都雄”得底。【今思迟】制谜条数已达:13120每日增加五谜,你可直接拉到最后阅读。13081谜面:十有八九爱西湖(字)13082谜面:转宫刑之耻成史家之绝(
消费者消费最起码有一个信息来源
d74d59d3aca4
个人来源:家庭、朋友、邻居、熟人,这一类属于口碑,都是经过他人之口来传达信息,而且消费者愿意相信他们,因为他们本来就有信任基础。口碑的好处就是帮消费者做决策,现在做生意的都很注重口碑。商业来源:广告、网站、推销员、经销商、包装、展示,这一类需求信息展示的比较精准。我们看包装,广告,都是对应单个精准广告。明确告诉消费者是什么产品。消费者需要自己做决策,分析信息的真假和是否对自己合理。公共来源:大众媒
宝爸养成日记--小宝的提醒
伏宝震
我是樊登读书会伏宝震,这是我的每日一篇文章之293篇。我写的每一篇文章都是为了记录我和孩子们成长的点点滴滴,并希望以此约束自己,为自己提供一个不断反思,不断发现亮点的机会,帮助自己和孩子都成为自己想要的模样,因为我知道苍天不负有心人,也愿天下父母都能和孩子们一起度过看似漫长,其实非常宝贵的时光。今天发生的一件事,给我好好上了一课,给在小宝面前自以为是的我一记当头棒喝。一大清早,我开车带着小宝去接俞
天空之美—寻找校花之漫漫长路
陌离_0f58
校花,一个让人听到就心潮澎湃的词语。寻找校花之路漫漫,愿初心不负,亦如初恋人生若只如初见,何事秋风悲画扇人生若只如初见,何事秋风悲画扇初见是惊鸿一瞥,南柯一梦是你。初见是惊鸿一瞥,南柯一梦是你。等待是山重水复,怦然心动是你。等待是山重水复,怦然心动是你。相遇是柳暗花明,如梦初醒是你。相遇是柳暗花明,如梦初醒是你。重逢是始料未及,别来无恙是你。重逢是始料未及,别来无恙是你。颜如舜华,气若幽兰颜如舜华
《谈判力》8
kidII
20200801我思故我在120/1000学习成长115(2h)谈判障碍1之对方实力更强大(确定你的最佳替代方案)谈判是需要现实环境支持的的。最好的谈判结局有两大目标,其一保护自己;其二是让你的谈判资源发挥最大效用,使达成的协议能尽量满足你的利益需求。其一保护自己赶火车,目的非常重要。但是也可以完全可以赶下一班火车。谈判时也可能面临类似的处境,担心不能成交,最大的危险是你可能过于通融对方的观点,妥
车载以太网之SOME/IP
IT_码农
车载以太网 车载以太网 SOME/IP
整体介绍SOME/IP(全称为:Scalableservice-OrientedMiddlewarEoverIP),是运行在车载以太网协议栈基础之上的中间件,或者也可以称为应用层软件。发展历程AUTOSAR4.0-完成宝马SOME/IP消息的初步集成;AUTOSAR4.1-支持SOME/IP-SD及其发布/订阅功能;AUTOSAR4.2-添加transformer用于序列化以及其他相关优化;AUT
MySQL数据库全面学习之(上篇)
一心只为学
数据库 mysql 学习
Windows服务--启动MySQLnetstartmysql--创建Windows服务sccreatemysqlbinPath=mysqld_bin_path(注意:等号与值之间有空格)连接与断开服务器mysql-h地址-P端口-u用户名-p密码SHOWPROCESSLIST--显示哪些线程正在运行SHOWVARIABLES--显示系统变量信息数据库操作--查看当前数据库SELECTDATABA
关于讲道理的一些想法
施吉涛
图片发自App前段时间听到一个大佬讲【把别人书上的知识和观点分享出来价值不大,那叫慷他人之慨】,大概意思是这样子,这一点矫正了自己的一个分享态度,于是停更了很长一段时间。现在把自己对讲道理的一些想法梳理如下:1、从小就养成看书的习惯(喜欢讲道理的背景)2、进一步形成了一个好为人师的坏品行(实际上讲了很多废话,自己没能理解到位,同时也是慷他人之慨);3、到现在进一步理解了【讲道理】无效的一些原因:核
深度学习-13-小语言模型之SmolLM的使用
皮皮冰燃
深度学习 深度学习
文章附录1SmolLM概述1.1SmolLM简介1.2下载模型2运行2.1在CPU/GPU/多GPU上运行模型2.2使用torch.bfloat162.3通过位和字节的量化版本3应用示例4问题及解决4.1attention_mask和pad_token_id报错4.2max_new_tokens=205参考附录1SmolLM概述1.1SmolLM简介SmolLM是一系列尖端小型语言模型,提供三种规
前端使用react-intl-universal进行国际化
Stephy_Yy
# 调研 reactjs javascript css
一、国际化/i18n目前国际化,就是开发者写对象,一个key关联若干语种的翻译。相比于浏览器自带的翻译功能,语义更加准确。“国际化”的简称:i18n(其来源是英文单词internationalization的首末字符i和n,18为中间的字符数)二、react项目国际化react-intl是业界最受欢迎的软件包之一:React-intl是雅虎的语言国际化开源项目FormatJS的一部分,通过其提供的
八戒的修行之重回人间 10
斯琴巴图2021
题记:谨以此文,向五百年前在人间的射阳山人致敬。(十)谁能免俗很多年以来,人间已经忙乱的像一锅粥,而天庭幽静缓慢的如一幅山水画。人们像忙碌的虫子,恨不能生出翅膀来,成为神仙可以腾云驾雾,反而没有了方向,懒散的蜗居在洞府里,看着太阳升起,等着日落西山。八戒酣睡了许久,其实已经醒了很多次,但依旧闭着眼睛装睡,醒了又如何,又能去哪呢?一成不变的生活,让他腻烦的总想醉着,做神仙唯一的好处,大概就是可以一直
OpenGL之基础纹理一
我的大好时光
先看下效果图:纹理效果图.pngDemo下载地址:点击下载一、像素图像的数据包装图像存储空间=图像width*图像height*每个像素的字节数ps:有一张RGB的图像(每个颜色通道8位),图像的宽度199个像素,每行需要存储多少空间?解:8位为一个字节,有三个颜色,所以一个RGB需要3个字节存储。199(width)*1(height)*3(字节)二、像素的存储方式/**@parampname:
excel打开html非常慢,解决EXCEL表格打开缓慢,文件异常臃肿庞大
史文林
excel打开html非常慢
相信很多每天在操作EXCEL的朋友,会觉得自己的表格一天比一天大,一天比一天打开慢,但表格里面实际也没多少内容。这其中的主要原因之一,就是你喜欢在多个表格之间互相复制来复制去,粘贴的时候也不是使用选择性粘贴。把原来表格里面的所有样式设置内容和不必要的数据都复制过来了,导致整个工作薄变得异常臃肿庞大。接下来我们就来分析下具体发生了什么情况和如何解决这个问题吧!1.看这个“源文件”,文件大小居然达到了
html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示
睿理
html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格,可以填数的表格控件?首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
突然不想更新了怎么办?
酒拾叁
这个问题也一直困扰着我,现在已经连续日更一百零五天,中间有无数次想放弃,不想更新,因此就会出现应付的情况,譬如随便写个两三百字,往上一丢就完事,爱咋咋地!这期间我很庆幸,没有随着自己的性子,遇到不想更新的时候就不更新,还硬着头皮写完两三百字,虽然这些字没有什么价值,但至少保持着自己一个更新写文的状态。人们常说,千里之堤毁于蚁穴,这个道理运用到日更这件事也是非常适合的。有了一次因为不想日更而断更,就
《输出力》——输出实操1
根本不酷璇
一、少量输入之后,立即输出二、“诵《诗》三百,授之以政,不达;使于四方,不能专对;虽多,亦奚以为?”三、将经典语录自然融入闲谈中。在透露自己学识的时候,不要刻意炫技,一定要不漏声色的。今天读到34页
麻雀虽小,五脏俱全 - Java工具类库 - Hutool
waiter_chen
Hutool官网:https://www.hutool.cn官方参考文档:https://www.hutool.cn/docsAsetoftoolsthatkeepJavasweet.——Htool特点通过静态方法封装,类函数式语言般,降低学习成本,提高工作效率整合多方用户需求,减少代码搜索成本,避免网络上参差不齐的代码出现导致的bugutil包提供多方公用类和公用工具方法,节省开发封装时间,减少
Java在Controller生成Excel供前端直接下载
pengjunlee
SpringBoot重点详解 导出文件 POI excel Controller
在许多企业办公系统中,经常会有用户要求,需要对数据进行统计并且可以直接下载Excel文件,这样子的话,既然客户提出了要求,我们就应该去满足吖,毕竟客户是上帝嘛,那么我们如何去实现呢?且看我为你一一道来。POI简介JakartaPOI是一套用于访问微软格式文档的JavaAPI。JakartaPOI有很多组件组成,其中有用于操作Excel格式文件的HSSF和用于操作Word的HWPF,在各种组件中目前
[星球大战]阿纳金的背叛
comsci
本来杰迪圣殿的长老是不同意让阿纳金接受训练的.........
但是由于政治原因,长老会妥协了...这给邪恶的力量带来了机会
所以......现代的地球联邦接受了这个教训...绝对不让某些年轻人进入学院
看懂它,你就可以任性的玩耍了!
aijuans
JavaScript
javascript作为前端开发的标配技能,如果不掌握好它的三大特点:1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢?如果标配的技能都没有撑握好,怎么可以任性的玩耍呢?怎么验证自己学好了以上三个基本点呢,我找到一段不错的代码,稍加改动,如果能够读懂它,那么你就可以任性了。
function jClass(b
Java常用工具包 Jodd
Kai_Ge
java jodd
Jodd 是一个开源的 Java 工具集, 包含一些实用的工具类和小型框架。简单,却很强大! 写道 Jodd = Tools + IoC + MVC + DB + AOP + TX + JSON + HTML < 1.5 Mb
Jodd 被分成众多模块,按需选择,其中
工具类模块有:
jodd-core &nb
SpringMvc下载
120153216
springMVC
@RequestMapping(value = WebUrlConstant.DOWNLOAD)
public void download(HttpServletRequest request,HttpServletResponse response,String fileName) {
OutputStream os = null;
InputStream is = null;
Python 标准异常总结
2002wmj
python
Python标准异常总结
AssertionError 断言语句(assert)失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF(Ctrl+d) FloatingPointError 浮点计算错误 GeneratorExit generator.close()方法被调用的时候 ImportError 导入模块失
SQL函数返回临时表结构的数据用于查询
357029540
SQL Server
这两天在做一个查询的SQL,这个SQL的一个条件是通过游标实现另外两张表查询出一个多条数据,这些数据都是INT类型,然后用IN条件进行查询,并且查询这两张表需要通过外部传入参数才能查询出所需数据,于是想到了用SQL函数返回值,并且也这样做了,由于是返回多条数据,所以把查询出来的INT类型值都拼接为了字符串,这时就遇到问题了,在查询SQL中因为条件是INT值,SQL函数的CAST和CONVERST都
java 时间格式化 | 比较大小| 时区 个人笔记
7454103
java eclipse tomcat c MyEclipse
个人总结! 不当之处多多包含!
引用 1.0 如何设置 tomcat 的时区:
位置:(catalina.bat---JAVA_OPTS 下面加上)
set JAVA_OPT
时间获取Clander的用法
adminjun
Clander 时间
/**
* 得到几天前的时间
* @param d
* @param day
* @return
*/
public static Date getDateBefore(Date d,int day){
Calend
JVM初探与设置
aijuans
java
JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域。 JVM屏蔽了与具体操作系统平台相关的信息,使Java程序只需生成在Java虚拟机上运行的目标代码(字节码),就可以在多种平台
SQL中ON和WHERE的区别
avords
SQL中ON和WHERE的区别
数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户。 www.2cto.com 在使用left jion时,on和where条件的区别如下: 1、 on条件是在生成临时表时使用的条件,它不管on中的条件是否为真,都会返回左边表中的记录。
说说自信
houxinyou
工作 生活
自信的来源分为两种,一种是源于实力,一种源于头脑.实力是一个综合的评定,有自身的能力,能利用的资源等.比如我想去月亮上,要身体素质过硬,还要有飞船等等一系列的东西.这些都属于实力的一部分.而头脑不同,只要你头脑够简单就可以了!同样要上月亮上,你想,我一跳,1米,我多跳几下,跳个几年,应该就到了!什么?你说我会往下掉?你笨呀你!找个东西踩一下不就行了吗?
无论工作还
WEBLOGIC事务超时设置
bijian1013
weblogic jta 事务超时
系统中统计数据,由于调用统计过程,执行时间超过了weblogic设置的时间,提示如下错误:
统计数据出错!
原因:The transaction is no longer active - status: 'Rolling Back. [Reason=weblogic.transaction.internal
两年已过去,再看该如何快速融入新团队
bingyingao
java 互联网 融入 架构 新团队
偶得的空闲,翻到了两年前的帖子
该如何快速融入一个新团队,有所感触,就记下来,为下一个两年后的今天做参考。
时隔两年半之后的今天,再来看当初的这个博客,别有一番滋味。而我已经于今年三月份离开了当初所在的团队,加入另外的一个项目组,2011年的这篇博客之后的时光,我很好的融入了那个团队,而直到现在和同事们关系都特别好。大家在短短一年半的时间离一起经历了一
【Spark七十七】Spark分析Nginx和Apache的access.log
bit1129
apache
Spark分析Nginx和Apache的access.log,第一个问题是要对Nginx和Apache的access.log文件进行按行解析,按行解析就的方法是正则表达式:
Nginx的access.log解析正则表达式
val PATTERN = """([^ ]*) ([^ ]*) ([^ ]*) (\\[.*\\]) (\&q
Erlang patch
bookjovi
erlang
Totally five patchs committed to erlang otp, just small patchs.
IMO, erlang really is a interesting programming language, I really like its concurrency feature.
but the functional programming style
log4j日志路径中加入日期
bro_feng
java log4j
要用log4j使用记录日志,日志路径有每日的日期,文件大小5M新增文件。
实现方式
log4j:
<appender name="serviceLog"
class="org.apache.log4j.RollingFileAppender">
<param name="Encoding" v
读《研磨设计模式》-代码笔记-桥接模式
bylijinnan
java 设计模式
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
/**
* 个人觉得关于桥接模式的例子,蜡笔和毛笔这个例子是最贴切的:http://www.cnblogs.com/zhenyulu/articles/67016.html
* 笔和颜色是可分离的,蜡笔把两者耦合在一起了:一支蜡笔只有一种
windows7下SVN和Eclipse插件安装
chenyu19891124
eclipse插件
今天花了一天时间弄SVN和Eclipse插件的安装,今天弄好了。svn插件和Eclipse整合有两种方式,一种是直接下载插件包,二种是通过Eclipse在线更新。由于之前Eclipse版本和svn插件版本有差别,始终是没装上。最后在网上找到了适合的版本。所用的环境系统:windows7JDK:1.7svn插件包版本:1.8.16Eclipse:3.7.2工具下载地址:Eclipse下在地址:htt
[转帖]工作流引擎设计思路
comsci
设计模式 工作 应用服务器 workflow 企业应用
作为国内的同行,我非常希望在流程设计方面和大家交流,刚发现篇好文(那么好的文章,现在才发现,可惜),关于流程设计的一些原理,个人觉得本文站得高,看得远,比俺的文章有深度,转载如下
=================================================================================
自开博以来不断有朋友来探讨工作流引擎该如何
Linux 查看内存,CPU及硬盘大小的方法
daizj
linux cpu 内存 硬盘 大小
一、查看CPU信息的命令
[root@R4 ~]# cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep "physical id"
model name : Intel(R) Xeon(R) CPU X5450 @ 3.00GHz
model name :
linux 踢出在线用户
dongwei_6688
linux
两个步骤:
1.用w命令找到要踢出的用户,比如下面:
[root@localhost ~]# w
18:16:55 up 39 days, 8:27, 3 users, load average: 0.03, 0.03, 0.00
USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT
放手吧,就像不曾拥有过一样
dcj3sjt126com
内容提要:
静悠悠编著的《放手吧就像不曾拥有过一样》集结“全球华语世界最舒缓心灵”的精华故事,触碰生命最深层次的感动,献给全世界亿万读者。《放手吧就像不曾拥有过一样》的作者衷心地祝愿每一位读者都给自己一个重新出发的理由,将那些令你痛苦的、扛起的、背负的,一并都放下吧!把憔悴的面容换做一种清淡的微笑,把沉重的步伐调节成春天五线谱上的音符,让自己踏着轻快的节奏,在人生的海面上悠然漂荡,享受宁静与
php二进制安全的含义
dcj3sjt126com
PHP
PHP里,有string的概念。
string里,每个字符的大小为byte(与PHP相比,Java的每个字符为Character,是UTF8字符,C语言的每个字符可以在编译时选择)。
byte里,有ASCII代码的字符,例如ABC,123,abc,也有一些特殊字符,例如回车,退格之类的。
特殊字符很多是不能显示的。或者说,他们的显示方式没有标准,例如编码65到哪儿都是字母A,编码97到哪儿都是字符
Linux下禁用T440s,X240的一体化触摸板(touchpad)
gashero
linux ThinkPad 触摸板
自打1月买了Thinkpad T440s就一直很火大,其中最让人恼火的莫过于触摸板。
Thinkpad的经典就包括用了小红点(TrackPoint)。但是小红点只能定位,还是需要鼠标的左右键的。但是自打T440s等开始启用了一体化触摸板,不再有实体的按键了。问题是要是好用也行。
实际使用中,触摸板一堆问题,比如定位有抖动,以及按键时会有飘逸。这就导致了单击经常就
graph_dfs
hcx2013
Graph
package edu.xidian.graph;
class MyStack {
private final int SIZE = 20;
private int[] st;
private int top;
public MyStack() {
st = new int[SIZE];
top = -1;
}
public void push(i
Spring4.1新特性——Spring核心部分及其他
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
配置HiveServer2的安全策略之自定义用户名密码验证
liyonghui160com
具体从网上看
http://doc.mapr.com/display/MapR/Using+HiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication
LDAP Authentication using OpenLDAP
Setting
一位30多的程序员生涯经验总结
pda158
编程 工作 生活 咨询
1.客户在接触到产品之后,才会真正明白自己的需求。
这是我在我的第一份工作上面学来的。只有当我们给客户展示产品的时候,他们才会意识到哪些是必须的。给出一个功能性原型设计远远比一张长长的文字表格要好。 2.只要有充足的时间,所有安全防御系统都将失败。
安全防御现如今是全世界都在关注的大课题、大挑战。我们必须时时刻刻积极完善它,因为黑客只要有一次成功,就可以彻底打败你。 3.
分布式web服务架构的演变
自由的奴隶
linux Web 应用服务器 互联网
最开始,由于某些想法,于是在互联网上搭建了一个网站,这个时候甚至有可能主机都是租借的,但由于这篇文章我们只关注架构的演变历程,因此就假设这个时候已经是托管了一台主机,并且有一定的带宽了,这个时候由于网站具备了一定的特色,吸引了部分人访问,逐渐你发现系统的压力越来越高,响应速度越来越慢,而这个时候比较明显的是数据库和应用互相影响,应用出问题了,数据库也很容易出现问题,而数据库出问题的时候,应用也容易
初探Druid连接池之二——慢SQL日志记录
xingsan_zhang
日志 连接池 druid 慢SQL
由于工作原因,这里先不说连接数据库部分的配置,后面会补上,直接进入慢SQL日志记录。
1.applicationContext.xml中增加如下配置:
<bean abstract="true" id="mysql_database" class="com.alibaba.druid.pool.DruidDataSourc