Microsemi AN1256 Web Proqramçılar Tətbiqi İstifadəçi Təlimatı

İçindəkilər gizlətmək

1 Microsemi AN1256 Web Proqramçılar Tətbiqi

2 Giriş

3 JSON məlumat girişi axını

4 Web çərçivə

5 JSON üçün təlimat Web səhifə dizaynı

5.1 Redaktə et Web səhifə

6 Əlavə

6.1 Güzgü&RMirror Konfiqurasiyası

7 İstinadlar

8 Sənədlər / Resurslar

8.1 İstinadlar

9 Əlaqədar Yazılar

Microsemi AN1256 Web Proqramçılar Tətbiqi

Giriş

JSON (JavaScript Object Notation) açıq standartdır file məlumat mübadiləsi üçün insan tərəfindən oxuna bilən mətndən istifadə edən format. Bu, asinxron brauzer/server əlaqəsi üçün istifadə olunan ümumi məlumat formatıdır.
Yeni üçün web səhifə dizaynı, JSON formatı orijinal AJAX üslubunu əvəz edə bilər. JSON istifadə edərək AJAX ilə müqayisə edin Web həyata keçirilməsi daha asan və sadədir. Tərtibatçı yalnız diqqətini cəmləməlidir web səhifə dizaynı və Web JSON giriş metodu hər birində artıq dəstəkləndiyi üçün işləyicinin icrası buraxıla bilər WebStaX proqram modulları.
Bu sənəd inkişaf etdirməli olan proqram mühəndisi üçün proqramçıların təlimatını bildirir Web JSON vasitəsilə səhifə. Təfərrüatlı prosedurlar və samples də aşağıdakı bölmələrə daxildir.

JSON məlumat girişi axını

Bitdiview
Budur, HTTP bağlantısı müştəridən (brauzerdən) başlatılan JSON məlumat girişi axını. HTML cədvəli server (DUT) tərəfdən qəbul edilən JOSN məlumatlarına uyğun olaraq dinamik şəkildə yaradılır.

Şəkil 1. Müştəri və server arasında giriş axını

JSON datasını tələb edin/cavab verin
JSON sorğu paketi HTTP sorğu göndərmə metoduna əsaslanır və məzmun MSCC JSON formatına uyğun olmalıdır.

JSON sintaksisini tələb edin:{"metod":" ""params":[ ], “id:”jsonrpc”}
Cavab JSON sintaksisi: {“səhv”: ,"nəticə": , “id:”jsonrpc”}

Aşağıdakı şəkillər brauzer və DUT arasında JSON məzmununu göstərir.

Şəkil 2. Müştəridən HTTP sorğusunun snapshot

Şəkil 3. Serverdən HTTP cavabının şəkli

MSCC JSON spesifikasiyası
Metod, parametr, təsvir və s. daxil olmaqla tam JSON məlumatını əldə etmək üçün “http://” yazın. /json_spec” brauzerinizin ünvan çubuğunda. JSON metodu adı "jsonRpc.status.introspection.specific.inventory.get" vasitəsilə başqa bir giriş üsulu var, o, müəyyən bir metod üçün istifadə olunur.

Şəkil 4. JSON spesifikasiyasının şəkli web səhifə

Web çərçivə

The Web çərçivəsində WebStaX proqramı açıq mənbə MooTools-a əsaslanır. MIT lisenziyası olan JavaScript utilitləri toplusudur. (http://mootools.net/license.txt) Menyu çubuğu və əksəriyyəti web səhifələr çərçivəyə əsaslanır. Həm AJAX, həm də JSON alqoritmi artıq onun kommunal proqramlarına inteqrasiya olunub.
Bundan başqa, WebStaX proqramı JSON üçün faydalı olan digər yardım proqramlarını təmin edir web səhifə dizaynı.

json.js - JSON sintaksisi ilə dinamik məlumatları ötürmək/qəbul etmək üçün istifadə edin.
dynforms.js - HTML cədvəlini dinamik şəkildə yaratmaq üçün istifadə edin.

validate.js – HTML formasının təsdiqi üçün istifadə edin.

Tam JavaScript kitabxanaları mənbə ağacı kataloqunun altında yerləşir: webstax2\ vtss_appl\web\html\lib.

JSON üçün təlimat Web səhifə dizaynı

Bu bölmə a web MSCC JavaScript kitabxanalarına əsaslanan səhifə. Biz Güzgü qlobal konfiqurasiyasından istifadə edirik web keçmiş kimi səhifəampburada. Asinxron rabitə HTTP JSON giriş metoduna əsaslanır və bütün qlobal konfiqurasiya edilmiş parametrlər bir dinamik HTML cədvəlində verilmişdir.
The web səhifə tərtibatı aşağıda verilmişdir və tam mənbə kodu mənbə ağacı kataloqunun altında yerləşir: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Daha tipik olmaq üçün web səhifələrə istinad, əlavə bölməsinə baxın.

Güzgü və RMirror Konfiqurasiya Cədvəli

Şəkil 5. Exampqlobal konfiqurasiya edilmiş cədvəlin le

Redaktə et Web səhifə

HTML başlığı
HTML-də lazım olan JS kitabxanalarını daxil edin tag.

Dinamik cədvəl resursunu işə salın

HTML sənədi hazır olduqda, dinamik cədvəl resursunu işə salmaq üçün DynamicTable()-a zəng edin.

DynamicTable() JSON məlumatını aldıqdan sonra dinamik cədvəl yaratmaq üçün istifadə olunur.
Daha sonra JSON əmr axınına başlamaq üçün requestUpdate çağıracaq.

window.addEvent('doready', function() {
// JSON məlumatlarını qəbul etmək/ötürmək üçün cədvəl gövdəsi olan forma yaradın
myDynamicTable = yeni DynamicTable("myTableContent", "config","plusRowCtrlBar");
4
requestUpdate();
});

JSON datasını tələb edin/cavab verin

HTML sənədi hazır olduqda, konfiqurasiya edilmiş sessiyalar haqqında məlumat almaq üçün "mirror.config.session.get" JSON sorğusunu göndərmək üçün requestJsonDoc() istifadə edin.
“mirror.capabilities.get” üçün JSON məlumatı alındıqdan sonra, requestUpdate() geri çağırış funksiyası işlənəcək. requestUpdate funksiyası daha sonra cari konfiqurasiyanı əldə etmək üçün “mirror.config.session.get” çağıracaq. Cari konfiqurasiya qəbul edildikdə, göstəriləcək cədvəli qurmaq üçün processUpdate funksiyası çağırılır.

funksiya sorğusuUpdate()
{
// Cədvəl məzmununu bərpa edin
myDynamicTable.restore();
5
// Bu cədvəl iki JSON məlumatı.
requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
}

Qəbul edilmiş JSON məlumatlarını emal edin

ProcessUpdate() funksiyası JSON məlumatını qəbul etdikdən sonra dinamik cədvəli tərtib etmək üçün istifadə olunur.

addRows() cədvəl sətirlərini əlavə etmək üçün istifadə olunur. myDynamicTable.update() tərtibatı
Cədvəl sətirlərindəki məlumatlara görə HTML cədvəli.

ProcessUpdate funksiyası(recv_json, ad)
{

// Heç bir məlumat alınmazsa, prosesi iqnor edin
əgər (!recv_json) {
xəbərdarlıq (“Dinamik məlumatları əldə etmək uğursuz oldu.”);

qayıtmaq;
}
// Qəbul edilmiş JSON məlumatlarını yadda saxlayın

myDynamicTable.saveRecvJson (“konfiqurasiya”, recv_json);
// Cədvəl sətirləri əlavə edin
var table_rows = addRows(recv_json);

myDynamicTable.addRows(cədvəl_sətirləri);
// Bu dinamik cədvəli yeniləyin

myDynamicTable.update();
// Taymeri təzələyin

var autorefresh = document.getElementById(“avtorefresh”);
əgər (avtorefresh && autorefresh.checked) {
əgər (taymerID) {

clearTimeout(taymerID);
}
timerID = setTimeout('requestUpdate()', settingsRefreshInterval());

}
}

Cədvəl sıraları əlavə edin

addRows() funksiyasında biz cədvəl cərgəsində hər bir qlobal konfiqurasiya edilmiş parametri doldurmaq üçün JSON formatından istifadə edirik.
Bütün HTML sahələri JSON massivində (“cədvəl_sətirləri”) verilmişdir və cədvəl sahəsinin sintaksisi aşağıdadır.

Sintaksis:
cədvəl_sətirləri:[ , , … ] : { , , … }
: {"növ": , "params":[ , , …, ]}

Bu halda, hər bir cərgədə beş sahə var: "Sessiya ID", "Rejim", "Növ", "VLAN ID" və "Reflektor Port"ample,

Sessiya ID (Ad sahəsi: int32_t)	1 (Güzgü sessiyasının identifikatoru)
Rejim (Ad sahəsi: vtss_bool_t)	doğrudur (Güzgü sessiyasının aktiv olduğu mənasını verir)
Növ (Ad sahəsi: siyahı {güzgü, rMirrorSource, rMirrorDestination}	RMirror Mənbəsi (bu, uzaqdan güzgü seansının mənbəyidir
VLAN ID (Ad sahəsi: uint16_t)	200 (güzgü üçün istifadə olunan vlan)
Reflektor portu (Ad sahəsi: vtss_ifindex_t)	Gi 1/1 (Aynalı trafikin göndərildiyi port

myDynamicTable.addRows() JSON məlumatlarını HTML formatına çevirəcək və HTML cədvəlini çıxaracaq.

addRow funksiyası (açar, val)

{
var none_map_val = 0xFFFFFFFF, none_map_text = “Heç biri”, none_interface_text = “YOX”;
var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(qlobal_conf.tunnelMode)] + “)” : “”;

var sıra = {sahələr:[
{tip:”link”, parametrlər:[“cr”, “mirror.htm?session_id=” + açar, açar]},
{növ:”mətn”, parametrlər:[oTMode[oVMode.indexOf(val.Mode)], “c”]},

{növ:”mətn”, parametrlər:[oTType[oVType.indexOf(val.Type)], “c”]},
{tip:”mətn”, parametrlər:[val.Type == “güzgü” ? "-":
val.RMirrorVlan, “c”]},
{tip:”mətn”, parametrlər:[val.Type == “rMirrorSource” ?
val.ReflectorPort : “-” , “c”]}

]};
geri dönmə sırası;
}

funksiya addRows(recv_json)
{
var sətir, empty_colspan = 7;

var table_rows = new Array();
// Cədvəl başlığını əlavə edin
addHeader(cədvəl_sətirləri);

// Tək sıra əlavə edin
Object.each(recv_json, funksiya(qeyd) {
table_rows.push(addRow(record.key, record.val));

});
cədvəl_sətirlərini qaytarmaq;
}

Web yardım səhifəsi
üçün web yardım səhifəsinin dizaynında yardım təsviri JSON spesifikasiyasına istinad edə bilər ki, təsvir mətni JSON çıxışına uyğun ola bilər və lazımsız təsvirləri azaltmağa kömək edir. Məsample burada dhcp6 relay konfiqurasiyasından götürülüb.

Mənbədə hiper keçid file
Kömək təyin edin file mənbəyində yerləşməsi file HTML tag. Sabit dəyişən adı “help_page” üçün istifadə olunur web yardım səhifəsi tapşırığı.

// Kömək səhifəsi sehri
var help_page = “/help/help_xxx.htm”;

JSON spesifikasiyasından HTML sahəsinin təsvirini yeniləyin

istifadə edin və ya HTML tag HTML cədvəlinin təsvirini elan etmək və üçün unikal ID vermək tag.
HTML sənədi hazır olduqda, bütün JSON spesifikasiyasını əldə etmək üçün loadXMLDoc()-a zəng edin və ya “jsonRpc.status.introspection.specific.inventory.get” JSON metodu adı ilə xüsusi metod təsvirini əldə edin.

processTableDesc() cədvəlin təsvirini yeniləmək üçün, processUpdate() isə cədvəl parametrinin təsvirini yeniləmək üçün istifadə olunur.
ProcessUpdate() funksiyasında, xüsusi element adlarına uyğun gələn JSON elementlərini yeniləmək üçün updateTableParamsDesc() çağırın.
yeniləyin və ya tag element təsvirinə uyğun olaraq daxili HTML.

/* HTML təsvir sahələrini yeniləyin */
processTableDesc(tələb) funksiyası {

əgər (!req.responseText) {
qayıtmaq;
}

var json_spec = JSON.decode(req.responseText);
// Cədvəlin təsvirini yeniləyin
$(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “qruplar”, “dhcp6_relay.config.vlan”).təsviri;

}
/* HTML cədvəli parametrinin təsvirini yeniləyin */
funksiya processUpdate(recv_json) {

// Cədvəl parametrinin təsvirini yeniləyin
var param_names = [
{

"ləqəb": "İnterfeys",
“növ”: “vtss_ifindex_t”,
“ad”: “vlanInterface”,

“şəkilçi”: “.”
},
{

“ləqəb”: “Relay interfeysi”,
“növ”: “vtss_ifindex_t”,
“ad”: “relayVlanInterface”,

“şəkilçi”: “. Köçürmə üçün istifadə olunan interfeysin id-si.”
},
{

“ləqəb”: “Relay təyinatı”,
“növ”: “mesa_ipv6_t”,
“ad”: “relay_destination”,

“şəkilçi”: “. Sorğuların göndəriləcəyi DHCPv6 serverinin IPv6 ünvanı. Defolt dəyər 'ff05::1:3' 'istənilən DHCP serverini' təyin edir.
}
];

updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
}
/* JSON spesifikasiyasını əldə edin */

window.addEvent('doready', funksiya () {
loadXMLDoc(“/json_spec”, processTableDesc);
requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);

});

Menyu çubuğunda hiper keçid

Menyu çubuğunun HTML mənbə kodu buradan yaradılır file webstax2\vtss_appl\web\ menu_default.cxx.
Bu elementləri redaktə edin file üçün Web səhifə hiper-link.

#müəyyən edilibsə(VTSS_SW_OPTION_DHCP6_RELEY)
ITEM("Relay,dhcp6_relay.htm");
#endif //VTSS_SW_OPTION_DHCP6_RELEY

QEYD
Diqqət yetirin ki, menyu çubuğundakı qrup səviyyəsini təyin etmək üçün istifadə olunan ITEM("")-dəki boşluq simvolunun sayı. Bu halda, bütün web səhifələr “DHCPv6” qrupunun altındadır.

Şəkil 6. Məsələnampqlobal konfiqurasiya edilmiş cədvəlin le

Əlavə

Tipik web səhifələr

Bir neçə tipik var web səhifələr istinad dizaynı üçün istifadə edilə bilər. Bir əlavə keçmişampBurada göstəriləcək şey vtss_appl\mirror\html\mirror.htm-də tapılan tək güzgü sessiyasının konfiqurasiyasıdır.
The web səhifə tək güzgü sessiyası üçün ətraflı konfiqurasiyanı təmin edir. Bütün konfiqurasiya edilmiş parametrlər sadalanır.

Cari konfiqurasiyanı tətbiq etmək üçün "Saxla" düyməsini basın.
Cari konfiqurasiyanı yenidən qurmaq üçün "Sıfırla" düyməsini basın.
Başa qayıtmaq üçün "Ləğv et" düyməsini basınview güzgü seansları

Güzgü&RMirror Konfiqurasiyası

Qlobal Parametrlər

Mənbə VLAN(lar) Konfiqurasiyası

Port Konfiqurasiyası

Şəkil 7. Exampgüzgü sessiyasının ətraflı konfiqurasiyası
"Saxla", "Sıfırla" və "Ləğv et" düymələri html kodu ilə əlavə olunur:

JSON Komanda axını
Bu səhifə iki addımlı əmr axını tələb edir:

Əvvəlcə “mirror.capabilities.get” üsulu ilə cihazın imkanlarını əldə etmək lazımdır. İmkanlar dəyişmir və yalnız bir dəfə oxunmalıdır.
Daha sonra “mirror.config.session.get”, “port.status.get” metodlarından istifadə edərək və yığma zamanı “topo.config.stacking.get” cihazın cari konfiqurasiyasını əldə etməlidir.

“mirror.capabilities.get” çağırışı “domready” hadisəsi tərəfindən başlanır və nəticə requestUpdate funksiyası tərəfindən idarə olunmaq üçün konfiqurasiya edilir.
SorğuUpdate "mirror.config.session.get" çağırışına başlayacaq,
“port.status.get” və stacking halda “topo.config.stacking.get” və bu zənglərin nəticələri HazırlıqUpdate funksiyası tərəfindən idarə olunmaq üçün konfiqurasiya edilir.
HazırlananUpdate funksiyası bütün nəticələri toplayacaq və yalnız hamısı alındıqdan sonra o, cədvəlləri qurmaq üçün processUpdate funksiyasını çağıracaq. web.