Comment créer une plateforme de médias sociaux simple à l'aide de Node.js

Les plateformes de médias sociaux sont devenues l'une des applications les plus populaires et les plus populaires de l'ère actuelle, et Node.js est un runtime JavaScript largement utilisé dans le développement Web. Il est extrêmement efficace et adaptable, ce qui rend l'utilisation de Node .js aisée. devenir un bon choix pour créer des plateformes de médias sociaux. Dans cet article, nous apprendrons comment créer une plateforme de médias sociaux simple à l'aide de Node.js.

1. Installez Node.js

Tout d'abord, assurez-vous que Node.js est installé sur votre ordinateur. Vous pouvez vérifier si Node.js est installé avec la commande suivante :

node -v

Si Node.js est installé, il affichera votre numéro de version actuellement activé. Si vous n'avez pas installé Node.js, veuillez installer la dernière version de Node.js en fonction de votre type d'ordinateur, de votre système d'exploitation et de votre environnement d'exploitation.

2. Initialisation du projet

Nous commençons à créer notre projet. Tout d'abord, créez un nouveau répertoire sur votre ordinateur à l'aide de la commande suivante :

mkdir social-media-app
cd social-media-app

Nous devons maintenant initialiser un projet Node.js vide dans le dossier. Exécutez la commande suivante :

npm init

Cela vous guidera à travers une configuration de base lors de la création d'un nouveau projet. Suivez les invites (npm init -y peut être effectué rapidement) et lors de la dernière étape, assurez-vous que le nom du fichier "principal" est le même que celui du fichier d'entrée que vous souhaitez utiliser dans votre projet (généralement nommé "app.js"). .

{
  "name": "social-media-app",
  "version": "1.0.0",
  "description": "A simple social media app built with Node.js",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3. Installez les dépendances nécessaires

Ensuite, nous devons installer certaines dépendances nécessaires, notamment :

• Express : nous utiliserons ce framework léger pour gérer le routage et les requêtes HTTP
• Body-parser : lors du traitement du POST requêtes, nous devons analyser les données dans le corps de la requête via le middleware body-parser
• EJS : Nous utiliserons ce moteur de modèle pour restituer nos pages

Installez ces dépendances via la commande suivante :

npm install express body-parser ejs --save

Installation terminée Enfin, vous pouvez voir les dépendances suivantes apparaître dans votre fichier package.json :

  "dependencies": {
    "body-parser": "^1.18.3",
    "ejs": "^2.6.1",
    "express": "^4.16.4"
  }

4. Créez le fichier d'entrée d'application

Nous avons installé les dépendances nécessaires, créons maintenant le fichier d'entrée d'application "app .js". Tout d'abord, importez les modules Express et Body-parser :

const express = require('express');
const bodyParser = require('body-parser');

Créez ensuite une application Express :

const app = express();

Activez body-parser pour analyser les données dans le corps de la requête. Nous choisissons d'analyser les données en JSON, ajoutez donc la ligne suivante à app.js :

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

Utilisez le moteur de modèle EJS pour afficher la page. Dans cette application, nous utiliserons EJS pour restituer nos modèles. Pour l'activer, ajoutez la ligne suivante dans le fichier app.js :

app.set('view engine', 'ejs');

Enfin, démarrez l'application dans le fichier app.js :

app.listen(3000, () => console.log('Server running on port 3000!'))

Avec cette application simple, nous pouvons nous assurer que tout est configuré correctement et maintenant nous pouvons Exécutez le programme en tapant la commande suivante dans le terminal :

node app.js

Ouvrez http://localhost:3000 dans votre navigateur et vous devriez voir un message "Cannot GET".

5. Ajout de routes et de contrôleurs

Commençons maintenant à ajouter des routes et des contrôleurs correspondants à notre application. Nous allons créer deux pages :

• Accueil (affiche tous les messages)
• Page de publication (publie de nouveaux messages)

(1) Route d'accueil et contrôleur

Pour gérer la demande de page d'accueil, nous devons créer une route pour le chemin / . Nous avons également besoin d'un contrôleur pour récupérer tous les messages et les transmettre à la vue.

Tout d'abord, créez un dossier et nommez le fichier « contrôleurs » et créez-y un fichier nommé « home.js ». Voici notre contrôleur :

// controllers/home.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getHomePage = (req, res) => {
  res.render('pages/home', { messages });
};

Ce contrôleur transmet simplement un tableau de deux messages au modèle home.ejs et le restitue.

Maintenant, nous devons créer une route dans le fichier app.js pour gérer le chemin / :

const homeController = require('./controllers/home');

app.get('/', homeController.getHomePage);

La route créera une route pour la requête « GET », pointant vers la fonction getHomePage que nous avons définie dans le fichier controllers/home Fichier .js.

(2) Route de publication et contrôleur

Ensuite, nous créerons un fichier pour la route de publication et le contrôleur correspondant. Dans le dossier "Controllers", créez un fichier appelé "publish.js" avec le contenu suivant :

// controllers/publish.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getPublishPage = (req, res) => {
  res.render('pages/publish');
};

exports.publishMessage = (req, res) => {
  const { title, body } = req.body;
  const id = messages.length + 1;
  messages.push({ id, title, body });

  res.redirect('/');
};

Ce contrôleur définit deux comportements :

• getPublishPage : Cette fonction restituera une page contenant le titre et le corps Un formulaire qui permet les utilisateurs de soumettre de nouveaux messages.
• publishMessage : Cette fonction recevra les données soumises par l'utilisateur et ajoutera le nouveau message au tableau "messages", puis redirigera vers la page d'accueil.

Créons cette route dans le fichier app.js :

const publishController = require('./controllers/publish');

app.get('/publish', publishController.getPublishPage);

app.post('/publish', publishController.publishMessage);

Cela créera deux routes pour le chemin /publish : une route de requête GET pour le rendu du formulaire et une route de requête POST pour la soumission des données.

6. Créer des vues

Nous avons créé deux itinéraires et les contrôleurs correspondants, nous devons maintenant créer les vues correspondantes dans les vues.

Nous devons créer deux dossiers : un dossier appelé "layouts" et un dossier appelé "pages".

Créez un fichier appelé "main.ejs" dans le dossier "layouts" qui contient des éléments communs à toutes les pages du site Web, tels que des en-têtes, des scripts de page et des feuilles de style. Voici le contenu de ce dossier :

<!-- layouts/main.ejs -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Social Media App</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <h1 id="Social-Media-App">Social Media App</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/publish">Publish</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <%- body %>
  </main>

  <footer>
    &copy; 2020 Social Media App
  </footer>
</body>
</html>

在“pages”文件夹中，创建两个名为“home.ejs”和“publish.ejs”的文件。

以下是“home.ejs”文件的内容：

<!-- views/pages/home.ejs -->

<h2 id="Messages">Messages</h2>

<ul>
  <% messages.forEach(message => { %>
    <li><%= message.title %>: <%= message.body %></li>
  <% }) %>
</ul>

这呈现了一个包含所有消息的列表。

以下是“publish.ejs”文件的内容：

<!-- views/pages/publish.ejs -->

<h2 id="Publish-Message">Publish Message</h2>

<form method="POST" action="/publish">
  <label for="title">Title:</label>
  <input type="text" name="title" id="title"><br>

  <label for="body">Body:</label>
  <textarea name="body" id="body"></textarea><br>

  <button type="submit">Publish</button>
</form>

这个文件包含一个表单，用户可以在其中输入新消息的标题和正文。

现在，该应用程序已准备就绪，可以运行。在终端中运行以下命令：

node app.js

在浏览器中输入http://localhost:3000，您应该会看到一个包含所有消息的列表，并能够通过单击链接到发布页面。

7. 完成

如果您想了解更多关于如何使用Node.js开发Web应用程序或其他Node.js开发内容，请用以上代码示例作为参考，并根据您自己的需求和想法进行更改。现在，您已经拥有了一个基于Node.js的简单社交媒体平台，您可以使用类似的技术来扩展功能，构建更大、更复杂的社交媒体平台。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!