- 博客(56)
- 收藏
- 关注
原创 Next.js i18n国际化实现方案(支持ReactNode类型、可传参)
抛开Next.js框架不谈,想必其他项目也经常会遇到国际化方案,大概逻辑都是差不多的,只是说这次本人碰巧在Next上的项目有这样的需求,并记录下来。
2023-01-03 21:47:46
3312
9
原创 Android 网络请求-AsyncHttpClient封装(超详细版)
最近捣鼓android,但学习不多,索性完全把android当前端玩了,然后自己写了个后端服务,所以这个中间过程就需要网络请求,找了个三方库,即,下面就是自己简单的封装了下get和post方法,这两个也够我目前业务开发了。
2022-10-24 16:56:57
2291
原创 SSG框架Gatsby访问数据库,并显示到页面上
对于一些不长变的前端项目中,如个人博客、公司官网,可能技术选型为SSG框架会相对比之前的CSR会更好些,也会更快,最近研究了下Gatsby框架,感觉不错,就简单写了一个用其访问MySQL数据库,并显示到页面的一个dome记录下学习心得问为什么要学这个呢?难道之前的vue或者react写的项目用axios请求数据,再显示到页面上面达不到上面的效果吗?答首先学这个并不是为了新技术而学它,没啥用,不明白它的价值,学了也是白学,还不如躺平;其次按照以前写一个spa应用,大概流程就是axios发请求到后端->...
2022-07-15 14:36:32
539
原创 react中每个组件样式独立,避免写className重名而导致污染,类似vue中scope(styled-components的使用)
在多人开发的时候,或者说二开的时候,不知道大家有没有这样一种体会:在项目中,往往会这样给一个组件加样式:效果:但是现在这里要介绍一种库-----,先下载:常规用法然后我们就能将上面的常规步骤写成如下这样:效果:这时你就会发现两个写法不一样,但是却能达到同样的效果,而且这个新的写法你会发现,其实就是给这个元素加上一个唯一的,但是不是你自己加啊,它不仅可以可以应用于外层的元素的,它还能同时在里面写上后代元素标签,且样式也是能生效的,甚至你还可以嵌入其他、、写法等等,就像下面这样写:通过pro
2022-07-12 12:32:49
1639
原创 前端性能优化--减少首屏加载时间--gzip压缩
前言:在项目build(vue、react…)之后,我们再使用gzip做一下压缩这些静态资源,让用户请求这些资源的大小会降低很多,从而达到减少首屏加载时间的目标,而gzip压缩主要分为两种“动态压缩”、“静态压缩”动态压缩指的是在服务器上进行配置,使得每次用户在访问页面时,即发起http请求到服务器,服务器就会自动把你访问的资源先压缩成.gz文件,然后浏览器下载之后再进行解压,从而达到提高访问效率的特点。步骤(服务器以nginx为例):打开nginx的配置文件:将gizp on;注释打开,表示启
2022-05-20 23:35:31
1140
原创 react技术分享----useState的原理及自定义useState的实现
*前言:本次分享将主要自定义实现useState为主,以通俗易懂的目的让大家了解useState实现的大体逻辑。一、hook的价值:hook出现的意义是巨大的,在React Conf 2018 会议上,react团队的leader---- Sophie Alpert提出了三个class组件存在的问题(而hook的出现就是来解决这些的):逻辑复用问题:要逻辑复用,在class组件中无非是用高阶组件,或者render props来解决,但是如果项目庞大的话,就有可能造成组件层级过深,无限嵌套导致追
2022-01-24 14:02:44
4864
原创 react简单入门--常用hook中useMemo的使用(详细版)
前言:作用:首先useMemo它使用来做缓存用的,只有当一个依赖项改变的时候才会发生变化,否则拿缓存的值,就不用在每次渲染的时候再做计算场景:既然是用作缓存来用,那场景就可能有:比如说当你登陆之后,你的个人信息一般是不会变的,当你退出登陆,重新输入另外一个人的账号密码之后,这个时候个人信息可能就变了,那这样我就可以把账号和密码`两个作为依赖项,当他们变了,那就更新个人信息,否则拿缓存的值,从而达到优化的目的也许当你从A页面跳转到B页面,而B页面...
2021-12-28 14:50:49
23691
2
原创 react简单入门--常用hook中useQuery(react-query)的使用
前言:在项目中,我们往往需要香后端发起请求,而在函数组件中,如果直接用axios或者fetch的话,拿到的数据要渲染到UI上,往往是不方便的,所以需要引入react-query,来满足我们增删改查的基本操作一、查数据:1、导包2、用包中的QueryClientProvider组件包裹住整个App组件,并提供一个clienthome组件:就直接使用useQusery方法即可。useQusery说明:参数一:是一个id,你随便取,但是要唯一,这个唯一键值将在内部用于在整个程序中重新获取数据
2021-12-16 18:02:16
6537
原创 react简单入门--常用hook中useContext的使用
前言:如果在看本文章之前,你对context API比较了解的话,该hook将会推出比这个更加高级的语法1、导入:该hook依旧是从react包中导入即可,无需从第三方包导入2、使用:我们事先准备三个组件根组件:< App / >子组件:< Son />孙子组件:< GrandSon />根组件:子组件:孙子组件:页面效果:观察发现,也确实能够拿到从根组件传过来的值总结:你如果在此之前,对原本的context的API比较熟悉的话,
2021-12-16 16:03:32
546
原创 react简单入门--常用hook中useEffect使用
前言:在react中创建class组件时,我们能够很容易地用特定的方法,来判别这个组件在什么生命周期里面处理什么逻辑,比如说,在componentDidMount、componentDidUpdate中我们可能需要发一些请求,或者做一些初始化的操作,又或者在componentWillUnmount 我们有可能做一些清楚订阅的操作;但是在函数组件中,你要知道这个组件现在处在那个生命周期,却比较麻烦,甚至有点无从下手,这时候我们就可以使用hook中的useEffect()1、导入:这个和useState一
2021-12-16 14:34:32
1254
原创 react简单入门--常用hook中useState的使用
前言:在react中,我们在开始学习中比较喜欢用class组件,但在实际开发中,更多的是用函数组件,但函数组件中,又很难像class组件拥有state的特性,来管理当前组件的一些状态,所以在函数组件中我们可以引用useState的hook1、导入:这个方法无需下载第三方包,直接在react包中引用即可,2、使用:我们先创建一个home函数组件吧展示效果:我们发现确实能够实现类似class组件一样可以管理自己的组件的state了,其语法大致如下:let [ state, setState
2021-12-16 10:49:25
1264
原创 react简单入门- redux的简单使用(Redux Toolkit版本)新版
本文很长,但是我相信你只要坚持看完,必定会有所收获的。+ 概述:Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。+ 拓展:首先要明白Redux 并不是一只能和React一起使用,它同样还支持其它界面库。它体小精悍(只有2kB,包括依赖),却有很强大的插件扩展生态。
2021-12-10 15:46:51
1315
4
原创 react简单入门-react-router6.0及以上路由传参,以及接受参数
先看demo:根组件:只关心我框出来的内容即可Home组件:HomeItem组件:Invoice组件:导入的依赖:场景:比如说,我想访问主页,但是每个人的主页信息是不同的,直接访问/home肯定是确定不了的,需要携带一些参数,比如id和name之类的,这样你才能确定你访问是谁的主页,那路径就有可能是类似这样的/home/zhangsan,又或者说有可能会有同名的人,那我有可能会进行分组,想找具体组的具体的“zhangsan”,那就有可能访问的是/home/123/zhangsan
2021-12-08 19:28:32
5306
9
原创 react简单入门-react-router6.0及以上路由(含嵌套路由)的的简单实用
前言:最新版的react路由有些改变,大致总结如下用Routes代替了原来的Switch之前的<Route />组件的component属性变成了element引进了新的API:<Outlet />貌似自带精准匹配,无需再加exact属性了先上dome:根组件:各子组建:页面展示:默认展示页面:首页展示页面:登陆展示页面:首页的子页面:未匹配到的页面:*总结与注意点:在涉及到嵌套路由时,一定要在其父组件的最后面用Outlet作为出口
2021-12-08 16:21:04
1699
原创 react简单入门-组件的生命周期的简单分析
先上图谱:看图可知,一个react组件大致整个生命周期就分为三个阶段:挂载时、更新时、卸载时,那下面就分别分析下这三个阶段吧。。。挂载时:这个这阶段就是将当组件(类组件)实例创建并插入 DOM 中时,会顺序依次调用????的这些函数更新时:该阶段其实就是state或者props发生变化时,就会依次调用????的这些函数:卸载时:当组件从 DOM 中移除时会调用????的方法:当然还有组件发生错误的时候,其实还会调用????的方法(但是不常用):...
2021-12-07 19:04:53
196
原创 react简单入门-自定义组件的子组件渲染(类比vue的匿名插槽和具名插槽)
前言:首先在react中是没有插槽的概念的,但是可以类比vue或者其他组件库中“槽”的概念,官方解释:案例:“匿名插槽:”根组件:父组件:效果展示:经观察发现,这个<Fu>...</Fu>组件内部不管写什么,并在函数里面以{props.children}的形式去接收,就可以直接渲染了“具名插槽:”根组件:Fu组件:展示效果:经观察,如果是需要类似具名插槽的效果的话,都是在组件标签上加上自定义属性就行了,而这个自定义属性的值是个符合jsx语法即可,未
2021-12-07 11:33:50
586
原创 react简单入门-组件点击事件的函数无法访问this
*场景:首先你能来看本篇文章,那说明你的代码有可能类似是这样:当点击按钮,调用test函数,结果打印this的时候,或者说想在test函数里面访问this的一些属性的时候,控制台却是undefined如果说你只是单纯地想解决问题的话,有如下解决方案,直接挑选如下你想要的方案代码即可run了,但是你要想多了解一下的话,还请继续往下看。方案一:方案二:方案三:方案四:解决思路:导致问题的原因:首先在class类里面的函数,它是无法自己绑定这个函数的this的,所以说你就只能自己手动
2021-12-03 18:16:57
1100
原创 react简单入门-脚手架搭建项目
*前言:其实步骤和vue没什么区别,大致相同,语法不通罢了。1、安装脚手架控制台输入如下命令,全局安装react脚手架,-g参数就是代表的全局的意思,会基础的npm都应该知道。npm install -g create- react-app稍等片刻,发现有类似如下显示,就说明安装成功了说在某某某文件夹下添加成功某个包,用时多少多少,当然我这里用的是nvm,可能信息有点不一样,但翻译翻译就可以了。2、使用脚手架创建项目在控制台输入如下命令:create-react-app dome01
2021-12-02 14:13:13
462
原创 企业中git规范
1、分支管理大致类似如下(类似文件夹与文件的理解):master:主分支feature:一般指你要开发新功能了,就放在该分支下fix:基于master分支的问题进行修复的分支optimization:基于master分支优化的分支二、commit时的规范在commit时,往往需要填写一些messsage,而备注的格式大致如下:<type>( <scope> ): <subject>type:必填,指代表你commit是什么类型,有如下类型:b
2021-11-30 17:06:24
337
原创 vue父组件传数据给子组件,子组件watch这个数据第一次有效,刷新页面就无效(同时解决请求数据时间过长,导致子组件过早渲染而无法获取到最新数据的问题)
需求&问题本文废话有点多,但我觉得有些业务场景应该也会有人遇到,索性还是把需求和问题都写详细点,看各位路过的朋友不说能解决你的问题,哪怕是对你有一点点帮助的,我也就很高兴了的????,嫌废话多的,直接看图应该就懂我的意思,我只留了关键的代码…问题1:本来是要向后台请求数据的,但是由于数据过大,后台需要处理,所以整个请求时间过长,可是我就是要拿到这个请求数据传给子组件,但实际上假如请求时间需要5s,而子组件渲染完成只需要3s,那就取不到数据了,我想到的解决办法有:法1: 在子组件使用
2021-09-23 12:47:49
2888
1
原创 Echarts点击画布任意位置获取当前位置所对应的坐标值
需求:工作时遇到的一个需求说:给用户展示图表时,希望用户在图表中选取一块又一块的,拿出来用于后续的数据分析思路及问题:既然要选取一段一段的数据,我采取的办法就是用户点一次,我标记此时的x轴,表示起点,用户再点一次,我再记录此时的x轴,表示终点,然后在表中的配置项加个蒙版就是了。问题:只能点击已经标注的地方,无法点击我想要的任意地方,且就算可以能点击任意地方,也无法获取当前的x坐标的值,只能获取它的偏移值解决办法:const assess_chart = echarts.init(this.$
2021-08-25 17:59:25
5720
8
原创 Vue-codemirror的配置信息
value: string|CodeMirror.Doc编辑器的起始值。可以是字符串,也可以是文档对象。mode: string|object使用的模式。如果没有给出,这将默认为加载的第一个模式。它可以是一个字符串,可以简单地命名模式,也可以是与模式关联的MIME类型。或者,它可以是包含模式配置选项的对象,具有name命名模式的属性(例如{name: “javascript”, json: true})。每种模式的演示页面都包含有关模式支持的配置参数的信息。您可以通过检查CodeMirror.mode
2021-08-01 23:06:21
4526
原创 Java的serverlet查询数据,返回前端json数据
先上代码serverlet类@WebServlet("/user/findAll")public class UserFindAll extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req,resp); }
2021-05-26 23:07:41
775
原创 idea2020新版集成Tomcat以及采用注解访问class文件(超详细版)
1.新建一个项目出来的项目于结构如下:2、为项目添加web应用这里为项目添加web项目此时多出一个wen文件夹3、设置tomecat运行点击Apply------>ok以下是使用注解方式进行class访问,可忽略1、导入依赖的包在web文件夹下,新建一个lib文件夹,意义着装一些依赖jar包在lib文件夹中装入servlet-api.jar包2、新建一个dome类,然后去继承HttpServelet,去重写它的方法,并加入注解点击右
2021-04-19 21:09:50
817
1
原创 socket.io快捷查询事件表
io.on('connect', onConnect);function onConnect(socket){ // 发送给当前客户端 socket.emit('hello', 'can you hear me?', 1, 2, 'abc'); // 发送给所有客户端,除了发送者 socket.broadcast.emit('broadcast', 'hello friends!'); // 发送给同在 'game' 房间的所有客户端,除了发送者 socket.to('ga
2021-04-03 20:19:22
152
原创 Vue中computed的使用
1、需求:在vue模板中要计算某些属性,如下我想要讲mes的内容给反转过来,即本来是helloworld,我要它变成dlrowolleh方法1:使用原生js操作缺点:在模板里面会呈现的非常复杂,不够简洁方法2使用vue中computed属性优点:在模板做中只需要写上函数名即可,达到一个简洁的目的,当页面模板中有大量的这样的步骤时,我们就可以统一在computed中处理,而不是在模板中写一大堆方法...
2021-03-17 17:16:38
417
原创 Vue中v-once使用
1、先看代码当我们打开浏览器是如下:如果在控制台中设置mes的值的话,页面的内容也会跟着改变,如下:这就说明vue是通过数据驱动来实现页面渲染的,如果我们加上v-once属性,这就意味着vue会跳过编译,只会渲染一次,后续就不会再去监听这个数据变量了,这也就能起到一个提高性能的作用,如:当用用户登录之后,用户的头像、昵称基本不会变,vue也就会跳过它,从而提高了性能。...
2021-03-15 14:49:01
1656
原创 Vue中解决插值表达式渲染数据闪动问题
前言:在使用Vue的时候,经常会用到插值表达式,也就是两个大括号{{}}的语法,但是有时候会出现如下问题先看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
2021-03-15 12:34:22
576
原创 jQuery中的各项选择器
语法描述$("*")选取当前所有元素$(this)选取当前HTML元素$(“div”)选取所有的<div>元素$(".app")选取所有class名为app的元素$("#app")选取所有id名为app的元素$("div.app)选取所有class名为app的<div>元素$(“div.first)”选取第一个<div>元素$(“ul li:first”)选取第一个<ul>元素下面的...
2021-02-26 10:36:31
214
原创 Vue中移动端,只用px即可实现适配,摆脱响应式的困难!
*前言:适配解释:所谓移动端适配就是能够在不同手机尺寸中达到同样的样式效果,避免在大屏幕手机中,字体太小,小屏幕手机中,字体太大等等问题。实现原理:通常使用的是px单位,但适配中是用rem单位来做的,因为rem单位是font size of the root element (根元素的字体大小),意思是每个浏览器有不同的默认根节元素的字体大小,假如你的浏览器的默认根元素字体大小是12px,那么1rem = 12px。假如你的按钮大小宽高分别是1rem * 1rem,换算过来就是12px * 12x,那
2021-02-23 14:24:32
1094
原创 Node.js中实现token是否过期来判断登录状态
步骤1、下载jwt(jsonwebtoken)在你项目的cmd中输入如下命令,安装jwtnpm install jsonwebtoken2、写代码我这里是新建了一个util文件夹,里面有个token.js文件代码:/* * @Author: Poker_旭 * @Descripttion: token解密与加密 * @version: 1.52 * @Date: 2021-02-04 20:43:40 */const jwt = require('jsonwebtoken');
2021-02-05 22:44:05
2678
2
原创 Java设计模式之--------创建者模式之--------建造者模式
创建者模式分为:单例设计模式工厂模式原型模式建造者模式创建型模式的主要关注点是"怎样创建对象? ”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。*工厂模式的解说:在java中,万物皆对象,这些对象都需要创建,如果创建的时候直接new该对象,就会对该对象耦合严重,假如我们要更换对象,所有new对象的地方都需要修改一遍,这显然违背了软件设计的开闭原则。如果我们使用工厂来生产对象,我们就只和工厂打交道乱可以了,彻底和对象解耦,如果要更
2021-01-02 17:06:05
135
原创 Java设计模式之--------创建者模式之--------原型模式
创建者模式分为:单例设计模式工厂模式原型模式建造者模式创建型模式的主要关注点是"怎样创建对象? ”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。*工厂模式的解说:在java中,万物皆对象,这些对象都需要创建,如果创建的时候直接new该对象,就会对该对象耦合严重,假如我们要更换对象,所有new对象的地方都需要修改一遍,这显然违背了软件设计的开闭原则。如果我们使用工厂来生产对象,我们就只和工厂打交道乱可以了,彻底和对象解耦,如果要更
2021-01-01 19:15:25
91
原创 Java设计模式之--------创建者模式之--------工厂模式之--------抽象工厂模式
创建者模式分为:单例设计模式工厂方法模式抽象工程模式原型模式建造者模式创建型模式的主要关注点是"怎样创建对象? ”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。*工厂模式的解说:在java中,万物皆对象,这些对象都需要创建,如果创建的时候直接new该对象,就会对该对象耦合严重,假如我们要更换对象,所有new对象的地方都需要修改一遍,这显然违背了软件设计的开闭原则。如果我们使用工厂来生产对象,我们就只和工厂打交道乱可以了,彻底和
2021-01-01 17:37:55
120
1
原创 Java设计模式之--------创建者模式之--------工厂模式之--------工厂方法模式
创建者模式分为:单例设计模式工厂方法模式抽象工程模式原型模式建造者模式创建型模式的主要关注点是"怎样创建对象? ”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。*工厂模式的解说:在java中,万物皆对象,这些对象都需要创建,如果创建的时候直接new该对象,就会对该对象耦合严重,假如我们要更换对象,所有new对象的地方都需要修改一遍,这显然违背了软件设计的开闭原则。如果我们使用工厂来生产对象,我们就只和工厂打交道乱可以了,彻底和
2021-01-01 16:25:11
104
原创 Java设计模式之--------创建者模式之--------工厂模式之--------简单工厂模式
创建者模式分为:单例设计模式工厂方法模式抽象工程模式原型模式建造者模式创建型模式的主要关注点是"怎样创建对象? ”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。...
2020-12-31 12:02:32
113
1
原创 Java设计模式之--------创建者模式之--------单例模式
创建者模式分为:单例设计模式工厂方法模式抽象工程模式原型模式建造者模式创建型模式的主要关注点是"怎样创建对象? ”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。1、单例设计模式单例模式(Singleton Pattern)是Java中最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的
2020-12-30 22:41:37
99
原创 Java设计模式之--------类与类之间关系的表示方法
一、关联关系关联关系是对象之间的一种引用关系,用于表示一类对象与另一类对象之间的联系,如老师和学生、师傅和徒弟、丈夫和妻子等。关联关系是类与类之间最常用的一种关系,分为一般关联关系、聚合关系和组合关系。我们先介绍一般关联。关联又可以分为单向关联,双向关联,自关联。1、单向关系在UML类图中单向关联用一个带箭头的实线表示。上图表示每个顾客都有一个地址,这通过让customer类持有一个类型为Address的成员变量类实现。2、双向关联从上图中我们很容易看出,所谓的双向关联就是双方各自持有对方类
2020-12-29 17:54:40
166
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人