Maison interface Web js tutoriel le nœud construit sa propre instance de serveur en implémentant express

le nœud construit sa propre instance de serveur en implémentant express

May 14, 2018 am 11:16 AM
express node 搭建

Cet article présente principalement le nœud pour construire son propre serveur via express. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Avant-propos

Afin de lancer le projet de simulation, nous avons besoin d'un serveur pour fournir une API nous permettant d'appeler des données. Cette fois, j'ai utilisé le framework express pour écrire l'interface API. Toutes les demandes sont effectuées via des requêtes ajax adressées au serveur pour renvoyer des données. C'est la première fois que j'écris un backend en utilisant node, et c'est essentiellement comme traverser la rivière en cherchant les pierres. S'il y a des lacunes dans l'article, veuillez les signaler.

Installer le framework express

Portail : express officiel

Présentez ensuite le middleware qui doit être introduit. Node lui-même fournit quelques bibliothèques. Nous pouvons le référencer directement via require. Pour les bibliothèques non fournies, nous pouvons également l'installer via npm manuel


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内容
Copier après la connexion

Ensuite, activez le module directement

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();
});
Copier après la connexion

Une fois les préparatifs terminés, vous pouvez commencer à écrire l'interface. Concernant la base de données, vous pouvez simuler un json, ou vous pouvez réellement simuler la base de données en ligne.

Ce qui suit sera divisé en trois sections pour la description : connexion à la base de données, opération demandée et opération de demande de fichier.

Connexion à la base de données

Ici, je suppose que vous avez installé la base de données mongodb et l'avez activée avec succès. Lisez attentivement le didacticiel express et vous constaterez que le framework prend en charge mongodb et dispose de nombreux plug-ins d'extension pour utiliser la base de données, tels que mongoose. Ici, nous utilisons Mongoskin officiellement fourni par Express pour créer un lien vers la base de données.

$ 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);
});
Copier après la connexion

Une fois l'installation réussie, nous introduisons d'abord la base de données que nous utilisons, le code est le suivant

var db = require('mongoskin').db('mongodb://localhost:27017/blog');
var ObjectId = require('mongodb').ObjectID;
Copier après la connexion

Le code ci-dessus signifie que nous nous sommes connectés avec succès à la base de données du blog et activé l'ID privé. L'ID objet est L'ID généré par mongodb est automatiquement ajouté aux données. Il peut être utilisé directement. À ce stade, la base de données et le serveur sont connectés.

Traiter la requête envoyée par le front end

Traiter la requête get

/**
 * 获取文章信息
 */
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))
 });
});
Copier après la connexion

Le code ci-dessus implémente un Lors du traitement de la requête get, les paramètres de l'url sont obtenus via le module de paramètres, et db est la base de données connectée. Recherchez dans la table de données « articleList » en fonction de l'ID. Après le traitement, renvoyez les données via res.end() pour compléter la réponse.

Traitement des demandes de publication

/**
 * 提交留言信息
 */
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('提交成功')
 });
});
Copier après la connexion

Le paramètre d'acquisition de la demande de publication est différent de get Vous pouvez obtenir directement le corps de la demande transmis par le front-end via req. corps. Obtenez les paramètres via des objets js. Effectuez ensuite des opérations de base de données en fonction des paramètres. À ce stade, les demandes de base ont été introduites. Parlons de la façon de gérer les exigences courantes en matière d'opérations sur les fichiers, telles que le téléchargement d'images.

Traiter les demandes de fichiers depuis le front end

Afin de simplifier l'opération, nous pouvons introduire le module multer pour traiter les fichiers, le code est le suivant

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');
Copier après la connexion

ci-dessus Le code introduit avec succès le module de téléchargement de fichiers, grâce auquel nous pouvons générer rapidement le contenu correspondant. Pour des méthodes d'utilisation spécifiques, vous pouvez consulter la documentation officielle. Une fois le travail de préparation terminé, utilisez-le dans le projet :

/**
 * 图片上传
 */
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("文件删除成功!");
 });
});
Copier après la connexion

Pour télécharger des images ici, nous utilisons directement le module de téléchargement qui a été écrit auparavant. Lorsque la demande d'interface est réussie, le fichier a été. téléchargé avec succès. Si vous avez besoin d'un processus de prévisualisation, vous ne devez pas appeler directement l'interface de téléchargement. Grâce au module natif node fs, nous pouvons également supprimer et modifier les fichiers ajoutés.

Problèmes d'actualisation du mode en ligne et historique rencontrés après la connexion

Nous pouvons considérer le processus en ligne comme un changement d'ordinateur pour exécuter le programme. Ici, j'utilise Alibaba Cloud. serveur. Installez un bon environnement sur le serveur cloud, clonez-y le projet, installez une bibliothèque d'exécution permanente telle que pour toujours, démarrez ~ ok et votre projet s'exécutera toujours. Si vous avez besoin d'un accès www, vous devez également acheter une résolution DNS et un nom de domaine pour pointer vers votre serveur.

Si nous exécutons le projet ci-dessus localement, cela ne posera pratiquement aucun problème. Mais il sera actualisé une fois le projet mis en ligne. Hein? ? 404, qu'est-ce que c'est ? Ouvrez Baidu et recherchez-le. Cela fait beaucoup de feu ~~ Le mode historique est activé du côté actuel, et la prise en charge de l'historique doit également être activée sur le backend. L'environnement express est le suivant :

var history = require('connect-history-api-fallback');
var connect = require('connect');
///////
app.use(history());
Copier après la connexion

Actualisation du code ~ OK parfait !

Résumé

Si vous voulez bien apprendre quelque chose, vous avez besoin d'une accumulation à long terme. En tant que front-end, une certaine connaissance des bases de données des serveurs peut non seulement nous aider à mieux communiquer avec nos frères (back-end), mais c'est aussi comme un poisson dans l'eau pour le front-end.

Recommandations associées :

Node.js utilisant Express.Router en détail.

jq Paginator combiné avec Implémentation express Effet de pagination

Explication détaillée de l'utilisation de nodejs+express pour implémenter une fonction de téléchargement de fichiers simple

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser Express pour gérer le téléchargement de fichiers dans un projet de nœud Comment utiliser Express pour gérer le téléchargement de fichiers dans un projet de nœud Mar 28, 2023 pm 07:28 PM

Comment gérer le téléchargement de fichiers ? L'article suivant vous expliquera comment utiliser Express pour gérer les téléchargements de fichiers dans le projet de nœud. J'espère qu'il vous sera utile !

Une analyse approfondie de l'outil de gestion de processus de Node « pm2 » Une analyse approfondie de l'outil de gestion de processus de Node « pm2 » Apr 03, 2023 pm 06:02 PM

Cet article partagera avec vous l'outil de gestion de processus de Node "pm2" et expliquera pourquoi pm2 est nécessaire, comment installer et utiliser pm2, j'espère qu'il sera utile à tout le monde !

Enseignement du nœud PI: Qu'est-ce qu'un nœud PI? Comment installer et configurer le nœud PI? Enseignement du nœud PI: Qu'est-ce qu'un nœud PI? Comment installer et configurer le nœud PI? Mar 05, 2025 pm 05:57 PM

Explication détaillée et guide d'installation pour les nœuds de pignon Cet article introduira l'écosystème de pignon en détail - nœuds PI, un rôle clé dans l'écosystème de pignon et fournir des étapes complètes pour l'installation et la configuration. Après le lancement du réseau de test de la blockchain pèse, les nœuds PI sont devenus une partie importante de nombreux pionniers participant activement aux tests, se préparant à la prochaine version du réseau principal. Si vous ne connaissez pas encore Pinetwork, veuillez vous référer à ce qu'est Picoin? Quel est le prix de l'inscription? PI Utilisation, exploitation minière et sécurité. Qu'est-ce que Pinetwork? Le projet Pinetwork a commencé en 2019 et possède sa pièce exclusive de crypto-monnaie PI. Le projet vise à en créer un que tout le monde peut participer

Comment créer rapidement un système de graphiques statistiques sous le framework Vue Comment créer rapidement un système de graphiques statistiques sous le framework Vue Aug 21, 2023 pm 05:48 PM

Comment créer rapidement un système de graphiques statistiques sous le framework Vue. Dans les applications Web modernes, les graphiques statistiques sont un composant essentiel. En tant que framework frontal populaire, Vue.js fournit de nombreux outils et composants pratiques qui peuvent nous aider à créer rapidement un système de graphiques statistiques. Cet article expliquera comment utiliser le framework Vue et certains plug-ins pour créer un système de graphiques statistiques simple. Tout d'abord, nous devons préparer un environnement de développement Vue.js, y compris l'installation de l'échafaudage Vue et de certains plug-ins associés. Exécutez la commande suivante dans la ligne de commande

Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ? Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ? Feb 24, 2023 pm 07:33 PM

Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ? L'article suivant vous présentera comment utiliser Node pour implémenter un système d'authentification unique. J'espère qu'il vous sera utile !

Comparaison approfondie d'Express et de Laravel : Comment choisir le meilleur framework ? Comparaison approfondie d'Express et de Laravel : Comment choisir le meilleur framework ? Mar 09, 2024 pm 01:33 PM

Comparaison approfondie d'Express et de Laravel : Comment choisir le meilleur framework ? Lorsque vous choisissez un framework back-end adapté à votre projet, Express et Laravel sont sans aucun doute deux choix populaires parmi les développeurs. Express est un framework léger basé sur Node.js, tandis que Laravel est un framework populaire basé sur PHP. Cet article fournira une comparaison approfondie des avantages et des inconvénients de ces deux frameworks et fournira des exemples de code spécifiques pour aider les développeurs à choisir le framework qui correspond le mieux à leurs besoins. Performances et évolutivitéExpr

Authentification basée sur des jetons avec Angular et Node Authentification basée sur des jetons avec Angular et Node Sep 01, 2023 pm 02:01 PM

L'authentification est l'une des parties les plus importantes de toute application Web. Ce didacticiel traite des systèmes d'authentification basés sur des jetons et de leurs différences par rapport aux systèmes de connexion traditionnels. À la fin de ce didacticiel, vous verrez une démo entièrement fonctionnelle écrite en Angular et Node.js. Systèmes d'authentification traditionnels Avant de passer aux systèmes d'authentification basés sur des jetons, examinons les systèmes d'authentification traditionnels. L'utilisateur fournit son nom d'utilisateur et son mot de passe dans le formulaire de connexion et clique sur Connexion. Après avoir effectué la demande, authentifiez l'utilisateur sur le backend en interrogeant la base de données. Si la demande est valide, une session est créée à l'aide des informations utilisateur obtenues à partir de la base de données et les informations de session sont renvoyées dans l'en-tête de réponse afin que l'ID de session soit stocké dans le navigateur. Donne accès aux applications soumises à

Que faire si node server.js signale une erreur Que faire si node server.js signale une erreur Dec 29, 2022 pm 04:19 PM

L'erreur node server.js est due au fait que le chemin est incorrect. La solution est la suivante : 1. Entrez dans la fenêtre cmd ; 2. Basculez vers "server.js" sous le chemin du projet. commande pour résoudre le problème d’erreur.

See all articles