Un exemple de nœud construisant un serveur via 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

Avant-propos

Afin de simuler le projet en ligne, 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'utilise node pour écrire un backend. 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 parties 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 utilisée, 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 avons activé l'ID privé. L'ID objet est l'ID automatiquement ajouté aux données générées par mongodb. 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 le traitement d'une requête get et obtient les paramètres de l'url via le module de paramètres 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('提交成功')
 });
});

Les paramètres de la requête POST sont différents de get, vous pouvez directement transmettre la requête. body Récupère le corps de la requête transmis par le front-end. 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');

Le code ci-dessus introduit avec succès le module de téléchargement de fichiers. Grâce à ce module, 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 .Quand il est temps Lorsque la demande d'interface réussit, 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 de mise à jour~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.

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!