企业级前端开发自测标准

忘是亡心i 2022-09-09 09:30 241阅读 0赞

常规的开发模式往往是前后端分离，后台进行接口与数据的开发整合，前端进行页面的切图与调用，所以前端往往也是提测前的最后环节。

所以前端的自测其实穿插着接口的容错等其他各部分的综合。

本期的自测标准整合分为三个部分，**展示**，**交互**和**校验**。

### 展示 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]

首先是：展示部分  
这也是前端唯一不能甩锅的部分。展示可以说是在自测中解耦的测试点。

*  页面展示
 *  布局展示
 *  图片展示
 *  控件展示

…等等  
所见即为展示

#### 验证标准 ####

而展示的验证结果则是符合prd或者交互ui的要求，达到美观整洁大方与代码端表现一致即可。主要涉及的html和css的相关知识。

### 交互 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16 1]

交互体验可以说是一种见仁见智的东西，在业务流程的基本上，满足大多数人的操作习惯即可。尽量不要出现反人类的操作。  
但在交互上前端往往需要考虑的更多，类似于对一些不可逆的操作，前端需要利用来防止用户的手滑等等，比如退款，删除等等。

*  二次确认
 *  重复提交
 *  异常提示(无权限，无数据)
 *  默认值  
    …  
    等等

#### 验证标准 ####

交互的验证结果则是符合大多数用户的习惯，以及考虑到多种操作情况会造成的影响，从而在交互设计前就进行规避。

### 校验 ###

![在这里插入图片描述][248ff9698bdc426db964ab3eba3caa46.png]

第三点：校验，校验是为了保证前端数据的准确性。往往后台需要和前端一起进行对数据的校验，这样有了双重保险后，调用接口等。

校验的方式，一般分为两种，第一种是将需要校验的数据逐个击破，另一种则是为整体校验，对整个进行提交的数据组进行校验。

#### 逐个击破校验 ####

在双向绑定的背景下，数据单元也绑定了一个独一的控件，以数据单元为单位进行校验，最简单的就是if语句了

if(a!=1){ 
    //校验不通过
    console.log("a不是1")
    }

#### 整体处理校验 ####

[class-validator校验方法举例][class-validator]

利用class的思想，将json转化为可以进行校验的class 对其中的属性进行校验，利用注释校验的方法对字段进行规定预设，从而进行整体校验。

#### 权限 ####

![在这里插入图片描述][b3cd516d7793483fa8180cd7e3da358a.png]

而校验不仅仅可以对于数据，也可以对于权限。  
权限可以简单概括为三种：

*  操作权限
 *  数据权限
 *  显示权限

#### 操作权限 ####

常规的情形是：班主任可以审批学生请假而任课老师不可以。

假设我们的请假申请是一个按钮，其中包含了 一个审批请假的方法。  
则任课老师不应该看到这个操作按钮，或者进行操作后不可以执行这个方法。

##### 按钮隐藏 #####

##### 方法跳出 #####

spqj(){ 
    if(role!='班主任'){ 
    consloe.log（"您不是班主任 不能进行审批操作"）
    return
    }
    }

#### 数据权限 ####

对于数据权限来说，继续类比学校的例子：任课老师可以看到其任课的作业列表，而班主任可以看到所有的作业列表。

假设作业列表是一个接口，接口在不同的入参返回不同的数据，一般是由后台进行数据权限的限制。但如果某些情况下需要前端进行数据权限的限制，则需要把数据源进行二次筛选处理。

var fooMath = foo.filter(
        function(item) { 
            return item.type=='数学'
        }
    );

#### 显示权限 ####

显示权限：在前置过程中进行判断，比如利用路由守卫，在跳转到某页面前进行截断，读取权限字段，若不符合权限要求则重定向到无权限页面。

router.beforeEach((to, from, next) => { 
      if (to.name !== 'Login' && !isAuthenticated) next({  name: 'Login' })
      next()
    })

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/88769075380742ef8e17abea00395b59.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/1a61b4c2107d4558ab27e2535a72837a.png
[248ff9698bdc426db964ab3eba3caa46.png]: /images/20220829/d36ffb3e3b354b1fabd7716d8de556cd.png
[class-validator]: https://blog.csdn.net/qq_43277404/article/details/112648281?spm=1001.2014.3001.5501
[b3cd516d7793483fa8180cd7e3da358a.png]: /images/20220829/8fe3c9b1ed45459ca6e65db044728281.png