自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

见贤思齐焉,见不贤内自省

见贤思齐焉,见不贤内自省

  • 博客(167)
  • 资源 (5)
  • 收藏
  • 关注

原创 前端开发趣味之五子棋小游戏(JS+Node+Websocket)可分房间对战

主要通过js、canvas、node、websocket来实现五子棋游戏。tip:如果你想清除的了解怎么实现,请一步步看思路流程。首先搭建一个express服务:const express = require('express')const path = require('path')const app = express()//静态资源目录app.use(express.static(path.join(__dirname, 'public')));let port = 3003app.

2021-08-18 09:50:39 3166 9

原创 React处理错误边界钩子getDerivedStateFromError

getDerivedStateFromError处理子组件报错

2021-12-06 18:48:28 27 4

原创 Java数据类型中的char类型以及涉及到的转义字符

Java数据类型中的char类型以及涉及到的转义字符

2021-12-05 12:12:00 225 2

原创 Java中的数据类型

java中的数据类型

2021-12-04 21:25:43 129 4

原创 Java中的变量以及变量的分类

Java中的变量以及变量的分类

2021-12-03 20:36:31 401 2

原创 Java中的字面值是什么?

字面值字面值:– 10、1000–3.14–true、false–“六卿”–‘A’字面值就是数据字面值是java源程序的组成部分之一,包括标识符和关键字;数据在计算机编程语言中也有类型:【数据类型】 -- 10、1000 属于整数型字面值 --3.14 属于浮点型字面值 --true、false 属于布尔型字面值 --"六卿" 属于字符串型字面值 --'A' 属于字符型字面值注意:java语言中所有的字

2021-11-30 21:36:55 96

原创 Java标识符命名规则和命名规范

关于Java语言当中的标识符1.什么是标识符?在Java源程序中程序员有权自己命名的单词都是标识符;标识符可以可以标识什么元素?类名、方法名、接口名、常量名等等。2.标识符的命名规则?只能由数字、字母、下划线_、$组成,数字不能开头。不能含有其他符号;不能使用关键字命名。如 public class void 等等;严格分大小写。3.标识符的命名规范?只是一种规范,不属于语法,不遵守规范编辑器不会报错,但是没有语义化。最好见名知意;遵守驼峰命名方式;如:userName;类名、接口

2021-11-30 21:14:02 111 2

原创 针对react-captcha-code第三方插件不能每次触发深颜色的处理

针对react-captcha-code第三方插件不能每次触发深颜色的处理:react-captcha-code npm地址https://www.npmjs.com/package/react-captcha-code/v/1.0.4在node_modules中找到这个第三方依赖包:将之改造成class组件:MyCaptcha.js验证码组件:/** * * 原本使用react-captcha-code 这个第三方插件 但是会生成浅色字符验证码 * * 只针对颜色进行了

2021-11-30 16:07:04 184

原创 React属性之context属性

定义:例子:import React from 'react'let MyContext = React.createContext()class Grand extends React.Component { static contextType = MyContext render() { const { username, age } = this.context return ( <div style={

2021-11-29 13:50:06 208 1

原创 React中Fragment标签和空标签的使用

Fragment作用:类似于vue中的template标签,将当前dom不渲染后页面。在多层循环中可以添加key属性,其他属性不可以添加。不然会警告,提示只能有key属性和children vdom使用:import React,{Fragment} from 'react'import { Button } from 'antd'export default function Key(){ let myRef = React.useRef() const alertFun

2021-11-29 09:38:15 301

原创 React中函数式Hooks之useRef的使用

useRef的基本使用import React from 'react'import { Button } from 'antd'export default function Key(){ let myRef = React.useRef() const alertFun = ()=>{ alert(myRef.current.value) } return ( <div> <inpu

2021-11-29 09:26:18 499

原创 Java之public class 和class的区别及注意事项

首先先熟悉一下一个类的基本组成:// 类名首字母大写public class TestJava01 { /** * public 公共的 * static 静态的 * void 空 main 表示方法名 固定的 * (String[] args) 是一个main方法的形参 * 每行代码写完 必须以分号;结尾 */ public static void main(String[] arg) { // 打印 字

2021-11-28 20:41:24 293 4

原创 Java安装好JDK后使用javac.exe编译java文件、java.exe运行编译好的类

首先我们需要下载java工具包JDK如果已经安装好,可以直接看第二步:1.安装jdk并配置环境变量:jdk下载地址:https://www.oracle.com/下载好后安装成功,我选择的是默认安装路径,我的是64位的,所有安装到了:C:\Program Files\Java在安装的途中可能会让安装jre,这个jre本质再jdk中已经包含,所有无需再次单独安装,这是安装好的目录结构,这个时候已经证明我们安装成功了,下面就是配置环境变量,配置环境变量是为了在其他文件夹下我们也能直接访

2021-11-28 14:42:18 351 1

原创 React中函数式Hooks之useEffect的使用

useEffectuseEffect总的来讲,是为了模拟class类组件的生命周期,同时也完成了一项功能,那就是数据的监听:最下方有总结我们首先看第一个例子:import React from 'react'function Dome() { let [num, setNum] = React.useState(0) React.useEffect(()=>{ console.log("num的数值为:"+num) }) const ch

2021-11-26 15:04:40 506 3

原创 React中函数式Hooks之useState的使用

useState首先不同于class组件这个组件中没有this/* * @Descripttion: * @version: * @Author: ZhangJunQing * @Date: 2021-11-11 11:12:01 * @LastEditors: ZhangJunQing * @LastEditTime: 2021-11-26 11:17:06 */import React from 'react'function Demo() { //useState

2021-11-26 11:21:15 276 3

原创 React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快

一次性加载太多的路由文件会使首次加载的速度很慢,所以我们需要将路由搞成懒加载的形式,用到哪个组件加载哪个组件。庆幸的是React官方已经给我们准备好了插件,也在React库中:首先 从react这个库中导出lazy、Suspense这两个方法和组件。import React,{Suspense,lazy} from 'react';router之前的引入方式import ZoneManageAll from "../pages/zoneConf/zoneManageAll";懒加载的引入当.

2021-11-26 10:23:14 354

原创 学习java基础(2)循环语句for、while、do...while

forpackage util.demo;public class Test01 { public static void main(String[] arg){ //循环 for for(int i=0;i<5;i++){ System.out.println("我是输出第"+(i+1)+"行"); } }}while\do…whilepackage util.demo;public cla

2021-11-25 15:08:29 304

原创 学习java基础(1)逻辑控制if、switch

接上一个博客使用IDEA创建项目运行我的第一个JAVA文件输出Helloword继续学习逻辑控制语句ifpackage util.demo;public class Helloword { public static void main(String[] args) { //学习 if else 逻辑控制语句 //定义整形变量a,b int a = 1; int b = 1; if (a > b

2021-11-25 14:39:45 294

原创 使用IDEA创建项目运行我的第一个JAVA文件输出Helloword

新建一个java项目:点开File—>New—>Project选择jdk版本然后next:这里可以直接next,不选择模板输入项目名,项目路径会自动生成:myFirstProject这是生成好的文件目录右键src文件夹建立一个包输入包名,输入完后直接回车文件目录变化:右键util.demo这个包建立第一个java类输入文件名,之后回车自动生成一个模板:输入代码:package util.demo;public class Helloword {

2021-11-25 12:35:02 537 1

原创 javaScript中常用的String方法以及注意点总结

String常用API方法:// 1、toLocaleLowerCase 小写// 2、toLocaleUpperCase 大写// 3、charAt num// 4、charCodeAt num// 5、slice start end// 6、substring start end 第一个参数可以为负数,直接将负参数直接转成0// 7、substr start length 第一个参数可以为负数 第二个为负数 自动转为 0// 8、concat// 9、trim 去除首尾空

2021-11-24 09:59:43 373 1

原创 React项目input输入框输入自动失去焦点

React项目input输入框输入自动失去焦点在项目中有一个动态生成表单的问题,我这里是多层动态循环,但是出现这个问题并不是几层的问题,而是是否绑定了唯一key的问题。在React中,每一输入触发onChange事件都会重新render,所以每一都需要一个唯一的确定的key值,这个key的作用就是避免diff算法重新生成一个全新的dom。...

2021-11-16 09:07:29 1082 1

原创 原生撸移动端顶部滚动菜单栏,实现可滚动控制滚动边界动态样式

原生撸移动端顶部滚动菜单栏实现的效果为:可以自由滚动,设置滚动的左边界和有边界html和css为<!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

2021-11-13 22:22:26 695

原创 React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用

为了实现这个组件全局可以使用并且路径唯一,我们使用路径别名。配置路径别名:如果项目中没有config/webpack.config.js文件,我们可以package.json中scripts中这个命令:"eject": "react-scripts eject"npm run eject将webpack文件暴露出来。打开config/webpack.config.js文件: alias: { // Support React Native Web //

2021-11-12 18:09:27 1487 4

原创 React读取properties配置文件转化为json对象并使用在url地址中

首先properties配置文件的格式是:url=http://192.168.0.6port=8081我这里命名是strings.properties,因为要做到可配置,就是后期只是改变这个文件的url和port而不用重新打包前端代码,这个文件我放到了public下面然后每个接口请求其实都需要拿到这个文件里面的配置包括url和port;所以选择读取文件,读取文件是异步操作所以在封装请求方法的时候,出现了问题,可以打印出来读取的内容,但是暴露出去的对象是一个undefined;首先,先读取到

2021-11-10 11:47:42 1514 5

原创 React给antd中TreeSelect组件左侧加自定义图标icon

很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用。今天碰到了一个很恶心的问题,就是在给antd的treeSelect组件加左侧icon的时候,总是报一个警告,Warning: Each child in a list should have a unique “key” prop.告诉我们每一个节点都需要有一个唯一的key。首先我这里简单的封装了一下treeSelect这个组件:import React from 'react';import { TreeSelect } from

2021-11-03 10:49:06 644 1

原创 SpringBoot项目部署打包好的React、Vue项目刷新报错404

Whitelabel Error PageThis application has no explicit mapping for /error, so you are seeing this as a fallback.Tue Nov 02 14:08:54 CST 2021There was an unexpected error (type=Not Found, status=404).原因是因为在SpringBoot部署后,前端页面刷新,浏览器将url中的地址当做接口地址去请求后端了,并且后

2021-11-02 14:45:23 561 2

原创 本地运行打包好的React、Vue项目

live-server 或者 http-servernpm i -g live-server进入react打包好的build文件夹或者vue打包好的dist文件夹cmdlive-server默认在8080端口

2021-11-02 10:37:29 516

原创 react对antd中Select组件二次封装

见贤思齐焉,见不贤内自省建立import React from 'react';import { Select } from 'antd';import 'antd/dist/antd.css';import '../styles/select.less';const {Option} = Select;class MSelect extends React.PureComponent { constructor(props) { super(props);

2021-10-28 13:26:19 548

原创 react动态生成input、select标签以及思路总结

见贤思齐焉,见不贤内自省首先我们需要有一个数据结构,首先需要是一个数组,当然字段都可以自己定义,我这里没按照规范起名。核心在于将数据整理好,字段梳理清楚,将state中用到的字段动态插入,提醒必填项也要动态遍历。比如: let stateOptions = [{ value: 'name', title: '允许传送', type: 'inp', isrequird:

2021-10-26 18:28:39 644 1

原创 封装axios的get、post方法

import axios from 'axios'// axios.defaults.baseURL = 'http://localhost:3003/'axios.defaults.baseURL = process.env.REACT_APP_AXIOSURLconst get = (url, params) => { return new Promise((reso, reje) => { axios.get(url, { params }).then(

2021-10-24 16:20:41 3107 5

原创 react配置proxy代理的两种方式

react配置代理的两种方式1.在package.json中配置"proxy":"http://localhost:5001"注意:proxy的value值只能是字符串的形式axios访问的时候不需要加前缀不能配置多个代理只有访问资源不在当前端口时才会访问代理端口的资源2.新建setupProxy.js文件首先在src文件夹下新建文件src/setupProxy.js2.在setupProxy.js中引入内置库//react 脚手架内置的库 const proxy =re

2021-10-14 10:12:15 548 1

原创 学习react基础(3)_setState、state、jsx、使用ref的几种形式

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、this.setState和this.state的区别?二、react核心1.核心库2.jsx3.class和function组件4.事件5.ref总结前言学习react一、this.setState和this.state的区别?常常将this.setState称为状态机,因为它在控制着我们类组件的状态,并且可以更改状态,改完之后还可以是页面中的数据也发生变化。而使用this.state对属性赋值只会改变数据并不

2021-10-12 15:20:10 534

原创 学习react基础(2)_props、state和style的使用

React组件传递数据1:父子组件传递数据组件中有一个只读的对象叫做props,无法给props添加顺序ing获取方式:函数参数props作用:酱传递给组件的属性转为props对象中的属性function Welcome(props){ // props ---> { username: 'zs', age: 20 } return ( <div> <div>Welcome React</div> <h3&gt

2021-09-28 14:35:09 530 1

原创 学习react基础(1)_虚拟dom、diff算法、函数和class创建组件

React中的核心概念1.虚拟DOM2.Diff算法(虚拟dom的加速器,提升react性能的法宝)虚拟DOMreact酱DOM抽象为虚拟dom,虚拟dom其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提升渲染的效率。为什么用虚拟dom?当dom发生更改时需要遍历,而原生dom可遍历属性多达231个,且大部分与渲染五官,更新页面代价太大。虚拟dom的处理方式?1 用 JavaScript 对象结构表示 DOM 树的结构,然后用这个树构建一个真正的

2021-09-28 14:06:52 537 2

原创 typeScript进阶(11)_元组类型

元组类型元组类型类似于数组类型,只是规则略有不同。数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。数组类型首先回顾一下数组类型:typeScript基础(6)_数组类型其中只要包括数组类型的两种写法。元组类型元组类型具体规定了数组中每一项的类型。for example one :let tupleArr :[string,number] ;// tupleArr =[1,2] ;//错误//tupleArr =['1'] ;//错误//tupleArr =

2021-08-31 09:46:49 569 4

原创 typeScript进阶(10)_字符串字面量类型

字符串字面量类型字符串字面量类型和类型别名都是使用type来声明;如果type后面赋值不是类型名称二十其他字符,ts会自动类型推论为其数据类型。使用type来声明字符串字面量类型,但是不仅限于字符串字符串字面量类型用来约束取值只能是某几个字符串中的一个。例如://字符串字面量类型用来约束取值只能是某几个字符串中的一个type strType = 'zjq'let strTypezjq: strType;strTypezjq =123; //错strTypezjq="123" //错

2021-08-30 14:48:53 543 2

原创 node事件循环中事件执行顺序

六个阶段首先外部数据输入–》轮询阶段–》检查阶段–》关闭事件回调阶段–》定时器阶段–》I/O回调阶段–》闲置阶段–》轮询阶段》…开始循环timers阶段:执行timer(setTimeout,setInterval)的回调;I/O callbacks阶段:处理一些上一轮循环中少数未执行的I/O回调idle,prepare 阶段:仅node内部使用;poll阶段:获取新的I/O时间,适当的条件下node将阻塞在这里;check阶段:执行setImmediate()的回调;close cal

2021-08-29 17:45:57 1043 17

原创 typeScript进阶(9)_type类型别名

类型别名:顾名思义就说一个类型起了一个其他的名字:如://类型别名type name = string;let zjq: name = '123'给string类型起了一个名字叫name,后面定义string类型的变量,我就可以:name来实现:string的效果。例子1://类型别名type strName = string;type numName = number;type funReturn = (c1: strName, c2?: numName) => strNam

2021-08-26 15:19:11 562 7

原创 js防抖函数返回值问题解决方案

需求:当我们在使用防抖函数的时候会碰到需要使用传入函数的返回值的问题,所以我们配合promise来实现。带有返回值的防抖函数:/** * @param {函数} fn * @param {防抖时间间隔} wait *///防抖函数const debounce = () => { let timer = null; const newDebounce = function(fn, wait, ...args) { return new Promise((r

2021-08-25 16:30:30 576

原创 vue页面跳转取消上一个页面请求

核心:1:vuex以数组的形式存放取消函数;2:axios请求拦截中设置cancelToken;3:页面跳转路由守卫取消上一个页面所以的请求。vuex中在vuex中设置一个存放取消函数的数组,还有一个添加数组元素的方法和清空数组的方法:这里放到了自定义的home模块:export default {/*** 定义命名空间,防止多个模块同名共享,使用时需要带上命名空间*/ namespaced: true, state: { _axiosPromiseArr

2021-08-20 17:41:58 820 5

webpack打包基础知识点与es6知识点.xmind

webpack打包基础知识点,各种插件和加载器,方便了webpack打包,es6的重要知识点总结,加油。

2020-11-12

终极版本五子棋.html

javascript五子棋游戏

2021-08-02

node+es6重点总结.xmind

详细总结了js、node、es6、webpack、mysql等知识点,有利于自己知识体系的搭建,搭建自己的知识网络。

2020-11-12

timeGeneration.js

获取农历时间

2021-03-23

Java基础知识总结.docx

数据类型分类、包的概念、访问修饰符、this关键字、super关键字、对象创建的执行顺序、Java类的生命周期、执行顺序

2020-11-12

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除