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

前言        

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

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

准备

1、UI框架的选择：

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

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

基本界面

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

学生端：

教师端

 

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

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

1）选题用的圆形按钮组

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

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

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

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

题目编辑器

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

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

  

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

 系统 的部署

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

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

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

疫情也终将过去，明天会更好！

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