Количество посетителей может быть важным способом анализа трафика, с которым сталкивается ваш веб-сайт.

Хотя вы можете получить доступ к статистике своего веб-сайта с помощью встроенных функций и данных, которые предоставляет вам поставщик услуг, по-прежнему рекомендуется показывать клиентам объем трафика, который достигает ваш веб-сайт.

вы можете получить доступ к репозиторию кода на GitHub здесь

Вы можете показать количество посещений каждой отдельной страницы своего веб-сайта, но я собираюсь упростить задачу и реализовать счетчик посещений только для страницы индекса, и я собираюсь объяснить, как расширить этот счетчик на другие страницы.

В этом руководстве предполагается, что на вашем компьютере установлен Node, MongoDB, в противном случае просто погуглите и установите их на свой компьютер.

Прежде всего, давайте немного поговорим о технологиях, которые мы собираемся использовать в этом проекте. нам нужно использовать:

1- Express: серверная библиотека JS для создания вашей логики.

2- Express-Generator: инструмент для построения вашего приложения.

3-MongoDb: для хранения данных.

4-Mongoose: для взаимодействия между сервером и базой данных.

5-EJS Встроенный шаблон JavaScript: для извлечения данных из вашей базы данных и отображения их в ваших представлениях.

1- Установка Экспресс и Экспресс-генератора:

Express Generator - это быстрый способ выстроить ваше приложение и построить его каркас.

мы собираемся установить экспресс-генератор с помощью этой команды:

Эта команда установит генератор глобально, чтобы вы могли использовать его в любой папке. Теперь создайте новую папку и назовите ее как хотите, затем откройте ее в терминале и введите «экспресс». После этого введите «npm install», чтобы все библиотеки по умолчанию были установлены автоматически. Здесь у вас есть скаффолд для вашего приложения, как показано на фотографии:

2- Установка мангуста:

В вашем терминале просто введите «npm install mongoose», и вы заметите, что mongoose был добавлен в ваш package.json.

3-Подключение Mongoose к вашей базе данных:

Во-первых, нам нужно создать новую модель мангуста, которая представляет собой способ представления коллекции MongoDb в вашем коде.
Откройте новый терминал и введите «mongod» → эта команда включит ваш сервер MongoDb, и вы должны держите его включенным, пока вы работаете, вы получите длинный текст на экране, как показано на фотографии:

Теперь оставьте этот терминал включенным и перейдите к своему коду, позвольте нам создать новый каталог и называть его моделями, затем создайте новый файл и назовите его «visit.js» и введите в него следующий код:

В этом файле нам потребовался мангуст, чтобы мы могли получить доступ к функциям этой библиотеки, и одной из его функций является схема, которая определяет структуру новой коллекции, которую мы создадим, к которой можно получить доступ, вызвав модель в нашем коде. затем мы экспортируем visit.js

Теперь откройте новый терминал и введите «mongo», затем введите «использовать путаницу» → эта команда создаст новую базу данных, если она еще не существует, а затем будет использовать ее в оболочке терминала. Теперь введите ..

Затем вставьте новый документ в коллекцию «посещения» и покажите его, используя следующие команды:

сохраните этот документ _id, потому что мы собираемся использовать его позже. Затем мы собираемся создать новый каталог внутри нашего каталога приложений с именем src /. После этого мы создадим файл с именем visitUp.js и вставим в него следующий код:

В этом файле мы определили функцию sitevisitsUp, которая будет использовать функцию mongoose findByIdAndUpdate для обновления свойства счетчика посещений в нашей базе данных. Мы использовали свойство _id документа, который мы создали, и мы используем выражение мангуста $ inc, чтобы увеличить счетчик на единицу.

Теперь перейдем к routes / index.js и обновим его следующим кодом:

В этом коде функция siteViewsUp будет вызываться каждый раз, когда сервер сталкивается с запросом GET. затем мы найдем этот документ и передадим его свойство counter в функцию render () → таким образом мы сможем получить доступ к этому значению внутри нашего Index.ejs, которое будет отображаться, когда мы делаем запрос GET к основному маршруту (server /).

Теперь давайте обновим наш файл app.js:

Во-первых, нам нужно подключить наше приложение к серверу MongoDB с помощью функции mongoose.connect (), которая принимает URL-адрес базы данных в качестве аргумента.

Затем мы собираемся изменить движок представлений, чтобы мы могли отображать файлы ejs, что будет нашей следующей темой:

4- Визуализация файлов EJS:

EJS - это простой язык шаблонов, который позволяет нам создавать разметку HTML с помощью простого JavaScript. Итак, это простой JavaScript.

В терминале введите «npm install ejs», чтобы вы могли его использовать.

Давайте перейдем в папку views, создадим новый файл views / index.ejs и введем следующий код:

Файлы ejs работают в обход данных как объекта внутри вашего метода render (), тогда вы можете получить доступ к этим данным, набрав код js внутри тега ‹% =%›, в то время как остальная часть документа представляет собой простой HTML.

Теперь введите npm start, чтобы запустить сервер, затем перейдите по адресу http: // localhost: 3000 /. Тогда вы найдете что-то вроде этого:

Каждый раз, когда вы обновляете страницу, счетчик автоматически увеличивается.

Теперь вы реализовали счетчик посещений для страницы индекса, чтобы расширить его на другие страницы, у вас есть много идей: одна из них - добавить еще одно поле в документ базы данных, чтобы вы могли использовать разные счетчики для каждой страницы, и поэтому я реализовал siteViewsUp в отдельном файле, чтобы вы могли импортировать ее при необходимости.

Я собираюсь написать еще один пост для других счетчиков в будущем.