前端项目分享:Q Maker——仿问卷星低代码项目
项目来源
该项目来自慕课网双越老师课程(具体项目介绍和演示慕课网上都有,很详细不再赘述)👇:
React18+TS4+Next.js13,B端+C端完整业务+技术双闭环 - 慕课网 (imooc.com)
双越老师(王福朋)是开源项目 wangEditor(富文本编辑器)的作者
相信如果在开发中有遇到富文本需求时,调研的过程中一定会了解到这个项目,而且最近老师也在公共平台上宣布该项目没有精力再去维护(开源不易)
所以为了表示对老师的尊重就不直接把课程网盘放出来了,如果真的看过这个项目介绍并且十分感兴趣的话可以留言,我再单独私发
项目背景
这是我去年大三下学期学校实训期间做的一个项目,因为那时候的我还是主 Vue,但是明显感觉单修在面试当中已经没有很大的竞争力了,必须得再学学 React 😶
之前只对 React 的基本使用有了解但缺乏实战经验,趁着学校的实训机会赶紧找一个项目来做做
具体做什么样的项目也是纠结了好久,中后台项目是真不太想做了,C 端的一些项目样式可能复杂些又懒得写CSS,最终让我调研到了这个低代码相关的项目
包括自己最近在做毕设也是低代码相关的,突然想到之前也做过低代码相关的业务,又把这个项目给翻出来了,所以在这里给球友分享一下
因为那时候实训的时间比较紧只把核心功能实现了(大概),印象里没有实现的功能:
- 物料组件拖拽功能
- 操作快捷键(删除、撤销等)
- 课程最后针对于 React 框架对整个项目的优化
- 课程最后针对于组件的单元测试
不过整个功能流程是打通的(不然糊弄不了实训老师🤣):
b 端注册账号 -> 创建问卷 -> 编辑问卷 -> 发布问卷 -> c 端填写问卷提交 -> b 端查看问卷统计信息
为了方便球友学习我就把之前已经做完的项目发布上线了,可以按照上面的功能流程体验👇:
地址:https://qmaker-b.fasyncsy.com.cn/
源码:DrssXpro/Q-Maker: 一个简易的问卷调查项目 (github.com)
测试账号:async 测试密码:123456(想自己注册体验也可以)
与课程里不一样的一点是由于我们实训要求项目的完整性,因此自己用 express 连接数据库写了几个接口,课程中是通过 mock.js 模拟的假数据,当然无伤大雅,毕竟是一个重在前端的项目
虽然项目的整体难度不是很大,但是学习完后就对最基本的低代码业务功能实现有个大体了解(组件展示、属性绑定、undo、redo这些)
据我观察发现校招生简历上选择现在比较火的低代码相关项目还是不少的,如果你也想要在简历上加一个低代码项目但现在又无从下手的话,这个项目一定是你的不二之选😏
