- 博客(10)
- 收藏
- 关注
RSS订阅原创 Next.js项目打包踩坑
今天项目终于到了打包上传的时候了，由于是使用TS语言开发的项目，整体npm run build的过程还算顺利，几个any上去总算是打包成功。因为这是我第一次打包上传项目，还是挺值得我记录的。它的大小绝对是不正常的。这就是对打包结果的可视化分析，我们可以看到最大的文件是一个全国地区的地图的json文件，那是参与echarts地图的一个插件的文件，但也只有200多kb完全正常完全可以接受。接下来我就只能对.next文件分析了，经过层层剖析，终于发现，最大的那个文件占了差不多90%的体积，只能是它出问题了。
2024-09-06 16:14:31
779
原创 阿里云矢量图标库的使用
虽然不少公司都会有自己的前端ui工程师设计图标，各类ui库也会有自己的图标库，但如果你是个人开发或者是学校的同学，再或者你们没有ui设计图标，那么你就能运用到我的方案。它介绍了三种使用方式。我一般选用font-class的方式使用，当然官方推荐的还是第三种使用svg的方式。好的这次分享就是这样，这样的好处首先不用安装包，其次它的可选择的图标是真的很丰富，最重要的是它的图标真的很精美且免费！注意的，每个使用的标签都应该有两个类名且第一个是iconfont。然后我们就可以在项目的任何页面使用自己引入的图标了。
2024-08-14 14:58:20
611
原创 Next.js全局状态管理：zustand。以及cookie和seesion的实用剖析。
但是当我想从cookie转回来时它变成了”%7B%22userId%22%3A%229%22%2C%22username%22%3A%2218285873023%22%2C%22password%22%3A%22123456%22%2C%22phone%22%3A%2218285873023%22%7D“这样的ASCII 字符，JSON.parse处理后是null。废话多了点，但也算是我的经验了吧，我的目的是记录一边后以后就不会再焦头烂额了。我比较喜欢边写代码，便给出注释，所以不懂的看注释，我就不再复述。
2024-08-13 17:54:08
1037
原创 解决antd-Upload组件上传后没有预览图标？
我以为它是异步的没问题，但结果它确实是执行了三遍，我跟着debugger走了一圈，发现它是整个页面组件都执行了三遍，所以打印出三个1，ok没问题！随后发现它是否显示，是与status状态有关，也就是它是异步的，但是渲染是同步的，这是我一开始的做法，可以看到在upload组件上我使用了 onPreview={handlePreview} 回调函数，最后改成这样，问题解决，但是有个问题，万一上传不成功呢。我会持续关注这个功能的！那就与组件没有问题，然后我打印了下上传的组件，发现了问题所在。
2024-08-08 18:02:47
362
原创 Next.js的next.config.ts与next.config.mjs的区别
最近在做Next.js项目的时候，按照react的流程给它做一个跨域的请求封装，本以为会像传统React项目那样顺风顺水！！接下来我将以我做配置代理的例子作介绍。希望大家看完文章后，避开我所遇上的问题。先说结论：Next.js 默认不支持配置文件，只支持和。因此，要在 TypeScript 项目中使用配置文件，需要使用或，并在其中导入 TypeScript 代码或使用 JavaScript 编写配置。
2024-08-07 17:25:33
427
原创 antd+React.js实现登陆页面，登陆注册页面
我认为这个页面的特色还是有的，使用一个tabs标签实现两个点击按钮实现了三个和功能页面转换。其中图形验证码在业务上实际是由后端生成的。今天制作登陆界面，本来想找开原的代码复制粘贴，但奈何网友们是在太过吝啬。找了半天，不如我来做这个开源。代码如下（登陆界面层级都比较分明，故不再做过多解释）如果你认为它还能更好，请联系我。代码的显示效果是这样的。
2024-08-05 17:17:12
261
原创 Next.js学习路线
Next.js 是一个基于 React 的开源框架，可帮助开发人员构建服务器端呈现的 React 应用程序。React和 Next.js 之间的主要区别在于它们处理路由的方式。React 使用客户端路由，这意味着页面转换完全在客户端使用 JavaScript 处理。相比之下，Next.js 提供服务器端路由，这意味着服务器处理路由并将预渲染的页面发送给客户端，从而实现更快的页面加载和更好的 SEO。Next.js 还提供其他功能，如自动代码拆分、静态站点生成和动态导入。
2024-08-02 11:24:55
1085
原创 react多表格页面懒加载
打开调试窗口debuge调试半天，后来发现页面跳转是没问题，问题就出现在渲染上了，果然一看吓一跳，他一次渲染的页面的高度就达到了56千的像素，怪不得会卡，发现问题：页面一次渲染太多内容了。事实上这样解决还是不够雅观，因为我有太多的页面组件了，每个组件都这样被相同的工具给包裹起来很不自在，如果你觉得有更好更雅观的解决方案请和我一起讨论。这样路由跳转就不会太卡顿了，后来页面出现卡顿了，我怪罪于react的性能不好（因为我在一个页面里面做了五六七八张表格，即使没有数据，光渲染也会卡奔溃的。
2024-07-17 14:31:39
172
原创 封装useEffect，实现并发请求数据图实时响应
首先我需要取到redux状态参数，然后定义页面状态，然后在根据参数获取数据再更改状态。而且好像依赖的参数一变动所有的数据重新请求？(这样问题可以解决，但是正如我刚才所说，这个会是个多场景业务，，业务问题得以解决，但是代码重复会特别多。依然需要取到redux的状态，但是后续就不会有过多的定义修改操作了。遇到这样一种工作场景：当一个页面需要依赖多个请求并发处理时，而显示数据需要实时变动（根据传入的参数变动而实时更改）仔细想想可不可以封装一个请求函数，传入一个请求api和参数，参数变化是自动执行函数？
2024-07-17 14:06:44
317
原创 echarts-for-react实现国内各省的地图切换
没接触echarts-for-react之前一直使用的是echarts封装画图，但是突然接到一个需要显示各省的地图切换，查遍了百度也没发现类似的案例。既然我们有画地图的工具ehcarts和各省的地标位置数据那么应该是可以实现的，理论可行，开始实践。这里我还添加了antd的级联选择组件，是地图的显示精确到了区县地区。页面用到的插件为echarts-for-react，并非只有echarts。其中代码注释已经很详细了，希望能帮助到你！然后我们需要动态的获取地图信息。首先我们获取到各省的地表数据。
2024-07-17 12:01:33
135
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人