bug——总结

问题描述：

编目模块-文献编目-图书编目-编辑图书-表单编目里边，四种索书方式（索书号）（分类号-种次号+辅助号；分类号+著者号+辅助号；分类号+四角号码+辅助号；分类号+著者首拼+辅助号）；系统模块设置哪个显示那个，并且编写其中的号码，下边索书号也相应的发生变化。

首先进入界面，已有的分类号和四角号码（以四角号码为例），需要展示在分类号和四角号码相应的输入框内容当中；改写四角号码和辅助区分，下边索书号对应的/后边内容发生变化，（索书号由后端返回的数据）

其次，四角号码输入框要求输入的内容为四位数。

 

思路分析：

1、原本代码是写的是索书号中间的代码是写死的，现在要根据系统模块设置的索书号方式更改对应的索书号中间的内容（种次号calassficationNumber、著者号（authorNumber）、四角号码（sihms）、著者首拼（authorNumberSSZM））；

需要新增一个变量（SASAType）来存储动态的四种索书方式返回的内容；

思路就是不管是前端存储数据还是后端返回的数据先判断是那种方式的然后再存储到SASAType里边；现在的索书号变成了{ 索书号= 分类号 + SASAType + 辅助区分auxiliaryNumber }

 

 

总结知识点：

1、elementUI里面el-input输入框，事件

@input事件在input值改变时触发；

@blur事件在input失去焦点时触发；

@keyup.enter.native事件在键盘回车时候触发；

********2、v-model双向数据绑定，注意事项：

输入框编辑时给v-model绑定的数据重新赋值后，还能显示回显的数据。

项目当中，在data当中的formData对象中，新增了SASAType，v-model绑定了它；从后端返回的数据当中赋值给了它，然后再在页面上编辑，就无法编辑了。

原因：

是因为v-model绑定的不是后台返回的字段里面的任意一个，是自己拿到数据时手动添加的一个字段，因此绑定SASAType回显时无法编辑更改，

解决方法：

需要用到this.$set() 来代替拿到后端数据后给model绑定的数据赋值；

// this.$set(obj,key,value)，key记得加引号，是字符串

参考链接：https://blog.csdn.net/May_Xu_/article/details/118967986

 

方法2、通过Object.assign(target, sources)方法

this.$set的正确使用：https://blog.csdn.net/hhkongbai/article/details/101022019

Object.assign详解：https://blog.csdn.net/guxin_duyin/article/details/88916106

 

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性

https://blog.csdn.net/lzfengquan/article/details/118602987

3、前后端接口调试时候，有时候需要进行数值的格式转换：

JSON.stringify()：将值转换为 JSON 字符串。

JSON.parse() ：将一个 JSON 字符串转换为对象。

 

4、字符串分割截取特定标志后边的内容：

用到了 .split 函数

split('/')是把字符串以“/为分割点，分割为多段

.length - 1是取第几项，

实际项目当中的写法：

vartemp = this.bookList.content[0].callNumber;

varnstr = temp.split('/');

this.$set(this.formData, 'SASAType', nstr[nstr.length - 1]);

上边这个是取到最后一个的，但是考虑到用户输入“辅助区分"后，/变成了两个，最后一个就不是我们想要的了，而恰巧这时候我们想要的数据在两次变化后，都在分隔的第二个所以有了以下的代码：

vartemp = this.bookList.content[0].callNumber;

varnstr = temp.split('/');

this.$set(this.formData, 'SASAType', nstr[1]);

 

 

第二种简单写法（复合写法）：

this.$set(this.formData, 'SASAType', (this.bookList.content[0].callNumber.split("/")).slice(1));

详细知识点见链接：https://blog.csdn.net/m0_58360569/article/details/121359317

js当中的slice（）方法：https://www.w3school.com.cn/jsref/jsref_slice_string.asp

 

5、el-input 标签内的属性

maxlength =" " 可以限制输入框的输入内容的最大长度；

https://element.eleme.cn/#/zh-CN/component/input（进入链接后搜索“限制”两字，快速定位位置）

 

6、el-form 标签内的属性 : rules

表单验证规则(在el-form写 :rules= "rules",,在data当中限制)

https://element.eleme.cn/#/zh-CN/component/form

 

vue表单验证rules以及validator验证器的使用：

https://blog.csdn.net/m0_53206841/article/details/124337487

 

7、js键盘事件——onkeydown(按键被按下)、onkeyup（按键被松开）

https://blog.csdn.net/weixin_43409765/article/details/91332277?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-91332277-blog-100513755.pc_relevant_multi_platform_whitelistv1_exp2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-91332277-blog-100513755.pc_relevant_multi_platform_whitelistv1_exp2&utm_relevant_index=1

 

常用keyCode建码对照表：https://wenku.baidu.com/view/f988da495bfafab069dc5022aaea998fcc2240ec.html

8、.toString().replace(/[^\d\.\d]/gi, ''); 代码解释：

（1、）.toString() 方法是转换字符串方法；toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。

（2、）使用正则表达式，把逗号换成空的，g代表全局

（3、）js替换字符串中非数字或小数点的字符 return money.replace(/[^\d.]/gi,'')

 

foreseeBook接口调用返回.then 当中调用了callNumberSetting接口（索书号中间类型判断）

 

两个接口调用使用的时候，互相调用，进入页面时候调用foreseeBook接口展示数据，不知道那个索书方式，所以调用了判断方式的接口，然后进行了相应的赋值；

 

在用户编辑了索书号（分类号+SASAType + 辅助区分）后，按回车发送请求，调用foreseeBook接口，把页面双向数据绑定收集到的用户输入的数据进行params传参给到后端，（接口当中新增）））

传过去后返回来的res当中，callNumber就是下边展示的索书号，直接进行了展示；

而展示的种次号的时候是后端没有返回数据，所以用到了返回的索书号当中的数据，进入页面初始化的时候和用户编辑了之后回车之后，进行数据的回显，发现这两次展示都是通过第一次判断接口当中传回的数据来展示的；

 

发现新小bug：

光输入“四角号码”时候，按回车后下边索书号当中的四角号码相应的数据不发生变化；

 

解决问题：在第二次调用foreseeBook当中，再次调用第一次调用foreseeBook时候调用的判断接口，就可以解决该问题。