Heim > Web-Frontend > js-Tutorial > Hauptteil

Der Knoten erstellt seine eigene Serverinstanz durch die Implementierung von Express

小云云
Freigeben: 2018-05-14 11:16:30
Original
1609 Leute haben es durchsucht

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 und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorwort

Um das Simulationsprojekt online zu starten, benötigen wir einen Server, der eine API für den Datenabruf bereitstellt. 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内容
Nach dem Login kopieren

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();
});
Nach dem Login kopieren

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 dem Login kopieren

Nach erfolgreicher Installation stellen wir zunächst die von uns verwendete Datenbank vor. Der Code lautet wie folgt

var db = require('mongoskin').db('mongodb://localhost:27017/blog');
var ObjectId = require('mongodb').ObjectID;
Nach dem Login kopieren

Der obige Code bedeutet, dass wir erfolgreich eine Verbindung zur Blog-Datenbank hergestellt haben und die private ID aktiviert. Die von mongodb generierte ID wird automatisch zu den Daten hinzugefügt. 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))
 });
});
Nach dem Login kopieren

Der obige Code implementiert a Bei der Verarbeitung der Get-Anfrage werden die Parameter der URL über das Parametermodul abgerufen, und db ist die verbundene Datenbank. 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('提交成功')
 });
});
Nach dem Login kopieren

Die Parametererfassung von Post-Requests unterscheidet sich von get. Sie können den vom Front-End übermittelten Request-Text direkt über req abrufen. Körper. 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');
Nach dem Login kopieren

oben Der Code führt das Datei-Upload-Modul erfolgreich ein, mit dem wir schnell entsprechende Inhalte generieren können. Für bestimmte Verwendungsmethoden können Sie die offizielle Dokumentation anzeigen. 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("文件删除成功!");
 });
});
Nach dem Login kopieren

Um Bilder hier hochzuladen, verwenden wir direkt das zuvor geschriebene Upload-Modul. Wenn die Schnittstellenanforderung erfolgreich ist, wurde die Datei erstellt 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());
Nach dem Login kopieren

Aktualisierung des Codes aktualisieren ~ 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.

Verwandte Empfehlungen:

Detaillierte Erläuterung von Node.js mit Express.Router-Beispielen

jq Paginator kombiniert mit Express-Implementierung Paginierungseffekt

Detaillierte Erläuterung der Verwendung von nodejs+express zur Implementierung einer einfachen Datei-Upload-Funktion

Das obige ist der detaillierte Inhalt vonDer Knoten erstellt seine eigene Serverinstanz durch die Implementierung von Express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage