Maison >interface Web >js tutoriel >le nœud construit sa propre instance de serveur en implémentant express
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内容
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(); });
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); });
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;
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)) }); });
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('提交成功') }); });
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');
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("文件删除成功!"); }); });
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());
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
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!