前端如何联动赋值技术解决方案

场景还原：

1、要求输入得分，动态获取对应的等级

2、通过各种等级获取最后的总等级

解决思路：

1、在后台通过接口从数据库将对应得分所对应的等级获取。

2、编写一个函数对于输入得分数据进行对应等级的显示。

3、对于输入得分数据进行监听，当输入得分时候，调用方法进行获取对应等级。

解决办法：

1、在页面加载时候调用get请求，获取到对应得分所对应的等级，并将数据格式转换成方法所需要的格式。

2、自动判断等级方法

1、初始化: 定义一个变量techLeve并将其值设为undefined，用于存储最终匹配到的等级。

2、遍历等级范围: 使用for...in循环遍历this.levelCivil对象的每个等级。this.levelCivil应该是一个包含多个等级定义的对象，每个等级定义是一个字符串，表示一个分数区间，例如"[10,20)"表示10（含）到20（不含）的区间。

3、解析等级区间: 使用slice()和split()方法从等级定义字符串中提取出分数的下限和上限，例如从"[10,20)"中得到10和20。 分别获取区间的起始符号（左括号）sym1和结束符号（右括号）sym2，用来判断是否包含边界值。

4、检查分数是否在区间内: 将下限和上限转换为浮点数lowerBound和upperBound。 使用一系列条件判断，检查给定的score是否位于当前等级的分数区间内。包括了对区间的开闭情况进行判断，即如果区间的边界是包含的（使用方括号[或]），则等于边界值的分数也被认为在区间内。

5、匹配等级: 如果分数满足当前区间的条件，计算等级序号（level是字符串形式，所以使用parseInt(level, 10)转为整数并加1）并赋值给techLeve，然后跳出循环。

6、返回结果: 循环结束后，返回找到的等级techLeve。如果没有找到匹配的等级，由于初始值设为undefined，函数将返回undefined。

3、监听

1、获取分数值: 首先通过this.form.civilScore获取当前的分数值，并将其存储在局部变量score中。 计算等级: 调用之前定义的levelCivil1(score)函数，传入score作为参数，计算出对应的等级。这个函数根据分数值确定用户或项目的民事等级，并将结果分别赋值给： this.form.civilLevel: 更新表单对象中的等级字段。 this.data.civilLevel: 更新data对象中的等级字段，这个通常是用于Vue实例内部数据管理的。

2、调用singlelevel1方法: 在等级计算完毕并更新相关数据后，调用this.singlelevel1()方法。这个方法是通过各种等级计算最后的总等级。

4、singlelevel1方法说明

1、比较等级：核心逻辑部分开始于比较this.data.elecLevel(电子等级) 和 this.data.civilLevel(民事等级) 的值。 2、条件判断：如果this.data.elecLevel大于this.data.civilLevel，意味着电子等级更高，这时：将this.data.level设置为this.data.elecLevel，即综合等级被设定为电子等级。否则：如果民事等级不低于电子等级，则：将this.data.level设置为this.data.civilLevel，即综合等级被设定为民事等级。

5、错误案例

最开始是基于后台接口进行分数和等级的匹配，每匹配一次等级就调一次接口，会导致频繁重复的接口调用以及数据库操作，并且每次匹配都需要较长的接口响应时间，因此改为前端一次取到配置，缓存起来用于后续匹配