从零实现一套低代码(保姆级教程) --- 【1】初始化项目,实现左侧组件列表

发布时间:2023年12月20日

摘要

低代码作为前端一个比较热门的方向,讨论度或者热度都算是拉满了。
如果你想了解低代码,可以在网上找一些相关的网站。像阿里等公司都有开源的项目和在线体验。
但是因为他们的代码比较牛逼,其实没有那么通俗易懂。
那博主是想,通过一系列文章的讲解,从零实现一个低代码的工程,包括设计态,运行态,组件以及后端服务。

那看到这篇文章,你肯定想知道会实现出一个什么样的低代码工程。下面是最终的实现效果:

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
XinBuilder 点击跳转

点击快速开始,第一次加载可能会慢一些,等待即可,然后输入默认的账号密码,就可以看到要实现的低代码平台了。

当然,这是我实现的第一版,而从这篇文章开始,我准备使用TS进行重构,所以可能会有一些差异。

在这里插入图片描述

技术栈

那博主准备写的这一系列文章,主要使用React框架 +Hook 做基础开发。
使用AntD来作为项目的基础组件。

因为博主是前端开发,所以后端服务选择了Nest,数据库选择了MongoDB,当然博主后端能力比较菜,只能实现接口的增删改查。

当然整个系列,肯定是前端开发为主,甚至前面可能都不会涉及到数据库和后端服务。

博主寄语

如果选择了这一套系列文章进行学习,那么最好是一边看文章,一边写代码。同时还要看着上面的在线例子。
XinBuilder 点击跳转

其实作为偏教程的,还是看视频最过瘾,但是博主没有录过视频,所以尽量将文章讲的清楚一点,多配一点图片。OK,垃圾话就说这么多,从后面开始,就要实现整个工程了。

现在,开始吧!!!!!!!!!!!!!!!!
在这里插入图片描述

1.初始化项目

做这个教程,肯定是希望去实现低代码,并不关心Webpack配置啥的了。
所以这里我们直接使用create-react-app这个指令,快速创建一个前端项目。

create-react-app XinBuilder --template typescript

当然你可以叫LongBuilder,也可以叫ShengBuilder,都行,因为我名字最后一个是Xin,所以就叫XinBuilder了。

创建好项目后,把该删的都删了,最后只需要留下App.js和index.js即可。

因为项目的体积比较大,所以建议读者,还是用过Git去管理项目。

OK,现在我们在src的目录下,创建一个pages文件夹,用来保存所有的路由页面。
然后在pages里面,创建一个builder文件夹,用来保存我们设计态的页面。
创建好的目录结构是这样的:

在这里插入图片描述

在项目里面,我们需要用到AntD的组件,所以我们再安装一下AntD。

npm install antd --save

现在准备工作就已经做好了,准备开始开发了。

2.分析设计态整体

你可以进入到 XinBuilder 点击跳转例子中,创建一个页面或者选择某个创建好的页面,点击编辑页面,进入到设计态。

在这里插入图片描述

可以看到,在设计态里,主要分为了三个部分。
左侧是用来展示组件的,中间是画布区,右侧是用来配置组件的属性样式的。

那我们在builder目录里面,也应该有这三个部分,所以我们现在实现一下这三个部分的结构。

在这里插入图片描述
不知道我上面这张图够清楚吗,在App里面引入Builder组件,在Buidler组件中引入
LeftCom, MainCom, rightCom三个组件。

这样我们的页面就会将这三个部分展示出来了,就是三个文本靠在左侧展示,这里我就不再把图片贴出来了。

3.实现顶部栏

因为作为一个项目,顶部栏有的话还是比较美观的。

当然你可以自己去实现想要的效果,如果对这部分不感兴趣可以跳过,而我就在builder目录下新增一个designTop目录,用来实现顶部栏。

XinBuilder\src\pages\builder\designTop\index.jsx

import './index.css'

export default function DesignTop() {
  return (
    <div className='designTop'>
      <span className='title'>XinBuilder</span>
    </div>
  )
}

XinBuilder\src\pages\builder\designTop\index.css

.designTop{
  position: absolute;
  height: 10%;
  color: rgb(211, 202, 202);
  width: 100%;
  z-index: 1000;
  /* border-bottom: 1px solid rgb(209, 203, 203); */
  box-shadow: 0 0 2px 2px rgb(209, 203, 203);
  background-color: #ffffff;
}

.designTop .title {
  color:rgb(192, 190, 230);
  position: relative;
  left: 100px;
  font-size: 28px;
  top: 15px;
  font-style: italic;
  font-weight: bold;
}
这里面可能会有人问一个问题,为什么要对顶部栏进行定位,还是通过absolute,这样不会使顶部栏脱离文档流吗?

这是因为,在整个低代码平台中,我的设计理念是,整个屏幕都是画布区,虽然默认展示只有中间的一部分,但是可以通过将上面的顶部栏折叠,然后扩大画布区的范围。将顶部栏设置为脱离文档流,方便我折叠它。(不过目前对我们实现的效果没有影响)

在这里插入图片描述

leftCom,rightCom,还有mainCom因为顶部栏脱离文档流,被遮住了。

当然你如果不喜欢这种方式,也可以用自己的喜好来。

4.左侧面板

XinBuilder 点击跳转里面,可以看到,设计态的左侧是一堆组件。那我们第一步要实现出什么效果呢?
在这里插入图片描述

这里我们先实现出,左侧的组件可以拖拽的效果。这里我们先拿一个Button组件举例子。

在leftPart下,我们新建一个component文件夹用来保存组件,staticUtil用来保存公共方法。在component下新增两个文件夹,button和input。分别代表按钮组件和输入框组件。

在这里插入图片描述
这里面插一句,在左侧的这个区域,和组件本身没有什么关系,就是用来纯展示,可以拖拽就可以。那在leftPart里面,我们怎么能够拿到所有的组件呢?

就是在component文件夹下,创建一个index.js,并且将所有的组件通过export导出,在leftPart引入即可。

XinBuilder\src\pages\builder\leftPart\component\index.js

import Input from "./input";
import Button from "./button";

export {
  Input,
  Button
}

为了方便好看,我们在index.html中,将body的背景颜色设置为灰色。

  <body style="background:#f2f2f2">

OK,现在组件已经准备好了(假组件,只是个文本哈)。我们动手实现项目的左边部分。先实现出来样式和基本组件。
看效果,是一个Tab页签,下面跟着组件。

插入一下,上面的就不改了,命名错误,都是tsx和ts,写成js和jsx了,看到这请修改一下

XinBuilder\src\pages\builder\leftPart\index.tsx

import './index.css'
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';

export default function LeftCom() {


  const renderComponet = () => {
    return <div></div>
  }

  const items: TabsProps['items'] = [
    {
      key: 'component',
      label: <div style={{fontSize:'18px',width:'100px',textAlign:'center'}}>组件</div>,
      children: renderComponet(),
    },
    {
      key: 'data',
      label: <div style={{fontSize:'18px',width:'100px',textAlign:'center'}}>组件</div>,
      children: 'Content of Tab Pane 2',
    }
  ];

  const onChange = () => {

  }


  return (
    <div className='leftCom'>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
  )
}

XinBuilder\src\pages\builder\leftPart\index.css

.leftCom {
  width: 20%;
  position: absolute;
  top: 10%;
  background-color: white;
  height: 90%;
}

简单说一下这两个文件的代码,在leftCom组件里,我们返回一个Tab页签,其中一个是组件,另一个是数据。
目前我们只关心组件,所以对于数据这一块,我们先不管了。

现在我们要实现renderComponet方法,该方法主要是用来实现左侧组件列表的。

在这里插入图片描述

5.左侧组件

之前我们说过,怎么能拿到component下所有的组件,是通过export导出的,在leftCom里面,我们可以通过import将所有的组件拿到。

import * as components from './component'
这里注意一下,components是一个对象,key就是我们在component下index.js导出的组件名。**value是组件本身,也就是一个函数!!!**

在renderComponent中,我们通过拿到的components,去遍历生成组件。

  const renderComponent = () => {
    return <div>
      {
        Object.keys(components).map(name => {
          return <div draggable key={name} className='componentItem'>
            <div style={{display: 'inline-block'}}><span>{name}</span></div>
          </div>
        })
      }
    </div>
  }
.componentItem{
  width: 80px;
  height: 30px;
  margin-top: 10px;
  margin-left: 15px;
  border: 1px solid rgb(187, 181, 181);
  border-radius: 4px;
  padding: 10px;
}

在最外层增加一个draggable属性,这样就可以拖拽了。

现在我们实现出的效果应该是这样的:
在这里插入图片描述
这两个组件可以拖拽,但是拖拽的时候,鼠标附近会有一个禁用的符号。
这个先不要管,我们后面实现画布区的时候会解决。

第一节就先说到这里,在github上,我提交了这部分的代码,如果有差错的地方可以进行查看比对。

https://github.com/TeacherXin/XinBuilder2
commit: 第一节:初始化项目,实现左侧组件列表

6.博主补充

当然,如果上面的内容已经掌握并且实现了,可以多实现几个组件做基础。例如头像,图标,单选框等组件,不用关心具体怎么实现,只需要在components文件夹增加几个组件,内容就是一个文本即可。

左侧组件列表的样式也可以自行调整,例如在组件下面加个图标?这些样式调整我就不会在文章里面继续写了,比较基础。而且读者也可以选择自己喜欢的样式去实现。

https://github.com/TeacherXin/XinBuilder2
commit: 第一节:左侧组件列表样式优化

文章来源:https://blog.csdn.net/weixin_46726346/article/details/135102092
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。