Microsemi AN1256 Web יישום מתכנתים

מָבוֹא

JSON (סימון אובייקט JavaScript) הוא תקן פתוח file פורמט המשתמש בטקסט קריא אנושי לצורך החלפת נתונים. זהו פורמט נתונים נפוץ המשמש לתקשורת דפדפן/שרת אסינכרונית.
בשביל החדש web עיצוב עמודים, פורמט JSON יכול להוות תחליף לסגנון AJAX המקורי. השווה ל-AJAX, שימוש ב-JSON עושה את Web יישום קל ופשוט יותר. המפתח צריך רק להתמקד web עיצוב העמוד וה Web ניתן להשמיט את יישום המטפל מכיוון ששיטת הגישה ל-JSON כבר נתמכת בכל אחד מהם Webמודולי תוכנת StaX.
מסמך זה מציין את מדריך המתכנתים למהנדס התוכנה שצריך לפתח את Web דף דרך JSON. נהלי פירוט ואקסampאלה נכללים גם בסעיפים הבאים.

זרימת גישה לנתונים של JSON

מֵעַלview
להלן זרימת הגישה לנתוני JSON אשר חיבור HTTP מופעל מהלקוח (דפדפן). טבלת HTML נוצרת באופן דינמי בהתאם לנתוני JOSN שהתקבלו מצד השרת (DUT).

איור 1. זרימת הגישה בין הלקוח לשרת

נתוני בקשת/תגובה של JSON
חבילת הבקשות של JSON מבוססת על שיטת פרסום בקשת HTTP והתוכן צריך להיות בפורמט MSCC JSON.

• בקש תחביר JSON:{"שיטה":" ","params":[ ], "id:"jsonrpc"}
• תגובה תחביר JSON: {"שְׁגִיאָה": ,"תוֹצָאָה": , "id:"jsonrpc"}

התמונות הבאות מציגות את תוכן ה-JSON בין הדפדפן ל-DUT.

איור 2. תמונת מצב של בקשת HTTP מלקוח

איור 3. תמונת מצב של תגובת HTTP מהשרת

מפרט MSCC JSON
כדי לקבל את המידע המלא של JSON כולל השיטה, הפרמטר, התיאור וכו'. הקלד "http:// /json_spec" בשורת הכתובת של הדפדפן שלך. ישנה שיטת גישה נוספת באמצעות שם שיטת JSON "jsonRpc.status.introspection.specific.inventory.get", היא משמשת לשיטה ספציפית.

איור 4. תמונת מצב של מפרט JSON web עַמוּד

Web מִסגֶרֶת

ה Web מסגרת ב Webתוכנת StaX מבוססת על MooTools בקוד פתוח. זהו אוסף של כלי עזר ל-JavaScript עם רישיון MIT. (http://mootools.net/license.txt) שורת התפריטים ורוב web הדפים מבוססים על המסגרת. גם אלגוריתם AJAX וגם JSON כבר משולבים בכלי השירות שלו.
מִלְבַד, Webתוכנת StaX מספקת את כלי השירות האחרים המועילים עבור ה-JSON web עיצוב עמוד.

• json.js - השתמש עבור כדי לשדר/לקבל את הנתונים הדינמיים עם תחביר JSON.
• dynforms.js – השתמש ליצירת טבלת HTML באופן דינמי.
• validate.js - השתמש עבור אימות טופס HTML.

ספריות JavaScript המלאות ממוקמות תחת ספריית עץ המקור: webstax2\ vtss_appl\web\html\lib.

קו מנחה עבור JSON Web עיצוב עמוד

סעיף זה מנחה כיצד לעצב א web דף מבוסס על ספריות MSCC JavaScript. אנו משתמשים ב-Mirror global מוגדר web עמוד בתור האקסampלה כאן. התקשורת הא-סינכרונית מבוססת על שיטת גישה HTTP JSON וכל הפרמטרים המוגדרים הגלובלי רשומים בטבלת HTML דינמית אחת.
ה web פריסת העמוד רשומה למטה וקוד המקור המלא נמצא תחת ספריית עץ המקור: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. כדי להיות טיפוסי יותר web הפניה לדפים, עיין בסעיף הנספח.

טבלת קונפיקווציה של מראה&Rמירור

איור 5. Example של טבלה גלובלית מוגדרת

לַעֲרוֹך Web עַמוּד

כותרת HTML
כלול את ספריות JS הדרושות ב-HTML tag.

אתחל את משאב הטבלה הדינמית

• כאשר מסמך ה-HTML מוכן, קרא ל-DynamicTable() כדי לאתחל את משאב הטבלה הדינמית.
• ה- DynamicTable() משמש ליצירת הטבלה הדינמית לאחר קבלת נתוני ה-JSON.
• לאחר מכן הוא יקרא ל- requestUpdate כדי להפעיל את זרימת הפקודה של JSON.

1. window.addEvent('domready', function() {
2. // צור טופס עם גוף טבלה לקבלת/שידור נתוני JSON
3. myDynamicTable = new DynamicTable("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

נתוני בקשת/תגובה של JSON

• כאשר מסמך ה-HTML מוכן, השתמש ב-requestJsonDoc() כדי לשלוח את בקשת ה-JSON "mirror.config.session.get" כדי לקבל מידע על ההפעלות המוגדרות.
• לאחר קבלת נתוני ה-JSON עבור "mirror.capabilities.get", הפונקציה callback requestUpdate() תעובד. הפונקציה requestUpdate תקרא אז "mirror.config.session.get" כדי לקבל את התצורה הנוכחית. כאשר התצורה הנוכחית מתקבלת, הפונקציה processUpdate נקראת כדי לבנות את הטבלה שתוצג.

1. function requestUpdate()
2. {
3. // שחזור תוכן הטבלה
4. myDynamicTable.restore();
   5
5. // טבלה זו שני נתוני JSON.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

עבד את נתוני ה-JSON שהתקבלו

• הפונקציה processUpdate() משמשת לפריסת הטבלה הדינמית לאחר קבלת נתוני ה-JSON.
• ה-addRows() משמש להוספת שורות טבלה. פריסת myDynamicTable.update() את
  טבלת HTML לפי הנתונים בשורות הטבלה.

1. function processUpdate(recv_json, name)
2. {
3. // התעלם מהתהליך אם לא מתקבלים נתונים
4. if (!recv_json) {
5. alert("קבלת נתונים דינמיים נכשלה.");
6. לַחֲזוֹר;
7. }
8. // שמור את נתוני ה-JSON שהתקבלו
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // הוסף שורות בטבלה
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // עדכן את הטבלה הדינמית הזו
15. myDynamicTable.update();
17. // רענון טיימר
18. var autorefresh = document.getElementById("autorefresh");
19. if (autorefresh && autorefresh.checked) {
20. if (מזהה טיימר) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

הוסף שורות בטבלה

• בפונקציה addRows() אנו משתמשים בפורמט JSON כדי למלא כל פרמטר גלובלי מוגדר בשורת הטבלה.
• כל שדות ה-HTML רשומים במערך JSON ("table_rows") והתחביר של שדה הטבלה נמצא למטה.

תַחבִּיר:
table_rows:[ , ,… ] : { , ,… }
: {"סוג": , "params":[ , ,…, ]}

• במקרה זה, לכל שורה יש חמישה שדות: "מזהה הפעלה", "מצב", "סוג", "מזהה VLAN" ו"יציאת רפלקטור" למשלampלה,

מזהה הפעלה (שדה שם: int32_t)	1 (מזהה של סשן המראה)
מצב (שדה שם: vtss_bool_t)	נָכוֹן (כלומר שהפעלת המראה מופעלת)
סוּג (שדה שם: ספירה {mirror, rMirrorSource, rMirrorDestination}	מקור מראה (זהו המקור להפעלת מראה מרחוק
מזהה VLAN (שדה שם: uint16_t)	200 (ה-Vlan המשמש לשיקוף)
יציאת רפלקטור (שדה שם: vtss_ifindex_t)	Gi 1/1 (היציאה אליה נשלחת תעבורת השיקוף

• ה-myDynamicTable.addRows() ימיר את נתוני ה-JSON לפורמט HTML ויוציא את טבלת ה-HTML.

1. function addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "None", none_interface_text = "NONE";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {fields:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=" + key, key]},
7. {type:"text", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {type:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
9. {type:”text”, params:[val.Type == “mirror” ? "-":
   val.RMirrorVlan, "c"]},
10. {type:"text", params:[val.Type == "rMirrorSource" ?
    val.ReflectorPort : "-" , "c"]}
11. ]};
12. שורה חזרה;
13. }
14. function addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = new Array();
18. // הוסף כותרת טבלה
19. addHeader(table_rows);
20. // הוסף שורה בודדת
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. החזר table_rows;
25. }

Web דף עזרה
עבור ה web עיצוב דף עזרה, תיאור העזרה יכול להתייחס למפרט JSON, שטקסט התיאור יכול להתאים לפלט JSON ועוזר להפחית את התיאורים המיותרים. לְשֶׁעָבַרample כאן נלקח מתצורת ממסר dhcp6.

היפר קישור במקור file
הקצה את העזרה file מיקום במקורו file HTML tag. שם המשתנה הקבוע "help_page" משמש עבור web הקצאת דף עזרה.

2. // קסם דף העזרה
3. var help_page = "/help/help_xxx.htm";

עדכן את תיאור שדה ה-HTML ממפרט JSON

• להשתמש אוֹ HTML tag להכריז על תיאור טבלת HTML וקיבל מזהה ייחודי עבור tag.
• כאשר מסמך ה-HTML מוכן, קרא ל-loadXMLDoc() כדי לקבל את כל מפרט ה-JSON או לקבל את תיאור השיטה הספציפית לפי שם שיטת JSON "jsonRpc.status.introspection.specific.inventory.get".
• ה-procesTableDesc() משמש לעדכון תיאור הטבלה ו-procesUpdate() משמש לעדכון תיאור פרמטר הטבלה.
• ב-procesUpdate(), קרא ל-updateTableParamsDesc() כדי לעדכן את רכיבי ה-JSON שתואמים לשמות הרכיבים הספציפיים.
• עדכן את אוֹ tag HTML פנימי לפי תיאור האלמנט.

2. /* עדכן שדות תיאור HTML */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. לַחֲזוֹר;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // עדכן את תיאור הטבלה
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* עדכן את תיאור הפרמטר של טבלת HTML */
12. function processUpdate(recv_json) {
13. // עדכן את תיאור פרמטר הטבלה
14. var param_names = [
15. {
16. "כינוי": "ממשק",
17. "type": "vtss_ifindex_t",
18. "שם": "VlanInterface",
19. "סיומת": "."
20. },
21. {
22. "כינוי": "ממשק ממסר",
23. "type": "vtss_ifindex_t",
24. "name": "relayVlanInterface",
25. "סיומת": ". המזהה של הממשק המשמש להעברה."
26. },
27. {
28. "כינוי": "יעד ממסר",
29. "type": "mesa_ipv6_t",
30. "name": "relay_destination",
31. "סיומת": ". כתובת ה-IPv6 של שרת ה-DHCPv6 שאליו מבקשים תועבר. ערך ברירת המחדל 'ff05::1:3' מאיש את 'כל שרת DHCP'."
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* קבל מפרט JSON */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

היפר-קישור בשורת התפריטים

• קוד מקור ה-HTML של שורת התפריטים נוצר מתוך file webstax2\vtss_appl\web\ menu_default.cxx.
• ערוך את הפריטים בזה file עבור ה Web היפר קישור לדף.

1. #if defined(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(" Relay,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

פֶּתֶק
שים לב שמספר תו הרווח ב-ITEM ("") המשמש כדי לקבוע את רמת הקבוצה בשורת התפריטים. במקרה הזה, הכל web הדפים נמצאים תחת קבוצת "DHCPv6".

איור 6. דוגמאample של טבלה גלובלית מוגדרת

נִספָּח

טיפוסי web דפים

יש כמה אופייניים web ניתן להשתמש בדפים עבור עיצוב ההתייחסות. אקס אחד נוסףample to be show here הוא התצורה של הפעלת מראה יחיד שנמצאת ב-vtss_appl\mirror\html\mirror.htm.
ה web הדף מספק את התצורה המפורטת עבור הפעלת מראה בודדת. כל הפרמטרים המוגדרים מפורטים.

• לחץ על כפתור "שמור" כדי להחיל את התצורה הנוכחית.
• לחץ על כפתור "איפוס" כדי לאפס את התצורה הנוכחית.
• לחץ על "ביטול" כדי לחזור לסוףview של הפעלות מראה

תצורת מראה&RMirror

הגדרות גלובליות

תצורת מקור VLAN(ים).

תצורת יציאה

איור 7. Example של תצורה מפורטת של הפעלת מראה
הלחצנים "שמור", "איפוס" ו"ביטול" מתווספים על ידי קוד ה-html:

זרימת פקודת JSON
דף זה דורש זרימת פקודות דו-שלבית:

• ראשית הוא צריך לקבל את היכולות של המכשיר בשיטה "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 תאסוף את כל התוצאות, ורק כאשר כולן התקבלו, היא תקרא לפונקציה processUpdate שתבנה את הטבלאות שיוצגו ב- web.

הפניות

1. ויקיפדיה JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

מסמכים / משאבים

Microsemi AN1256 Web יישום מתכנתים [pdfמדריך למשתמש AN1256, AN1256 Web יישום מתכנתים, Web יישום מתכנתים, יישום

הפניות

• מדריך למשתמש