- 博客(66)
- 收藏
- 关注
RSS订阅原创 Three.js 通过屏幕大小计算fov
/** * @name 计算fov * @param {number} z camera.position.z * @param {number} h 设置图像的高 * @param {number} r 宽/高 */function calcFov(z, h, r) { var f; var vertical = h; if (r < 1) { vertical = vertical / r; } f = Math.atan(ver
2021-11-17 10:40:53
1123
原创 react配置代理解决跨域问题
安装插件命令行工具输入：yarn add http-proxy-middleware在src目录中创建一个setupProxy.js的文件并作如下配置：const {createProxyMiddleware} = require('http-proxy-middleware')module.exports = function(app) { app.use('/api', createProxyMiddleware({ target: 'https://c
2020-10-14 09:24:56
509
原创 axios中post请求application/x-www-form-urlencoded
就这么简单import qs from 'qs';axios({ method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data: qs.stringify(params), // 用 qs 将js对象转换为字符串 'name=edward&age=25' url: 'http://111.207.157.119:29000/emergency/api
2020-08-20 10:23:52
4903
1
原创 React.lazy() 实现路由懒加载
React 16.6.0发布了React.lazy来实现React组件的懒加载用户访问页面的 2/5/8 原则：2秒之内用户觉得很快，5秒之内用户觉得还可以，8秒之外用户觉得系统慢，无法忍受，甚至会离开页面。因此页面的加载速度是十分重要的，懒加载通过对组件进行分割打包成多个chunk来减少一次性加载的资源大小。从而减少用户不必要的等待。加载首页的时候并不需要加载其他业务模块，因此这些业务模块对应的组件都可以通过懒加载的形式来引入，加快首屏渲染速度，提高用户转化率。React.lazy的使用imp
2020-08-04 14:04:13
13393
原创 js获取鼠标选中的文字内容和下标
//获取选中的文字const getActiveText = (): void => { let txt: any = window.getSelection(); //获取鼠标划过的对象 if (txt.toString().length > 0) { let start: number = txt.anchorOffset; //获取划过的文字在文本中的起始位置 let end: number = txt.focusOffset; //
2020-07-15 14:46:44
1218
原创 css3做一个牛顿摆
效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g
2020-07-08 10:24:14
483
原创 用axios的post方式实现下载
亲测有效dowloadTest(){ this.$axios.request({ method:'post', url:'/api/filedue', data:{ fileid:123 }, responseType:'arraybuffer' }) .then((response)=>{ this.download(response.data); })}, download (data) { if
2020-06-24 14:23:01
1260
原创 js将文件压缩并下载
复制下来试试<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.3.0/jszip.min.js"></script> <script src="https:/
2020-06-22 11:27:41
1039
原创 css图片自适应object-fit
当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。img有个属性object-fit属性值：object-fit: fill / contain / cover / none / scale-down;fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。cover: 保持原有尺
2020-06-15 11:28:49
397
原创 css鼠标点击的五种状态
a:link{color:#fff} 未访问时的状态（鼠标点击前显示的状态）a:hover{color:#fff} 鼠标悬停时的状态a:visited{color:#fff} 已访问过的状态（鼠标点击后的状态）a:active{color:#fff} 鼠标点击时的状态a:focus{color:#fff} 点击后鼠标移开保持鼠标点击时的状态（只有在时标签中有效）...
2020-06-12 16:51:33
1043
原创 Angular中如何添加scroll事件
使用 (scroll) 指令<div class="parent" (scroll)="test($event)" onScroll> <div class="child"></div></div>public test($event) { console.log('通过(scroll)指令监听');}使用 HostListener@Directive({ selector: '[onScroll]',})export
2020-06-11 16:11:48
1998
2
原创 给数组添加自定义方法
假设我现在有这么一个需求，我需要给数组添加一个新的方法叫做toLower()Array.prototype.toLower=function(){ for (i=0;i<this.length;i++){ this[i]=this[i].toLowerCase(); }}function chooseWords(){ var fruits = ["Banana", "Orange", "Apple", "appear"]; fruits.toLower(); console.lo
2020-05-27 16:14:45
420
原创 收藏吧 | 前端常用60余种工具方法
1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) => { re
2020-05-26 16:55:40
174
5
原创 React中禁止文字选中
在常规项目中，我们只需要给标签加一个onselectstart事件，return false就可以<div onselectstart="return false;" ></div>在React项目中我们只需要给标签添加个样式就可以了。亲测有效！.node{/*node为标签的class名*/ -webkit-user-select: none; -moz-user-select:none; -o-user-select:none; -ms-use
2020-05-21 20:02:03
1366
原创 React 子组件监听父组件传递的值的变化
想让父组件的状态更新的时候。子组件也根据这个状态更新父组件中this.state = { checked: false};<Checkbox checked={checked}>Checkbox</Checkbox>子组件中//props发生变化时触发componentWillReceiveProps(props) { console.log(props) this.setState({show: props.checked})}...
2020-05-17 12:03:31
8465
原创 做一个好看的checkbox
废话啥啊，上代码吧效果展示![在这里插入图片描述](https://img-blog.csdnimg.cn/20200516205713297.gif#pic_center<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"
2020-05-16 20:58:03
272
1
原创 React + TypeScript + Redux
一、下载Rudexcnpm install -S redux react-redux @types/react-reduxsrc下建一个store文件store下建action文件，action里面建个index.tsximport { ADD_SHOP, DEL_SHOP } from '../constants';//shop addexport interface ShopAddAction{ obj: any; type: ADD_SHOP}export cons
2020-05-12 17:59:00
244
原创 js注释规范
/* * @method * @param {Type} * @returns {Type}*/ function matchedNumber(param) { }
2020-05-06 17:39:09
177
原创 ES7中Object.entries()、Object.keys()、Object.values()
Object.entries()let obj = { name:"张三", sex:"男", age:20, height:150}Object.entries(obj).forEach((item: any) => { console.log(item)})// (2) ["name", "张三"]// (2) ["sex", "男"]...
2020-04-29 14:25:06
146
原创 js删除对象里的属性
删除某一属性let obj = { aaa:"asd", bbb: "dfg"}console.log(obj) // {aaa: "asd", bbb: "dfg"}delete obj.aaaconsole.log(obj) // {bbb: "dfg"}删除对象里的所有属性let obj = { aaa:"asd", bbb: "dfg"}...
2020-04-23 19:28:45
237
原创 Vue响应式原理，Object.defineProperty
写给自己看的，你们能不能看懂，复制下来不就知道了吗？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2020-04-16 19:54:45
123
原创 Illegal invocation
问题描述：在使用jQuery封装的ajax请求的时候，用于上传文件,表单等一系列。里面formData方法传入作为data的属性值的时候，会出现这个错误在网上百度了一下，很多博主都说只需要加一个processData: false就可以解决了，但是还是没有解决我的问题，最后又加了一个contentType: false才解决contentType: false,// 告诉jQuery不要去...
2020-04-16 14:15:14
160
原创 TypeScript详细讲解
Arrayinterface type { key: string; value: string;}private arr: type[] = []
2020-04-09 10:40:16
1307
1
原创 React中useRef()和createRef()的使用
useRef()import React, {useState, useRef, createRef, useEffect } from 'react';const Test = ()=>{ const [ index, setIndex ] = useState(1); const createRefDiv = createRef(); const useRefDiv =...
2020-03-30 16:55:41
2962
原创 在React中使用TypeScript
以下面这种方式创建React项目npx create-react-app my-app --template typescriptClass组件import * as React from "react"; //propsexport interface IHomePageProps { home: string;}//stateexport interface IH...
2020-03-30 13:39:53
336
原创 java循环结构，while，do while，for
while(先判断再执行)public class foreach { public static void main(String[] args) { // boolean show = true; int i = 0; while(show) { i++;//每次加一 System.out.println(i); if(i == 3) { sho...
2020-03-26 15:03:53
60
原创 java选择结构if else switch case
if elsepublic class HelloWorld { //变量是可以改变的 public static void main(String[] args) { //选择结构 if else //下雨，选择是否出去活动 boolean isRain = true; if(isRain) { System.out.println("天公不作美，在家吃鸡腿"); ...
2020-03-26 00:00:37
117
原创 java变量、常量、运算符
变量public class HelloWorld { //变量是可以改变的 public static void main(String[] args) { //String:字符串 String name = "iphone 100"; //int:整数类型 int memory = 256; //double:小数类型 double price = 10.99;...
2020-03-25 23:42:22
74
原创 angular强制刷新视图的方法
有时候数据更新了视图却没更新，这个时候使用NgZone就好了，类似于React的this.setState(),和Vue的this.$set()import { Component, OnInit } from '@angular/core';import {NgZone} from '@angular/core'@Component({ selector: 'app-showmain'...
2020-03-15 22:59:08
2221
原创 React 用来解析HTML标签的方法，dangerouslySetInnerHTML
dangerouslySetInnerHTML只需要把你想要解析的HTML代码放到__html: 后面就好了<p dangerouslySetInnerHTML = {{ __html: name }}></p>
2020-03-14 11:38:39
460
原创 React中使用ECharts
下载依赖cnpm i echartscnpm i echarts-for-reactReact特殊写法import React,{Component} from 'react';import ReactEcharts from 'echarts-for-react';class ECharts extends Component { constructor() { ...
2020-03-01 14:09:07
642
原创 overflow滚动条好丑，让他消失
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .box { width: 280px; height...
2020-02-29 13:18:53
454
原创 React组件传值
父传子//首先在父组件里的子组件标签上以添加属性的方式，传递所需要传递的值<List name="Elise"></List><List name={this.state.name}></List><List>双标签中的内容</List><List fun={()=>{this.fun()}}>&l...
2020-02-28 17:50:52
120
原创 React常用方法
给元素添加事件<p onClick={console.log("click")}>click me!</p> //这个事件会直接执行，并且点击时不触发<p onClick={()=>{console.log("click")}}>click me!</p> //如果写成回调函数的形式，则会点一次触发一次<p onClick={()=...
2020-02-27 23:48:28
545
原创 React注册一个组件
class组件注册组件import React,{Component} from 'react';class Content extends Component { render() { return ( <div className=""> 今天是{parseInt(Math.random()*3...
2020-02-27 23:12:31
1061
原创 MySQL操作
查看数据库cmdmysql -u root -p 连接数据库输入密码create database 数据库名称; 创建数据库(默认utf8)create database mydb2 character set ‘utf8’; 创建utf8形式的数据库show databases; 查询use 数据库名称; 切换到指定的数据库show create database 数据库名称;...
2020-02-27 22:56:25
62
原创 React cli
全局卸载react clinpm uninstall -g create-react-app全局安装react clicnpm i create-react-app -g创建一个react项目create-react-app "文件名" // 文件名不能大写创建成功后的样子最后cd 到你创建的文件夹，npm start如果你安装时一直报错，可能是没有权限的问题，用管理员...
2020-02-18 20:12:14
177
原创 js冒泡排序
js冒泡排序1、比较相邻的两个元素，如果前一个比后一个大，则交换位置。2、比较完第一轮的时候，最后一个元素是最大的元素。3、这时候最后一个元素是最大的，所以最后一个元素就不需要参与比较大小。function bSort(arr) { let len = arr.length; for (let i = 0; i < len-1; i++) { for (let j =...
2020-02-04 18:47:57
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人