Heim >Web-Frontend >js-Tutorial >Ein Beispiel für den Knotenaufbau eines Servers über Express
In diesem Artikel wird hauptsächlich der Knoten zum Erstellen eines eigenen Servers über Express vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen
Vorwort
Um das Projekt online zu simulieren, benötigen wir einen Server, der eine API bereitstellt, damit wir Daten abrufen können. Dieses Mal habe ich das Express-Framework verwendet, um die API-Schnittstelle zu schreiben. Alle Anfragen werden über Ajax-Anfragen an den Server gestellt, um Daten zurückzugeben. Dies ist das erste Mal, dass ich ein Backend mit Node schreibe, und es ist im Grunde so, als würde man den Fluss überqueren, indem man nach den Steinen sucht. Wenn es irgendwelche Mängel im Artikel gibt, weisen Sie sie bitte darauf hin.
Installieren Sie das Express-Framework
Portal: Express offiziell
Stellen Sie dann die Middleware vor, die eingeführt werden muss. Der Knoten selbst stellt einige Bibliotheken bereit. Wir können es direkt über require referenzieren. Für nicht bereitgestellte Bibliotheken können wir es auch über manuelles npm installieren
var fs = require('fs'); 操作文件模块 var http = require('http'); http模块 var url = require('url'); 获取url信息模块 var qs = require('querystring'); 处理url参数模块 var path = require('path'); 文件路径模块 var bodyParser = require('body-parser'); 请求体对象化 (必须)否则后台无法解析前端发送的body内容
Aktivieren Sie dann das Modul direkt
app.use(bodyParser.json()); // 访问静态资源文件 这里是访问所有dist目录下的静态资源文件 app.use(express.static(path.resolve(__dirname, '../dist'))) app.use(express.static('public')); // 因为是单页应用 所有请求都走/dist/index.html app.get('/', function(req, res) { const html = fs.readFile(path.resolve(__dirname, '../dist/index.html'), 'utf-8'); res.send(html) }); //处理请求跨域 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Content-Type", "application/json;charset=utf-8"); res.header("Access-Control-Allow-Headers", "content-type"); next(); });
Nachdem die Vorbereitungen abgeschlossen sind, können Sie mit dem Schreiben der Schnittstelle beginnen. In Bezug auf die Datenbank können Sie einen JSON simulieren oder tatsächlich die Online-Datenbank simulieren.
Das Folgende wird zur Beschreibung in drei Abschnitte unterteilt: Datenbankverbindung, angeforderter Vorgang und Dateianforderungsvorgang.
Datenbankverbindung
Hier gehe ich davon aus, dass Sie die Mongodb-Datenbank installiert und erfolgreich aktiviert haben. Lesen Sie das Express-Tutorial sorgfältig durch und Sie werden feststellen, dass das Framework Mongodb über viele Erweiterungs-Plug-Ins zur Verwendung der Datenbank bietet, z. B. Mongoose. Hier verwenden wir Mongoskin, das offiziell von Express bereitgestellt wird, um auf die Datenbank zu verlinken.
$ npm install mongoskin #####官方实例 var db = require('mongoskin').db('localhost:27017/animals'); db.collection('mamals').find().toArray(function(err, result) { if (err) throw err; console.log(result); });
Nach erfolgreicher Installation stellen wir zunächst die verwendete Datenbank vor, der Code lautet wie folgt
var db = require('mongoskin').db('mongodb://localhost:27017/blog'); var ObjectId = require('mongodb').ObjectID;
Der obige Code bedeutet, dass wir erfolgreich eine Verbindung zur Blog-Datenbank hergestellt und die private ID aktiviert haben. Die Objekt-ID ist die ID, die automatisch zu den von mongodb generierten Daten hinzugefügt wird. Es kann direkt verwendet werden. Zu diesem Zeitpunkt sind die Datenbank und der Server verbunden.
Verarbeiten Sie die vom Frontend gesendete Anfrage
Verarbeiten Sie die Get-Anfrage
/** * 获取文章信息 */ app.get('/article/info', function (req, res) { >>> 获取请求参数 var arg = qs.parse(url.parse(req.url).query); var id = arg.id; >>> 链接数据库根据参数查找文档并返回 db.collection('articleList').find({ "_id": ObjectId(id)}).toArray(function(err, result) { if (err) throw err; console.log(result) res.end(JSON.stringify(result)) }); });
Der obige Code implementiert die Verarbeitung einer Get-Anfrage und ruft die Parameter der URL über das Parametermodul db ab, das die verbundene Datenbank ist. Durchsuchen Sie die Datentabelle von „articleList“ anhand der ID. Geben Sie die Daten nach der Verarbeitung über res.end() zurück, um die Antwort abzuschließen.
Verarbeitung von Post-Anfragen
/** * 提交留言信息 */ app.post('/board/post', function (req, res) { >>>> 获取请求参数 var data = { date: req.body.date, name: req.body.name, content: req.body.content, time: req.body.time, position: req.body.position }; >>> 链接数据库并插入数据 db.collection('board').insert(data, function(err, result) { if(err) { res.end('Error:'+ err) } res.end('提交成功') }); });
Post-Request-Parameter unterscheiden sich von get, Sie können req direkt übergeben. body Ruft den vom Frontend übermittelten Anforderungstext ab. Rufen Sie Parameter über js-Objekte ab. Führen Sie dann Datenbankoperationen basierend auf den Parametern durch. An dieser Stelle wurden die grundlegenden Anforderungen eingeführt. Lassen Sie uns darüber sprechen, wie Sie mit allgemeinen Dateibetriebsanforderungen wie dem Hochladen von Bildern umgehen.
Dateianfragen vom Frontend verarbeiten
Um den Vorgang zu vereinfachen, können wir das Multer-Modul zum Verarbeiten von Dateien einführen. Der Code lautet wie folgt
var multer = require('multer'); var storage = multer.diskStorage({ //设置上传后文件路径,uploads文件夹会自动创建。 destination: function (req, file, cb) { cb(null, './public/uploads') }, //给上传文件重命名,获取添加后缀名 filename: function (req, file, cb) { var fileFormat = (file.originalname).split("."); cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]); } }); //生成上传模块,让API调用 var upload = multer({ storage: storage }).single('file');
Der obige Code hat das Datei-Upload-Modul erfolgreich eingeführt. Mit diesem Modul können wir schnell entsprechende Inhalte für bestimmte Verwendungsmethoden generieren Dokumentation. Nachdem die Vorbereitungsarbeiten abgeschlossen sind, verwenden Sie es im Projekt:
/** * 图片上传 */ app.post('/upload', function (req, res) { upload(req, res, function (err) { if (err) { console.log(err) return } console.log(req.file) res.end(JSON.stringify(req.file)) }) }); //图片上传到服务器 ,向客户端返回文件信息 比如文件的存储位置,之后就可以通过地址访问服务器的图片 /** * 图片删除 */ app.post('/image/delete', function (req, res) { fs.unlink(req.body.path, function(err) { if (err) { return console.error(err); } res.end("文件删除成功!"); }); });
Um Bilder hier hochzuladen, verwenden wir direkt das zuvor geschriebene Upload-Modul . Wenn die Schnittstellenanforderung erfolgreich ist, wurde die Datei erfolgreich hochgeladen. Wenn Sie einen Vorschauvorgang benötigen, sollten Sie die Upload-Schnittstelle nicht direkt aufrufen. Über das native Knoten-FS-Modul können wir auch die hinzugefügten Dateien löschen und ändern.
Aktualisierungsprobleme im Online- und Verlaufsmodus, nachdem ich online gegangen bin
Wir können uns den Online-Prozess so vorstellen, als würde ich einen Computer wechseln, um das Programm auszuführen Server. Installieren Sie eine gute Umgebung auf dem Cloud-Server, klonen Sie das Projekt darin, installieren Sie eine permanente Laufzeitbibliothek wie „Forever“, starten Sie ~ ok, und Ihr Projekt wird immer ausgeführt. Wenn Sie WWW-Zugriff benötigen, müssen Sie außerdem eine DNS-Auflösung und einen Domänennamen kaufen, um auf Ihren Server zu verweisen.
Wenn wir das obige Projekt lokal ausführen, ist es im Grunde kein Problem. Es wird jedoch aktualisiert, sobald das Projekt online geht. Hä? ? 404 was zum Teufel? Öffnen Sie Baidu und überprüfen Sie. Das ist eine Menge Feuer ~~ Der Verlaufsmodus ist auf der aktuellen Seite aktiviert, und die Unterstützung für den Verlauf muss auch auf dem Backend aktiviert sein. Die Express-Umgebung lautet wie folgt:
var history = require('connect-history-api-fallback'); var connect = require('connect'); /////// app.use(history());
Update Code Refresh~OK perfekt!
Zusammenfassung
Wer etwas gut lernen will, braucht eine langfristige Anhäufung. Als Front-End können uns einige Kenntnisse der Serverdatenbank nicht nur dabei helfen, besser mit unseren Brüdern (Back-End) zu kommunizieren, sondern es ist auch wie ein Fisch im Wasser für das Front-End.
Das obige ist der detaillierte Inhalt vonEin Beispiel für den Knotenaufbau eines Servers über Express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!