基于深度学习的小学生作文标点修正系统——教师端网站前端总结

工作整体汇报网站构建登录页主页分年级展示学生的提交记录点击详情进行教师人工修改 时间轴 工作要点及难点主题UI设计背景图设计组件颜色样式改变 人性化功能设计一键复制、清空模糊搜索修改对比高亮 总结感想碎碎念

工作整体汇报

网站构建

登录页

背景配以卡通动物动画图

主页分年级展示学生的提交记录

按年级设计了导航栏，点击切换不同年级的学生作文标点修改记录，记录以表格呈现，可以进行模糊搜索。

点击详情进行教师人工修改

详情页呈现某一条学生提交的修改记录，教师可以对其进行进一步人工修改，并提交保存

时间轴

6.17设计页面草图6.27完成基本的页面布局和功能6.29完善主题UI7.1集思广益、添加人性化功能

工作要点及难点

主题UI设计

bootstrap框架 开发易上手配套的主题色 背景图、按钮样式、导航栏等等颜色风格统一，界面美观。主题色为淡绿色。卡通动物的背景图 配合学生年龄段，使老师也保持童趣心界面布局简洁大方 教师端布局简洁大方，为老师提供舒心的工作网站 主题UI总结

背景图设计

主页和详情页的背景图 是在找团队答辩PPT模板的时候发现这个模板，后来想主页太空了，这个做背景图应该不错。然后PPT做图。为了达到一个合适的效果，反复调整背景淡绿色块的大小 一开始长这样： 后来问了队友，进行了调整： 之后改变了组件的样式登录页动画设计 技术上的难度其实还好，主要是为了视觉效果，一点点改进。前后制作了三版动画效果。 第一版是找了软件园的照片做背景动画。 第二版是在确定了主页和详情的背景图是三只小动物，同时主题色是淡绿色之后，重新找了山大的图片。其实这一版也很好看。（我的审美真是不错嘿嘿 这些山大的图都是在学生在线公众号视平线栏目找的，感谢摄影师的高超技术。 然后想到可以用背景图做一个变换动画，继续PPT做图

组件颜色样式改变

这个问题其实是由于设计流程的不完善造成的。一开始并没有想到要先确定主题色，在基础页面都完成之后才想要改变样式效果，然后问题就变得有点点棘手。一开始想，我自己再写个类，写上想要的样式放进去就行呗。一个简单的按钮是可以的，但是导航和表格翻页这种就不太行了。后来翻了bootstrap的css文件发现自己能想到的修改样式太简单了。 关键点：同一个类名的样式，当前页的优先级比外部引入的css文件更高 修改表格的分页样式和导航样式代码

/*修改分页的样式效果*/ /*点击样式*/ .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus,.pagination>.active>span:focus { cursor: default; background-color: rgb(121,183,163); color: white; border-color: rgb(121,183,163);; } /*正常状态链接文字颜色*/ .pagination>li>a{ color: rgb(121,183,163); } /*悬停样式*/ .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { background-color: rgb(121,183,163); color: white; } /*修改导航的样式*/ /*正常状态链接文字颜色*/ .nav-pills > li > a { color: rgb(121,183,163); } /*点击选中样式*/ .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: rgb(121,183,163); color: white; }

组件样式也改好之后，整体视觉效果就好多啦！

人性化功能设计

老师、同学一起讨论。集思广益，优化用户体验。

一键复制、清空

在人工修改输入框可一键复制系统修改结果或者清空。方便教师操作，省时省力

模糊搜索

针对全表进行模糊搜索。借助bootstrap组件，实现起来很简单，设置一个参数即可。

修改对比高亮

学生原文和系统修改结果的差别之处用红色标注

总结感想碎碎念

系统的学习，规范的开发过程真的很重要。之前的web技术课，上课完全水（睡）过去了，为了考试翻了遍PPT，写实验就是用到啥上网学啥，东一榔头西一棒槌，十分不成体系。希望之后能系统的梳理一遍前端的知识吧。接触了bootstrap框架，类似于bootstrap-table这样的组件是真好用啊嘿嘿嘿。省时省力，功能和UI都有保障。后端用了Django，我之前没有用过，这次前后端对接有点点吃力。改bootstrap一些组件的css，发现写一个成熟的css真是很繁琐的工作，以后开发非必要，能用现成的css就不要自己写。