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

今日工作添加一键复制、清空功能添加对比高亮效果前后端衔接 参考链接

今日工作

添加一键复制、清空功能

一开始是想做把系统修改结果的内容复制到剪贴板，然后再粘贴。后来我改进了一下，简单粗暴一步到位，点击按钮就可以把人工修改的输入框填充上系统修改的内容。 （唉自己的代码就是document和jQuery的方法混着用，搜到哪个用哪个，一点也不成体系

<button type="button" class="pigai btn" id="copy"> 复制系统修改结果 </button> <button type="reset" class="btn" id="reset"> 清空 </button> $(function () { //复制功能 $("#copy").click(function(){ var revise=document.getElementById("revise").textContent;//文本框内容 $("#trevise").val(revise) }); //清空输入框内容 $("#reset").click(function(){ $("#trevise").empty(); }); });

添加对比高亮效果

js比较两个String字符串找出不同，并将不同处高亮显示 把链接里的js代码保存成文件，然后把高亮颜色改成了红色。本来想配合UI改成绿色系，但是都不如红色显眼，而且只在标点符号有红色，就算整体都是绿色系UI，红配绿也不突兀。 队友先用在了学生端，然后我的教师端也有样学样。嘿嘿

<div class="panel-body" id="compos"> 我的名字叫“陈奕欣”，陈是左耳旁和一个东字组成的，奕是神采奕奕的意思，欣是欣欣向荣的意思，爸爸和妈妈给我起这个名字，是希望我每天都精气十足、积极向上，长大了做一个对祖国有用的人，我相信，我一定会加油的！ </div> <div class="panel-body" id="revise"> 我的名字叫“陈奕欣”，陈是左耳旁和一个东字组成的，奕是神采奕奕的意思，欣是欣欣向荣的意思。爸爸和妈妈给我起这个名字，是希望我每天都精气十足、积极向上，长大了做一个对祖国有用的人，我相信，我一定会加油的！ </div> <script src="getHighLightDifferent.js"></script> <script type="text/javascript"> $(document).ready(function () { var a = $("#compos").text(); var b = $("#revise").text(); console.log(a,b) var result = getHighLightDifferent(a, b); //getHighLightDifferent("1000", "10012"); $("#compos").html(result[0]); $("#revise").html(result[1]); return false; }); </script>

前后端衔接

实现详情页的修改保存到数据库功能 从主页传来的id值需要传到后台，实现逻辑是： 1.从跳转路径中获得id值 2.将id值赋给form表单中一个隐藏的input 3.修改完，点击提交时，form表单的submit函数将修改结果和id值可以一起传到后台 4.后台通过request.POST.get(name)接收数据 代码只展示1和2，其余的见参考链接 为了实现2，废了好大劲。自己对js掌握的真的垃圾，为了给指定id的组件赋值，试了好多个不同的方法，jQuery和原生js的document，都不行。后来发现直接写不行，要写在方法里面，原理没具体研究，以后查查吧。

<input id="rid" name="rid" type="hidden"> var str = window.location.href; let list = str.split('=');//用刚刚传递地址里面的“=”把传过来的东西劈开 var a = decodeURI(list[1]);//传过来的中文结果都是%跟十六进制数字，那就得用decodeURI转一下 console.log(a) $(document).ready(function(){ $("#rid").attr('value',a) })

参考链接

Django—form表单提交数据到数据库（普通方法+Django的form类） js、jq获取和设置textArea标签的内容 html页面清空标签里的内容 web页面一键复制按钮功能制作（复制到剪贴板）