1. Analyse d'ouverture
Bonjour à tous, Big Bear est là encore. Hier, je n'ai pas écrit de blog à cause de quelque chose de personnel, alors je suis revenu aujourd'hui. Cet article concerne principalement la rédaction d'une petite application pour le bloc-notes, l'article précédent,
J'ai également introduit l'utilisation du middleware "Connect" et l'utilisation de "MongoDB". Aujourd'hui, je combinerai ces deux middleware pour écrire un exemple pratique, l'améliorer et le refacter constamment, et j'ai atteint l'objectif de "sincère"
Le but de l'apprentissage complet. Ok, arrêtons de parler non-sens, allons directement au sujet.
2. Analyse des exigences
(1) la fonction d'enregistrement et de connexion de l'utilisateur (aucun scénario d'interaction complexe n'est impliqué, et l'utilisateur déterminera s'il existe déjà lors de l'enregistrement).
(2) L'utilisateur s'est connecté avec succès et a saisi l'arrière-plan du système de gestion des notes (la fonction de l'ajout, de la suppression, de la modification et de la vérification du module de notes).
(3) Les utilisateurs peuvent avoir une division d'autorisation simple (administrateur, utilisateur enregistré).
(4) L'interface est relativement simple et se concentre sur l'apprentissage.
3. Commencez à concevoir et à appliquer (partie 1)
(1), créez une page de connexion utilisateur, le code est le suivant:
La copie de code est la suivante:
<! doctype html>
<html>
<adal>
<Title> BigBear Notepad Application Login </Title>
<meta content = "ie = 8" http-equiv = "x-ua-compatible" />
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<style type = "text / css">
.NOTE-title {
marge-fond: 45px;
Contexte: # 6699cc;
taille de police: 14px;
Police-poids: Bold;
Couleur: #ffff;
Font-Family: Arial;
hauteur: 24px;
hauteur de ligne: 24px;
}
un {
Couleur: # 336699;
Font-Family: Arial;
taille de police: 14px;
Police-poids: Bold;
}
</ style>
<script src = "js / index.js"> </ script>
</ head>
<body>
<div> BigBear Notepad Application Login </div>
<form action = "/ login" méthode = "post">
<span> nom d'utilisateur: </span> <input type = "text" name = "name" /> <br/> <br/>
<span> mot de passe: </span> <input type = "mot de passe" name = "mot de passe" />
<input type = "soumi" value = "login" />
<a href = "reg.html"> Je veux m'inscrire </a>
</ form>
</docy>
</html>
Image de reproduction:
(2) Créer une page d'enregistrement de l'utilisateur, le code est le suivant:
La copie de code est la suivante:
<! doctype html>
<html>
<adal>
<Title> Bigbear Notepad Application Registration </Title>
<meta content = "ie = 8" http-equiv = "x-ua-compatible" />
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<style type = "text / css">
.NOTE-title {
marge-fond: 45px;
Contexte: # FF3300;
taille de police: 14px;
Police-poids: Bold;
Couleur: #ffff;
Font-Family: Arial;
hauteur: 24px;
hauteur de ligne: 24px;
}
</ style>
<script src = "js / index.js"> </ script>
</ head>
<body>
<div> Bigbear Notepad Application Enregistrement </div>
<form action = "/ reg" method = "post">
<span> nom d'utilisateur: </span> <input type = "text" name = "name" /> <br/> <br/>
<span> mot de passe: </span> <entrée type = "mot de passe" name = "mot de passe" /> <br/> <br/>
<input type = "soumi" value = "registre" />
</ form>
</docy>
</html>
Image de reproduction:
(3) Établir le code de connexion "MongoDB", comme suit:
La copie de code est la suivante:
var mongodb = require ("mongodb");
var server = new MongoDB.Server ("localhost", 27017, {
auto_reconnect: vrai
});
var conn = new mongodb.db ("bb", serveur, {
sûr: vrai
});
conn.open (fonction (erreur, db) {
if (erreur) lancer une erreur;
Console.info ("MongoDB Connected!");
});
exports = module.exports = conn;
(4) Créer la classe d'entité du modèle "utilisateur", comme suit:
La copie de code est la suivante:
var conn = require ("../ conn");
fonction utilisateur (utilisateur) {
this.name = user ["name"];
this.password = utilisateur ["mot de passe"];
};
User.prototype.save = fonction (rappel) {
var that = this;
conn.collection ("utilisateurs", {
sûr: vrai
}, fonction (erreur, collection) {
if (error) return conn.close ();
Collection.FindOne ({// Déterminez si cet utilisateur existe
Nom: ce nom
}, fonction (erreur, utilisateur) {
if (error) return conn.close ();
if (! utilisateur) {
collection.insert ({
Nom: That.name + "",
Mot de passe: that.password + ""
}, {
sûr: vrai
}, fonction (erreur, utilisateur) {
if (error) return conn.close ();
rappel && callback (utilisateur);
conn.close ();
});
}
autre{
rappel ("l'utilisateur s'est inscrit!");
}
});
});
};
User.login = fonction (nom, mot de passe, rappel) {
conn.collection ("utilisateurs", {
sûr: vrai
}, fonction (erreur, collection) {
if (error) return conn.close ();
collection.findone ({
Nom: Nom,
Mot de passe: mot de passe
}, fonction (erreur, utilisateur) {
if (error) return conn.close ();
rappel && callback (utilisateur);
conn.close ();
});
});
};
exports = module.exports = utilisateur;
Image de reproduction:
(5), créez l'application "App", comme suit:
La copie de code est la suivante:
// app.js
var connect = require ("./ lib / connect");
var user = require ("./ Modèles / utilisateur");
var app = connect.createServer ();
app .Use (connect.logger ("dev"))
.User (connect.Query ())
.Use (connect.bodyParser ())
.User (connect.cookieParser ())
.Use (connect.static (__ dirname + "/ vues"))
.Use (connect.static (__ dirname + "/ public"))
.Use ("/ login", fonction (demande, réponse, suivant) {
var name = request.body ["name"];
var mot de passe = request.body ["mot de passe"];
user.login (nom, mot de passe, fonction (utilisateur) {
if (user) {
réponse.end ("Bienvenue à:" + utilisateur ["name"] + "^ _ ^ ... ...");
}
autre{
réponse.end ("utilisateur:" + name + "pas enregistrer!");
}
});
})
.Use ("/ reg", fonction (demande, réponse, suivant) {
var name = request.body ["name"];
var mot de passe = request.body ["mot de passe"];
nouvel utilisateur ({
Nom: Nom,
Mot de passe: mot de passe
}). Enregistrer (fonction (utilisateur) {
if (utilisateur && utilisateur ["name"]) {
réponse.end ("utilisateur:" + name + "registre fait!");
}
autre{
réponse.end ("utilisateur:" + name + "s'est inscrit!");
}
});
})
.Listen (8888, function () {
Console.log ("Web Server en cours d'exécution sur le port ---> 8888.");
});
Laissez-moi expliquer:
(1) "Connect.Query ()" ------- Traitez l'analyse de la demande "Get".
(2) "Connect.BodyParser ()" ------ Traitez l'analyse de la demande "Post".
(3) "Connect.Static (__ Dirname +" / Views "), Connect.Static (__ Dirname +" / public ")"
Représente la vue de modèle "HTML" et les répertoires de ressources qui sont des ressources statiques telles que "JS, CSS, JPG, GIF".
Ce qui suit est la structure du répertoire de cette application:
Quatre, résumons
(1) Maîtrisez les instructions d'opération de base de la base de données de fonctionnement de NodeJS.
(2), diviser les hiérarchies, telles que les modèles, les vues et les itinéraires.
(3) Optimiser et modifier en continu les exemples de cet article (par exemple, s'inscrire pour vérifier si l'utilisateur existe, vous pouvez créer indépendamment un "usermanager" pour compléter la vérification de l'utilisateur et enregistrer des actions).
(4) Pour continuer à remplir les fonctions ultérieures demain, veuillez l'attendre avec impatience.