前端项目分享:Q Maker——仿问卷星低代码项目

项目来源


该项目来自慕课网双越老师课程(具体项目介绍和演示慕课网上都有,很详细不再赘述)👇:


React18+TS4+Next.js13,B端+C端完整业务+技术双闭环 - 慕课网 (imooc.com)


双越老师(王福朋)是开源项目 wangEditor(富文本编辑器)的作者


相信如果在开发中有遇到富文本需求时,调研的过程中一定会了解到这个项目,而且最近老师也在公共平台上宣布该项目没有精力再去维护(开源不易)


所以为了表示对老师的尊重就不直接把课程网盘放出来了,如果真的看过这个项目介绍并且十分感兴趣的话可以留言,我再单独私发


项目背景


这是我去年大三下学期学校实训期间做的一个项目,因为那时候的我还是主 Vue,但是明显感觉单修在面试当中已经没有很大的竞争力了,必须得再学学 React 😶


之前只对 React 的基本使用有了解但缺乏实战经验,趁着学校的实训机会赶紧找一个项目来做做


具体做什么样的项目也是纠结了好久,中后台项目是真不太想做了,C 端的一些项目样式可能复杂些又懒得写CSS,最终让我调研到了这个低代码相关的项目


包括自己最近在做毕设也是低代码相关的,突然想到之前也做过低代码相关的业务,又把这个项目给翻出来了,所以在这里给球友分享一下


因为那时候实训的时间比较紧只把核心功能实现了(大概),印象里没有实现的功能

  1. 物料组件拖拽功能
  2. 操作快捷键(删除、撤销等)
  3. 课程最后针对于 React 框架对整个项目的优化
  4. 课程最后针对于组件的单元测试


不过整个功能流程是打通的(不然糊弄不了实训老师🤣):


b 端注册账号 -> 创建问卷 -> 编辑问卷 -> 发布问卷 -> c 端填写问卷提交 -> b 端查看问卷统计信息


为了方便球友学习我就把之前已经做完的项目发布上线了,可以按照上面的功能流程体验👇:


地址:https://qmaker-b.fasyncsy.com.cn/


源码:DrssXpro/Q-Maker: 一个简易的问卷调查项目 (github.com)


测试账号:async 测试密码:123456(想自己注册体验也可以)


与课程里不一样的一点是由于我们实训要求项目的完整性,因此自己用 express 连接数据库写了几个接口,课程中是通过 mock.js 模拟的假数据,当然无伤大雅,毕竟是一个重在前端的项目


虽然项目的整体难度不是很大,但是学习完后就对最基本的低代码业务功能实现有个大体了解(组件展示、属性绑定、undo、redo这些)


据我观察发现校招生简历上选择现在比较火的低代码相关项目还是不少的,如果你也想要在简历上加一个低代码项目但现在又无从下手的话,这个项目一定是你的不二之选😏




0个评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
_Async__
作者分享
2023年度总结:我们的生活没有“如果”
69
一个真实二本学院的秋招:停止内耗,接受自己的平庸
94
求职经验分享——两周的求职历程
22
#蓝桥杯# web 今年的蓝桥杯属实是上压力了,作为一名稀有的web组选手(今年我们软院名单上好像就我一个web组,去年两个[捂脸]),按照去年省赛的难度的话压根要不了4个小时,但刚拿到试卷扫了一眼,瞅到了最后两题的名字就感觉难度上来了。 不过前几道题难度确实不是很大,但很明显给人的感觉就是web组的出题更加成熟了,比如没有像去年那种写两行css就a一道题,纯css的题目像还原设计稿就没有了,不过第一道题的grid布局,确实还挺不错的,如果不是后面有个响应式的题用grid布局的代码我就g了,最后比葫芦画瓢也能写的出来。 其次就是个人感觉削弱了JQuery的比重,jQuery虽然也有使用但没有像去年题目那样带来极大的便利,这次我依旧是原生写JS,感觉使不使用差别不是特别大。 只能说有点水平的就是最后两题:markdown解析、树形结构拖拽 markdown的还好,一是看正则基础,二是对于blockquote和ul需要费点功夫,看得出来web组对于正则的要求一直都是有的。 最后一道就有点东西了,个人在上面那道题费了太多时间,最后一道时间明显不太够了只写了送分的那一问。大概看了看应该是原生手写递归组件,之前只用vue写过类似多级评论,递归菜单这样的。虽然原理都一样但是原生还是有点虚,第三问应该就是类似树形结构查找,扁平化删改这样,当时也没仔细看,一会儿扒扒原题再研究研究。 整体来讲还是比较考验基础的,像使用框架的题目分值就那么多,压轴的题永远是看你的原生JS能力。难度确实比去年省赛的题目大,但个人感觉这才是正常的比赛,去年省赛和国赛的难度差别过大反而不太适应,今年听天由命得了,也是最后一次了,可能要捐款了。。
19
前端那些花里胡哨的动画效果—轮播和内容的手势切换
15
下载 APP