基于AntBlazor的学生在线练习系统实现过程的简单总结

前言        

疫情当前,作为一名教师,如何能让学生进行有效练习成了一个难题。如果使用 “问卷星”等线上调查问卷式的网站来做练习测试,是无法及时有效的进行,更谈不上对学生练习情况进行跟踪。鉴于以上现实情况和问题,感觉还不如自己动手做一个,顺便充充电学习一下很热的Blazor。

        整个系统的实现一边学一边写一边试用一边改,由于自己的web设计的知识还停留在好几代前,所以只能硬着头皮爬网文、看视频,发求助,每每濒到了崩溃边缘,兴有很多热心的大佬指点迷津,终于让我熬过来^_^。所以在此特别感谢帮助过我的所有人。

准备

1、UI框架的选择:

前几年用C#做winform 较多,所以选择blazor这种前后一体的技术来的更顺手些。于是一边学一边做,为了减轻设计负担,我开始进行UI框架的选择,经过多种框架的试用后最终选择了更灵活简介的 AntBlazor。这里要说明一下,国产的各种UI框架真的各有千秋,选择适合自己的就可以。

2、数据库一如既往使用Mysql,从差不多十年前我就用Net+mysql,看中的就是免费和速度。中间层使用的是自己写的DBHelper,还是习惯写sql

基本界面

1、上图看看系统的基本外观

学生端:

基于AntBlazor的学生在线练习系统实现过程的简单总结_第1张图片

教师端

 基于AntBlazor的学生在线练习系统实现过程的简单总结_第2张图片

基于AntBlazor的学生在线练习系统实现过程的简单总结_第3张图片

 得益于antBlazor统一而又简洁的组件设计,系统的界面看起来还不错,实现起来也是很轻松,多数组件可以直接拿过来用,自己只需要写执行代码就可以了。

在学生端,为了提高题目操作的便捷,本人自己定义了自定义组件两个组件:

1)选题用的圆形按钮组

2)题目选项的选项按钮组

本来使用antBlazor的组件基本能够满足使用,但是为了更直观的体现答题的正误的不同,所以给选题原型按钮增加了正误颜色显示进行区分,同样的题目选项也增加了正误颜色。

通过这两个自定义组件的实现,感觉blazor的组件复用真的很方便。另外,也感受到了数据驱动页面的实现方式和已有的jquery那种直接的页面元素操作的不同,习惯转换还是需要一定的时间。

服务器端,为了更直观地显示学生的练习情况,使用了进度条组件,在使用中,因为带文字的进度条的文字位置是固定的,只好自己使用css 进行了修正。

题目编辑器

在我做系统的时候,编辑题目需要能够方便复制截图或word文档内容中的图片,为此也是使用了好多开源的blazor 下的编辑器,最终还是采用了ueditor-blazor,虽然不完美,好在能够满足自己需要了。

选择题编辑中,系统输入选项的文字可以自动根据输入的内容自动生成,填空题编辑中,也是根据题目内容中留出的空自动生成填空输入框。

基于AntBlazor的学生在线练习系统实现过程的简单总结_第4张图片

  

基于AntBlazor的学生在线练习系统实现过程的简单总结_第5张图片

 我编辑器的工具条的自定义,可以根据需要保留自己需要的按钮,这时就需要修改下图中的配置文件,把不需要的toolbar中的选项注释掉

基于AntBlazor的学生在线练习系统实现过程的简单总结_第6张图片基于AntBlazor的学生在线练习系统实现过程的简单总结_第7张图片

 系统 的部署

 blazor程序打包后,可以很方便地在IIS下的进行部署,基本方法和普通的net网站一样。

只是需要先安装先用的支持文件 dotnet-hosting-6.0.1-win.exe,然后将网站的编辑"应用程序池"的"基本设置",修改".NET Framework 版本"为"无托管代码"

总之,只要有信心 加上自己的努力,问题总是能够克服的。

疫情也终将过去,明天会更好!

再次感谢给予我帮助的所有朋友!

你可能感兴趣的:(blazor,antBlazor,学生练习系统)