마이크로세미 AN1256 Web 프로그래머 애플리케이션 사용 설명서

내용물 숨다

1 마이크로세미 AN1256 Web 프로그래머 신청

2 소개

3 JSON 데이터 액세스 흐름

4 Web 뼈대

5 JSON 가이드라인 Web 페이지 디자인

마이크로세미 AN1256 Web 프로그래머 신청

소개

JSON(JavaScript Object Notation)은 개방형 표준입니다. file 데이터 교환을 위해 사람이 읽을 수 있는 텍스트를 사용하는 형식입니다. 비동기 브라우저/서버 통신에 사용되는 일반적인 데이터 형식입니다.
새로운 것을 위해 web 페이지 디자인, JSON 형식은 원래 AJAX 스타일을 대체할 수 있습니다. JSON을 사용하면 AJAX와 비교하여 Web 더 쉽고 간단하게 구현할 수 있습니다. 개발자는 여기에만 집중하면 됩니다. web 페이지 디자인과 Web 핸들러 구현은 생략 가능 WebStaX 소프트웨어 모듈.
이 문서는 다음을 개발해야 하는 소프트웨어 엔지니어를 위한 프로그래머 가이드를 설명합니다. Web JSON을 통한 페이지. 세부 절차 및 예amp파일은 다음 섹션에도 포함되어 있습니다.

JSON 데이터 액세스 흐름

위에view
다음은 클라이언트(브라우저)에서 HTTP 연결이 시작되는 JSON 데이터 액세스 흐름입니다. HTML 테이블은 서버(DUT) 측에서 수신한 JOSN 데이터에 따라 동적으로 생성됩니다.

그림 1. 클라이언트와 서버 간의 액세스 흐름

요청/응답 JSON 데이터
JSON 요청 패킷은 HTTP 요청 게시 방법을 기반으로 하며 콘텐츠는 MSCC JSON 형식을 따라야 합니다.

요청 JSON 구문:{"방법":" ”,”매개변수”:[ ], "id:"jsonrpc"}
응답 JSON 구문: {"오류": ,"결과": , "id:"jsonrpc"}

다음 스냅샷은 브라우저와 DUT 간의 JSON 콘텐츠를 보여줍니다.

그림 2. 클라이언트의 HTTP 요청 스냅샷

그림 3. 서버의 HTTP 응답 스냅샷

MSCC JSON 사양
메소드, 매개변수, 설명 등을 포함한 전체 JSON 정보를 얻으려면 “http:// /json_spec”을 브라우저 주소 표시줄에 표시합니다. JSON 메서드 이름 "jsonRpc.status.introspection.specific.inventory.get"을 통한 또 다른 액세스 방법이 있으며 특정 메서드에 사용됩니다.

그림 4. JSON 사양의 스냅샷 web 페이지

Web 뼈대

그만큼 Web 프레임 워크 WebStaX 소프트웨어는 오픈 소스 MooTools를 기반으로 합니다. MIT 라이센스가 있는 JavaScript 유틸리티 모음입니다. (http://mootools.net/license.txt) 메뉴 표시줄과 대부분의 web 페이지는 프레임워크를 기반으로 합니다. AJAX 및 JSON 알고리즘은 이미 유틸리티에 통합되어 있습니다.
게다가, WebStaX 소프트웨어는 JSON에 유용한 다른 유틸리티를 제공합니다. web 페이지 디자인.

json.js – JSON 구문으로 동적 데이터를 송수신하려면 for를 사용하십시오.
dynforms.js – HTML 테이블을 동적으로 생성하는 데 사용합니다.

validation.js – HTML 양식의 유효성 검사에 사용합니다.

전체 JavaScript 라이브러리는 소스 트리 디렉토리 아래에 있습니다. webstax2\ vtss_appl\web\html\lib.

JSON 가이드라인 Web 페이지 디자인

이 섹션에서는 web MSCC JavaScript 라이브러리를 기반으로 하는 페이지입니다. 미러 글로벌 구성을 사용합니다. web 전 페이지amp르 여기. 비동기 통신은 HTTP JSON 액세스 방법을 기반으로 하며 모든 전역 구성 매개변수는 하나의 동적 HTML 테이블에 나열됩니다.
그만큼 web 페이지 레이아웃은 아래에 나열되어 있으며 전체 소스 코드는 소스 트리 디렉토리 아래에 있습니다. webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. 좀 더 전형적인 것을 얻으려면 web 페이지 참조는 부록 섹션을 참조하십시오.

Mirror& RMirror 구성 테이블

그림 5. Examp글로벌 구성 테이블의 파일

편집하다 Web 페이지

HTML 헤더
HTML에 필요한 JS 라이브러리 포함 tag.

동적 테이블 리소스 초기화

HTML 문서가 준비되면 DynamicTable()을 호출하여 동적 테이블 리소스를 초기화합니다.

DynamicTable()은 JSON 데이터를 수신한 후 동적 테이블을 생성하는 데 사용됩니다.
그런 다음 requestUpdate를 호출하여 JSON 명령 흐름을 시작합니다.

window.addEvent('domready', function() {
// JSON 데이터 수신/전송을 위한 테이블 본문이 있는 양식 생성
myDynamicTable = new DynamicTable("myTableContent", "config","plusRowCtrlBar");
4
요청업데이트();
});

요청/응답 JSON 데이터

HTML 문서가 준비되면 requestJsonDoc()을 사용하여 JSON 요청 "mirror.config.session.get"을 보내 구성된 세션에 대한 정보를 가져옵니다.
"mirror.capabilities.get"에 대한 JSON 데이터가 수신된 후 콜백 함수 requestUpdate()가 처리됩니다. requestUpdate 함수는 "mirror.config.session.get"을 호출하여 현재 구성을 가져옵니다. 현재 구성이 수신되면 processUpdate 함수가 호출되어 표시할 테이블을 빌드합니다.

함수 requestUpdate()
{
// 테이블 내용 복원
myDynamicTable.restore();
5
// 이 테이블은 두 개의 JSON 데이터입니다.
requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
}

수신된 JSON 데이터 처리

processUpdate() 함수는 JSON 데이터를 수신한 후 동적 테이블을 레이아웃하는 데 사용됩니다.

addRows()는 테이블 행을 추가하는 데 사용됩니다. myDynamicTable.update() 레이아웃
테이블 행의 데이터에 따른 HTML 테이블.

함수 processUpdate(recv_json, 이름)
{

// 데이터가 수신되지 않으면 프로세스를 무시합니다.
경우 (!recv_json) {
alert("동적 데이터 가져오기에 실패했습니다.");

반품;
}
// 받은 JSON 데이터 저장

myDynamicTable.saveRecvJson("구성", recv_json);
// 테이블 행 추가
var table_rows = addRows(recv_json);

myDynamicTable.addRows(table_rows);
// 이 동적 테이블 업데이트

myDynamicTable.update();
// 새로 고침 타이머

var autorefresh = document.getElementById(“자동 새로 고침”);
if (autorefresh && autorefresh.checked) {
if (타이머 ID) {

ClearTimeout(타이머ID);
}
timerID = setTimeout('requestUpdate()', settingsRefreshInterval());

}
}

테이블 행 추가

addRows() 함수에서 JSON 형식을 사용하여 테이블 행의 각 전역 구성 매개변수를 채웁니다.
모든 HTML 필드는 JSON 배열("table_rows")에 나열되며 테이블 필드의 구문은 다음과 같습니다.

통사론:
table_rows:[ , , … ] : { , , … }
: {"유형": , "매개변수":[ , , …, ]}

이 경우 각 행에는 "Session ID", "Mode", "Type", "VLAN ID" 및 "Reflector Port"의 XNUMX개 필드가 있습니다. 예를 들어amp르,

세션 ID (이름 필드: int32_t)	1 (미러 세션의 ID)
방법 (이름 필드: vtss_bool_t)	진실 (미러 세션이 활성화되었음을 의미)
유형 (이름 필드: 열거형 {미러, rMirrorSource, rMirrorDestination}	R미러 소스 (원격 미러 세션의 소스입니다.
VLAN ID (이름 필드: uint16_t)	200 (미러링에 사용되는 VLAN)
리플렉터 포트 (이름 필드: vtss_ifindex_t)	기 1/1 (미러링된 트래픽이 전송되는 포트

myDynamicTable.addRows()는 JSON 데이터를 HTML 형식으로 변환하고 HTML 테이블을 출력합니다.

함수 addRow(키, 값)

{
var none_map_val = 0xFFFFFFFF, none_map_text = "없음", none_interface_text = "없음";
var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;

var 행 = {필드:[
{유형:"링크", 매개변수:["cr", "mirror.htm?session_id=" + 키, 키]},
{유형:"텍스트", 매개변수:[oTMode[oVMode.indexOf(val.Mode)], "c"]},

{유형:"텍스트", 매개변수:[oTType[oVType.indexOf(val.Type)], "c"]},
{유형:"텍스트", 매개변수:[val.Type == "거울" ? "-":
val.RMirrorVlan, "c"]},
{유형:"텍스트", 매개변수:[val.Type == "rMirrorSource" ?
val.ReflectorPort : "-" , "c"]}

]};
반환 행;
}

함수 addRows(recv_json)
{
var 행, empty_colspan = 7;

var table_rows = 새 배열();
// 테이블 헤더 추가
addHeader(table_rows);

// 단일 행 추가
Object.each(recv_json, 함수(레코드) {
table_rows.push(addRow(record.key, Record.val));

});
table_rows 반환;
}

Web 도움말 페이지
에 대한 web 도움말 페이지 디자인에서 도움말 설명은 설명 텍스트가 JSON 출력과 일치할 수 있고 중복 설명을 줄이는 데 도움이 되는 JSON 사양을 참조할 수 있습니다. 전amp여기의 le는 dhcp6 릴레이 구성에서 가져온 것입니다.

소스의 하이퍼링크 file
도움말 할당 file 소스의 위치 file HTML tag. 고정 변수 이름 "help_page"는 web 도움말 페이지 할당.

// 도움말 페이지 매직
var help_page = "/help/help_xxx.htm";

JSON 사양에서 HTML 필드 설명 업데이트

사용 또는 HTML tag HTML 테이블 설명을 선언하고 tag.
HTML 문서가 준비되면 loadXMLDoc()을 호출하여 전체 JSON 사양을 가져오거나 JSON 메서드 이름 "jsonRpc.status.introspection.specific.inventory.get"으로 특정 메서드 설명을 가져옵니다.

processTableDesc()는 테이블 설명을 업데이트하는 데 사용되고 processUpdate()는 테이블 매개변수 설명을 업데이트하는 데 사용됩니다.
processUpdate()에서 updateTableParamsDesc()를 호출하여 특정 요소 이름과 일치하는 JSON 요소를 업데이트합니다.
업데이트 또는 tag 요소 설명에 따른 내부 HTML.

/* HTML 설명 필드 업데이트 */
함수 processTableDesc(req) {

if (!req.responseText) {
반품;
}

var json_spec = JSON.decode(req.responseText);
// 테이블 설명 업데이트
$("TableDesc").innerHTML = getJsonSpecElement(json_spec, "그룹", "dhcp6_relay.config.vlan").description;

}
/* HTML 테이블 매개변수 설명 업데이트 */
함수 processUpdate(recv_json) {

// 테이블 매개변수 설명 업데이트
변수 매개변수 이름 = [
{

"별칭": "인터페이스",
"유형": "vtss_ifindex_t",
"이름": "vlan인터페이스",

"접미사": "."
},
{

"alias": "릴레이 인터페이스",
"유형": "vtss_ifindex_t",
"이름": "relayVlanInterface",

"접미사": ". 릴레이에 사용되는 인터페이스의 ID입니다.”
},
{

"alias": "릴레이 대상",
"유형": "mesa_ipv6_t",
"이름": "relay_destination",

"접미사": ". 요청을 릴레이할 DHCPv6 서버의 IPv6 주소입니다. 기본값 'ff05::1:3'은 '모든 DHCP 서버'를 관리합니다.”
}
];

updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
}
/* JSON 사양 가져오기 */

window.addEvent('domready', 함수() {
loadXMLDoc("/json_spec", processTableDesc);
requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);

});

메뉴 표시줄의 하이퍼링크

메뉴 막대의 HTML 소스 코드는 다음에서 생성됩니다. file webstax2\vtss_appl\web\ menu_default.cxx.
이 항목을 편집하십시오. file 를 위해 Web 페이지 하이퍼링크.

#정의된 경우(VTSS_SW_OPTION_DHCP6_RELAY)
ITEM("릴레이,dhcp6_relay.htm");
#endif //VTSS_SW_OPTION_DHCP6_RELAY

메모
메뉴 모음에서 그룹 수준을 결정하는 데 사용되는 ITEM("")의 공백 문자 수에 유의하십시오. 이 경우 모든 web 페이지는 "DHCPv6" 그룹 아래에 있습니다.

그림 6. 예amp글로벌 구성 테이블의 파일

충수

전형적인 web 페이지

몇 가지 대표적인 web 페이지는 참조 디자인에 사용할 수 있습니다. 하나의 추가 전amp여기에 표시되는 파일은 vtss_appl\mirror\html\mirror.htm에 있는 단일 미러 세션의 구성입니다.
그만큼 web 페이지는 단일 미러 세션에 대한 자세한 구성을 제공합니다. 구성된 모든 매개변수가 나열됩니다.

현재 구성을 적용하려면 "저장" 버튼을 클릭합니다.
현재 구성을 재설정하려면 "재설정" 버튼을 클릭하십시오.
이상으로 돌아가려면 "취소"를 클릭하십시오.view 미러 세션

미러&R미러 구성

글로벌 설정

소스 VLAN 구성

포트 구성

그림 7. Examp미러 세션 세부 구성 파일
"저장", "재설정" 및 "취소" 버튼은 html 코드에 의해 추가됩니다.

JSON 명령 흐름
이 페이지에는 XNUMX단계 명령 흐름이 필요합니다.

먼저 "mirror.capabilities.get" 메서드를 사용하여 장치의 기능을 가져와야 합니다. 기능은 변경되지 않으며 한 번만 읽어야 합니다.
그런 다음 "mirror.config.session.get", "port.status.get" 메소드를 사용하고 "topo.config.stacking.get"을 스태킹하는 경우 장치의 현재 구성을 가져와야 합니다.

"mirror.capabilities.get" 호출은 "domready" 이벤트에 의해 시작되고 결과는 requestUpdate 함수에 의해 처리되도록 구성됩니다.
requestUpdate는 "mirror.config.session.get" 호출을 시작합니다.
"port.status.get" 및 "topo.config.stacking.get" 스태킹의 경우 이러한 호출의 결과는 prepareUpdate 함수에 의해 처리되도록 구성됩니다.
함수 prepareUpdate는 모든 결과를 수집하고 모든 결과가 수신된 경우에만 프로세스 업데이트 함수를 호출하여 테이블에 표시할 테이블을 구성합니다. web.