[JAVA] Modale Darstellung von Webservice-Seitenübergängen [Development Memo]
Einführung
Als ich Tobidemo als Schlüssel zur Funktion gemacht habe Ich notiere mir, wie der Bearbeitungsbildschirm implementiert wird, der den Bildschirmübergang der Seite erstellt.
Einführung
Um den Seitenübergang des Webdienstes auszudrücken, werden die Screenshots modal verbunden und angezeigt. Dieser Bildschirm kann alle über die GUI erstellt werden.
Gesamtdurchfluss
- Platzieren Sie ein Popup
- Klicken Sie auf die Schaltfläche Bearbeiten des Popup-Symbols
- Ein neues HTML-Element wird generiert. Anzeige: keine, mit Ausnahme der Anzeigehierarchie
- Sagen Sie mir die Schaltfläche Speichern und speichern Sie mit Ajax.
Zuerst war ich besorgt, weil ich mir keinen Weg vorstellen konnte, es zu realisieren. Später gesehen ist es ziemlich einfach! Die wichtigsten Punkte werden im Folgenden vorgestellt.
Hinweis zum Zeitpunkt der Erfindung:
Bildschirmdesign bearbeiten
Fügen Sie nach Bedarf HTML-Elemente hinzu, um Seitenübergänge zu bearbeiten Ansonsten stelle ich display: none ein, damit ich die Interaktion mit der Serverseite mit minimalem Stress bearbeiten kann. Das Folgende sind die Elemente, die tatsächlich generiert werden.
Anfangs hatte ich diese Idee nicht und dachte an eine Implementierung, die vorhandene Daten asynchron speichert, wenn die Anzahl der Seiten zunimmt. Für jeden Seitenübergang wird eine Anforderung generiert. Wenn Sie zur vorherigen Hierarchie zurückkehren und erneut bearbeiten, Ich muss Informationen aus der Datenbank entnehmen und neu zeichnen, und die Implementierung dauert einige Zeit. Daher denke ich, dass die frühere Implementierung auch jetzt noch die richtige Antwort war.
python
//Erstellen Sie das zu öffnende Element
$('.edit_popup_target')
.on(
'click',
function() {
var _this = $('.flag_now_edit');
var page_level_num = TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1];
var page_level = page_level_num.slice(0, 1);
var next_page_level = Number(page_level) + 1;
var page_num = page_level_num.slice(2, 3);
var next_page_num = $('[data-dropzone^="'
+ next_page_level + '"]').length;
if ($(_this).attr("data-popuptarget") == undefined) {
if (next_page_num != 0) {
next_page_num += 1;
} else {
next_page_num = 1;
}
var this_dropzone_id = page_level + "." + page_num;
var next_dropzone_id = next_page_level + "."
+ next_page_num;
$('.mapEreaWrapper')
.append(
'<div class="maperea" data-dropzone="'
+ next_dropzone_id
+ '"><img src ="./../../img/default-none.png "></div>');
$(_this).attr("data-popuptarget", next_dropzone_id);
Hierarchisches Managementdesign
Jede Seite enthält die folgenden Informationen.
- Seitennummer --Übergangszielseitenzahl --Artikelinformationen (erläutern Sie den Bildschirm, z. B. Memos)
- Hintergrundbild
Die Seitenzahl beginnt bei 1.1 und steigt in derselben Hierarchie auf 1.2 und 1.3. In der neuen Hierarchie wird die Zahl am Anfang wie 2.1 nach oben verschoben, gefolgt von 2.1,2,2. Elemente auf der Seite werden nach der Seitenzahl fortlaufend nummeriert, z. B. 2.1.1, 2.1.2 ,.
Basierend auf dieser Kontrollnummer werden die gespeicherten Daten neu gezeichnet.
Implementierung der Zurück-Taste
Da es sich um einen Bearbeitungsbildschirm handelt, müssen Sie zum vorherigen Bildschirm zurückkehren!
Durch Drehen des Kopfes durch Schreiben der Seitenzahl in das Array beim Verschieben von Seiten Es verwaltet den Seitenübergangsverlauf.
// ------------Globale Variablen--------------
TRANSITION_MANAGER = [ '1.1' ]; //Aktueller Standort ÜBERGANG_MANAGER[TRANSITION_MANAGER.length
// - 1]
// ---------------------------------------
Wenn Sie beispielsweise eine Seite zurückgeben, werden die Daten vom Seitenverwaltungsarray (TRANSITION_MANAGER) wie unten gezeigt erfasst.
//Gehe eine Seite zurück
$('.backToBeforePage')
.on(
'click',
function() {
if (TRANSITION_MANAGER.length != 1) {
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1]
+ '"]').hide();
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 2]
+ '"]').show();
// ACTIVE_PAGE_NUMBER =
// TRANSITION_MANAGER[TRANSITION_MANAGER.length-2];
TRANSITION_MANAGER.pop();
changePageTransitionView();
}
;
return false;
});
Datenspeicher
- Seitennummer --Übergangszielseitenzahl --Artikelinformationen (erläutern Sie den Bildschirm, z. B. Memos)
- Hintergrundbild
Usw. werden sofort mit Ajax gespeichert. Ich glaube, ich konnte es ordentlich senden, als ich es verschachtelt habe.
Wenn Sie eine Bean vorbereiten, die Json-Daten entspricht, erhält Spring Boot diese gut. Ich wusste nicht, wie ich die verschachtelte Struktur ausdrücken sollte, deshalb wollte ich nur ein paar Elemente senden, wie unten gezeigt. Alle von Bean zubereiteten Artikel werden vorbereitet. Mein hinteres Haar ist gezogen, aber diesmal habe ich aufgegeben, weil es eine Problemumgehung gab.
Ich wollte auch einen Prozess schreiben, um die gespeicherten Daten zu aktualisieren. Wenn im Frühjahrsstart die im Schlüssel auf der Tabellenseite der Datenbank angegebenen Informationen übereinstimmen Da es als dieselben Daten aktualisiert wird, konnte ich es unbeabsichtigt implementieren.
item_stat_array.push({
id : linkid + "_" + dropzone,
type : "drop-zone", // common
itemid : "0", // common
top : "0", // common
left : "0", // common
color : "0", // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : dropzone, // dropzpne
img : img
// dropzone
Es ist etwas lang, aber der vollständige Text unten.
$(document)
.on(
'submit',
".save_to_server",
function(e) {
e.preventDefault();
$(".maperea").show(); // disply:keiner ist top,Ich kann nicht verlassen werden
var demoname = $('.demo-name-val').val();
if (demoname === undefined || demoname === null | demoname.replace(/[\t\s ]/g, '').length < 1){
demoname = "-";
}
var item_stat_array = [];
var maperea_array = $('.maperea');
var maperea_leng = $('.maperea').length;
$(maperea_array[i]).attr('data-dropzone');
var linkid = $('#linkid').text();
var xsrf = $.cookie('XSRF-TOKEN');
for (var i = 0; i < maperea_leng; i++) {
var dropzone = $(maperea_array[i]).attr(
'data-dropzone');
var img = $(maperea_array[i]).attr('data-img')
if (img === undefined || img === null) {
img = "0";
}
// var id = linkid + "_" +dropzone; //Primärschlüssel beim Speichern der Datenbank
item_stat_array.push({
id : linkid + "_" + dropzone,
type : "drop-zone", // common
itemid : "0", // common
top : "0", // common
left : "0", // common
color : "0", // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : dropzone, // dropzpne
img : img
// dropzone
});
}
var targetArray = $('.dropped');
var item_num = targetArray.length;
item_num - 1;
for (var i = 0; i < item_num; i++) {
var target = targetArray[i];
if (target.className.indexOf('_tooltip') != -1) {
var itemid = $(target).attr("data-item");
var top = $(target).position().top;
var left = $(target).position().left;
var color = $(target).attr(
"data-tooltipIconColor");
var size = $(target).attr(
"data-tooltipIconSize");
var title = $(target).attr("title");
// var id = linkid + "_" + itemid;
// //Primärschlüssel beim Speichern der Datenbank
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_tooltip", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : size, // popup,tooltip
title : title, // tooltip
target : "0", // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
} else if (target.className.indexOf('_popup') != -1) {
var top = $(target).position().top;
var left = $(target).position().left;
var itemid = $(target).attr("data-item");
var color = $(target).attr("data-popupColor");
var size = $(target).attr("data-popupSize");
var target = $(target).attr("data-popuptarget");
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_popup", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : size, // popup,tooltip
title : "0", // tooltip
target : target, // popup
width : "0", // sticky
height : "0", // sticky
text : "0", // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
} else if (target.className.indexOf('_sticky') != -1) {
var top = $(target).position().top;
var left = $(target).position().left;
var width = $(target).width();
var height = $(target).height();
var itemid = $(target).attr("data-item");
var color = $(target).attr("data-stickycolor");
var text = $(target).children(".textsticky")
.val();
item_stat_array.push({
id : linkid + "_" + itemid,
type : "_sticky", // common
itemid : itemid, // common
top : top, // common
left : left, // common
color : color, // common
size : "0", // popup,tooltip
title : "0", // tooltip
target : "0", // popup
width : width, // sticky
height : height, // sticky
text : text, // sticky
dropzone : "0", // dropzpne
img : img
// dropzone
});
}
}
$(".maperea").hide();
$(
'[data-dropzone="'
+ TRANSITION_MANAGER[TRANSITION_MANAGER.length - 1]
+ '"]').show();
if (window.FormData) {
var ajaxUrl = "/edit/uploaditemstat" + "?name=" + demoname ;
$
.ajax(
{
type : "POST", //HTTP-Kommunikationstyp
url : ajaxUrl, //URL, an die die Anfrage gesendet werden soll
dataType : "json", //Art der vom Server zurückgegebenen Daten
data : JSON
.stringify(item_stat_array),
contentType : 'application/json; charset=utf-8',
"beforeSend": function(xhr, setting) {
$(".btn").attr('disabled', true);
$(".item-uploading-animation").removeClass("nodispy");
},
headers : {
'X-XSRF-TOKEN' : xsrf
},
})
.done(
function(data) { //Verarbeitung bei erfolgreicher Ajax-Kommunikation
var yourLink = "/show?id=";
var yourLinkID = $("#linkid")
.text();
var demoname = $(".demo-name-val").val();
if(demoname==null ||demoname== "") {demoname = "Ohne Titel Tobi Demo"}
$(".yourLink").attr("href",
yourLink + yourLinkID);
$(".yourLink").text(
demoname);
$(".yourLink").attr('target',
'_blank');
$('.upload-item-done').slideDown(1500);
$(".btn").attr('disabled', false);
$(".item-uploading-animation").addClass("nodispy");
}).fail(
function(XMLHttpRequest,
textStatus, errorThrown) { //Verarbeitung, wenn die Ajax-Kommunikation fehlschlägt
$(".btn").attr('disabled', false);
$(".item-uploading-animation").addClass("nodispy");
$('.upload-item-failed').slideDown(1500);
return false;
});
} else {
alert("Es ist ein Browser, der das Hochladen nicht unterstützt.");
}
});
Zusammenfassung
das ist alles!
Zusätzlich zu dem, was ich hier geschrieben habe, habe ich auch Details wie Objektkoordinaten und Bildschirmzeichnungen hinzugefügt. Es dauerte ein paar Wochen. Zuerst dachte ich jedoch, es wäre unmöglich, aber ich kann es schaffen!