Počítadlo návštěv webových stránek může být zásadním způsobem, jak analyzovat návštěvnost, se kterou se vaše webové stránky setkávají.
ke zdrojovému kódu na githubu můžete přistupovat zde
i když můžete přistupovat ke statistikám svých webových stránek pomocí vestavěných funkcí a údajů, které vám poskytuje váš poskytovatel služeb, je stále dobrým zvykem ukázat svým zákazníkům objem provozu, který dosáhne na vaše webové stránky.
můžete zobrazit počet návštěv každé jednotlivé stránky na vašem webu, ale já to zjednoduším a implementuji počítadlo návštěv pouze pro indexovou stránku a zmíním se, jak rozšířit toto počítadlo na další stránky.
tento návod předpokládejme, že máte na svém počítači nainstalovaný Node, MongoDb, v opačném případě stačí googlovat a nainstalovat je na váš počítač.
Nejprve si řekněme něco o technologiích, které budeme v tomto projektu používat. musíme použít:
1- Express-Generator:server, který dělá vaši logiku.
2-MongoDb:pro ukládání dat.
3-Mongoose:pro interakci mezi serverem a databází.
4-EJS Embedded JavaScript templates:pro načítání dat z vaší databáze a jejich zobrazení ve vašich pohledech.
1- instalace expresního generátoru:
Express Generator je rychlý způsob, jak postavit vaši aplikaci a postavit její kostru.
nainstalujeme expresní generátor pomocí tohoto příkazu:
tento příkaz nainstaluje generátor globálně, takže jej můžete použít v jakékoli složce. nyní vytvořte novou složku a nazvěte ji, jak chcete, a poté ji otevřete v terminálu a zadejte „express“ a poté zadejte „npm install“, takže všechny výchozí knihovny se nainstalují automaticky, a pak máte svou aplikaci lešení, jak je znázorněno na fotografii:
2- Instalace mangoose:
ve vašem terminálu stačí napsat „npm install mongoose“ a všimnete si, že mongoose byly přidány do vašeho package.json
3-Připojení Mongoose k vaší databázi:
nejprve musíme vytvořit nový model mongoose, což je forma reprezentace kolekce MongoDb na vašem kódu.
otevřete nový terminál a napište „mongod“ → tento příkaz zapne váš MongoDb server a musíte jej udržovat v chodu, zatímco pracujete, dostanete spoustu textu, jak je znázorněno na fotografii :
nyní ponechte terminál spuštěný a přejděte ke svému kódu, nechte nás vytvořit nový adresář a nazvěme jej modely, poté vytvořte nový soubor a nazvěte jej „visits.js“ a zadejte do něj následující kód:
v tomto souboru jsme požadovali mongoose, abychom mohli přistupovat k funkčnosti této knihovny a jednou z nich je Schéma, které definuje strukturu nové kolekce, kterou vytvoříme, kterou lze zpřístupnit voláním modelu v našem kódu. pak exportujeme visits.js
nyní otevřete nový terminál a zadejte „mongo“, zadejte „use confusion“ → tento příkaz vytvoří novou databázi, pokud neexistuje, a poté ji použije v shellu terminálu .. nyní zadejte ..
poté vložte nový dokument do kolekcí „návštěv“ a zobrazte je pomocí těchto příkazů:
uložte si toto id, protože jej budeme používat později. Pak vytvoříme nový směr v našem adresáři aplikace s názvem src/visitsUp.js a poté vytvoříme soubor s názvem visitsUp.js a vložíme do něj následující kód:
v tomto souboru jsme definovali funkci nazvanou sitevisitsUp, která bude používat funkci mongoose findByIdAndUpdate k aktualizaci vlastnosti počítadla návštěv v naší databázi. použili jsme vlastnost _id dokumentu, který jsme vytvořili. a použijeme výraz mongoose $inc ke zvýšení čítače o jednu.
nyní přejděte na routes/index.js a aktualizujte jej následujícím kódem:
v tomto kódu jsme nazvali funkci siteViewsUp pokaždé, když server čelí požadavku get. pak najdeme tento dokument a předáme jeho vlastnost counter funkci render() → tímto způsobem můžeme získat tuto hodnotu uvnitř našeho index.ejs, která bude vykreslena, když uděláme požadavek get na hlavní cestu (server/).
nyní pojďme aktualizovat náš soubor app.js:
nejprve musíme připojit naši aplikaci k serveru mongoDb pomocí funkce mongoose.connect(), která bere jako argument adresu URL databáze.
pak změníme modul pohledů, abychom mohli renderovat soubory ejs, což bude naše další téma:
4- vykreslování souborů EJS:
EJS je jednoduchý šablonovací jazyk, který nám umožňuje generovat HTML značky pomocí prostého JavaScriptu. takže je to prostě JavaScript.
v terminálu zadejte „npm install ejs“, takže jej můžete použít.
pojďme do viewsfolder a vytvořte nový soubor views/index.ejs a napište následující kód:
soubory ejs fungují tak, že data předáváte jako objekt uvnitř vaší metody render() a pak k těmto datům můžete přistupovat zadáním kódu js do tagu <%=%>, zatímco zbytek dokumentu je palin html.
nyní zadejte „npm start“ pro spuštění serveru a poté přejděte na http://localhost:3000/ najdete něco jako toto:
při každém obnovení stránky se počítadlo automaticky zvýší.
Nyní jste implementovali počítadlo návštěv pro indexovou stránku , abyste to mohli rozšířit na další stránky, máte mnoho nápadů, jedním z nich je přidat další pole do vaší databáze, abyste mohli pro každou stránku použít jiné počítadlo, a proto jsem implementoval siteViewsUp v samostatném souboru, abyste jej mohli v případě potřeby importovat.
V budoucnu napíšu další příspěvek pro různé čítače.