- 博客(19)
- 资源 (1)
- 收藏
- 关注
原创 一个简单的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
2670
原创 纯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
1603
原创 js实现下拉到底部加载更多
主要原理:scrollTop + clientHeight >= scrollHeightscrollTop属性用于获取或设置一个元素的内容垂直滚动的像素数。 一个元素的scrollTop值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的scrollTop值为0。clientHeight:客户端尺寸,内容区高度加上,上下内边距高度。和clientWidth用来确定浏览器视口尺寸,即检测 document.d...
2021-10-11 22:18:12
1740
1
原创 input 搜索防抖
防抖(debounce):对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是规定事件发生的n毫秒后再执行,如果n毫秒内事件再次被触发,则定时器重新开始计时,直至定时器倒计时结束。效果:如果短时间内大量触发同一事件,只会执行一次函数。节流(throttle):如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新
2021-09-06 22:36:45
1258
原创 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
550
原创 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
8439
原创 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
768
原创 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
242
原创 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
1802
原创 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
362
原创 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
1039
原创 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
1835
原创 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
3570
原创 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
8681
原创 react中,父组件动态地给子组件传需要的图片
方法一在父组件中通过import导入图片,然后通过props传递给子组件在父组件中导入图片如list数组结构如下动态的渲染List中的每个item 为Item子组件,传递给它imgURL在子组件中,通过以下语句,即可呈现图片<imgsrc={imgURL}style={{width:'5em',height:'5em'}}alt="未知"></img>方法二父组件给子组件传图片名imageName在子组件里...
2020-06-01 21:49:34
837
原创 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
297
原创 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
542
数据库锁和索引实验
2018-05-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人