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