如何搭建一个自己上传视频的网站_免费微信小程序开发者工具_百度seo排名优化联系方式_响应式网站模板的优势

一、实现思路：利用UNIAPP实现前端，利用SRPINGBOOT实现后端，利用基础JS实现纠错标记与后端返回位置定位。

                              
二、UNIAPP实现小程序页面代码

<template><view style="display: flex;justify-content: center;"><!-- 纠错布局 外围容器--><view :style="{width:'100%',height:windowsHeight+'px'}"><!-- <textarea v-model="text" :style="{width:'100%',height:windowsHeight+'px',fontSize:'16px'}" :maxlength="2000"@input='inputText'></textarea> --><editor :style="{width:'100%',height:windowsHeight+'px',fontSize:'16px'}" @ready="editorReady" id="editorId"@input="inputText"></editor></view><view style="position: fixed;bottom: 0;left:0;width: 100%;"><uni-goods-nav :fill="true" :options="[]" :buttonGroup="buttonGroup" @buttonClick="buttonClick"></uni-goods-nav></view><span @click="openOption('错误展示')" v-if="errorInfoList.length>0" style=" position: absolute;right: 0rpx;bottom:650rpx;font-size: 16px;background-color: orangered;color: white;padding: 5px 5px;border-radius: 5px;"><span style="font-weight: bold;">点我{{errorInfoList.length}}</span><uni-icons type="notification-filled" size="18" color="white" style="margin-left: 5px;"></uni-icons></span><!-- <span style=" position: absolute;right: 24rpx;bottom:100rpx;font-size: 12px;background-color: #F5F5F5;"@click="myCopy"><image src="@/static/copy1.png" style="width: 20px;height: 20px;padding-right: 125px;padding-top: 5px;;"></image></span> --><spanstyle=" position: absolute;right: 24rpx;bottom:100rpx;font-size: 12px;background-color: red;color: white;z-index: 9999;">字符限制：{{number}}/{{maxNumber}}</span><!--纠错List弹出层选择器 --><gdPicker :data="errorInfoListCopy" ref="gPicker" @getVal="getVal" label="label"></gdPicker></view>
</template><script>import {mapState,mapMutations} from 'vuex'export default {computed: {...mapState('m_user', ['userInfo'])},data() {return {windowsHeight: 0, // 当前设备可用高度text: "地面还特么的留有一丝余热，如果说正午像<span class='need_mark_0' style='background-color:#F7CD2A;'>精力允沛</span>的青年，那黄昏就像幽雅的少女，清爽的风中略<span class='need_mark_1' style='background-color:#F7CD2A;'>贷</span>一丝暖意。<span class='need_mark_2' style='background-color:#F7CD2A;'>胎</span>头望着天空，只见红彤彤的晚霞<span class='need_mark_3' style='background-color:#F7CD2A;'>己</span>经染红大半片天空了，形状更是<span class='need_mark_4' style='background-color:#F7CD2A;'>千资百态</span>：你看！一只只<span class='need_mark_5' style='background-color:#F7CD2A;'>玩</span>皮的老虎在奔跑，又<span class='need_mark_6' style='background-color:#F7CD2A;'>象</span>是正在追赶周围崩崩跳跳的小兔子。<span class='need_mark_7' style='background-color:#F7CD2A;'>忠</span>于还是不见了，然而却出现了一匹<span class='need_mark_8' style='background-color:#F7CD2A;'>峻</span>马，它在<span class='need_mark_9' style='background-color:#F7CD2A;'>遗忘</span>无际的草原上奔跑着。晚霞形态千变万化，各种<span class='need_mark_10' style='background-color:#F7CD2A;'>镜像</span>令人<span class='need_mark_11' style='background-color:#F7CD2A;'>赞不决口</span>，天空的颜色也变化着：深红粉红橘红…仿佛是魔术大师的精彩魔术，让人<span class='need_mark_12' style='background-color:#F7CD2A;'>目不假接</span>。<br><br>孔雀<span class='need_mark_13' style='background-color:#F7CD2A;'>开平</span>是由一大盆菊花<span class='need_mark_14' style='background-color:#F7CD2A;'>安</span>照要求改造而成，它<span class='need_mark_15' style='background-color:#F7CD2A;'>昂首廷胸</span>屏开富贵。它的眼晴是两朵红色的菊花，像两颗红色的玛瑙，<span class='need_mark_16' style='background-color:#F7CD2A;'>襄</span>嵌在黄色的绸缎上，明亮有神。它的尾部有许多五颜六色的菊花，像七色的彩红，绚丽夺目。蝴蝶整体是由紫红色的菊花改造而成，两只翅膀<span class='need_mark_17' style='background-color:#F7CD2A;'>篇篇</span>起舞。<br><br>你看，那一朵朵菊花像一个害羞的小姑娘，<span class='need_mark_18' style='background-color:#F7CD2A;'>漏</span>出一个泛着红晕的笑脸。", // 用户校对文本maxNumber: 2000, //可输入最大字数number: 455, //已输入字数buttonGroup: [{text: '默认文本',backgroundColor: 'green',color: '#fff'}, {text: '清空文本',backgroundColor: '#ff0000',color: '#fff'}, {text: '复制文本',backgroundColor: '#169AD4',color: '#fff'}, {text: '立即校对',backgroundColor: '#ffa200',color: '#fff'}],errorInfoList: [{"errorName": "成语错误","errorContent": null,"start": 19,"end": 23,"original": " 精力允沛","should": "精力充沛","label": "1、成语错误: 精力允沛 --> 精力充沛"}, {"errorName": "错别字","errorContent": null,"start": 44,"end": 45,"original": " 贷","should": "带","label": "2、错别字: 贷 --> 带"}, {"errorName": "错别字","errorContent": null,"start": 50,"end": 51,"original": " 胎","should": "抬","label": "3、错别字: 胎 --> 抬"}, {"errorName": "错别字","errorContent": null,"start": 65,"end": 66,"original": " 己","should": "已","label": "4、错别字: 己 --> 已"}, {"errorName": "成语错误","errorContent": null,"start": 80,"end": 84,"original": " 千资百态","should": "千姿百态","label": "5、成语错误: 千资百态 --> 千姿百态"}, {"errorName": "错别字","errorContent": null,"start": 91,"end": 92,"original": " 玩","should": "顽","label": "6、错别字: 玩 --> 顽"}, {"errorName": "错别字","errorContent": null,"start": 101,"end": 102,"original": " 象","should": "像","label": "7、错别字: 象 --> 像"}, {"errorName": "错别字","errorContent": null,"start": 118,"end": 119,"original": " 忠","should": "终","label": "8、错别字: 忠 --> 终"}, {"errorName": "错别字","errorContent": null,"start": 134,"end": 135,"original": " 峻","should": "骏","label": "9、错别字: 峻 --> 骏"}, {"errorName": "错别词语","errorContent": null,"start": 139,"end": 141,"original": " 遗忘","should": "一望","label": "10、错别词语: 遗忘 --> 一望"}, {"errorName": "错别词语","errorContent": null,"start": 162,"end": 164,"original": " 镜像","should": "景象","label": "11、错别词语: 镜像 --> 景象"}, {"errorName": "成语错误","errorContent": null,"start": 166,"end": 170,"original": " 赞不决口","should": "赞不绝口","label": "12、成语错误: 赞不决口 --> 赞不绝口"}, {"errorName": "成语错误","errorContent": null,"start": 203,"end": 207,"original": " 目不假接","should": "目不暇接","label": "13、成语错误: 目不假接 --> 目不暇接"}, {"errorName": "错别词语","errorContent": null,"start": 212,"end": 214,"original": " 开平","should": "开屏","label": "14、错别词语: 开平 --> 开屏"}, {"errorName": "错别字","errorContent": null,"start": 221,"end": 222,"original": " 安","should": "按","label": "15、错别字: 安 --> 按"}, {"errorName": "成语错误","errorContent": null,"start": 231,"end": 235,"original": " 昂首廷胸","should": "昂首挺胸","label": "16、成语错误: 昂首廷胸 --> 昂首挺胸"}, {"errorName": "错别字","errorContent": null,"start": 262,"end": 263,"original": " 襄","should": "镶","label": "17、错别字: 襄 --> 镶"}, {"errorName": "错别词语","errorContent": null,"start": 325,"end": 327,"original": " 篇篇","should": "翩翩","label": "18、错别词语: 篇篇 --> 翩翩"}, {"errorName": "错别字","errorContent": null,"start": 351,"end": 352,"original": " 漏","should": "露","label": "19、错别字: 漏 --> 露"}],errorInfoListCopy: [{"errorName": "成语错误","errorContent": null,"start": 19,"end": 23,"original": " 精力允沛","should": "精力充沛","label": "1、成语错误: 精力允沛 --> 精力充沛"}, {"errorName": "错别字","errorContent": null,"start": 44,"end": 45,"original": " 贷","should": "带","label": "2、错别字: 贷 --> 带"}, {"errorName": "错别字","errorContent": null,"start": 50,"end": 51,"original": " 胎","should": "抬","label": "3、错别字: 胎 --> 抬"}, {"errorName": "错别字","errorContent": null,"start": 65,"end": 66,"original": " 己","should": "已","label": "4、错别字: 己 --> 已"}, {"errorName": "成语错误","errorContent": null,"start": 80,"end": 84,"original": " 千资百态","should": "千姿百态","label": "5、成语错误: 千资百态 --> 千姿百态"}, {"errorName": "错别字","errorContent": null,"start": 91,"end": 92,"original": " 玩","should": "顽","label": "6、错别字: 玩 --> 顽"}, {"errorName": "错别字","errorContent": null,"start": 101,"end": 102,"original": " 象","should": "像","label": "7、错别字: 象 --> 像"}, {"errorName": "错别字","errorContent": null,"start": 118,"end": 119,"original": " 忠","should": "终","label": "8、错别字: 忠 --> 终"}, {"errorName": "错别字","errorContent": null,"start": 134,"end": 135,"original": " 峻","should": "骏","label": "9、错别字: 峻 --> 骏"}, {"errorName": "错别词语","errorContent": null,"start": 139,"end": 141,"original": " 遗忘","should": "一望","label": "10、错别词语: 遗忘 --> 一望"}, {"errorName": "错别词语","errorContent": null,"start": 162,"end": 164,"original": " 镜像","should": "景象","label": "11、错别词语: 镜像 --> 景象"}, {"errorName": "成语错误","errorContent": null,"start": 166,"end": 170,"original": " 赞不决口","should": "赞不绝口","label": "12、成语错误: 赞不决口 --> 赞不绝口"}, {"errorName": "成语错误","errorContent": null,"start": 203,"end": 207,"original": " 目不假接","should": "目不暇接","label": "13、成语错误: 目不假接 --> 目不暇接"}, {"errorName": "错别词语","errorContent": null,"start": 212,"end": 214,"original": " 开平","should": "开屏","label": "14、错别词语: 开平 --> 开屏"}, {"errorName": "错别字","errorContent": null,"start": 221,"end": 222,"original": " 安","should": "按","label": "15、错别字: 安 --> 按"}, {"errorName": "成语错误","errorContent": null,"start": 231,"end": 235,"original": " 昂首廷胸","should": "昂首挺胸","label": "16、成语错误: 昂首廷胸 --> 昂首挺胸"}, {"errorName": "错别字","errorContent": null,"start": 262,"end": 263,"original": " 襄","should": "镶","label": "17、错别字: 襄 --> 镶"}, {"errorName": "错别词语","errorContent": null,"start": 325,"end": 327,"original": " 篇篇","should": "翩翩","label": "18、错别词语: 篇篇 --> 翩翩"}, {"errorName": "错别字","errorContent": null,"start": 351,"end": 352,"original": " 漏","should": "露","label": "19、错别字: 漏 --> 露"}],needMarkIndex: 0,};},onLoad() {const sysInfo = uni.getSystemInfoSync();this.windowsHeight = sysInfo.windowHeight - 50},methods: {myCopy() {this.text = this.text.replaceAll(" ", "").replaceAll("<br>", "\n")let text = this.filtersText(this.text); // '所要复制的内容'uni.setClipboardData({data: text, // 复制的内容 success: function() {console.log('success');uni.showToast({title: '复制成功',duration: 2000})}});},getVal(val) {// console.log("我打印的" + JSON.stringify(val))if (val.buttonInfo === "错误展示") {// console.log("我打印的0611" + JSON.stringify(val.label))let tempArray = JSON.stringify(val.label).replaceAll("\"", "").split("、")// console.log(parseInt(tempArray[0]) + '----------dfadsfdf')let bigItem = {};this.errorInfoListCopy.forEach(item => {if (parseInt(item.label.substring(0, 2)) === parseInt(tempArray[0])) {bigItem = item // 赋值}})// console.log(JSON.stringify(this.errorInfoList) + "重点观察") // 确实值变了  卧槽！！！！！！！！！！！！！let chinaLength = bigItem.end - bigItem.start// console.log(chinaLength)this.needMarkIndex = parseInt(tempArray[0]) - 1let findStr = 'need_mark_' + this.needMarkIndexconsole.log(findStr + "-----------------" + JSON.stringify(this.text))let start = this.text.indexOf(findStr)// 替换背景,不能替换 需要拼接if (parseInt(tempArray[0]) < 11) {console.log(chinaLength +"开始寻找位置：" + start +"---------------------------------------------------------------------" +this.text.substring(start + 37, start + 44) + "替换为" + '#B5F1B5' +"---------------------------------------------------------------------" +this.text.substring(start + 47, start + 47 + chinaLength) + "替换为" +bigItem.should)this.text = this.text.substring(0, start + 37) + '#B5F1B5' + this.text.substring(start + 44)// 替换文本this.text = this.text.substring(0, start + 47) + bigItem.should + this.text.substring(start + 47 +chinaLength)} else {console.log(chinaLength +"开始寻找位置：" + start +"---------------------------------------------------------------------" +this.text.substring(start + 38, start + 45) + "替换为" + '#B5F1B5' +"---------------------------------------------------------------------" +this.text.substring(start + 48, start + 48 + chinaLength) + "替换为" +bigItem.should)this.text = this.text.substring(0, start + 38) + '#B5F1B5' + this.text.substring(start + 45)// 替换文本this.text = this.text.substring(0, start + 48) + bigItem.should + this.text.substring(start + 48 +chinaLength)}// console.log("替换后文本信息" + this.text)// console.log("分割线-----------------------------------------------------")let removeFlag = 0;this.errorInfoListCopy.forEach(item => {// console.log(parseInt(item.label.substring(0, 2)))if (parseInt(item.label.substring(0, 2)) === parseInt(tempArray[0])) {this.errorInfoListCopy.splice(removeFlag, 1)}removeFlag++ // 找不到继续下一个})// this.errorInfoListCopy.splice(this.needMarkIndex, 1) // 不能这么暴力的删除，会有问题// console.log(JSON.stringify(this.errorInfoListCopy) + "&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&")this.editorReady()}},openOption(info) {// console.log(this.$refs)this.$refs.gPicker.openPick(info, this.errorInfoListCopy);},editorReady() {//由于editor的v-model和:value失效，只能用dom来赋值this.createSelectorQuery().select('#editorId').context((res) => {if (!res) returnres.context.setContents({html: this.text})}).exec()},...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),buttonClick(e) { // 点击校对按钮// console.log(e)if (e.content.text === "立即校对") {if (this.text.length === 0) {uni.showToast({title: '校对文本不能为空'})return}// console.log("我打印的原请求文本" + this.text)this.text = this.text.replaceAll(" ", "").replaceAll("<br>", "\n")this.userInfo.text = this.filtersText(this.text);// console.log("我打印的请求文本" + this.userInfo.text)uni.$http.post("/wx_check", this.userInfo).then(res => {// console.log(res)if (res.data.code === "200") {this.updateUserInfo(res.data.object.user) // 更新用户余额if (res.data.object.errorInfoList.length === 0) {uni.showToast({title: '文本非常完美'})return} else {this.errorInfoList = res.data.object.errorInfoList// 给它封装个额外的属性let flag = 0;this.errorInfoList.forEach(item => {flag++item.label = flag + "、" + item.errorName + ":" + item.original + " --> " + item.should})this.errorInfoListCopy = this.errorInfoList// 拷贝一份 给滚动展示用// console.log("0611打印" + JSON.stringify(this.errorInfoList))this.positioning(res.data.object.errorInfoList) // 调用标记方法标记uni.showToast({title: '完成，点我纠正'})}} else {uni.setClipboardData({data: '13856011943', // 复制的内容 success: function() {console.log('success');}});uni.showModal({title: '余额不足，请先登录！或请WX联系 13856011943 微信号已复制',success: function() { // 点击确定跳转uni.switchTab({url: '/pages/my/my'})}});}})}if (e.content.text === "清空文本") {this.text = ""this.errorInfoList = []this.errorInfoListCopy = []this.number = 0this.editorReady()}if (e.content.text === "默认文本") {this.text ="地面还特么的留有一丝余热，如果说正午像<span class='need_mark_0' style='background-color:#F7CD2A;'>精力允沛</span>的青年，那黄昏就像幽雅的少女，清爽的风中略<span class='need_mark_1' style='background-color:#F7CD2A;'>贷</span>一丝暖意。<span class='need_mark_2' style='background-color:#F7CD2A;'>胎</span>头望着天空，只见红彤彤的晚霞<span class='need_mark_3' style='background-color:#F7CD2A;'>己</span>经染红大半片天空了，形状更是<span class='need_mark_4' style='background-color:#F7CD2A;'>千资百态</span>：你看！一只只<span class='need_mark_5' style='background-color:#F7CD2A;'>玩</span>皮的老虎在奔跑，又<span class='need_mark_6' style='background-color:#F7CD2A;'>象</span>是正在追赶周围崩崩跳跳的小兔子。<span class='need_mark_7' style='background-color:#F7CD2A;'>忠</span>于还是不见了，然而却出现了一匹<span class='need_mark_8' style='background-color:#F7CD2A;'>峻</span>马，它在<span class='need_mark_9' style='background-color:#F7CD2A;'>遗忘</span>无际的草原上奔跑着。晚霞形态千变万化，各种<span class='need_mark_10' style='background-color:#F7CD2A;'>镜像</span>令人<span class='need_mark_11' style='background-color:#F7CD2A;'>赞不决口</span>，天空的颜色也变化着：深红粉红橘红…仿佛是魔术大师的精彩魔术，让人<span class='need_mark_12' style='background-color:#F7CD2A;'>目不假接</span>。<br><br>孔雀<span class='need_mark_13' style='background-color:#F7CD2A;'>开平</span>是由一大盆菊花<span class='need_mark_14' style='background-color:#F7CD2A;'>安</span>照要求改造而成，它<span class='need_mark_15' style='background-color:#F7CD2A;'>昂首廷胸</span>屏开富贵。它的眼晴是两朵红色的菊花，像两颗红色的玛瑙，<span class='need_mark_16' style='background-color:#F7CD2A;'>襄</span>嵌在黄色的绸缎上，明亮有神。它的尾部有许多五颜六色的菊花，像七色的彩红，绚丽夺目。蝴蝶整体是由紫红色的菊花改造而成，两只翅膀<span class='need_mark_17' style='background-color:#F7CD2A;'>篇篇</span>起舞。<br><br>你看，那一朵朵菊花像一个害羞的小姑娘，<span class='need_mark_18' style='background-color:#F7CD2A;'>漏</span>出一个泛着红晕的笑脸。" // 用户校对文本this.errorInfoList = [{"errorName": "成语错误","errorContent": null,"start": 19,"end": 23,"original": " 精力允沛","should": "精力充沛","label": "1、成语错误: 精力允沛 --> 精力充沛"}, {"errorName": "错别字","errorContent": null,"start": 44,"end": 45,"original": " 贷","should": "带","label": "2、错别字: 贷 --> 带"}, {"errorName": "错别字","errorContent": null,"start": 50,"end": 51,"original": " 胎","should": "抬","label": "3、错别字: 胎 --> 抬"}, {"errorName": "错别字","errorContent": null,"start": 65,"end": 66,"original": " 己","should": "已","label": "4、错别字: 己 --> 已"}, {"errorName": "成语错误","errorContent": null,"start": 80,"end": 84,"original": " 千资百态","should": "千姿百态","label": "5、成语错误: 千资百态 --> 千姿百态"}, {"errorName": "错别字","errorContent": null,"start": 91,"end": 92,"original": " 玩","should": "顽","label": "6、错别字: 玩 --> 顽"}, {"errorName": "错别字","errorContent": null,"start": 101,"end": 102,"original": " 象","should": "像","label": "7、错别字: 象 --> 像"}, {"errorName": "错别字","errorContent": null,"start": 118,"end": 119,"original": " 忠","should": "终","label": "8、错别字: 忠 --> 终"}, {"errorName": "错别字","errorContent": null,"start": 134,"end": 135,"original": " 峻","should": "骏","label": "9、错别字: 峻 --> 骏"}, {"errorName": "错别词语","errorContent": null,"start": 139,"end": 141,"original": " 遗忘","should": "一望","label": "10、错别词语: 遗忘 --> 一望"}, {"errorName": "错别词语","errorContent": null,"start": 162,"end": 164,"original": " 镜像","should": "景象","label": "11、错别词语: 镜像 --> 景象"}, {"errorName": "成语错误","errorContent": null,"start": 166,"end": 170,"original": " 赞不决口","should": "赞不绝口","label": "12、成语错误: 赞不决口 --> 赞不绝口"}, {"errorName": "成语错误","errorContent": null,"start": 203,"end": 207,"original": " 目不假接","should": "目不暇接","label": "13、成语错误: 目不假接 --> 目不暇接"}, {"errorName": "错别词语","errorContent": null,"start": 212,"end": 214,"original": " 开平","should": "开屏","label": "14、错别词语: 开平 --> 开屏"}, {"errorName": "错别字","errorContent": null,"start": 221,"end": 222,"original": " 安","should": "按","label": "15、错别字: 安 --> 按"}, {"errorName": "成语错误","errorContent": null,"start": 231,"end": 235,"original": " 昂首廷胸","should": "昂首挺胸","label": "16、成语错误: 昂首廷胸 --> 昂首挺胸"}, {"errorName": "错别字","errorContent": null,"start": 262,"end": 263,"original": " 襄","should": "镶","label": "17、错别字: 襄 --> 镶"}, {"errorName": "错别词语","errorContent": null,"start": 325,"end": 327,"original": " 篇篇","should": "翩翩","label": "18、错别词语: 篇篇 --> 翩翩"}, {"errorName": "错别字","errorContent": null,"start": 351,"end": 352,"original": " 漏","should": "露","label": "19、错别字: 漏 --> 露"}]this.errorInfoListCopy = [{"errorName": "成语错误","errorContent": null,"start": 19,"end": 23,"original": " 精力允沛","should": "精力充沛","label": "1、成语错误: 精力允沛 --> 精力充沛"}, {"errorName": "错别字","errorContent": null,"start": 44,"end": 45,"original": " 贷","should": "带","label": "2、错别字: 贷 --> 带"}, {"errorName": "错别字","errorContent": null,"start": 50,"end": 51,"original": " 胎","should": "抬","label": "3、错别字: 胎 --> 抬"}, {"errorName": "错别字","errorContent": null,"start": 65,"end": 66,"original": " 己","should": "已","label": "4、错别字: 己 --> 已"}, {"errorName": "成语错误","errorContent": null,"start": 80,"end": 84,"original": " 千资百态","should": "千姿百态","label": "5、成语错误: 千资百态 --> 千姿百态"}, {"errorName": "错别字","errorContent": null,"start": 91,"end": 92,"original": " 玩","should": "顽","label": "6、错别字: 玩 --> 顽"}, {"errorName": "错别字","errorContent": null,"start": 101,"end": 102,"original": " 象","should": "像","label": "7、错别字: 象 --> 像"}, {"errorName": "错别字","errorContent": null,"start": 118,"end": 119,"original": " 忠","should": "终","label": "8、错别字: 忠 --> 终"}, {"errorName": "错别字","errorContent": null,"start": 134,"end": 135,"original": " 峻","should": "骏","label": "9、错别字: 峻 --> 骏"}, {"errorName": "错别词语","errorContent": null,"start": 139,"end": 141,"original": " 遗忘","should": "一望","label": "10、错别词语: 遗忘 --> 一望"}, {"errorName": "错别词语","errorContent": null,"start": 162,"end": 164,"original": " 镜像","should": "景象","label": "11、错别词语: 镜像 --> 景象"}, {"errorName": "成语错误","errorContent": null,"start": 166,"end": 170,"original": " 赞不决口","should": "赞不绝口","label": "12、成语错误: 赞不决口 --> 赞不绝口"}, {"errorName": "成语错误","errorContent": null,"start": 203,"end": 207,"original": " 目不假接","should": "目不暇接","label": "13、成语错误: 目不假接 --> 目不暇接"}, {"errorName": "错别词语","errorContent": null,"start": 212,"end": 214,"original": " 开平","should": "开屏","label": "14、错别词语: 开平 --> 开屏"}, {"errorName": "错别字","errorContent": null,"start": 221,"end": 222,"original": " 安","should": "按","label": "15、错别字: 安 --> 按"}, {"errorName": "成语错误","errorContent": null,"start": 231,"end": 235,"original": " 昂首廷胸","should": "昂首挺胸","label": "16、成语错误: 昂首廷胸 --> 昂首挺胸"}, {"errorName": "错别字","errorContent": null,"start": 262,"end": 263,"original": " 襄","should": "镶","label": "17、错别字: 襄 --> 镶"}, {"errorName": "错别词语","errorContent": null,"start": 325,"end": 327,"original": " 篇篇","should": "翩翩","label": "18、错别词语: 篇篇 --> 翩翩"}, {"errorName": "错别字","errorContent": null,"start": 351,"end": 352,"original": " 漏","should": "露","label": "19、错别字: 漏 --> 露"}]this.number = 455 // 默认字数this.editorReady()}if (e.content.text === "复制文本") {this.myCopy()}},filtersText(val) { // 这个方法有点牛批// console.log(val)if (val != null && val != '') {let reg =/[\u4e00-\u9fa5]|[0-9][0-9][0-9][0-9]年|[0-9]月|[0-9][0-9]月|[0-9]日|[0-9][0-9]日|[.…“”！,。、，!：\s&¥]/g;let names = val.match(reg);// console.log(names)val = names ? names.join('') : '';return val;} else return '';},inputText(e) {// console.log(e.detail.text)if (e.detail.text.length > 2000) {uni.showToast({title: '超限,仅校对2K'})e.detail.text = e.detail.text.substring(0, 2001)this.number = 2000this.text = e.detail.text // 得改变this.text的值} else {this.text = e.detail.text // 得改变this.text的值let temp = e.detail.text //获取textarea的内容，this.number = temp.length - 1}},positioning(finalErrorInfoList) { // 设置纠错标记效果let start;let end;const tempCheckText = this.filtersText(this.text); // 拿到原纯文本// console.log(tempCheckText)let finalStr = '';for (let i = 0; i < finalErrorInfoList.length; i++) {start = finalErrorInfoList[i].start;end = finalErrorInfoList[i].end;if (start === end) { //这是由于检测出, 后台程序无法展示内容导致end = parseInt(end) + 1;}let tempStr = tempCheckText.substring(start, end);tempStr = "<span class='need_mark_" + i + "' style='background-color:#F7CD2A;'>" +tempStr + "</span>";if (i == 0) {if (finalErrorInfoList[i + 1] === undefined) {// 说明是最后了finalStr = finalStr + tempCheckText.substring(0, start) + tempStr + tempCheckText.substring(end);} else {// 不是最后finalStr = finalStr + tempCheckText.substring(0, start) + tempStr + tempCheckText.substring(end,finalErrorInfoList[i + 1].start);}} else {if (finalErrorInfoList[i + 1] != undefined) {finalStr = finalStr + tempStr + tempCheckText.substring(end, finalErrorInfoList[i + 1].start);} else {finalStr = finalStr + tempStr + tempCheckText.substring(end);}}}// $("#leftContent").html(finalStr); //设置新的DIV内容// console.log("************** " + finalStr)this.text = finalStr.replaceAll("\n", "<br>")console.log("************** " + this.text)console.log(JSON.stringify(this.errorInfoList))this.editorReady()}}}
</script><style>.box {width: 100px;height: 100px;background-color: red;}
</style>

三、后端代码

package com.day.util;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.google.gson.Gson;
import com.google.gson.annotations.SerializedName;
import okhttp3.HttpUrl;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.text.SimpleDateFormat;
import java.util.*;/*** 文本纠错 WebAPI 接口调用示例*/
public class Check {// 地址与鉴权信息public static final String hostUrl = "https://api.xf-yun.com/v1/private/s9a87e3ec";// 待纠错文本private String text = "";// jsonpublic static final Gson gson = new Gson();public Check(String text) {this.text = text;}// 主函数public static void main(String[] args) throws Exception {doCheck("画蛇天足");}public static ArrayList<ErrorInfo> doCheck(String text) throws Exception {String url = getAuthUrl(hostUrl, Constants.API_KEY, Constants.API_SECRET);Check check = new Check(text);String json = getRequestJson(check);String backResult = doPostJson(url, json);System.out.println("文本纠错返回结果：" + backResult);JsonParse jsonParse = gson.fromJson(backResult, JsonParse.class);String base64Decode = new String(Base64.getDecoder().decode(jsonParse.payload.result.text), StandardCharsets.UTF_8);// System.out.println("text字段base64解码后纠错信息：" + base64Decode);ArrayList<ErrorInfo> tempList = new ArrayList<ErrorInfo>();JSONObject jsonObject = JSON.parseObject(base64Decode);String tempStr = jsonObject.toString();System.out.println(tempStr);JsonParseInner jsonParseInner = gson.fromJson(tempStr, JsonParseInner.class);//错别字List charList = jsonParseInner.char1;if (charList.size() > 0) {for (int j = 0; j < charList.size(); j++) {//System.out.println("错别字: "+charList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("错别字");String tempStrInner = charList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//领导人职称List leaderList = jsonParseInner.leader;if (leaderList.size() > 0) {for (int j = 0; j < leaderList.size(); j++) {//System.out.println("领导人职称: "+leaderList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("领导人职称");String tempStrInner = leaderList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//错别词语List wordList = jsonParseInner.word;if (wordList.size() > 0) {for (int j = 0; j < wordList.size(); j++) {//System.out.println("错别词语: "+wordList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("错别词语");String tempStrInner = wordList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//成语纠错List idmList = jsonParseInner.idm;if (idmList.size() > 0) {for (int j = 0; j < idmList.size(); j++) {//System.out.println("成语错误: "+idmList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("成语错误");String tempStrInner = idmList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//语法纠错-冗余List redundList = jsonParseInner.redund;if (redundList.size() > 0) {for (int j = 0; j < redundList.size(); j++) {//System.out.println("冗余: "+redundList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("冗余");String tempStrInner = redundList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//语法纠错-缺失List missList = jsonParseInner.miss;if (missList.size() > 0) {for (int j = 0; j < missList.size(); j++) {//System.out.println("缺失: "+missList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("缺失");String tempStrInner = missList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//语法纠错-乱序List orderList = jsonParseInner.order;if (orderList.size() > 0) {for (int j = 0; j < orderList.size(); j++) {//System.out.println("乱序: "+orderList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("乱序");String tempStrInner = orderList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//搭配纠错List dapeiList = jsonParseInner.dapei;if (dapeiList.size() > 0) {for (int j = 0; j < dapeiList.size(); j++) {//System.out.println("搭配错误: "+dapeiList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("搭配错误");String tempStrInner = dapeiList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//标点纠错List puncList = jsonParseInner.punc;if (puncList.size() > 0) {for (int j = 0; j < puncList.size(); j++) {//System.out.println("标点错误: "+puncList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("标点错误");String tempStrInner = puncList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//机构名纠错List orgList = jsonParseInner.org;if (orgList.size() > 0) {for (int j = 0; j < orgList.size(); j++) {//System.out.println("机构名错误: "+orgList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("机构名错误");String tempStrInner = orgList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//数字纠错List numberList = jsonParseInner.number;if (numberList.size() > 0) {for (int j = 0; j < numberList.size(); j++) {//System.out.println("数字纠错: "+numberList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("数字纠错");String tempStrInner = numberList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//地名纠错List addrList = jsonParseInner.addr;if (addrList.size() > 0) {for (int j = 0; j < addrList.size(); j++) {//System.out.println("数字纠错: "+numberList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("地名纠错");String tempStrInner = addrList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//全文人名纠错List nameList = jsonParseInner.name;if (nameList.size() > 0) {for (int j = 0; j < nameList.size(); j++) {//System.out.println("数字纠错: "+numberList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("全文人名纠错");String tempStrInner = nameList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}//句式杂糅&语义重复List grammar_pcList = jsonParseInner.grammar_pc;if (grammar_pcList.size() > 0) {for (int j = 0; j < grammar_pcList.size(); j++) {//System.out.println("数字纠错: "+numberList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("句式杂糅&语义重复");String tempStrInner = grammar_pcList.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}// 黑名单List black_list = jsonParseInner.black_list;if (black_list.size() > 0) {for (int j = 0; j < black_list.size(); j++) {//System.out.println("数字纠错: "+numberList.get(j));ErrorInfo tempErrorInfo = new ErrorInfo();tempErrorInfo.setErrorName("黑名单错误");String tempStrInner = black_list.get(j).toString().replace("[", "").replace("]", "");String[] tempArray = tempStrInner.split(",");int tempIndex = (int) Double.parseDouble(tempArray[0]);tempErrorInfo.setStart(tempIndex);tempErrorInfo.setOriginal(tempArray[1]);tempErrorInfo.setShould(tempArray[2]);tempErrorInfo.setEnd(tempErrorInfo.getStart() + tempErrorInfo.getOriginal().length() - 1);tempList.add(tempErrorInfo);}}return tempList;}// 请求参数json拼接public static String getRequestJson(Check check) {return "{\n" +"  \"header\": {\n" +"    \"app_id\": \"" + Constants.APPID + "\",\n" +"    \"uid\": \"wdfgdzx2023\",\n" +"    \"status\": 3\n" +"  },\n" +"  \"parameter\": {\n" +"    \"s9a87e3ec\": {\n" +"    \"res_id\": \"wdfgdzx2023\",\n" +"      \"result\": {\n" +"        \"encoding\": \"utf8\",\n" +"        \"compress\": \"raw\",\n" +"        \"format\": \"json\"\n" +"      }\n" +"    }\n" +"  },\n" +"  \"payload\": {\n" +"    \"input\": {\n" +"      \"encoding\": \"utf8\",\n" +"      \"compress\": \"raw\",\n" +"      \"format\": \"plain\",\n" +"      \"status\": 3,\n" +"      \"text\": \"" + getBase64TextData(check.text) + "\"\n" +"    }\n" +"  }\n" +"}";}// 读取文件public static String getBase64TextData(String text) {return Base64.getEncoder().encodeToString(text.getBytes());}// 根据json和url发起post请求public static String doPostJson(String url, String json) {CloseableHttpClient closeableHttpClient = HttpClients.createDefault();CloseableHttpResponse closeableHttpResponse = null;String resultString = "";try {// 创建Http Post请求HttpPost httpPost = new HttpPost(url);// 创建请求内容StringEntity entity = new StringEntity(json, ContentType.APPLICATION_JSON);httpPost.setEntity(entity);// 执行http请求closeableHttpResponse = closeableHttpClient.execute(httpPost);resultString = EntityUtils.toString(closeableHttpResponse.getEntity(), StandardCharsets.UTF_8);} catch (Exception e) {e.printStackTrace();} finally {try {if (closeableHttpResponse != null) {closeableHttpResponse.close();}if (closeableHttpClient != null) {closeableHttpClient.close();}} catch (Exception e) {e.printStackTrace();}}return resultString;}// 鉴权方法public static String getAuthUrl(String hostUrl, String apiKey, String apiSecret) throws Exception {URL url = new URL(hostUrl);// 时间SimpleDateFormat format = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss z", Locale.US);format.setTimeZone(TimeZone.getTimeZone("GMT"));String date = format.format(new Date());// 拼接String preStr = "host: " + url.getHost() + "\n" +"date: " + date + "\n" +"POST " + url.getPath() + " HTTP/1.1";//System.out.println(preStr);// SHA256加密Mac mac = Mac.getInstance("hmacsha256");SecretKeySpec spec = new SecretKeySpec(apiSecret.getBytes(StandardCharsets.UTF_8), "hmacsha256");mac.init(spec);byte[] hexDigits = mac.doFinal(preStr.getBytes(StandardCharsets.UTF_8));// Base64加密String sha = Base64.getEncoder().encodeToString(hexDigits);// 拼接String authorization = String.format("api_key=\"%s\", algorithm=\"%s\", headers=\"%s\", signature=\"%s\"", apiKey, "hmac-sha256", "host date request-line", sha);// 拼接地址HttpUrl httpUrl = Objects.requireNonNull(HttpUrl.parse("https://" + url.getHost() + url.getPath())).newBuilder().//addQueryParameter("authorization", Base64.getEncoder().encodeToString(authorization.getBytes(StandardCharsets.UTF_8))).//addQueryParameter("date", date).//addQueryParameter("host", url.getHost()).//build();return httpUrl.toString();}//Json解析class JsonParse {public Header header;public Payload payload;}class Header {public int code;public String message;public String sid;public int status;}class Payload {//根据model的取值不同,名字有所变动。public Result result;}class Result {public String compress;public String encoding;public String format;public String text;}
//内层解析class JsonParseInner {ArrayList black_list; // 自定义黑名单ArrayList leader;ArrayList number;ArrayList idm;ArrayList org;@SerializedName("char")ArrayList char1;ArrayList dapei;ArrayList redund;ArrayList word;ArrayList punc;ArrayList miss;ArrayList order;ArrayList addr;ArrayList name;ArrayList grammar_pc;}
}

package com.day.util;import lombok.Data;@Data
public class ErrorInfo implements Comparable<ErrorInfo> {private String errorName;private String errorContent;private int start;private int end;private String original;private String should;@Overridepublic int compareTo(ErrorInfo errorInfo) {if (this.getStart() > errorInfo.getStart()) {return 1;} else {return -1;}}
}