이 회사는 vue + element ui + axios + webpack의 PC 측 백그라운드 관리 시스템을 보유하고 있으며 실행에 필요한 브라우저는 IE 11입니다. 개발 과정에서 많은 구덩이가 밟 히고 다음과 같은 문제가 기록되었습니다.
질문 1 : js에서 "Test Card 1"과 같이 겉보기에 동일한 두 문자열이 "=="및 "==="에 의해 판단되며 둘 다 거짓입니다. encodeURIComponent ()로 처리 한 후의 결과는 % E6 % B5 % 8B % E8 % AF % 95 % E5 % 8D % A11 및 % E6 % B5 % 8B % E8 % AF % 95 % E5 % 8D % A11 % 00입니다. 분명히 다릅니다.
솔루션 : localeCompare () 메서드를 사용하여 두 문자열을 비교하십시오 localeCompare () 메서드에는 0- 같음, -1 및 1이 같지 않음의 세 가지 반환 값이 있습니다.
질문 2 : 백그라운드 데이터를 얻기위한 요청을 통해 백그라운드에서 수신 된 중국인이 왜곡 된 것으로 나타났습니다.
해결 방법 : 프런트 엔드에서 encodeURI ()를 사용하여 중국어 문자를 인코딩 한 다음 백그라운드로 전송하십시오.
질문 3 : 목록 페이지는 페이지가로드 될 때만 데이터를 새로 고치고 페이지가 반환되거나 페이지의 쿼리 버튼을 클릭하지 않아도 데이터가 새로 고쳐집니다.
솔루션 : 조사 결과 연결 유지 구성 요소가 사용되고 페이지 캐시가 백그라운드에서 데이터를 요청하지 않은 것으로 나타났습니다. 마지막으로 현재 타임 스탬프를 axios 요청 인터셉터에 추가하면 각 get 요청에 새 요청이 생성되어이 문제가 해결됩니다.
질문 4 : 양식의 입력 상자에서 Enter를 누르면 페이지가 점프합니다.
솔루션 : W3C 표준에 따르면 양식 요소에 입력 상자가 하나만있는 경우 입력 상자에서 Enter 키를 눌러 양식을 제출합니다. <el-form>레이블 에 추가 @submit.native.prevent하면 양식 제출이 방지 될 수 있습니다.