L-xl-CSDN博客

原创 Nginx反向代理访问tomcat项目(通过域名访问)

首先要确保你的域名正确解析需要在安全组中修改入站规则,这里以腾讯云服务器为例我的tomcat配置的端口号为8080,所以这里需要添加8080端口接下来进行nginx的配置,原文可以参考nginx配置参考的原文章编号1的server中的地址就是你可以通过浏览器访问的地址,换句话说,你在浏览器中输入这个地址就可以访问tomcat.通过编号2设置的域名同样可以访问tomcat至此我们已经完成了通过域名对tomcat进行访问.但想要访问你的项目还需要在路径后面跟上项目地址,以tom..

2021-04-14 09:40:21 1201

原创柯里化函数的实现

什么是柯里化函数引用百度百科中对柯里化的解释柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。用经典的加法器来举例 function add(a, b) { return a + b; } add(1, 2); // 3这是一个最简单的加法函数，作用是把传入的a,b两个参数相加并把相加后的结果返回。下面我们用柯里化的思想对这个函数进行改写。 function add(a)

2021-03-13 18:06:25 835

原创节流函数和防抖函数

业务中常常会遇到某个函数被频繁触发,这样很影响性能,最常见的就是滚动事件.那么如何才能避免每次滚动的时候都会触发事件?第一种思路是每次滚动的时候都不要触发事件,而是当停止滚动后触发一次事件,这种思路就是防抖.第二种思路是在规定的一段时间内无论滚动多少次都只会触发一次事件,这种思路就是节流.根据思路一模拟防抖函数function debounce(fn, delay) { let timer = null; return function () { let that = this,

2021-03-08 18:34:07 117

原创 React鼠标选择框

使用React模拟windows的鼠标选择框功能git地址大致思路是先判断鼠标左键是否按下,如果按下就记录下来,当鼠标移动时判断左键是否按下来让选择框显示出来,根据鼠标移动的位置来设置选择框的大小.附上代码import React, {useRef, useState} from 'react';import "./index.css"export default function App() { // 深克隆 function deepClone(origin, target =

2021-03-07 17:53:59 1041 2

原创浏览器渲染流程

首先引入一下网上经典的渲染流程图渲染原理一个页面里呈现出来所有内容都是一个个html标签,当浏览器拿到写好的代码文件时会进行以下操作解析html标签,根据html标签的嵌套结构会生成一颗DOM Tree,对应上图1->2->3的过程.解析css文件,构建一颗cssom Tree,对应上图4->5->6的过程把DOM Tree和cssom Tree结合起来生成了一颗Render Tree,对应上图7根据生成的Render Tree来计算每一个标签在页面上的位置还有样子,

2021-03-07 10:05:53 73

原创 JavaScript深克隆函数

/** * * 深克隆 * * @param origin {Object} 原对象(被克隆对象) * @param target {...Object} 目标对象(克隆对象) * @returns {Object} target */function deepClone(origin, target = {}) { for (let prop in origin) { if (origin.hasOwnProperty(prop)) { if (ori.

2021-02-10 09:41:04 84

原创 React学习之路（Redux使用）

Redux在维基百科中给出的定义是应用程序状态管理的JavaScript函数库，也被称为可预测的状态管理机，我在最初看到这个解释的时候并不能很好的理解，在学习后，通俗的来讲，Redux就是一个存储所有数据的大仓库。在使用React构建网页时，不同组件会用到各种各样的数据，当这些数据很多的时候，对于数据的管理会变得复杂，这时候可以使用Redux来集中管理所有的数据。Redux要遵循三大原则唯一数据源既然Redux是一个存储所有数据的大仓库，那么理所应当的Redux应用只需要管理一个全局的数据对象即

2020-11-03 14:42:53 144

原创 React学习之路(父子组件通信)

React中父子通信主要是通过props,子组件想要获得父组件中的值是通过父组件向子组件的props中传递数据.以类组件为例:import React, {PureComponent} from "react";class Children extends PureComponent { constructor(props) { super(props); this.state = { name: '我是子组件的值' } this.test();

2020-10-31 10:27:50 201

原创 GitHub在线预览

先进入你想要的预览的项目仓库然后点Settings找到GitHub Pages选择你想要的预览的分支,这里我只有一个master分支,选中后点Save,这时会生成一个url,在这个url后面加上你项目的目录因为我的项目文件都放在了Task01这个文件里,所以想要预览需要在刚才的url后面加上这个Task01的路径最后的预览路径应该是https://xxx.github.io/BaiduTask/Task01/...

2020-08-28 11:00:21 266