Tervitused, seltsimehed. Ilus minu võitlusserverites
Sõbrad palusid mul luua neile arendustalu ja selle asemel, et lohistada neile oma konkreetseid malle, meenus mulle huvitav projekt
Muidugi vaatasin enne allikatesse süvenemist, kust Chrome genereeritud zip-arhiivi koos konfiguratsioonidega tõmbab ja seal ootas mind ees “blob:”-ga algav aadress, oih. Juba on selgunud, et teenus ei genereeri teel midagi, tegelikult teeb seda kõike js. Tõepoolest, zip-arhiivi loovad klient, brauser ja JavaScript ise. Need. ilu on selles, et projekt
Pärast projekti alustamist hakkasin mõtlema, millised on minu võimalused. Ülesande tegi keeruliseks see, et ma ei tahtnud kõrvale kalduda tingimusest, et projekt peaks jääma puhtaks front-end’iks, ilma igasuguse back-endita. Lihtsaim lahendus oleks muidugi tõmmata nodejs üles ja sundida seda otselinkide abil konfiguratsioonidega arhiivi genereerima.
Tegelikult ei olnud palju valikuid. Täpsemalt tuli meelde ainult üks. Peame seadistama konfiguratsioonid ja hankima lingi, mille saame kopeerida serverikonsooli, et saada ZIP-arhiiv.
Mitmed tekstifailid saadud ZIP-arhiivis kaalusid üsna vähe, sõna otseses mõttes paar kilobaiti. Ilmselge lahendus oli saada genereeritud ZIP-arhiivist base64 string ja visata see puhvrisse, olles samal ajal serveris koos käsuga konsoolis
echo 'base64string' | base64 --decode > config.zip
saame luua sama zip-faili.
Projekti ressurssides näeme meetodit ZIP-arhiivi loomiseks:
$scope.downloadZip = function() {
var zip = new JSZip();
var sourceCodes = $window.document.querySelectorAll('main .file .code.source');
for (var i = 0; i < sourceCodes.length; i++) {
var sourceCode = sourceCodes[i];
var name = sourceCode.dataset.filename;
var content = sourceCode.children[0].children[0].innerText;
if (!$scope.isSymlink() && name.match(/^sites-available//)) {
name = name.replace(/^sites-available//, 'sites-enabled/');
}
zip.file(name, content);
if (name.match(/^sites-available//)) {
zip.file(name.replace(/^sites-available//, 'sites-enabled/'), '../' + name, {
unixPermissions: parseInt('120755', 8),
});
}
}
zip.generateAsync({
type: 'blob',
platform: 'UNIX',
}).then(function(content) {
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
});
gtag('event', $scope.getDomains().join(','), {
event_category: 'download_zip',
});
};
raamatukogu kasutades on kõik üsna lihtne
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
kus sisu on ZIP-arhiivi tulemuseks olev blob-objekt.
Ok, polnud vaja teha muud, kui lisada sinna kõrvale veel üks nupp ja sellele vajutades ei salvestaks ma tekkinud zip-arhiivi brauserisse, vaid saan sealt base64 koodi. Pärast natuke askeldamist sain ühe downloadZipi asemel kaks meetodit:
$scope.downloadZip = function() {
generateZip(function (content) {
saveAs(content, 'nginxconfig.io-' + $scope.getDomains().join(',') + '.zip');
});
gtag('event', $scope.getDomains().join(','), {
event_category: 'download_zip',
});
};
$scope.downloadBase64 = function() {
generateZip(function (content) {
var reader = new FileReader();
reader.readAsDataURL(content);
reader.onloadend = function() {
var base64 = reader.result.replace(/^data:.+;base64,/, '');
// в переменной base64 как раз нужный мне zip архив в виде base64 строки
}
});
gtag('event', $scope.getDomains().join(','), {
event_category: 'download_base64',
});
};
Nagu olete ehk märganud, viisin zip-arhiivi genereerimise üle privaatsele genereerimismeetodile jne. See on AngularJS ja autor ise jääb tagasihelistamiste juurde ega rakendanud seda lubaduste kaudu. downloadZip tegi siiski väljundina saveAs'i, samas kui downloadBase64 tegi midagi veidi teistsugust. Loome FileReaderi objekti, mis jõudis meieni html5-s ja on juba päris
position: absolute;
z-index: -1;
opacity: 0;
mis võimaldas mul nii elemendi vaate eest peita kui ka tegelikult lehele jätta. Voila, ülesanne sai täidetud, kui oma nupule vajutasin, pandi puhvrisse selline rida:
echo 'base64string' | base64 --decode > config.zip
mille kleepisin lihtsalt serveri konsooli ja sain kohe zip-arhiivi kõigi seadistustega.
Ja loomulikult saatsin autorile tõmbamissoovi, sest... projekt on aktiivne ja elav, soovin näha autori uuendusi ja oma nuppu) Huvilistele siin
Head arengut kõigile)
Allikas: www.habr.com