Microsemi AN1256 Web Οδηγός χρήσης εφαρμογής προγραμματιστών

Περιεχόμενα κρύβω

1 Microsemi AN1256 Web Εφαρμογή προγραμματιστών

2 Εισαγωγή

3 Ροή πρόσβασης δεδομένων JSON

4 Web σκελετός

5 Οδηγίες για JSON Web σχεδιασμός σελίδας

5.1 Εκδίδω Web σελίδα

6 Παράρτημα

6.1 Διαμόρφωση Mirror&RMirror

7 Αναφορές

8 Έγγραφα / Πόροι

8.1 Αναφορές

9 Σχετικές αναρτήσεις

Microsemi AN1256 Web Εφαρμογή προγραμματιστών

Εισαγωγή

Το JSON (JavaScript Object Notation) είναι ένα ανοιχτό πρότυπο file μορφή που χρησιμοποιεί κείμενο αναγνώσιμο από τον άνθρωπο για την ανταλλαγή δεδομένων. Είναι μια κοινή μορφή δεδομένων που χρησιμοποιείται για ασύγχρονη επικοινωνία προγράμματος περιήγησης/διακομιστή.
Για το νέο web σχεδιασμός σελίδας, η μορφή JSON μπορεί να αντικαταστήσει το αρχικό στυλ AJAX. Σε σύγκριση με το AJAX, η χρήση JSON κάνει το Web υλοποίηση ευκολότερη και απλούστερη. Ο προγραμματιστής χρειάζεται μόνο να επικεντρωθεί σε web σχέδιο σελίδας και το Web Η υλοποίηση του χειριστή μπορεί να παραλειφθεί, καθώς η μέθοδος πρόσβασης JSON υποστηρίζεται ήδη σε καθένα από αυτά WebΕνότητες λογισμικού StaX.
Αυτό το έγγραφο αναφέρει τον οδηγό προγραμματιστών για τον μηχανικό λογισμικού που χρειάζεται να το αναπτύξει Web σελίδα μέσω JSON. Οι διαδικασίες λεπτομέρειας και π.χamples περιλαμβάνονται επίσης στις επόμενες ενότητες.

Ροή πρόσβασης δεδομένων 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 σελίδα που βασίζεται σε βιβλιοθήκες JavaScript MSCC. Χρησιμοποιούμε την καθολική ρύθμιση παραμέτρων Mirror web σελίδα ως το πρώηνampεδώ. Η ασύγχρονη επικοινωνία βασίζεται στη μέθοδο πρόσβασης HTTP JSON και όλες οι καθολικές διαμορφωμένες παράμετροι παρατίθενται σε έναν δυναμικό πίνακα HTML.
Ο web Η διάταξη της σελίδας παρατίθεται παρακάτω και ο πλήρης πηγαίος κώδικας βρίσκεται κάτω από τον κατάλογο δέντρου προέλευσης: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Για να γίνω πιο τυπικός web παραπομπή σελίδων, δείτε την ενότητα του παραρτήματος.

Πίνακας διαμόρφωσης Mirror& RMMirror

Εικόνα 5. Example του καθολικού διαμορφωμένου πίνακα

Εκδίδω Web σελίδα

Επικεφαλίδα HTML
Συμπεριλάβετε τις βιβλιοθήκες JS που χρειάζονται στο HTML tag.

Αρχικοποιήστε τον πόρο του δυναμικού πίνακα

Όταν το έγγραφο HTML είναι έτοιμο, καλέστε το DynamicTable() για να αρχικοποιήσετε τον πόρο του δυναμικού πίνακα.

Το DynamicTable() χρησιμοποιείται για τη δημιουργία του δυναμικού πίνακα μετά τη λήψη των δεδομένων JSON.
Στη συνέχεια, θα καλέσει το requestUpdate για να ξεκινήσει η ροή εντολών JSON.

window.addEvent('domready', function() {
// Δημιουργία φόρμας με σώμα πίνακα για λήψη/μετάδοση δεδομένων JSON
myDynamicTable = νέο DynamicTable("myTableContent", "config","plusRowCtrlBar");
4
requestUpdate();
});

Αίτημα/Απάντηση δεδομένων JSON

Όταν το έγγραφο HTML είναι έτοιμο, χρησιμοποιήστε requestJsonDoc() για να στείλετε το αίτημα JSON "mirror.config.session.get" για να λάβετε πληροφορίες σχετικά με τις διαμορφωμένες περιόδους λειτουργίας.
Αφού ληφθούν τα δεδομένα JSON για το "mirror.capabilities.get", θα υποβληθεί σε επεξεργασία η συνάρτηση επανάκλησης 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("config", recv_json);
// Προσθήκη σειρών πίνακα
var table_rows = addRows(recv_json);

myDynamicTable.addRows(σειρές_πίνακα);
// Ενημερώστε αυτόν τον δυναμικό πίνακα

myDynamicTable.update();
// Χρονοδιακόπτης ανανέωσης

var autorrefresh = document.getElementById("autorefresh");
if (autorefresh && autorrefresh.checked) {
if (timerID) {

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

}
}

Προσθήκη σειρών πίνακα

Στη συνάρτηση addRows(), χρησιμοποιούμε τη μορφή JSON για να συμπληρώσουμε κάθε καθολική διαμορφωμένη παράμετρο στη σειρά του πίνακα.
Όλα τα πεδία HTML παρατίθενται στον πίνακα JSON ("table_rows") και η σύνταξη του πεδίου πίνακα είναι παρακάτω.

Σύνταξη:
σειρές_πίνακα:[ , ,… ] : { , ,… }
: {"type": , “params”:[ , ,…, ]}

Σε αυτήν την περίπτωση, κάθε σειρά έχει πέντε πεδία: "Session ID", "Mode", "Type", "VLAN ID" και "Reflector Port" Για π.χ.ample,

Αναγνωριστικό συνεδρίας (Πεδίο ονόματος: int32_t)	1 (Αναγνωριστικό της συνεδρίας καθρέφτη)
Τρόπος (Πεδίο ονόματος: vtss_bool_t)	αληθής (Σημαίνει ότι η συνεδρία καθρέφτη είναι ενεργοποιημένη)
Τύπος (Πεδίο ονόματος: απαρίθμηση {mirror, rMirrorSource, rMirrorDestination}	Πηγή RMirror (αυτή είναι η πηγή μιας απομακρυσμένης συνεδρίας καθρέφτη
Αναγνωριστικό VLAN (Πεδίο ονόματος: uint16_t)	200 (το vlan που χρησιμοποιείται για mirroring)
Reflector Port (Πεδίο ονόματος: vtss_ifindex_t)	Gi 1/1 (Η θύρα στην οποία αποστέλλεται η κατοπτρισμένη κίνηση

Το myDynamicTable.addRows() θα μετατρέψει τα δεδομένα JSON σε μορφή HTML και θα εξάγει τον πίνακα HTML.

συνάρτηση addRow (κλειδί, val)

{
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 row = {πεδία:[
{type:”link”, παράμετροι:[“cr”, “mirror.htm?session_id=” + κλειδί, κλειδί]},
{type:”text”, παράμετροι:[oTMode[oVMode.indexOf(val.Mode)], “c”]},

{type:”text”, παράμετροι:[oTType[oVType.indexOf(val.Type)], “c”]},
{type:”text”, params:[val.Type == “mirror” ? "-":
val.RMirrorVlan, “c”]},
{type:”text”, params:[val.Type == “rMirrorSource” ?
val.ReflectorPort : "-" , "c"]}

]};
σειρά επιστροφής?
}

συνάρτηση addRows(recv_json)
{
var row, vala_colspan = 7;

var table_rows = new Array();
// Προσθήκη κεφαλίδας πίνακα
addHeader(σειρές_πίνακα);

// Προσθήκη μονής σειράς
Object.each(recv_json, function(record) {
table_rows.push(addRow(record.key, record.val));

});
επιστροφή πίνακα_γραμμών;
}

Web σελίδα βοήθειας
Για το web Σχεδιασμός σελίδας βοήθειας, η περιγραφή βοήθειας μπορεί να αναφέρεται στην προδιαγραφή JSON, ότι το κείμενο περιγραφής μπορεί να συνάδει με την έξοδο JSON και συμβάλλει στη μείωση των περιττών περιγραφών. ΠρώηνampΤο le εδώ λαμβάνεται από τη διαμόρφωση ρελέ dhcp6.

Υπερ-σύνδεσμος στην πηγή file
Αναθέστε τη βοήθεια file θέση στην πηγή του file HTML tag. Το όνομα σταθερής μεταβλητής "help_page" χρησιμοποιείται για το web ανάθεση σελίδας βοήθειας.

// Help page magic
var help_page = "/help/help_xxx.htm";

Ενημερώστε την περιγραφή πεδίου HTML από την προδιαγραφή JSON

Χρήση ή 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, "groups", "dhcp6_relay.config.vlan").περιγραφή;

}
/* Ενημέρωση περιγραφής παραμέτρου πίνακα HTML */
function processUpdate(recv_json) {

// Ενημέρωση περιγραφής παραμέτρων πίνακα
var param_names = [
{

"ψευδώνυμο": "Διεπαφή",
"type": "vtss_ifindex_t",
"όνομα": "vlanInterface",

"κατάληξη": "."
},
{

"Ψευδώνυμο": "Διασύνδεση Ρελέ",
"type": "vtss_ifindex_t",
"όνομα": "RelayVlanInterface",

"κατάληξη": ". Το αναγνωριστικό της διεπαφής που χρησιμοποιείται για την αναμετάδοση."
},
{

"Ψευδώνυμο": "Προορισμός Ρελέ",
"type": "mesa_ipv6_t",
"name": "relay_destination",

"κατάληξη": ". Η διεύθυνση IPv6 του διακομιστή DHCPv6 στον οποίο ζητά θα αναμεταδοθεί. Η προεπιλεγμένη τιμή 'ff05::1:3' σημαίνει "οποιονδήποτε διακομιστή DHCP".
}
];

updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
}
/* Λήψη προδιαγραφών JSON */

window.addEvent('domready', function () {
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("Relay,dhcp6_relay.htm");
#endif //VTSS_SW_OPTION_DHCP6_RELAY

ΣΗΜΕΙΩΜΑ
Σημειώστε ότι ο αριθμός των χαρακτήρων διαστήματος στο ITEM(“”), που χρησιμοποιείται για να αποφασίσει το επίπεδο ομάδας στη γραμμή μενού. Στην προκειμένη περίπτωση όλα web Οι σελίδες βρίσκονται στην ομάδα "DHCPv6".

Εικόνα 6. Πρample του καθολικού διαμορφωμένου πίνακα

Παράρτημα

Τυπικός web σελίδες

Υπάρχουν αρκετά τυπικά web σελίδες μπορούν να χρησιμοποιηθούν για το σχέδιο αναφοράς. Ένας επιπλέον πampΓια να εμφανιστεί εδώ είναι η διαμόρφωση μιας μεμονωμένης συνεδρίας καθρέφτη που βρίσκεται στο vtss_appl\mirror\html\mirror.htm.
Ο web σελίδα παρέχει τη λεπτομερή διαμόρφωση για μια μεμονωμένη συνεδρία καθρέφτη. Όλες οι διαμορφωμένες παράμετροι παρατίθενται.

Κάντε κλικ στο κουμπί "Αποθήκευση" για να εφαρμόσετε την τρέχουσα διαμόρφωση.
Κάντε κλικ στο κουμπί "Επαναφορά" για επαναφορά της τρέχουσας διαμόρφωσης.
Κάντε κλικ στο «Ακύρωση» για να επιστρέψετε στο πάνω μέροςview των συνεδριών καθρέφτη

Διαμόρφωση Mirror&RMirror

Καθολικές ρυθμίσεις

Διαμόρφωση προέλευσης VLAN

Διαμόρφωση θύρας

Εικόνα 7. ExampΛεπτομερής διαμόρφωση της συνεδρίας καθρέφτη
Τα κουμπιά "Αποθήκευση", "Επαναφορά" και "Ακύρωση" προστίθενται από τον κώδικα 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" και τα αποτελέσματα αυτών των κλήσεων διαμορφώνονται ώστε να αντιμετωπίζονται από τη συνάρτηση προετοιμασία Update.
Η συνάρτηση προετοιμασία Update θα συλλέξει όλα τα αποτελέσματα και μόνο όταν ληφθούν όλα θα καλέσει τη συνάρτηση processUpdate που θα δημιουργήσει τους πίνακες που θα εμφανίζονται στο web.