Heim > Artikel > Web-Frontend > So erstellen Sie ein einfaches Dateiverwaltungssystem mit Node.js
So erstellen Sie ein einfaches Dateiverwaltungssystem mit Node.js
- 王林Original
- 2023-11-08 18:19:491465Durchsuche
Node.js ist eine sehr beliebte serverseitige Betriebsumgebung. Sie ist in JavaScript geschrieben und ermöglicht Entwicklern die Verwendung derselben Programmiersprache für die Front-End- und Back-End-Entwicklung. Die Effizienz und Flexibilität von Node.js machen es zu einem wichtigen Bestandteil der Webentwicklung. In diesem Artikel erfahren Sie, wie Sie mit Node.js ein einfaches Dateiverwaltungssystem erstellen.
Um diese Funktion zu implementieren, müssen wir die Basismodule fs (Dateisystem) und http von Node.js verwenden, um einen Webserver zu erstellen. Zuerst müssen Sie den Befehl „npm init“ in der Befehlszeile ausführen, um eine package.json-Datei zu generieren, und dann die erforderlichen Abhängigkeitspakete über „npm install --save express body-parser ejs multer fs“ installieren.
Zuerst erstellen wir eine Node.js-Datei mit dem Namen app.js. Im Code stellen wir zunächst die erforderlichen Module und Middleware vor:
const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const fs = require('fs');
const ejs = require('ejs');
const app = express();Hier verwenden wir das Express-Framework, die Body-Parser-Middleware und die Multer-Middleware, um die Funktion zum Hochladen von Dateien zu verwalten, und die EJS-Vorlagen-Engine, um die Seite zu rendern.
Als nächstes müssen wir das statische Ressourcenrouting einrichten:
app.use(express.static(__dirname + '/public'));
Hier platzieren wir die statischen Dateien des Projekts im öffentlichen Ordner.
Wir müssen auch die Body-Parser-Middleware verwenden, um POST-Anfragen zu verarbeiten:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));Als nächstes erstellen wir eine Route, um Datei-Upload- und -Download-Anfragen zu verarbeiten:
//上传文件的路由
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);
});Multer wird hier verwendet, um Datei-Uploads unter Verwendung von res zu verarbeiten. download()-Methode zum Herunterladen von Dateien.
Schließlich erstellen wir eine Route zum Rendern der Seite:
app.get('/', (req, res) => {
const filesPath = `${__dirname}/uploads`;
const data = fs.readdirSync(filesPath);
res.render('index', { files: data });
});Hier lesen wir alle Dateien im Upload-Ordner und rendern sie in die Vorlagendatei.
Als nächstes müssen wir eine index.ejs-Vorlagendatei erstellen, um die Dateiliste und das Formular zum Hochladen von Dateien anzuzeigen:
<!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>Hier verwenden wir die EJS-Syntax, um die Dateiliste dynamisch zu generieren, und verwenden HTML-Formulare zum Hochladen von Dateien.
Schließlich starten wir den Server:
app.listen(3000, () => {
console.log('App listening on port 3000!');
});Jetzt haben wir den Aufbau eines einfachen Dateiverwaltungssystems mit Node.js abgeschlossen. Sie können den Effekt anzeigen, indem Sie im Browser auf http://localhost:3000 zugreifen.
Der vollständige Code lautet wie folgt:
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!');
});Bisher haben wir den Prozess des Aufbaus eines einfachen Dateiverwaltungssystems mit Node.js abgeschlossen. Anhand dieses Beispiels können wir die grundlegenden Module und Middleware von Node.js besser verstehen .
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein einfaches Dateiverwaltungssystem mit Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!