- 博客(19)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 一个简单的React中使用Three.js 的栗子
Three.js是一个基于WebGL（三维绘图协议）的第三方库，提供场景，光照，照相机，几何体，材质等元素。React中使用Three.js，需要安装相关的依赖,three-orbitcontrols是一个操作三维场景的控件Three.js基础:Three.js程序结构Three.js 右手坐标系场景Scene:三维场景，放置相机，渲染器等相机Camera:常用的是透视投影相机(PerspectiveCamera)和正投影相机(OrthographicCamera)透视相机PerspectiveCam
2022-06-12 22:39:58
2419
1
原创 纯js实现一个带分页表格
表格由三部分组成，表格头部，表格体，表格的分页栏。本文实现的分页表格，适合后端返回所有数据后，采用前端分页。数据如果有更新，需要手动调用更新方法表格和分页的html部分<div id="tableContainer" style="overflow: scroll; width: 100%;"> <table id="'table" width="1000px" class="tableClass"> <thead id="thead"><
2022-04-08 18:43:56
1504
原创 js实现下拉到底部加载更多
主要原理:scrollTop + clientHeight >= scrollHeightscrollTop属性用于获取或设置一个元素的内容垂直滚动的像素数。 一个元素的scrollTop值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的scrollTop值为0。clientHeight:客户端尺寸，内容区高度加上，上下内边距高度。和clientWidth用来确定浏览器视口尺寸，即检测 document.d...
2021-10-11 22:18:12
1553
1
原创 input 搜索防抖
防抖(debounce)：对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是规定事件发生的n毫秒后再执行，如果n毫秒内事件再次被触发，则定时器重新开始计时，直至定时器倒计时结束。效果：如果短时间内大量触发同一事件，只会执行一次函数。节流(throttle)：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新
2021-09-06 22:36:45
1120
原创 hmtl实现一个点击表头，对表格进行升序或降序排序
<!DOCTYPE html><html><head><title>表格点击头部排序</title><style> table{ border-collapse: collapse; width: 360px; table-layout: fixed;}thead{ background: #f5f7fa;}thead th{ font-weight: strong; .
2021-09-06 18:23:21
499
原创 vue动态设置css样式，设置class以及::before伪元素背景图片
1.动态设置div的class可以通过传给:class一个对象，以动态地切换class<div :class="{ active: isActive,'text-danger': hasError }"></div>上面表示active这个class是否存在。取决于数据property isActive的真假，'text-danger'这个class同理数组语法，可以把一个数组传给:class,以应用一个class列表<div class="rele
2021-04-30 14:53:01
7500
原创 react immutability-helper的使用
update（）围绕此模式提供了简单的语法糖，使编写此代码更加容易。 比如更改myData里面的数据，可以写为：import update from 'immutability-helper';const newData = update(myData, { x: {y: {z: {$set: 7}}}, a: {b: {$push: [9]}}});其他的一些指令,主要分清不同指令是用于Array,Set,Map还是Object下面是一个简单的例子import Rea
2021-03-31 08:47:38
633
原创 React父组件调用子组件方法
React版本 16.4.1父组件下关键代码<Tabs defaultActiveKey="1" onChange={this.handleTabChange}> <TabPane tab="tab1" key="1"> <Demo1 onRef={this.onRef} /> //子组件1 </TabPane> <TabPane tab="tab2" key="2"> <Demo2
2021-03-18 11:32:29
182
原创 React前端生成pdf文件
使用到了使用html2canvas和jspdfhtml2canvas是一个将Dom节点生成canvas的库，在这里主要用来生成canvas.https://html2canvas.hertzen.com/jspdf是一个生成pdf的开源库，可将图片等保存为pdfhttp://raw.githack.com/MrRio/jsPDF/master/docs/module-addImage.html可以npm install安装相关的依赖或者在index.html里<head>&l
2021-01-14 21:41:29
1739
原创 vue 2.x安装sass步骤
1.安装相关依赖cnpm install sass-loader node-sassvue-style-loader --save-dev2.添加配置在vue.config.js里module.exports = { /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ publicPath: './', // publicPath: process.env.NODE_ENV === .
2020-12-16 22:36:18
297
原创 axios下载文件，reponseType为blob时，处理返回是下载错误信息
axios({ method: 'get', url: downloadUrl, responseType: 'blob' //blob => arraybuffer }).then( res => { if(!res) { return } let reader = new FileReader() reader.onload = function(e) { try{.
2020-09-06 13:38:37
949
原创 React中使用antd 表单，根据后端验证结果，回显错误的行
在Table里使用Form，验证名称路径等是否正确匹配，将不匹配的标红table的列大概是这个样子 handleValidate =() => { console.log('validate', this.props.fieldConfigInfo, this.props.webServiceInfo) const { webServiceInfo, fieldConfigInfo, } = this.props this.props.form.val.
2020-08-04 22:55:30
1655
原创 React中使用axios get下载文件
代码如下let downloadUrl = `/api/aaa/bbb?resultId=${resultId}&type=${specifyType}` axios({ method: 'get', url: downloadUrl, responseType: 'blob' }).then( res => { if(!res) { return } let url = window
2020-07-04 10:46:50
3380
原创 React类组件调用函数组件的方法及使用函数组件的state变量
函数组件内容如下，主要使用到了react hook，https://react.docschina.org/docs/hooks-overview.html hook概览https://react.docschina.org/docs/hooks-faq.html#can-i-make-a-ref-to-a-function-componentimport React, {useState, useRef, useImperativeHandle, forwardRef } ...
2020-06-03 15:40:15
8466
原创 react中，父组件动态地给子组件传需要的图片
方法一在父组件中通过import导入图片，然后通过props传递给子组件在父组件中导入图片如list数组结构如下动态的渲染List中的每个item 为Item子组件，传递给它imgURL在子组件中，通过以下语句，即可呈现图片<imgsrc={imgURL}style={{width:'5em',height:'5em'}}alt="未知"></img>方法二父组件给子组件传图片名imageName在子组件里...
2020-06-01 21:49:34
746
原创 git windows安装后配置git，连接github
1.进入git bash,配置用户名和邮箱git config --global user.name "写入自己的GitHub用户名"接着再输入git config --global user.email "写入自己的GitHub注册邮箱"2.生成 ssh keyssh-keygen -t rsa -C "注册github的邮箱"3.进入上一步保存key的路径，打...
2020-04-02 11:28:47
241
原创 zeppelin-0.8.0-bin-all结合spark解释器，使用RDD,spark SQL
版本hadoop 2.6，scala2.11.0spark2.1.1 选择pre-build for hadoop 2.6下载（spark-2.1.1-bin-hadoop2.6)集群环境三台主机，安装好hadoop+spark环境，spark standalone模式,自行安装zeppelin安装（centos6.5）下载zeppelin-0.8.0-bin-all.t...
2019-05-12 18:36:04
502
数据库锁和索引实验
2018-05-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人