- 博客(93)
- 收藏
- 关注
RSS订阅
原创 Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]
Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]。element-plus为UI框架。pinia为状态管理，和vuex一样。vue-router路由。nprogress顶部进度条。animate.css一个跨浏览器的动画库。测试ElementPlus、图标以及vue3API等按需引入情况。修改App.vue文件。
2023-01-12 16:13:50
6868
1
原创 useDark的使用方法以及Element-Plus深色主题切换案例（vue3）
点击切换以后发现页面变成深色模式，html和Local Storage对应的值也都发生了改变。来回切换也是没有任何问题的。的存储值（key 是可自定义的）。从而设置html的class。VueUse的官方案例使用了。官网可以看到，它自己就带有暗黑主题，我们只需要在 html 上添加一个名为。例子中使用的vue3写法，因为我做了配置，对应的api自己手动引入一下。欢迎一起学习，一起成长。所以选择使用useDark工具那就太方便了。，要实现深色主题的切换前提就得在项目中先安装。的依赖，并且在项目中进行注册。..
2022-08-03 10:35:18
13405
19
原创 form-generator扩展原生表格，element-table，子表单等组件
的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。但form-generator提供组件并不能满足我们在项目中的使用，比如表格组件，el-table，子表单等等，在很多项目中会经常使用到。
2022-06-10 09:48:25
19634
37
原创 java生成假数据工具类-基于Faker1.0.2
java生成假数据工具类-基于Faker1.0.2背景安装废话不多说，直接上码MockItem(参数类，包含调用的方法，参数以及输出时的key)MockItemParamters（调用方法对应的参数以及参数类型）最终实现的工具类GenerateData导入背景前后端分离，当前端速度过快后台代码跟不上的时候，我们可以提供一些工具或者接口供应前端调用返回对应需要的假数据，不影响开发，JavaFaker就给我提供了很好的假数据生成。githup地址安装<dependency> <g
2020-08-07 14:00:43
3565
3
原创 第十五章 React使用UI（Ant Design）框架
Ant Design还是是很重要的。它是一个成熟的前端框架，提供了丰富的组件库，包括按钮、表单、表格、图标、菜单、对话框等等，可以满足各种常见的界面需求。此外，它还支持国际化，可以根据不同的语言和地区自动切换组件的文本和样式。因此，对于前端开发人员来说，学习Ant Design是非常有必要的。它可以帮助你提高开发效率和质量，打造出令用户满意的前端应用。同时，Ant Design的活跃社区和丰富的案例教程也可以帮助你学习和交流。
2023-12-14 21:31:29
1310
原创 第十四章 React之Redux状态管理库
新建src/hooks/useAppSelector.tsx文件新建src/hooks/useAppDispatch.tsx文件React Redux提供了统一的、可预测的状态管理方案，使得开发者能够更好地组织和管理应用的状态。它通过使用单一数据源、不可变性和纯函数等核心概念，提供了一种可靠的状态管理方式，减少了状态管理方面的困惑和错误。良好的状态管理能够提高应用的可维护性、可扩展性和可测试性。
2023-12-12 17:41:06
1327
1
原创 第十三章 React 封装 Axios 并做防重复提交 同一接口 [请求未返回结果、2秒内禁止重复提交]（超详细）
欢迎加入本专栏！本专栏将引领您快速上手React，让我们一起放弃放弃的念头，开始学习之旅吧！我们将从搭建React项目开始，逐步深入讲解最核心的hooks，以及React路由、请求、组件封装以及UI（Ant Design）框架的使用。让我们一起掌握React，开启前端开发的全新篇章！
2023-12-12 17:40:47
1274
1
原创 第十二章 React 路由配置，路由参数获取
在React中，路由是用于管理应用程序中不同页面之间的切换和导航的机制。它允许开发人员根据用户在应用程序中的行为，如点击链接或提交表单，来切换不同的组件或页面。最为常见的就是我们的导航菜单，点击菜单以后现实相对应的页面。react-router-dom是React中非常重要的一个路由管理库，对于开发React应用程序来说是很有必要学习的。在React中，react-router-dom可以帮助我们实现页面间的跳转和导航，使得单页应用能够实现多页应用类似的切换效果。
2023-12-11 18:04:02
1788
原创 第十一章 React 封装自定义组件
自定义组件是指根据应用需求，自定义的组件。它们可以是有状态的或无状态的，可以接受props并返回JSX或null，并且可以包含生命周期方法、refs、context等等。自定义组件在React应用中非常常见，因为React的核心思想就是组件化。每一个React页面都是由一个或多个组件构成，组件是构建React应用程序的基石。它们可以封装可重用的UI组件，使代码更加模块化和可维护。自定义组件可以有很多用途。例如，它们可以创建可重用的UI组件，如按钮、表单、布局等。
2023-12-11 18:03:20
1413
原创 第十章 React之使用CSS、Sass
在React中，CSS和Sass仍然非常重要，因为它们可以帮助开发者更好地组织和维护样式代码，以及提高开发效率。CSS是一种用来描述HTML或XML等文件样式的计算机语言，它能够精确控制网页中元素的位置、布局、字体、颜色、背景等效果。在React中，每个组件都是独立的，因此它们各自的样式也需要单独定义和管理。使用CSS可以帮助开发者更好地组织和维护这些样式代码，同时还能提高代码的可重用性和可维护性。
2023-12-08 17:48:31
2072
原创 第九章 React 自定义Hook
React 有一些内置 Hook，例如 useState，useContext 和 useEffect。在React中，自定义Hook的作用就是将组件之间的公共逻辑提取出来，以便在不同的组件中复用。这与我们在面向对象的编程中，将公共方法提取到一个新的类中并在多个对象之间共享这个类的方法是类似的。自定义Hook可以帮助我们更好地组织和复用代码，提高代码的可读性和可维护性。使用自定义Hook，我们可以将组件的逻辑封装在一个独立的函数中，并在需要的时候调用这个函数。
2023-12-08 09:14:18
1051
原创 第八章 React Hooks之useImperativeHandle、forwardRef 父子组件通信
useImperativeHandle和forwardRef都是React Hooks的一部分，它们的作用和重要性如下：useImperativeHandle是一个用于暴露自定义ref属性和自定义方法的钩子函数。它使得父组件可以通过ref访问子组件中定义的方法和属性，从而实现对子组件的精细控制。也就是说，父组件可以使用子组件的方法或者控制子组件。当使用useImperativeHandle时，需要子组件中的第二个参数（ref）当作useImperativeHandle的第一个参数。
2023-12-07 17:52:21
1554
1
原创 第七章 React Hooks之useRef、useMemo、useCallback
useRef、useMemo、useCallback这些React Hook在我们开发过程中都具有重要的意义。useRef是一个用于保存组件内部可变数据的Hook。通过使用useRef，我们可以在组件渲染周期内保存数据，并在组件重新渲染时保持数据不变。这在一些场景中非常有用，例如记录上一次渲染的一些值，或者在组件生命周期中保持一些状态的不变性。useMemo是一个用于优化性能的Hook。在复杂的React应用中，我们可能会遇到组件频繁重新渲染的情况，这可能会导致应用性能下降。
2023-12-07 09:43:17
1273
原创 第六章 React Hooks之useEffect
useEffect就有点类型于Vue中的学习React需要掌握useEffect。useEffect是React中的一个非常重要的Hook，它允许在函数组件中执行副作用操作。在开发中，useEffect非常重要，因为它可以帮助我们处理许多常见的副作用操作，例如订阅事件、修改DOM、发送网络请求等。通过使用useEffect，我们可以将副作用代码从组件的渲染逻辑中分离出来，使其更加清晰和易于维护。此外，useEffect还可以帮助我们避免在组件卸载后忘记取消订阅事件或清除定时器等常见问题。
2023-12-06 09:15:32
1315
原创 第五章 React Hooks之useState
useState是React中至关重要的一个Hooks，它在我们的实际项目开发中应用广泛且使用频繁，因此熟练掌握其使用方法至关重要。useState的使用相对简单，易于上手，基本上没有太多难度。通过理解和掌握这个Hooks，你将能够更有效地处理组件的状态管理，提升React应用程序的性能和可维护性。我是Etc.End。
2023-12-06 09:14:56
1065
原创 第四章 React之Typescript
Typescript，type就是我们所说的类型，那类型是什么。下面举两个列子。列子一【变量】在下面的代码中，我定义了name和age两个遍历，并且初始值为""字符串和0。可以看到我标红的地方。编辑器自动识别到了这两个变量的类型。此时name后面的:string就是我们所有的类型。那它有什么用呢，上面的代码是正确的写法，所有不会出现什么异常，下面我在onClick事件中故意给它赋一些不支持的值看看会出现什么。我在点击事件中给age赋值了一个字符串。
2023-11-30 20:36:22
1117
原创 第三章 React之JSX、TSX语法
TSX语法在保留了HTML的标记语言的同时，增加了类型注解和JSX语法的特点，并通过构建工具将它们结合在一起，为构建大型、复杂的Web应用提供了更高效、更灵活的编程方式。在下一篇文章中我将讲解typescript的使用。我是Etc.End。
2023-11-30 20:35:49
2200
原创 npm ERR! dev @typescript-eslint/parser@“6.0.0-alpha“ from the root project
这个问题是由于尝试安装的 @typescript-eslint/eslint-plugin 包需要一个名为 @typescript-eslint/parser 的包作为同伴（peer）依赖项，并且该同伴依赖项的版本应为 "6.0.0" 或 "6.0.0-alpha"。但是，可能由于某种原因，这个同伴依赖项没有被正确安装或者版本不兼容。我们可以先安装@typescript-eslint/parser@^6.0.0。安装完成以后再去安装其他依赖即可。
2023-11-29 20:18:14
873
原创 第二章 React项目配置ESlint和Prettier实现自动格式化代码以及统一代码风格
项目中使用prettier和eslint以后，Prettier可以根据配置的规则自动格式化代码，使代码看起来更整洁、易读、易于维护。由于代码格式化可以自动完成，开发者可以专注于编写代码，减少因代码格式问题而分散注意力。Prettier可以轻松集成到编辑器、构建工具和CI/CD流程中，使代码格式化更加方便。Prettier的配置非常灵活，可以根据项目需求定制化配置规则，比如控制代码的宽度、空格长度、是否使用分号结尾等。
2023-11-29 18:03:15
1936
原创 第一章 分别使用Create-React-App、Vite、Umi Max搭建React项目
还有其他构建React项目的方式，这里就举这三种比较常用的列子，至于选择哪一种去构建，根据自己的需求以及项目的复杂程度。如果你需要快速构建简单的React应用程序，可以选择Create-React-App或Vite。如果你需要构建复杂的React应用程序，并希望拥有更多的控制权和可扩展性，可以选择Umi-Max。我是Etc.End。
2023-11-29 16:07:57
1650
1
原创 第九章 Vite4+Vue3+Vtkjs 扩展vtk格式模型支持
VTK（Visualization Toolkit）是一种用于三维计算机图形、图像处理以及可视化的软件系统。它广泛用于科学可视化的各种领域，包括医学影像、地理信息系统、计算机图形学等。VTK的数据模型使用一种称为数据集（DataSet）的抽象模型来表示三维图形和数据。数据集由数据对象（DataObject）组成，这些对象可以是几何数据（Geometry）或拓扑数据（Topology）。几何数据表示实际的空间位置和形状，而拓扑数据定义了几何数据之间的关系。
2023-11-20 20:42:03
278
3
原创 我的创作纪念日
CSDN给我最多的感受就是有各种各样的技术分享，除了学习以外，还在工作中得到了很多帮助，但并不是所有的问题它都有相对应的解决博客，所以我在平时学习或者工作中有啥收获，就会想着把它撰写成博客，一方面是可以记录，毕竟好记性不如烂笔头嘛。对于我个人而言，目前我觉得最有成就感的就是，我使用electrong+vite+vue3实现通过python脚本去爬虫制作的个人音乐播放器。你小小的一个举动就是给我最大的动力。虽然现在粉丝数量才5000多，阅读量也才5万，我相信只要坚持下去，肯定会有更大的突破。
2023-08-07 09:21:40
506
原创 TS2604: JSX element type ‘ProForm‘ does not have any construct or call signatures.
请确保导入路径是正确的，并且与你的项目结构和ProForm组件的文件路径对应。比如编辑器自动帮我引入的时候是这样子的，因为引入错误，所以导致无法正常运行。这个错误是由于在你的代码中，引用ProForm组件的时候引用错了。因此，编译器无法找到该组件的构造函数或调用签名导致错误的发生。
2023-08-02 10:50:05
399
原创 Form Generator 表单JSON数据储存以及JSON回显表单
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。
2023-07-31 11:32:53
1818
2
原创 【6】toLocaleString、toLocaleDateString、toLocaleTimeString等toLocale系列方法的使用及案例
用toLocaleString、toLocaleDateString、toLocaleTimeString方法可以根据用户所在地区的语言和时间格式来显示日期和时间，提供更好的用户体验。我是Etc.End。每一次进步都值得庆祝，每一次努力都值得赞赏。不要忽视自己的成长，每一步都是向前迈进的力量。😍。
2023-07-27 15:15:04
1105
原创 Form Generator 扩展子表单组件之表单校验(超详细)
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。
2023-07-21 16:43:52
1277
1
原创 【5】Vite+Vue3 JsonPath的使用
是一种用于查询和过滤JSON数据的语言。它类似于XPath，但专为处理JSON数据而设计。使用JsonPath，您可以根据预定义的语法模式从JSON数据中选择和提取特定的值或对象。它可以用于查找、过滤和提取JSON数据的任何部分，如属性、数组、嵌套对象等。通过指定路径表达式，您可以快速、简洁地定位JSON数据中的目标元素。
2023-07-18 14:34:43
1027
原创 【4】Vite+Vue3左右容器中相同属性的元素内容自动对齐
这个需求的话相对比较冷门,一般会出现在图文排版,在文章或者网页中,将图片和文字按照某种规则进行对齐,提高排版效果和可读性.其次是做到页面一致性,一致的对齐方式可以使整个界面看起来更加的统一和协调,从而引导用户的注意力。这个功能的话其实开发永远用得最多，比如我们在git提交代码的时候，会有代码对比功能，很清晰的就能知道我们修改了些什么内容。如果你有word或者文章进行比对的话，就可以应用次功能，进行段落或者标题的对其，直接提供用户体验。
2023-07-18 10:31:25
590
原创 【3】Vite Vue3 用户、角色、岗位选择组件封装
用户、角色、岗位、组织等等是我们在项目中最常见的一个选择。每一个组件的实现方式可能也不一样，用户的话可能是一个列表的展示，进行单选多选。而组织可能是树节点的形式。但不管是哪一种封装的逻辑基本都是一样的。我们需要一个展示框，展示用户选择的数据。同时展示框可以进行点击弹出需要选择的数据。对于组件来说，无非就是弹出框中展示的数据不一样。本文我们就讲解如何通过一个input框进行用户选择的组件封装。
2023-07-17 17:10:19
808
原创 【1】Vite+Vue3 登录功能
Vite + Vue3 实现系统登录功能，登录功能是指用户通过提供一定的凭证（如用户名和密码）来验证自己的身份，并获得对系统的访问权限。
2023-07-17 16:41:22
890
原创 【2】LocalStorage 的介绍以及使用场景
localStorage是web浏览器的一种本地存储技术，即使关闭当前页面甚至关闭浏览器它也会一直存储，除非用户去清理。否则会永远存在。所以它也是前端持久化技术的一种。
2023-06-16 16:47:53
1227
原创 第八章 Electron 实现音乐播放器之爬虫播放音乐
我在第五章已经有一篇Electron爬虫的文章，主要写的爬取图片资源的案例。这篇开始讲解如何到一个音乐网站爬取音乐资源，并且进行在线播放，下载等等。那么什么是爬虫呢。百度百科上爬虫既是网络爬虫（又称为网页蜘蛛，网络机器人，在社区中间，更经常的称为网页追逐者），是一种按照一定的规则，自动地抓取信息的程序或者脚本。我个人的理解就是，爬虫是一种自动化程序，它可以模拟人类浏览网页的行为，从互联网上爬取数据并进行处理。
2023-06-15 15:38:50
1961
3
原创 [vite] Internal server error: Codegen node is missing for element/if/for node. Apply appropriate tra
[vite] Internal server error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.
2023-06-15 15:25:15
9324
2
原创 第七章 Electron Vue3实现音乐播放器
一个音乐播放器应该具备播放、暂停、上一首、下一首、播放模式（单曲循环、列表循环、顺序播放……）。除了这些比如还可以扩展进度条的展示、拖拽、音量大小的调节，如果资源允许的话可以进行一些歌词的展示等等。由于博主爬虫的资源没有合适的歌词，所以歌词这块功能暂时没有进行开发，感兴趣的小伙伴可以自行去完善。
2023-06-09 10:56:30
3261
原创 第六章 Electron|Node 实现license激活机制
license许可证，一般用于软件的授权，我个人的理解就和我们平时的登录差不多。只是说登录时需要我们输入用户名和密码，license一般是开发方提供给你一串加密后的文本，通过这个文本进行一个系统的授权，并且只需要授权一次就可以。这个license一般是会携带用户的mac地址、使用期限、激活日期等等啊。这个可以根据自己的需求去设置。最后把这些信息进行一个非对称加密。用户拿到加密后的license以后可以请求服务器，服务器拿到license后解密进行对比。从而实现激活软件。
2023-06-07 15:47:15
2723
5
原创 Form Generator 集成到其他项目中
form-generator中一个非常重要的东西就是render渲染函数。它不仅在这个项目里面，在整个vuejs框架中也是非常的核心。跟template模板开发一样，但是它更接近底层。如果你还不了解render，或者还不是很熟悉的话。建议多看看，多写写。后续不管是普通开发，还是组件的封装。它肯定能给你带来不一样的惊喜。😁 😁 😁我是Etc.End。。
2023-06-07 11:11:34
1575
原创 第五章 Electron|Node 使用cheerio 爬虫
Cheerio是一个快速、灵活且精益的jQuery核心实现，用于在Node.js环境中解析HTML文档。它可以帮助您在服务器端轻松地从HTML文档中提取数据，比如从网页中提取文章标题、内容、图片等信息。
2023-06-02 15:13:19
2292
4
原创 第四章 Electron|Node 使用SQLite3数据库
SQLite是一种嵌入式关系型数据库管理系统，是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎。SQLite是一个轻量级的数据库，可以在各种操作系统上使用，并且支持SQL语言标准。
2023-06-01 23:23:37
6052
9
原创 第三章 Electron 使用Koa以及Koa-Router
据网上的资料显示，Koa 是下一代的 Node.js 的 Web 框架。是express原班人马打造,同样用于构建服务端web application的。旨在提供一个更小型、更富有表现力、更可靠的 Web 应用和 API 的开发基础。扯这些没用的，它就是提供给我们构建API服务的。
2023-05-31 14:17:18
1107
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人