Préface
Aujourd'hui, nous allons construire un système de communiqué de presse simple. La première étape du système n'a pas besoin d'être trop difficile. Il a principalement les fonctions suivantes
① Gestion du type d'information
② Gestion des nouvelles (avec une fonction de téléchargement d'images)
③ navigation d'actualités
Bien qu'il n'y ait pas beaucoup de fonctions, il couvre également de nombreuses opérations de base. Le programme est seulement ajouté, supprimé, vérifié et modifié, et il suffit d'ajouter et de télécharger des pièces jointes. Alors commençons notre étude aujourd'hui
Préparation
Après les problèmes d'hier, nous avons déjà des environnements NodeJS et MongoDB. Nous pouvons maintenant créer directement de nouveaux fichiers de projet et fichiers de base de données
La première étape consiste à ouvrir le caractère de commande et passer au disque D pour entrer
Copiez le code comme suit: D: /> Express -e News
Le système construira donc automatiquement l'environnement de base
Il est évident que de nombreux modules n'ont pas de dépendances. À l'heure actuelle, je prendrai directement le package d'hier.json:
La copie de code est la suivante:
{
"nom": "nom d'application",
"Version": "0.0.1",
"Private": vrai,
"scripts": {
"start": "node app.js"
},
"dépendances": {
"Express": "3.4.8",
"ejs": "*",
"MongoDB": "*"
}
}
Ensuite, passez au répertoire du projet:
Copiez le code comme suit: Installer NMP
Toutes les dépendances sont terminées, puis nous entrons
La copie de code est la suivante:
D: / news> application de nœud
Serveur express écoute sur le port 3000
Donc, notre programme a commencé à fonctionner joyeusement. Lorsque nous avons ouvert l'URL, nous avons constaté qu'il n'y avait pas de problème.
PS: Il y a un problème ici qui doit être noté. Le fichier que nous avons téléchargé n'est pas un codage UTF-8, il peut donc y avoir du code brouillé en chinois, et le codage du fichier doit être unifié par tout le monde.
Lorsque le programme commence à fonctionner, il nécessite une configuration liée à la base de données
① Créez d'abord un nouveau dossier d'actualités dans le répertoire MongoDB
② Ajouter des paramètres de fichier de configuration.js au projet
La copie de code est la suivante:
module.exports = {
CookieSecret: «MyNews»,
DB: «nouvelles»,
Hôte: «localhost»
};
③ Créez un nouveau répertoire de modèle et créez un nouveau db.js
La copie de code est la suivante:
var paramètres = requis ('../ Paramètres'),
Db = require ('mongodb'). Db,
Connexion = require ('mongodb'). Connexion,
Server = require ('MongoDB'). Server;
module.exports = new DB (settings.db, nouveau serveur (settings.host, connection.default_port), {Safe: true});
④ Créez un nouveau programme News.bat sur le bureau
Copiez le code comme suit: d: /mongodb/bin/mongod.exe -dbpath d: / mongodb / news
À l'avenir, nous devons démarrer la base de données, il suffit de l'exécuter. De cette façon, nos préparations préliminaires sont essentiellement terminées.
Mais il y a deux autres choses ennuyeuses ici. L'un est qu'il est très ennuyeux de démarrer le programme d'actualités à chaque fois, et l'autre est que vous devez redémarrer lorsque vous modifiez quoi que ce soit. Alors résolvons d'abord ces deux problèmes.
① Créez des news_app.bat sur le bureau, puis exécutez-le pour démarrer le programme.
Copiez le code comme suit: Node D: / News / App
② Le superviseur est un protecteur de processus. Nous pouvons l'utiliser pour nous aider à redémarrer le programme, d'abord suivre, puis ajuster notre node_app.bat
Copiez le code comme suit: Superviseur D: / News / App
Bien sûr, vous devez l'installer avant:
Copiez le code comme suit: NPM Installer -g Superviseur
Après cela, vous n'avez pas besoin de redémarrer manuellement après avoir modifié le fichier (News_App doit être placé dans le répertoire du projet), donc les préparatifs sont ici
Structure du projet
Une fois la première étape terminée, nous devons réfléchir à la structure du projet
① La page d'accueil est l'index, et tous les types de nouvelles et les entrées de nouvelles seront répertoriés ici
② Chaque article a trois boutons pour éditer / supprimer / afficher
③ La page d'accueil a un bouton d'information (les photos peuvent être téléchargées lors de l'ajout)
Les fonctions de base sont comme ci-dessus
Ainsi, nous supprimons la fonction de routage dans l'application et mettons toutes les itinéraires dans l'index
La copie de code est la suivante:
// Mettez la fonction de routage dans l'index
//app.get('/ ', Routes.Index);
//app.get('/users ', user.list);
itinéraires (app);
La copie de code est la suivante:
module.exports = fonction (app) {
// Page d'accueil, maintenant aussi page d'accueil
app.get ('/', fonction (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/ add', fonction (req, res) {
res.send («Ajouter une demande d'actualités»);
});
app.get ('/ delete', fonction (req, res) {
res.send («supprimer la demande d'information»);
});
app.get ('/ vue', fonction (req, res) {
res.send («Voir la demande d'actualités»);
});
app.get ('/ update', fonction (req, res) {
res.send («modifier la demande d'information»);
});
};
La première étape est simple, car il devrait y avoir une page distincte pour ajouter des nouvelles, et cliquer sur le bouton Ajouter provoquera un autre traitement, de sorte que la demande interne doit être subdivisée. Les réglementations suivantes sont maintenant les suivantes:
/ Page par défaut, qui affiche tous les types ainsi que les nouvelles, avec un bouton de suppression
/ Ajouter pour ajouter une page d'information
/ AddNews Ajouter l'adresse de la demande de publication spécifique (Réponse lorsque vous cliquez sur le bouton)
/ Supprimer la demande de nouvelles
/ Afficher une enquête de nouvelles spécifique
Modifiez si légèrement l'itinéraire ci-dessus:
La copie de code est la suivante:
module.exports = fonction (app) {
// Page d'accueil, maintenant aussi page d'accueil
app.get ('/', fonction (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/ add', fonction (req, res) {
res.send («Ajouter une page d'information»);
});
app.post ('/ addNews', fonction (req, res) {
res.send («gérer Ajouter une demande d'actualités»);
});
app.get ('/ delete', fonction (req, res) {
res.send («supprimer la demande d'information»);
});
app.get ('/ vue', fonction (req, res) {
res.send («Voir la demande d'actualités»);
});
};
Nous devons donc créer plusieurs nouveaux modèles pour organiser nos pages Web. Ici, nous ne séparons pas les première et dernière pages.
Ajoutez deux fichiers de modèle Ajouter et afficher, qui fonctionne temporairement cohérent avec index.ejs, et est lié à la modification de la navigation
La copie de code est la suivante:
module.exports = fonction (app) {
// Page d'accueil, maintenant aussi page d'accueil
app.get ('/', fonction (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/ add', fonction (req, res) {
res.render ('add', {title: 'Ajouter une page d'information'});
});
app.post ('/ addNews', fonction (req, res) {
res.send («gérer Ajouter une demande d'actualités»);
});
app.get ('/ delete', fonction (req, res) {
res.send («supprimer la demande d'information»);
});
app.get ('/ vue', fonction (req, res) {
res.render ('View', {Title: 'Afficher la demande de nouvelles'});
});
};
La structure du projet se termine
Opération de données
Après la sortie de la structure globale, nous devons effectuer des opérations de données:
① Ajouter des données (ajouter des nouvelles)
② Afficher les données (affichage des nouvelles)
③ Supprimer les données (supprimer les nouvelles)
Il impliquait à l'origine des opérations de type, mais cela a été fait et il avait disparu. Ne vous souciez pas de cela pour le moment, car il est facile de se confondre lorsque vous le faites pour la première fois.
Ajouter des nouvelles
Ici, nous n'utilisons pas de soumission de formulaire, nous utilisons Ajax ... Ici, nous présentons la bibliothèque Zepto, donc notre page devient comme ceci
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title>
<% = title%> </Title>
<link rel = 'stylesheet' href = '/ stylesheets / style.css' />
<script src = "javascripts / zepto.js" type = "text / javascript"> </ script>
</ head>
<body>
<h1>
<% = title%> </h1>
<div>
Titre: <input type = "text" id = "title" />
</div>
<div>
Contenu: <TextArea id = "Content"> </ TextArea>
</div>
<div>
<input type = "bouton" type = "bouton" id = "ok" value = "add news" />
</div>
<script type = "text / javascript">
$ (document) .ready (function () {
$ ('# ok'). Cliquez sur (fonction () {
var param = {};
param.title = $ ('# title'). Val ();
Param.Content = $ ('# Content'). Val ();
$ .post ('/ addNews', param, function () {
console.log («ajouté avec succès»);
});
});
});
</cript>
</docy>
</html>
Bien qu'il n'y ait pas encore de programme de réponse à la demande, les données ne seront pas traitées et il n'y a pas de pièce jointe ici (la pièce jointe n'est autorisée que pour une), j'ai donc modifié le code et ajouté l'image:
PS: La chose la plus gênante est que l'image est un peu gênante après le traitement de l'Ajax, alors passons simplement aux opérations de forme ici, sinon combien de temps cela prendra pour le faire ...
La copie de code est la suivante:
<html>
<adal>
<Title>
<% = title%> </Title>
<link rel = 'stylesheet' href = '/ stylesheets / style.css' />
</ head>
<body>
<h1>
<% = title%> </h1>
<formulaire enctype = "multipart / form-data" méthode = "post" action = "/ addnews">
<div>
Titre: <input type = "text" id = "title" name = "title" />
</div>
<div>
Image: <input type = "file" id = "pic" name = "pic" />
</div>
<div>
Contenu: <TextArea id = "Content" name = "Content"> </ TextArea>
</div>
<div>
<input type = "soumi" id = "ok" value = "ajouter des nouvelles" />
</div>
</ form>
</docy>
</html>
Il n'est pas nécessaire de considérer trop le problème de la fixation. Faisons-le pour le moment. Maintenant, nous allons d'abord traiter le programme de demande. Ici, nous créerons un nouveau dossier d'actualités en public pour stocker ses photos.
modèle
Ajoutez un nouveau fichier news.js dans le dossier des modèles, construisez une entité pour celui-ci et donnez de nouvelles opérations liées à la requête:
La copie de code est la suivante:
var mongodb = require ('./ db');
Nouvelles de fonction (titre, contenu, pic) {
this.title = title;
this.Content = contenu;
this.pic = pic; // Enregistrer le chemin de stockage
};
module.exports = news;
// Données de stockage
News.prototype = {
Enregistrer: fonction (rappel) {
var date = new Date ();
var time = {
Date: date,
Année: date.getlyar (),
mois: date.getlyar () + "-" + (date.getMonth () + 1),
jour: date.getlyear () + "-" + (date.getMonth () + 1) + "-" + date.getDate (),
minute: date.getlyear () + "-" + (date.getMonth () + 1) + "-" + date.getDate () + "" +
date.Gethours () + ":" + (date.getMinutes () <10? '0' + date.getMinutes (): date.getMinutes ())
}
// Objet de stockage de données
var news = {
Titre: this.title,
Contenu: ce.Content,
pic: this.pic, // Enfin, en ce qui concerne le traitement d'image, enregistrez-le d'abord
Temps: heure
};
// Ouvrez la connexion de données, l'ouvrir est un rappel ...
mongodb.open (fonction (err, db) {
// quitter si l'erreur est erronée
if (err) {
return rappel (err);
}
// Ouvre la collection d'actualités
db.collection ('news', fonction (err, collection) {
if (err) {
MongoDB.Close ();
return rappel (err);
}
// Écrivez à la collection (écrivez dans la base de données)
collection.insert (news, {Safe: true}, function (err) {
return rappel (err);
});
rappel (null); // err est null
});
});
}
};
Il y a donc un programme pour écrire dans la base de données. Ici, nous essaierons d'insérer la base de données. Bien sûr, nous devons modifier le programme au bureau de routage.
PS: Bien sûr, le routage ne peut pas écrire trop de code logique, ce fichier doit être séparé à l'avenir
À l'heure actuelle, la logique dans / addNews doit être modifiée
La copie de code est la suivante:
app.post ('/ addNews', fonction (req, res) {
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var news = new News (titre, contenu, pic)
news.save (fonction (err, data) {
res.send (données);
})
});
Après l'interrogation, il n'y a pas de gros problème, maintenant le problème de l'attachement est le problème
Télécharger des photos
La fonction de téléchargement d'Express lui-même le prend en charge. Express analyse le corps de la demande via BodyParser, puis télécharge le fichier via lui. Il utilise la forme en interne.
Ici, modifiez l'application.use (express.bodyParser ()) dans app.js à:
La copie de code est la suivante: app.use (express.bodyParser ({keepExtensions: true, uploaddir: './public/news'}));
Ouvrez index.js et ajoutez une ligne de code devant lui:
Copiez le code comme suit: fs = require ('fs'),
Modifiez le fichier d'index:
La copie de code est la suivante:
app.post ('/ addNews', fonction (req, res) {
for (var i in req.files) {
if (req.files [i] == 0) {
// Supprimer un fichier en synchronisation
fs.unlinkSync (req.files [i] .path);
console.log («Success supprime un fichier vide»);
} autre {
var path = './public/news/' + req.files [i] .name;
// Renommer un fichier en utilisant la méthode synchrone
fs.renamesync (req.files [i] .path, path);
Console.log («Sunccess rebaptisé un fichier»);
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var news = new News (titre, contenu, pic)
// news.save (fonction (err, data) {
// res.send (données);
//})
});
Pour le moment, après avoir sélectionné le fichier, cliquez sur Ajouter des nouvelles et notre fichier sera téléchargé
Pour le moment, j'ai juste besoin d'enregistrer le nom de fichier dans la base de données, et il y a des images dans le répertoire de fichiers
La copie de code est la suivante:
app.post ('/ addNews', fonction (req, res) {
var pic = null;
for (var i in req.files) {
if (req.files [i] == 0) {
// Supprimer un fichier en synchronisation
fs.unlinkSync (req.files [i] .path);
console.log («Success supprime un fichier vide»);
} autre {
var path = './public/news/' + req.files [i] .name;
// Renommer un fichier en utilisant la méthode synchrone
fs.renamesync (req.files [i] .path, path);
Console.log («Sunccess rebaptisé un fichier»);
}
pic = req.files [i] .name;
}
var title = req.body.title;
var content = req.body.content;
var news = new News (titre, contenu, pic)
news.save (fonction (err, data) {
res.send (données);
})
res.send ('<a href = "./"> demande réussi, retour à la page d'accueil </a>');
});
Il existe des données dans la base de données et notre répertoire dispose également de fichiers. Maintenant, nous avons seulement besoin de lire les données.
PS: Les frères m'ont exhorté à sortir prendre un verre pendant les vacances
Lire les données
La deuxième étape consiste bien sûr à lire les données, et la première consiste à lire les données sur la page d'accueil:
La copie de code est la suivante:
var mongodb = require ('./ db');
Nouvelles de fonction (titre, contenu, pic) {
this.title = title;
this.Content = contenu;
this.pic = pic; // Enregistrer le chemin de stockage
};
module.exports = news;
// Données de stockage
News.prototype = {
Enregistrer: fonction (rappel) {
var date = new Date ();
// Objet de stockage de données
var news = {
Titre: this.title,
Contenu: ce.Content,
pic: this.pic, // Enfin, en ce qui concerne le traitement d'image, enregistrez-le d'abord
Date: date
};
// Ouvrez la connexion de données, l'ouvrir est un rappel ...
mongodb.open (fonction (err, db) {
// quitter si l'erreur est erronée
if (err) {
return rappel (err);
}
// Ouvre la collection d'actualités
db.collection ('news', fonction (err, collection) {
if (err) {
MongoDB.Close ();
return rappel (err);
}
// Écrivez à la collection (écrivez dans la base de données)
collection.insert (news, {Safe: true}, function (err) {
return rappel (err);
});
rappel (null); // err est nul
});
});
}
};
// Lire des articles et des informations connexes
News.get = function (id, rappel) {
// Ouvrez la base de données
mongodb.open (fonction (err, db) {
if (err) {
return rappel (err);
}
db.collection ('news', fonction (err, collection) {
if (err) {
MongoDB.Close ();
return rappel (err);
}
var query = {};
if (id) {
query.id = id;
}
// des articles de requête basés sur l'objet de requête
Collection.Find (Query) .Sort ({{
Date: -1
}). toArray (fonction (err, data) {
MongoDB.Close ();
if (err) {
return rappel (err); //Échoué! Retour à ERR
}
rappel (null, données); //Succès! Retourner le résultat de la requête en tant que tableau
});
});
});
};
news.js
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title>
<% = title%> </Title>
<link rel = 'stylesheet' href = '/ stylesheets / style.css' />
</ head>
<body>
<h1>
<% = title%> </h1>
<ul>
<% pour (var k en données) {%>
<li>
<div>
Titre: <% = data [k] .title%> </div>
<div>
Contenu: <% = données [k] .Content%> </div>
<div>
Attachement: <img src = "news / <% = data [k] .pic%>" /> </div>
</div>
<div>
<a href = "/ delete? id = <% = data [k]%>"> supprimer </a>
</div>
<hr />
</li>
<%}%>
</ul>
</docy>
</html>
Conclusion
D'accord, arrêtons ici pour la production du système d'édition d'articles. À l'avenir, nous ajouterons progressivement des fonctions et les embellirons.