Я сделал здесь простую форму для регистрации, используя такие данные, как имя пользователя, адрес электронной почты, пароль и т. д. Позже, используя адрес электронной почты и пароль, мы войдем в систему.

<form action="/signup" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="Signup">
</form>

В этом примере при отправке формы данные будут отправлены на маршрут «/signup» с использованием метода HTTP POST. Затем в коде Node.js/Express.js вы можете использовать метод app.post() для обработки отправки формы и вставки данных в базу данных.

снова я сделал на странице login.html

И в вашем файле app.js вам нужно использовать метод app.post('/login') для обработки отправки формы и проверки учетных данных для входа.

<form action="/login" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="Login">
</form>

Чтобы создать таблицу MySQL с именем user_details со столбцами для user_name, email_id, date_of_birth и password, вы можете использовать следующий SQL-запрос или создать его вручную также с помощью панели администратора:

CREATE TABLE user_details (
    user_name VARCHAR(255) NOT NULL,
    email_id VARCHAR(255) NOT NULL,
    date_of_birth DATE NOT NULL,
    password VARCHAR(255) NOT NULL
);

Чтобы подключиться к таблице user_details с помощью Node.js и Express.js, вы можете создать файл connection.js со следующим кодом:

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'yourusername',
  password: 'yourpassword',
  database: 'yourdatabasename'
});

connection.connect((err) => {
  if (err) throw err;
  console.log('Connected to the database!');
});

module.exports = connection;

Затем вы можете использовать это соединение в файле app.js для вставки данных для регистрации и подтверждения входа.

Вот пример того, как вставить данные для регистрации и подтвердить вход в app.js:

  • Сначала импортируем необходимые модули: экспресс, body-parser и подключение к базе данных MySQL, которое мы создали в файле connection.js.
  • Затем мы используем промежуточное ПО body-parser для анализа данных, отправленных в теле запроса.
  • В этом примере у нас есть два основных маршрута: /signup и /login.

app.get — это метод, предоставляемый платформой Express.js, который позволяет обрабатывать запросы GET по указанному маршруту. В этом примере мы используем его для обработки запроса GET к маршруту /home. Запрос GET обычно используется для получения данных с сервера, а не для отправки данных на сервер.

app.post — это еще один метод, предоставляемый платформой Express.js, который позволяет обрабатывать запросы POST по указанному маршруту. В этом примере мы используем его для обработки POST-запросов к маршрутам /signup и /login. Запрос POST обычно используется для отправки данных на сервер, а не для получения данных с сервера.

body-parser — это промежуточное ПО, которое позволяет нам анализировать данные, отправленные в теле запроса. Это особенно полезно для обработки данных, отправленных в запросе POST, поскольку данные отправляются в теле запроса, а не в URL-адресе. В этом примере мы используем app.use(bodyParser.urlencoded({ extended: false })), чтобы сообщить промежуточному программному обеспечению body-parser проанализировать данные, отправленные в теле запроса, и сделать их доступными для объекта req.body.

const express = require('express');
const bodyParser = require('body-parser');
const connection = require('./connection');
const app = express();

app.use(bodyParser.urlencoded({ extended: false }));

app.post('/signup', (req, res) => {
  const { username, email, dob, password } = req.body;
  const query = `INSERT INTO user_details (user_name, email_id, date_of_birth, password) VALUES ('${username}', '${email}', '${dob}', '${password}')`;
  connection.query(query, (err, results) => {
    if (err) throw err;
    res.redirect('/');
  });
});

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const query = `SELECT * FROM user_details WHERE user_name = '${username}' AND password = '${password}'`;
  connection.query(query, (err, results) => {
    if (err) throw err;
    if (results.length > 0) {
      res.redirect('/home');
    } else {
      res.send('Invalid login credentials');
    }
  });
});

app.get('/home', (req, res) => {
  res.send('Login successful');
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});
  • Маршрут /signup обрабатывает запрос POST, что означает, что мы ожидаем, что пользователь отправит данные в теле запроса. Мы используем синтаксис деструктурирующего присваивания для извлечения значений полей «имя пользователя», «электронная почта», «доб» и «пароль» из тела запроса. Затем мы создаем запрос SQL для вставки этих значений в таблицу user_details в базе данных. Мы используем метод connection.query() для выполнения запроса и передаем функцию обратного вызова для обработки ответа. Если есть ошибка, сбрасываем. Если вставка прошла успешно, мы перенаправляем пользователя на домашнюю страницу.
  • Маршрут /login также обрабатывает запрос POST, что означает, что мы ожидаем, что пользователь отправит данные в теле запроса. Мы снова используем синтаксис деструктурирующего присваивания для извлечения значений полей «имя пользователя» и «пароль» из тела запроса. Затем мы создаем SQL-запрос для выбора пользователя из таблицы user_details, где имя пользователя и пароль соответствуют значениям, предоставленным пользователем. Мы используем метод connection.query() для выполнения запроса и передаем функцию обратного вызова для обработки ответа. Если есть ошибка, сбрасываем. Если учетные данные для входа действительны, мы перенаправляем пользователя на домашнюю страницу. Если учетные данные для входа недействительны, мы отправляем пользователю сообщение о том, что вход не удался.
  • Маршрут /home обрабатывает запрос GET, что означает, что мы ожидаем, что пользователь просто посетит эту страницу. Когда пользователь обращается к этой странице, мы просто отправляем сообщение о том, что вход в систему прошел успешно.
  • Наконец, мы запускаем сервер с помощью метода listen() экземпляра приложения и указываем, что сервер должен прослушивать порт 3000. Мы также предоставляем функцию обратного вызова, чтобы указать, что сервер запущен.

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

- app.js
- connection.js
- package.json
- package-lock.json
- public
    - css
        - styles.css
    - js
        - script.js
    - index.html
    - login.html
    - signup.html
    - home.html
  • Файл app.js будет содержать серверный код для обработки маршрутов и подключения к базе данных.
  • Файл connection.js будет содержать код для подключения к базе данных MySQL.
  • Файлы package.json и package-lock.json будут содержать зависимости проекта и номера их версий.
  • Папка public будет содержать интерфейсный код проекта.
  • В папке css вы можете хранить файл styles.css, который содержит стили CSS для ваших HTML-страниц.
  • В папке js вы можете хранить файл script.js, который содержит код javascript для ваших HTML-страниц.
  • Файл index.html будет главной страницей приложения.
  • Файл login.html будет страницей входа в приложение.
  • Файл signup.html будет страницей регистрации приложения.
  • Файл home.html будет домашней страницей приложения, на которую попадет пользователь после успешного входа в систему.

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

express: Это веб-фреймворк для Node.js, который мы используем для обработки маршрутизации и HTTP-запросов.

body-parser: Это промежуточное ПО, которое позволяет нам анализировать данные, отправленные в теле запроса.

mysql: Это драйвер Node.js для MySQL, который позволяет нам подключаться к базе данных MySQL и запрашивать ее.

Вы можете установить эти зависимости, выполнив следующую команду в терминале в корне вашего проекта:

npm install express body-parser mysql

В приведенном мной примере кода мы не использовали какой-либо механизм просмотра, поскольку HTML-страницы (например, signup.html, login.html, home.html) обслуживаются непосредственно из файловой системы с использованием метода res.send().

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

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

Важно отметить, что этот пример является очень простым, в реальном сценарии вы должны использовать механизм просмотра, такой как EJS, Pug, Handlebars и т. д. Кроме того, вы также должны использовать механизм шаблонов для создания динамических HTML-страниц.

Ваш отзыв ценен для меня! Пожалуйста, не стесняйтесь поделиться своими мыслями о содержании, оставив комментарий. Если вам это понравилось или у вас есть какие-либо сомнения, я хотел бы услышать от вас. Спасибо, что нашли время, чтобы прочитать и принять участие в моей статье.