Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-05-14 11:16:30
original
1609 Les gens l'ont consulté

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal