- 博客(170)
- 收藏
- 关注
RSS订阅
原创 一篇搞懂浏览器的工作原理（万字详解）
本文从浏览器的进程，渲染进程，JS的调用栈，作用域和作用域链，垃圾回收机制，事件循环，以及构建DOM等，来解释浏览器的工作原理。
2023-08-24 14:35:52
304
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【24】实现Table表格组件以及数据展示
经过前面几章的内容，我们的后端服务已经支持了对页面的管理，对图片的管理，并且也支持了在XinBuilder中如何去使用它们。这一篇继续回归到XinBuilder的项目里，再上一篇中，我们实现了和实体相关的后端内容，也就是我们有了持久化的数据存储。但是有了数据之后，我们如何能够在低代码项目里面使用？本篇主要通过Table组件来串通数据在XinBuilder中如何展示。
2024-04-17 17:24:57
224
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【23】实现数据库表新增数据以及页面展示
在上一篇中，我们实现了可视化创建数据库表。并没说怎么对表中的数据进行操作。OK，现在我们来实现相关的内容。在AppBuilder中，可以通过可视化操作数据在XinBuilder中，可以通过表单等方式进行提交但是，不管是哪种方式，我们首先应该有添加数据的接口。
2024-02-26 22:54:03
377
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【22】实现数据库管理的前端页面
新增实体的接口删除实体的接口获取实体列表的接口其实复杂的地方在于，我们创建一个实体，是在数据库中创建了一张表。而这张表中的数据，是要根据低代码平台中的操作进行更改。现在，我们有了接口之后，要将这个实体创建，删除等过程，进行可视化。所以我们需要来到AppBuilder项目中。
2024-02-25 22:26:41
369
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【21】实现数据库的动态建表等接口
在前面的两篇文章，我们主要是通过Upload组件和Image组件，真正的做到了设计器和后端服务之间的数据传递。有了这个例子，应该比较清楚，对于低代码项目的服务端，它。因为正常做开发，后端主要是对某个字段的数据进行存储，例如姓名，年龄等。但是对于低代码的后端，它的存储没有具体到某个字段，也没有具体的数量，它是和设计器里面的字段进行关系映射。当然，这是后话，目前我们能做的，就是说如何在我们的项目里面，可以创建数据库的表，例如我创建一张学生表，创建一张教师表。
2024-01-26 15:31:34
982
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【20】实现Upload组件和Image组件
在上一篇文章中，我们主要的工作是在AppBuilder中，做了图片管理这样的一个路由。从上传图片，到图片的展示，我们的服务端代码已经完成。同时也在前端页面进行了接口的调用。现在，有了这些基础，我们就可以在我们的低代码平台中，了。
2024-01-25 20:05:02
394
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【19】实现Upload相关接口和前端页面
在之前的文章里，在实现组件的时候，有提到Upload组件，当时并没有对这个组件进行实现。那我们现在思考一下，如果我们想实现Upload组件和Image组件，我们应该怎么去做。Upload组件有一个很重要的属性是action，也就是上传的服务器位置。所以我们实现Upload组件之前，应该有一个服务器用来保存上传的图片。之后在Image组件里进行展示。那这整套流程在我们的三个项目里是怎么样的呢？OK，大体流程我们有了，现在我们开始进行实现。
2024-01-22 11:18:51
935
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【18】实现页面接口对应的前端
在上一篇中，我们已经把和页面相关的接口完成的差不多了。从创建页面，更新页面等等：有了接口之后，我们就可以构建前端页面了。那这部分前端内容我们应该写在哪里呢？因为我不确定这个项目后面会有多少代码，虽然我们目前只是想实现页面的管理功能，但是后面我也不知道会增加到多少。所以我准备使用两个React项目，和页面相关的这些功能我都会写在新的项目里，
2024-01-18 14:08:15
1023
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【17】实现页面的增删改查接口
在上一篇中，我们已经搭建好了后端服务。同时实现了获取全部页面列表的接口以及Swagger文档的配置。如果这一步没有问题了，我们现在就可以去完成剩下和页面相关的接口了。我们先总体的看一下，我们要实现什么接口。
2024-01-17 16:01:33
369
原创 从零实现一套低代码（保姆级教程）【后端服务】 --- 【16】初始化后端项目
在前面的实现过程中，我们的低代码平台，在前端已经有一定的构建页面的能力了。但是对于我们实现一个平台，肯定要支持用户对页面进行保存等功能，包括后面我们运行时的设计，都要依赖于后端的能力所以，现在我们需要考虑开始使用数据存储了。那因为博主平时的工作主要都是前端开发，所以后端框架选择了比较贴合前端的。我们低代码来讲，通常是对协议的保存以及修改，所以我们的数据库使用，当然，如果读者有一定的后端开发经验，可以自行选择后端框架和数据库。
2024-01-15 16:48:06
924
原创 从零实现一套低代码（保姆级教程） --- 【15】实现轮播图组件并增加容器子节点类型的控制
接上一篇，我们继续实现另外一个比较常见的组件。轮播图，在一些官网的页面中，这个组件是非常常见的。那如果你是从基础开始学前端的，那么轮播图组件也是一个作为入门实现的组件。那我们现在要把这个组件，加入到我们的低代码项目中，来进行实现。
2024-01-10 10:09:57
894
原创 从零实现一套低代码（保姆级教程） --- 【14】实现头像组件和徽标容器
在上一篇中，我们把一些简单的组件都实现了，从这一篇开始，我们来实现那些比较复杂的组件。如果你是一个前端开发，应该很经常看见到头像上面有一个消息提示：本篇我们就要实现出这个效果。我们先来分析一下，头像组件肯定很好写，只需要按照步骤添加即可。那这个徽标应该怎么写呢？应该发现我的标题已经写了，我们将其以容器的方式实现。然后头像作为它的子组件，这样就能实现出二者一体的效果了。从零实现一套低代码（保姆级教程） — 【1】初始化项目，实现左侧组件列表我们开始实现这两个组件。
2024-01-04 14:49:00
865
原创 从零实现一套低代码（保姆级教程） --- 【13】补充其余基础组件
对于目前实现的低代码，单说前端部分，我们目前还欠缺的是事件系统，而事件系统会在后面的运行时项目来进行实现。目前，除了事件，前端的内容基本已经完成了。现在我们就来完善一下组件，因为我们现在只有不到十个组件，我们先把简单的组件都添加进来。复杂的组件我们单独用一个个篇章来讲解。在本篇中，只会对一些细节来进行补充说明，不会再从头到尾说一遍添加组件的过程了。有疑问的可以比对github的提交记录进行查看。OK，现在我们开始吧。
2024-01-03 14:19:25
951
原创 从零实现一套低代码（保姆级教程） --- 【12】实现左侧层级树并支持查看JSON
目前，我们还有最后一个小模块没有实现，那就是左侧的数据。我们希望它能够展示整个页面的相关协议，其实也就是我们redux中管理的数据。我们希望能够通过可视化的方式看到它。因为有时候我们想知道一个组件的具体信息，就可以通过这种方式去查看。同时在之前的篇章中，我们实现的容器组件是嵌套关系的，所以这里展示数据的组件，我们选择使用Tree组件。OK，现在我们实现左侧的组件层级树。
2024-01-02 16:12:54
928
原创 从零实现一套低代码（保姆级教程） --- 【11】实现Card卡片组件及属性样式配置
我们通过十个篇章，把组件列表，画布区，属性面板，样式面板，容器组件这五个主要模块实现出来了。如果想继续添加组件，就按照之前的方式添加即可。对于数据录入这样的组件，或者一个按钮一个标签组件，这种很简单。对于容器组件，我会用简单的篇幅来说一下，比如本篇文章，主要就是讲解一下Card组件是如何实现的。但是如果你上一篇对Form表单的实现已经掌握了的话，这一篇其实自己也能完成的。OK，那我们就开始实现Card卡片组件了。
2024-01-02 14:12:29
948
原创 从零实现一套低代码（保姆级教程） --- 【10】实现样式面板并支持Button组件的样式配置
经过前面九篇文章的讲解和实现，目前我们的低代码已经初具雏形了。那我们可以回忆一下之前我们是怎么实现属性面板的。本质上就是在画布区选中节点后，在redux保存。在通过右侧属性面板，修改节点的属性，从而引起组件的重新渲染。那如果我们想实现一个样式面板，整体思路不就和属性面板一模一样嘛。甚至，InputComponent这个组件我们都可以复用！！！！！OK，现在我们在项目中实现一下样式面板。
2023-12-29 12:44:46
858
原创 从零实现一套低代码（保姆级教程） --- 【9】实现Form组件并串通容器组件机制
目前，我们的低代码项目，已经把基本的架子搭好了。后续我们会陆续添加一些其他的功能。如果你本身就是一个前端开发，那你一定知道，那现在我们的低代码项目好像实现不了这个效果，我们只能拖拽文本框。然后去调整它的位置，再配置属性。。那如果我们能实现一个Form组件，组件本身提供一些属性配置。可以将Form组件下的所有文本框进行统一配置。是不是就可以了呢？例如我们通过设置Form的组件大小，就可以统一设置里面所有文本框的组件大小。但是现在有一个问题是什么呢，如果我们通过Form组件，将文本框给包裹起来。
2023-12-28 16:15:51
935
原创 从零实现一套低代码（保姆级教程） --- 【8】补充数据录入组件，并实现分组
目前，我们实现的这一套低代码已经具备基本的功能了。从组件，到画布区，再到可视化的属性配置。就是我们这套低代码现在组件有点少，只有三个组件。其实如果这三个组件，你已经实现了。那么如果你想根据antD新增其他组件，也不会是一件困难的事情了。所以，后面我不会用文章来讲解组件的添加了（除非有一些复杂的组件，例如Upload组件）。这一篇文章，主要是来实现一些其他的组件，主要是数据录入组件为主。什么是数据录入组件，像文本框，数字框，评分，下拉框这种，让用户输入的组件，我们叫他数据录入组件。
2023-12-27 15:34:26
968
原创 从零实现一套低代码（保姆级教程） --- 【7】实现Icon组件
在上一篇中，我们在项目中引入了redux。所以改动比较大，也是最复杂的一个章节。那如果你已经对上一节掌握了，那后面也不会有更难的内容了。因为我们已经把一个整体的架子搭好了，后续只会在这个架子上缝缝补补。看到标题，我想读者可能不会理解，为什么实现一个Icon组件，要单独放一个章节呢？如果你使用过antD，应该知道，对于antD组件，我们虽然用的是Icon组件，但其实是引入Icon下的不同图标组件。
2023-12-27 11:26:50
956
原创 从零实现一套低代码（保姆级教程） --- 【6】在项目中使用redux状态管理
在上一篇文章中的末尾，我们也完成了Input组件的属性面板配置。现在我们的低代码项目已经小有成就了。但是后面的内容还是不少的。如果你是第一次看到这篇文章，那么请移步到第一节：从零实现一套低代码（保姆级教程） — 【1】初始化项目，实现左侧组件列表来到本系列的第六节，我们回顾一下之前的实现内容。前两点，我们目前是通过window，来实现组件的信息传递的。那既然有很多地方用，所以我们需要有一个全局的状态管理，管理组件的信息。所以，这时候我们就要引入redux了，用redux我们可以统一管理组件相关的信息。这
2023-12-26 14:17:57
881
原创 从零实现一套低代码（保姆级教程） --- 【5】实现组件和属性面板的交互
在上一篇中，我们简单实现了右侧属性面板。可以通过更改按钮文字，重新渲染Button组件。目前来到了本系列的第五章，本篇主要是实现Button组件的全部属性配置。在第一节中，说了本系列会实现出什么样的低代码项目。同时对技术栈等相关因素进行了分析。但是本系列因为是对线上例子的重构，所以实现的可能会有所差异。关于属性面板的配置，可能是整个系列中比较重要的。因为低代码主要的想法就是通过可视化的配置来决定页面的结构和样式。那么如果属性这一章节可以通透起来，后面的样式，动作等配置都是手到擒来了。
2023-12-25 14:45:18
1021
原创 从零实现一套低代码（保姆级教程） --- 【4】实现右侧属性面板
继画布区的实现之后，来到本系列的第四篇文章，如果你没有看过之前的文章，可以建议先看一下第一篇文章，里面介绍了要实现的项目，是否是你要学习的内容，再决定是否要学习这一些列的文章。在上一篇中，我们实现了画布区的渲染，同时也支持了组件在画布区的随意拖拽布局。所以我们实现出的低代码项目，在画布区的布局方式是自由布局。同时在上一篇的结尾，也把Input组件的实现补充了（没有在文章体现，在GitHub上的提交记录可以看到）。目前我们的项目是长这个样子的。
2023-12-22 15:39:02
869
原创 从零实现一套低代码（保姆级教程） --- 【3】实现Button组件和画布区的拖拽
目前是每天更新一篇， 因为我不止要写文章，这些代码也是我正在敲的。可能速度没有那么快，但是这个频率感觉还是可以的。本篇是这个系列的第三篇，如果你是第一次看到这个文章，那你应该会对低代码有那么一丢丢兴趣或者很有兴趣。从标题来看，也知道我这个系列就是实现一个低代码的项目。那如果你想知道，我实现的项目的样子是什么样的，可以访问下面的链接：因为上一篇文章，没有额外的提交，所有的代码都写在了文章里，所以这里就直接继续上一篇开始说。在上一篇结束后，我们实现了左侧组件拖拽到画布区的效果！！！
2023-12-22 11:07:13
1053
原创 从零实现一套低代码（保姆级教程） --- 【2】实现画布区并展示组件
这一篇是这个系列里的第二篇文章，如果没有看过第一章节，请移步到第一章节。毕竟要看一下实现出来什么东西，再决定是不是要学习呢。那整体来说，本系列主要就是实现出一套低代码的项目，而如果你已经看完了第一节。希望在后面的章节里，你依旧能一边参考线上例子，一边自己实现。在上一节课里，我们实现了左侧组件列表的展开。注意一点，在文章后面，我做了一点样式的优化，在github的提交里可以看到。目前的效果是这样：而这一篇文章，主要是为了实现画布区（当然是简单先实现出来效果），并且能够往里面拖入组件。
2023-12-21 17:15:40
986
原创 从零实现一套低代码（保姆级教程） --- 【1】初始化项目，实现左侧组件列表
低代码作为前端一个比较热门的方向，讨论度或者热度都算是拉满了。如果你想了解低代码，可以在网上找一些相关的网站。像阿里等公司都有开源的项目和在线体验。但是因为他们的代码比较牛逼，其实没有那么通俗易懂。那博主是想，通过一系列文章的讲解，从零实现一个低代码的工程，包括设计态，运行态，组件以及后端服务。那看到这篇文章，你肯定想知道会实现出一个什么样的低代码工程。下面是最终的实现效果：点击快速开始，第一次加载可能会慢一些，等待即可，然后输入默认的账号密码，就可以看到要实现的低代码平台了。
2023-12-20 15:19:10
1187
原创 WebSocket --- ws模块源码解析（详解）
在这一篇文章中，写了如何在node端和web端，实现一个WebSocket通信。WebSocket在node端和客户端的使用而在node端里面，我们使用了ws模块来创建WebSocket和WebSocketServer，那ws模块是如何做到可以和客户端进行双向通信的呢？
2023-11-20 10:22:48
698
原创 WebSocket在node端和客户端的使用
如果想要实现一个聊天的功能，就会想到使用WebSocket来搭建。那如果没有WebSocet的时候，我们会以什么样的思路来实现聊天功能呢？
2023-11-09 11:29:25
851
原创 使用低代码实现一个表单页面 ------ XinBuilder
如果你不是一个前端开发，但是想要实现出一个前端页面。那么就可以通过低代码的方式，拖拽和配置出你想要的页面。而XinBuilder就是简单的一套低代码平台，你可以在上面拖拽出自己想要使用的组件并进行配置。使用方式也很简单。这篇文章，就简单的实现出一个登录页面。通过低代码的方式，点击下面的链接。第一次访问时间可能会稍微长一点。XinBuilder低代码平台进入后你会看到一个登录页，放心，不需要注册，我来给你一个账号密码进行使用。账号：admin密码：666666。
2023-09-27 10:11:34
190
原创 使用低代码实现一个登录页面 ------ XinBuilder
如果你不是一个前端开发，但是想要实现出一个前端页面。那么就可以通过低代码的方式，拖拽和配置出你想要的页面。而XinBuilder就是简单的一套低代码平台，你可以在上面拖拽出自己想要使用的组件并进行配置。使用方式也很简单。这篇文章，就简单的实现出一个登录页面。通过低代码的方式，点击下面的链接。第一次访问时间可能会稍微长一点。XinBuilder低代码平台进入后你会看到一个登录页，放心，不需要注册，我来给你一个账号密码进行使用。账号：admin密码：666666。
2023-09-26 11:25:41
382
3
原创 React源码解析18（11）------ 实现多次setState的批处理
在React中，如果涉及到了多次setState，组件render几次。setState是同步的还是异步的。这是一个很常见的面试题。而本篇文章，就是主要实现React中，对于这部分的性能优化，我们称之为批处理。
2023-08-22 16:11:42
996
原创 React源码解析18（9）------ 实现多节点渲染【修改beginWork和completeWork】
目前，我们已经实现了单节点的，beginWork，completeWork，diff流程。之前的children就直接是一个对象jsx，因为是单节点。而现在，是通过数组的方式表示。})]})]})
2023-08-18 13:58:59
607
原创 React源码解析18（8）------ 实现单节点的Diff算法
经过之前的几篇文章，我们已经实现了一个可以进行更新渲染的假React。})})})虽然页面的效果是正确的。但对于两个jsx，二者的区别仅仅是span标签里面的内容不同。但是在程序里面，我们是相当于每次都重新beginWork，重新的创建Filber树，重新的创建真实DOM。而对于这里div和span标签，它没有任何的改变，我们是否可以用一种优化策略，从而对旧资源进行利用呢？所以Diff由此而来。这一篇先只说单节点的Diff，因为目前还没实现带有sibling的情况。
2023-08-17 10:15:31
912
原创 React源码解析18（7）------ 实现事件机制（onClick事件）
在上一篇中，我们实现了useState的hook，但由于没有实现事件机制，所以我们只能将setState挂载在window上。而这一篇主要就是来实现事件系统，从而实现通过点击事件进行setState。而在React中，虽然我们是将事件绑定在JSX上的某个元素上，但是其实最终的执行者是最外层的容器。也就是说React利用了冒泡的机制，将所有事件都冒泡到了最外层容器上，从而创建合成事件，在对相应的事件执行。})});
2023-08-15 10:28:07
671
原创 React源码解析18（6）------ 实现useState
在上一篇文章中，我们已经实现了函数组件。同时可以正常通过render进行渲染。而通过之前的文章，beginWork和completeWork也已经有了基本的架子。现在我们可以去实现useState了。})});由于我们这一篇并不会实现React的事件机制，所以我们先将setState的方法挂载在window上进行调试。有了基础，我们现在开始实现useState。
2023-08-14 15:08:13
1269
原创 React源码解析18（5）------ 实现函数组件【修改beginWork和completeWork】
经过之前的几篇文章，我们实现了基本的jsx，在页面渲染的过程。但是如果是通过函数组件写出来的组件，还是不能渲染到页面上的。所以这一篇，主要是对之前写得方法进行修改，从而能够显示函数组件，所以现在我们在index.js文件中，修改一下jsx的写法。})});这里因为需要使用我们自己的jsx方法。所以在App里面返回的依旧是通过之前的方式进行调用。
2023-08-14 09:47:36
937
原创 React源码解析18（4）------ completeWork的工作流程【mount】
经过上一章，我们得到的FilberNode已经具有了child和return属性。一颗Filber树的结构已经展现出来了。那我们最终是想在页面渲染真实的DOM。所以我们现在要在completeWork里，构建出一颗离屏的DOM树。之前在说FilberNode的属性时，我们提到过一个属性stateNode。它就是用来保存每个FilberNode的真实DOM。OK，现在我们开干，准备实现completeWork。
2023-08-10 16:07:45
1088
原创 React源码解析18（3）------ beginWork的工作流程【mount】
OK，经过上一篇文章。生成了FilberRootNode和HostRootFilber。并且二者之间的对应关系也已经确定。//第一节实现的jsx方法})});所以我们现在要实现ReactDOM.createRoot中返回的render方法。
2023-08-10 10:09:03
1136
原创 React源码解析18（2）------ FilberNode，FilberRootNode结构关系
在上一篇，我们实现了通过JSX转换为ReactElement的方法，也看到了转换后React元素的结构。但是这个React元素，并不能很清楚的表达组件之间的关系，以及属性的处理。所以在React内部，会将所有的React元素转换为Filber树。而这一章节，主要就是简单描述一下FilberNode的结构。首先看一下一颗Filber树是什么样子的：在这张图里，出了filberRootNode，其他的节点都是FilberNode类型，hostRootFilber就是最外层的FilberNode。
2023-08-09 15:34:40
1150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人