- 博客(61)
- 收藏
- 关注
RSS订阅原创 [next.js] svgr/webpack
按照上面的配置后发现无效，组件直接报错了。思考了许久才发现是因为我在开发环境使用了–turbo，所以一些webpack的loader加载器不支持。来开启turbopack加速文件构建，所以之前的一些webpack loader之类的无法正常工作。直接在next.config.js里这样配下就好了，现在Next.js会把import进来的svg处理成react 组件。的官网文档里turbo的介绍中发现就有@svgr/webpack的示例。所以当时的笨方法是把.svg内容复制下来放到封装的react组件里。
2024-06-12 17:32:09
899
1
原创 [next.js]移动端调试vconsole
直接在这个layout的useEffect里加载vconsole (这里只会在开发环境里启用vconsole，基于webpack/turbopack的tree shake功能，在正式环境是不会把vconsole打包进来的) 然后使用import导入三方库并初始化。新建一个tsx文件，在这个tsx组件的useEffect里复制上面的代码（这里也是为了防止正式环境把vconsole打包进去），然后在入口的layouts里使用dynamic动态导入这个组件并挂载到页面上；先安装vconsole。
2024-06-11 15:55:47
996
2
原创 [pixi.js] 入门简单案例 简易时钟
老实说pixi虽然之前拿来做个几个简单的游戏，但是是好久前的了，又忘了，现在算是重新入门。官网版本已经更新到v8去了，而react相关的pixi库虽然支持react18 但还是v6-v7的版本，既然已经看了v8的文档，那就没必要等pixi-react了，直接照着pixi文档撸吧。
2024-06-07 15:37:13
663
2
原创 [next.js]pwa缓存
配置Next.js (v14+ App Router模式) 使其支持PWA缓存，配置server worker和mainfest.json，让项目支持离线访问和可安装。以上配置 我让其在生产环境自动创建server worker和workbox等文件并在浏览器加载时初始化init sw文件，第二次访问时便可以创建sw缓存。配置next.config.js。
2024-06-05 14:03:00
751
1
原创 [nextjs]路由拦截守卫踩坑
问题肯定是出现在middleware中间件上，通过调试发现这里的判断依然是false 读取不到请求头里cookie里的token,但是明明请求头里有token呢；next想实现类似vue这种路由拦截器，其实使用next.js自带的中间件就行了。只能暂时先使用笨方法，在设置cookies后刷新页面，重新像服务器请求页面；匹配的路由，发现依然跳转到了登录窗口，尝试过几次都是这样（原谅我菜）或许是存在路由器缓存，如果手动刷新页面就不会拦截到了；刷新状态即可，不需要手动刷新页面，完美解决！这里一切都是正常工作的。
2024-05-29 17:05:42
1190
原创 [React] 手动实现CountTo 数字滚动效果
这个CountTo组件npmjs里当然有大把的依赖存在，不过今天我们不需要借助任何三方依赖，造个轮子来手动实现这个组件。通过研究其他count to插件我们可以发现，数字滚动效果主要依赖于。通过js帧来让数字动起来，数字变化则是依赖于内部的。所以我们需要给组件默认值，防止没有参数时会报错。来选择是否开始动画，同时组件销毁后清除。是必要的，其他都是可选参数。同时写几个工具函数便于后面使用。首先声明组件props类型。好了 我要开启五一假期了！一些相关依赖的监听及处理。最后附上完整代码 –
2024-04-30 18:07:52
918
2
原创 Next.js 移动端适配
tips: tailwindcss/autoprefixer是我安装的依赖，没安装的可以删除这两项，否则会报错！是无法处理内联样式的，就是说你写在标签style里的属性是不会被转换的，要注意！由于next.js内置了postcss，所以我们不需要再安装postcss/postcss-loader。属性是适配设计稿的宽度 比如设计稿是375 这里就是375。在根目录的layout.tsx里配置Meta标签；属性是转换后的精度（小数点多少位）以上就是我适配移动端的方案；我这里借助的转换依赖是。
2024-04-29 17:42:20
1761
原创 next.js v14 从入门到跑路
用next.js也有几天了，也是这么一个边看边用这么一个状态，现在主要使用app router模式，更新下next.js v14 app router模式方面的姿势吧。区别于前面的pages router, app router虽然也是根据目录结构来划分路由，但是它不再依赖于使用getServerSideProps/getStaticProps在服务器时期去获取数据，在app router模式下只区分服务器组件和客户端组件，且一些在pages路由模式下的方法也无法在app路由下使用。
2024-04-28 18:06:44
1693
1
原创 [PM2]window环境部署服务报错
使用pm2部署服务测试，在window环境下一直提示。1：通过直接运行当前电脑里的npm脚步来开启服务。这是因为node无法操作cmd控制台；比如当前电脑npm所在的路径是。3: 通过pm2配置文件启动。
2024-04-08 16:29:54
654
原创 vite ssr服务端渲染
阅读这一章里有说过，vue是支持服务端渲染的。通过创建vue组件实例，并使用将在服务器渲染好template并返回字符串结构，通过替换占位字符将渲染好的字符串输出到html上，这样的一个过程就实现了服务端渲染。也提到了如何去渲染SSR并提供了相关那么今天我们就按照官方给的示例来完成vue ssr的改造使用Node Koa框架来做服务器，且使用vue全家桶（router,pinia）开发项目。
2024-03-13 11:08:24
1663
2
原创 vite性能优化之数据预取
本思路与常规方案不同，也不太推荐。有能力的建议直接一步到位用ssr改造项目，后面我也会出一个vite ssr博客出来。"数据预取"功能类似于SSR中的注水，SSR的注水，是在服务端获取数据并渲染好页面结构，客户端只需要渲染好页面就行了，省去了创建DOM的过程。在服务器端获取的数据需要通过’注水‘ 插入到页面上，到客户端读取服务器请求的数据，这个过程叫’脱水‘，通过‘脱水’，避免了再次向服务器请求的操作；
2024-03-11 11:26:10
1092
原创 【browser】浏览器跨域处理
好久没有更新博客了，前段时间在疯狂面试，最近工作了才有时间来写博客。准备来讲讲面试里常问到的跨域处理吧。说到跨域，我们可能会下意思的说出jsonp，服务端配置cors，node配置代理等，再多了，我可能想不起来了。本篇本来打算只记录postMessage这种方式的，但光说这个显得太单薄了，所以一并都总结一下吧。跨域是什么，为什么会跨域？要想知道为什么，你得先知道什么是同源策略。
2023-04-27 18:37:30
758
原创 复制内容到剪贴板
比如我这里创建一个方法将dom的内容传入到方法里，然后选择右键粘贴，即输入你想要复制的内容。记录一个非常好用的js api，自动将文字复制到剪贴板；触发了这个方法后会将当前选中的文字复制到剪贴板上；
2022-12-09 13:38:06
369
原创 vite.config.ts加载.env环境变量
本地开发代理proxy读取env环境变量，vite构建项目读取env，vite.config读取环境变量。
2022-11-29 10:21:01
4242
原创 Vue基础之组件通信provide、inject
类似react中context的功能，vue的provide就非常适合在祖孙这种多层级的状态下进行通信。
2022-11-24 11:26:09
748
原创 [mysql]记录一些常用sql语句
select * from table where key like '%value%'模糊查询查询key里所有包含value的数据集合；其中value% 代表了以value开头的数据而%value则代表了以value结尾的数据;select count(*) from table查询返回表里所有数据的数量可以通过as count重命名countselect count(*) as count from table...
2022-04-27 16:08:40
694
原创 nodejs实现文件上传功能
基于koa2 实现前端上传图片到服务器的功能；前端部分我们就用原生input file上传 通过change事件手动触发上传事件<input type="file" ref="file" accept="images/*" @change="onChange" multiple />js 这里以上传一张图片为例 function onChange() { const list = (file.value as HTMLInputElement).files as FileL
2022-04-25 14:44:35
5289
原创 [javascript]手写一个懒加载组件
参考一下vantui里的List组件，实现一个印象中的懒加载功能（之所以说是印象中呢主要是vant打不开鸭，全凭记忆中的功能来摸索了）；不是我想重复造轮子，是我想自定义一些些功能。。。逻辑 主要是监听滚动条 计算设置好的滚动条到底部的高度来异步加载数据，期间异步加载尚未结束时不会重复执行加载操作，所以应该是用了节流。废话不多说，开始coding先声明一个组件 就叫他LazyLoad吧 <div class="lazy-load-ctx" ref="scrollRef">
2022-04-24 15:56:26
1132
原创 [TypeScript]监听事件event.target无法正确的获取属性
在使用ts开发项目的背景下，一般给dom添加监听事件时函数会拿到当前的事件对象；在我们指定了参数是Event后，我们去获取e.target里的属性时ts会提醒我们target里没有这个属性；类似于这样明明我们已经指定了事件的类型，为啥获取target里的值的时候会报错呢？？经过我多方查阅方才得知，ts无法知道当前这个事件是什么元素的事件的类型，不同dom元素的事件里的target值都不相同；需要指定当前这个事件具体是什么元素里的HTMLElement类型比如我这个是div 那我指定他是HTML
2022-04-24 13:35:11
4615
原创 【牛客网】前端面试手撕题讲解
最近在准备金三银四，刚好看到有一些常见的前端手写原理题目，遂记录下解题的思路（不是全部，好几道我也不会啊）；地址： 20道前端面试手撕题下面正文开始FDE1 事件委托描述请补全JavaScript代码，要求如下：给"ul"标签添加点击事件当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”…"注意：必须使用DOM0级标准事件（onclick）dom0级事件只有两个，一个是直接在dom上绑定onclick事件，另一个是获取dom元素并绑定o
2022-03-04 17:45:03
1976
1
原创 Vue3 双向绑定原理浅入
众所周知 vue2所使用的双向绑定原理是用了Object.defineProperty 来进行数据的拦截处理，而vue3使用了es6的 proxy代理拦截数据，那么 proxy是啥呢？菜鸟教程 ES6 Reflect 与 Proxyproxy小试牛刀先声明一个变量const obj = { name: 'dingzong'};创建一个proxy实例const _obj = new Proxy(obj, {})输出_obj构造函数proxy第二项是一个对象，对象里有内置十三种方法来捕
2022-02-14 11:15:43
2096
原创 钉钉h5微应用缓存可行性解决方法
最近有在开发钉钉h5微应用程序，坑爹的钉钉h5即使打包js做了hash串 每次打包上线依然会读取缓存。要手动清除掉手机里应用的缓存信息才可以读取最新的代码，这么做的话 用户体验着实太糟糕了。百度了下说是在入口引用js后面加上版本号就能不读取缓存，ok 那想办法每次打包去更新版本号就好了。要每次去更新版本号，那必然要用到node的fs模块来读写文件，开搞：所有的环境变量文件里声明一个版本号根目录新建一个js文件update.version.js引入文件操作模块和路径模块以及获取当前版本号cons
2021-09-14 10:42:22
5442
8
原创 理解js函数柯里化
函数柯里化用过loadsh的都大概了解过其中提供了一个curry方法，可以把传参拆分开延迟执行；把简单函数复杂化，复杂化是为了通用性，为了能够更灵活调用，重复使用。比如：function num(a, b, c) { console.log(a,b,c)}这个函数经过柯里化后const curryNum = curry(num);可以分开传参curryNum(1)(2)(3);curryNum(1)(2, 3);curryNum(1, 3)(3);// 或者const curr
2021-09-07 14:23:18
168
原创 vue3 ts组件实例类型
mark下获取组件实例并能不any指定类型正确调用组件的方法，非常好用！import导入组件后 使用InstanceType获取组件类型;例如import MoviesList from './components/list.vue';如果想使用这个组件的方法，正常不为了编辑器检测报错 只能指定组件的ref为any 但这样一点都不优雅，也没有提示方法。所以type FilmsType = InstanceType<typeof MoviesList><MoviesList
2021-07-16 17:12:58
3762
原创 vue开启Gzip性能优化
使用gzip能有效减少打包后的项目体积，但是需要配置nginx和vue.config.js文件；需要先安装compression-webpack-pluginnpm i compression-webpack-plugin如果配置了gzip 但是打包或者运行时显示Cannot read property ‘tapPromise’ of undefined 之类的报错 ，需要先删除当前的compression-webpack-plugin模块 再安装低版本的compression-webpack-pl
2021-05-21 14:39:05
575
1
原创 html转pdf
最近遇一需求 需要将网页部分内容转换成pdf保存下来；思路是将html转成canvas（html2canvas） 再根据canvas.toDataURL将canvas转换成图片，最后使用pdfjs将图片保存到pdf文件里;贴一下代码mark下需要用到上面那两个依赖；import html2canvas from 'html2canvas';import jspdf from 'jspdf'; const dom = document.getElementById('orderDetail'
2021-04-27 16:46:05
182
原创 flutter打包
mark下flutter打包流程1 需要用到keytool,所以要安装java jdk并配置好环境变量；（下载java jdk）安装完成之后进入到c盘java安装目录里 进入到bin复制文件地址右键此电脑点击属性 点击左侧高级系统设置-环境变量 在用户变量里选中path 点击新建将地址复制进去如果有KeyStore请跳到下一步；执行以下命令来生产keykeytool -genkey -v -keystore /D:/key.jks -keyalg RSA -keysize 2048 -val
2021-04-22 16:51:57
749
原创 vue3移动端开发rem问题
mark一下移动端开发rem插件使用问题根据官网提供的postcss-pxtorem 安装并配置了相关选项但打开报错的问题解决方法
2021-03-30 17:16:54
235
原创 github更新fork代码
mark下更新fork代码 怕麻烦的可以把仓库fork的代码删掉重新fork1、git clone fork后的分支到本地；git clone 你fork后的代码链接2、将源分支指定给upstreamgit remote add upstream '被fork的源码的地址'3、fetch源分支代码到本地git fetch upstream4、合并代码git merge upstream/master5、将合并后的代码推送上去git push origin master...
2021-03-10 16:42:05
339
原创 NodeJs爬虫速成
mark一次Nodejs爬虫入门经历需要用到的依赖cheeriosuperagentcheerio是类似于jquery 操作dom获取数据superagent则是请求对应的网址并返回网页dom数据具体详情可以百度npm init 初始化一个项目新建一个Index.js引入上述的依赖const superagent = require('superagent');const cheerio = require('cheerio');引入fs文件管理const fs = requir
2021-02-22 16:04:56
211
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人