Comment créer un système de gestion de fichiers simple à l'aide de Node.js-js tutoriel-php.cn

Comment créer un système de gestion de fichiers simple à l'aide de Node.js

王林

Libérer： 2023-11-08 18:19:49

original

1528 Les gens l'ont consulté

Comment créer un système de gestion de fichiers simple à laide de Node.js

Node.js est un environnement d'exécution côté serveur très populaire. Il est écrit en JavaScript et permet aux développeurs d'utiliser le même langage de programmation pour le développement front-end et back-end. L'efficacité et la flexibilité de Node.js en font un élément important du développement Web. Dans cet article, nous apprendrons comment utiliser Node.js pour créer un système de gestion de fichiers simple.

Afin d'implémenter cette fonction, nous devons utiliser les modules de base fs (système de fichiers) et http de Node.js pour créer un serveur web. Tout d'abord, vous devez exécuter la commande "npm init" sur la ligne de commande pour générer un fichier package.json, puis installer les packages de dépendances requis via "npm install --save express body-parser ejs multer fs".

Tout d'abord, nous allons créer un fichier Node.js nommé app.js. Dans le code, nous introduisons d'abord les modules et middleware nécessaires :

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const fs = require('fs');
const ejs = require('ejs');
const app = express();

Copier après la connexion

Ici, nous utilisons le framework express, le middleware body-parser et le middleware multer pour gérer la fonction de téléchargement de fichiers, et le moteur de modèle ejs pour restituer la page.

Ensuite, nous devons configurer le routage des ressources statiques :

app.use(express.static(__dirname + '/public'));

Copier après la connexion

Ici, nous plaçons les fichiers statiques du projet dans le dossier public.

Nous devons également utiliser le middleware body-parser pour gérer les requêtes POST :

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

Copier après la connexion

Ensuite, nous allons créer une route pour gérer les demandes de téléchargement et de téléchargement de fichiers :

//上传文件的路由
app.post('/upload', upload.single('file'), (req, res) => {
  res.redirect('/');
});
 
//下载文件的路由
app.get('/download/:filename', (req, res) => {
  const { filename } = req.params;
  const filePath = `${__dirname}/uploads/${filename}`;
  res.download(filePath);
});

Copier après la connexion

Multer est utilisé ici pour gérer les téléchargements de fichiers, en utilisant res . méthode download() pour télécharger des fichiers.

Enfin, nous créons un itinéraire pour afficher la page :

app.get('/', (req, res) => {
  const filesPath = `${__dirname}/uploads`;
  const data = fs.readdirSync(filesPath);
  res.render('index', { files: data });
});

Copier après la connexion

Ici, nous lisons tous les fichiers du dossier de téléchargement et les rendons dans le fichier modèle.

Ensuite, nous devons créer un fichier modèle index.ejs pour afficher la liste des fichiers et le formulaire de téléchargement des fichiers :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>File Manager</title>
</head>
<body>
  <h1>Files List:</h1>
  <% for (let i = 0; i < files.length; i++) { %>
    <p><a href="/download/<%= files[i] %>"><%= files[i] %></a></p>
  <% } %>
 
  <hr>
 
  <h2>Upload File:</h2>
  <form method="post" action="/upload" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">Upload</button>
  </form>
</body>
</html>

Copier après la connexion

Ici, nous utilisons la syntaxe EJS pour générer dynamiquement la liste des fichiers et utilisons des formulaires HTML pour télécharger des fichiers.

Enfin, nous démarrons le serveur :

app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

Copier après la connexion

Maintenant, nous avons terminé la construction d'un système de gestion de fichiers simple à l'aide de Node.js. Vous pouvez voir l'effet en visitant http://localhost:3000 dans le navigateur.

Le code complet est le suivant :

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const fs = require('fs');
const ejs = require('ejs');
const app = express();
 
//设置静态资源路由
app.use(express.static(__dirname + '/public'));
 
//设置body-parser中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
 
//设置存储文件的位置和文件名
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads');
  },
  filename: (req, file, cb) => {
    const { originalname } = file;
    cb(null, originalname);
  }
});
 
const upload = multer({ storage });
 
//上传文件的路由
app.post('/upload', upload.single('file'), (req, res) => {
  res.redirect('/');
});
 
//下载文件的路由
app.get('/download/:filename', (req, res) => {
  const { filename } = req.params;
  const filePath = `${__dirname}/uploads/${filename}`;
  res.download(filePath);
});
 
//渲染页面的路由
app.get('/', (req, res) => {
  const filesPath = `${__dirname}/uploads`;
  const data = fs.readdirSync(filesPath);
  res.render('index', { files: data });
});
 
//设置模板引擎和模板文件夹位置
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
 
//启动服务
app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

Copier après la connexion

Jusqu'à présent, nous avons terminé le processus de création d'un système de gestion de fichiers simple à l'aide de Node.js. Grâce à cet exemple, nous pouvons mieux comprendre les modules de base et le middleware de l'utilisation de 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!