企業級前端開發自測標準-有解無憂

常規的開發模式往往是前后端分離，后臺進行介面與資料的開發整合，前端進行頁面的切圖與呼叫，所以前端往往也是提測前的最后環節，

所以前端的自測其實穿插著介面的容錯等其他各部分的綜合，

本期的自測標準整合分為三個部分，展示，互動和校驗，

在這里插入圖片描述

首先是：展示部分
這也是前端唯一不能甩鍋的部分，展示可以說是在自測中解耦的測驗點，

…等等
所見即為展示

而展示的驗證結果則是符合prd或者互動ui的要求，達到美觀整潔大方與代碼端表現一致即可，主要涉及的html和css的相關知識，

在這里插入圖片描述

互動體驗可以說是一種見仁見智的東西，在業務流程的基本上，滿足大多數人的操作習慣即可，盡量不要出現反人類的操作，
但在互動上前端往往需要考慮的更多，類似于對一些不可逆的操作，前端需要利用來防止用戶的手滑等等，比如退款，洗掉等等，

互動的驗證結果則是符合大多數用戶的習慣，以及考慮到多種操作情況會造成的影響，從而在互動設計前就進行規避，

在這里插入圖片描述

第三點：校驗，校驗是為了保證前端資料的準確性，往往后臺需要和前端一起進行對資料的校驗，這樣有了雙重保險后，呼叫介面等，

校驗的方式，一般分為兩種，第一種是將需要校驗的資料逐個擊破，另一種則是為整體校驗，對整個進行提交的資料組進行校驗，

在雙向系結的背景下，資料單元也系結了一個獨一的控制元件，以資料單元為單位進行校驗，最簡單的就是if陳述句了

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

class-validator校驗方法舉例

利用class的思想，將json轉化為可以進行校驗的class 對其中的屬性進行校驗，利用注釋校驗的方法對欄位進行規定預設，從而進行整體校驗，

在這里插入圖片描述

而校驗不僅僅可以對于資料，也可以對于權限，
權限可以簡單概括為三種：

常規的情形是：班主任可以審批學生請假而任課老師不可以，

假設我們的請假申請是一個按鈕，其中包含了一個審批請假的方法，
則任課老師不應該看到這個操作按鈕，或者進行操作后不可以執行這個方法，

<button click="spqj（）">審批請假</button>

<button click="spqj（）" *ngIf="role=='班主任'">審批請假</button>

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()
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/296617.html

標籤：其他