Poker_旭-CSDN博客

原创 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

空空如也

空空如也