记 22 React + ts + tailWind 实战 ( 三 )

82 阅读1分钟

学习一 GitHub

  1. 安装git,成功后鼠标右击选项中出现git GUI here
  2. 复制git.exe的安装地址 在cmd目录下(可能需要将反斜杠更改方向)
  3. vscode中首选项>设置>搜索git.path>settings文件中粘贴git路径
  4. GitHub中新建项目并将项目克隆到本地(下载桌面应用)
  5. 项目修改完成后在应用中填写摘要并提交变更-> 推送(命令行有点复杂) 现在代码就可以在GitHub中查看了

实战数据库

接收formId,将json数据可视化,并配置UI操作面板

和dashborad页面一样,forms一样采用分两区设计,左边是UI配置区,右侧是表单样式展示区。

forms > page页

设置分区布局,接收id,发送到数据库查找,获得相应id的form表单的Json数据,转右侧formUI组件展示,左侧controller设置背景、主题、边框等样式,以供预览和分享

FormUI组件

根据传输来的设定好的form格式,进行表单展示,使用了shadcn的select、radio、checkbox组件,通过fieldEdit组件,实现表单内容编辑功能

FormEdit组件

设置表单编辑标签入口及内容修改

Controller组件

设置主题色、样式、边框等UI操作,app目录下新建文件夹_data,用来存放主题色等相关配置内容.更新数据库结构表schema,

theme、bg、schema
//_data>theme.tsx
//_data>bg.tsx
//configs>schema.tsx 修改后需要npm run db:push 
FormView组件(提交表格)

formView>[formId]动态路由>page.tsx ,在formUI中添加相应校验,添加填写及提交功能(schema中添加提交表单的相应验证,并传递表单id,方便索引)