1. Análisis de apertura
Hola a todos, Big Bear está aquí de nuevo. Ayer, no escribí un blog debido a algo personal, así que salí de nuevo hoy. Este artículo se trata principalmente de escribir una pequeña aplicación para el bloc de notas, el artículo anterior,
También he introducido el uso de "Connect" Middleware y el uso de "MongoDB". Hoy, combinaré estos dos middleware para escribir un ejemplo práctico, mejorarlo y refactorizarlo constantemente, y he logrado el objetivo de "sincero"
El propósito del aprendizaje completo. Ok, dejemos de hablar tonterías, solo ve directamente al tema.
2. Análisis de requisitos
(1) Función de registro e inicio de sesión del usuario (no hay escenarios de interacción complejos involucrados y el usuario determinará si ya existe al registrarse).
(2) El usuario inició sesión con éxito e ingresó el fondo del sistema de administración de notas (la función de agregar, eliminar, modificar y verificar el módulo de nota).
(3) Los usuarios pueden tener una división de permiso simple (administrador, usuario registrado).
(4) La interfaz es relativamente simple y se centra en el aprendizaje.
3. Comience a diseñar y aplicar (Parte 1)
(1), cree una página de inicio de sesión de usuario, el código es el siguiente:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> Bigbear de la aplicación de notas de nota de inicio de sesión </title>
<meta content = "ie = 8" http-oquiv = "x-ua-compatible"/>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style type = "text/css">
.note-title {
margen de fondo: 45px;
Antecedentes: #6699cc;
tamaño de fuente: 14px;
Font-Weight: Bold;
Color: #ffff;
Font-Family: Arial;
Altura: 24px;
Línea-aguja: 24px;
}
a {
Color: #336699;
Font-Family: Arial;
tamaño de fuente: 14px;
Font-Weight: Bold;
}
</style>
<script src = "js/index.js"> </script>
</ablo>
<Body>
<iv> Bigbear Solicitud de aplicación de notas </div>
<Form Action = "/Login" Method = "Post">
<span> Nombre de usuario: </span> <input type = "text" name = "name"/> <br/> <br/>
<span> contraseña: </span> <input type = "contraseña" name = "contraseña" />
<input type = "enviar" valor = "inicio de sesión" />
<a href = "reg.html"> Quiero registrarme </a>
</form>
</body>
</html>
Imagen de reproducción:
(2) Cree una página de registro de usuario, el código es el siguiente:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> Bigbear Registro de la aplicación de notas de bloc de notas </title>
<meta content = "ie = 8" http-oquiv = "x-ua-compatible"/>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style type = "text/css">
.note-title {
margen de fondo: 45px;
Antecedentes: #FF3300;
tamaño de fuente: 14px;
Font-Weight: Bold;
Color: #ffff;
Font-Family: Arial;
Altura: 24px;
Línea-aguja: 24px;
}
</style>
<script src = "js/index.js"> </script>
</ablo>
<Body>
<div> registro de la aplicación de notas de nota de bigbear </div>
<Form Action = "/reg" Method = "Post">
<span> Nombre de usuario: </span> <input type = "text" name = "name"/> <br/> <br/>
<span> contraseña: </span> <input type = "contraseña" name = "contraseña"/> <br/> <br/>
<input type = "enviar" valor = "registro" />
</form>
</body>
</html>
Imagen de reproducción:
(3) Establecer el código de conexión "MongoDB", como sigue:
La copia del código es la siguiente:
var mongoDB = require ("MongoDB");
VAR Server = new MongoDB.Server ("localhost", 27017, {
auto_reconnect: verdadero
});
var conn = new MongoDB.DB ("BB", servidor, {
seguro: verdadero
});
conn.open (función (error, db) {
if (error) tirar error;
console.info ("MongoDB conectado!");
});
exports = módulo.exports = Conn;
(4) Crear la clase de entidad modelo "Usuario", de la siguiente manera:
La copia del código es la siguiente:
var conn = requirir ("../ Conn");
Usuario de funciones (usuario) {
this.name = user ["nombre"];
this.password = user ["Password"];
};
User.prototype.save = function (devolución de llamada) {
var que = esto;
conn.collection ("usuarios", {
seguro: verdadero
}, función (error, colección) {
if (error) return conn.close ();
colección.findone ({// Determinar si este usuario existe
Nombre: ese name
}, función (error, usuario) {
if (error) return conn.close ();
if (! user) {
colección.insert ({
Nombre: that.name + "",
Contraseña: that.password + ""
}, {
seguro: verdadero
}, función (error, usuario) {
if (error) return conn.close ();
Callback && Callback (usuario);
conn.close ();
});
}
demás{
devolución de llamada ("¡El usuario se ha registrado!");
}
});
});
};
User.login = function (nombre, contraseña, devolución de llamada) {
conn.collection ("usuarios", {
seguro: verdadero
}, función (error, colección) {
if (error) return conn.close ();
colección.findone ({
Nombre: Nombre,
Contraseña: contraseña
}, función (error, usuario) {
if (error) return conn.close ();
Callback && Callback (usuario);
conn.close ();
});
});
};
exports = módulo.exports = user;
Imagen de reproducción:
(5), cree la aplicación "aplicación", como sigue:
La copia del código es la siguiente:
// App.js
var conection = request ("./ lib/conection");
VAR user = request ("./ modelos/user");
var App = Connect.CreateServer ();
App .use (Connect.Logger ("dev"))
.use (conecte.Query ())
.use (conecte.bodyParser ())
.use (Connect.cookieParser ())
.use (Connect.Static (__ Dirname + "/Vistas"))
.use (Connect.static (__ dirname + "/public"))
.use ("/login", función (solicitud, respuesta, siguiente) {
var name = request.body ["nombre"];
VAC PASSWORD = request.body ["contraseña"];
user.login (nombre, contraseña, función (usuario) {
if (usuario) {
Respuesta.end ("Bienvenido a:" + Usuario ["Nombre"] + " ^ _ ^ ... ...");
}
demás{
Response.end ("Usuario:" + Nombre + "¡No registrarse!");
}
});
})
.use ("/reg", función (solicitud, respuesta, siguiente) {
var name = request.body ["nombre"];
VAC PASSWORD = request.body ["contraseña"];
nuevo usuario ({
Nombre: Nombre,
Contraseña: contraseña
}). Guardar (función (usuario) {
if (user && user ["name"]) {
Response.end ("Usuario:" + Nombre + "¡Regístrese!");
}
demás{
Response.end ("Usuario:" + Name + "se ha registrado!");
}
});
})
.listen (8888, function () {
console.log ("servidor web que se ejecuta en el puerto ---> 8888");
});
Déjame explicarte:
(1) "Connect.Query ()" ------- Proceso El análisis de la solicitud "Obtener".
(2) "Connect.BodyParser ()" ------ procesa el análisis de la solicitud "Post".
(3) "Connect.static (__ dirname +"/Vistas "), Connect.static (__ dirname +"/public ")"
Representa la vista de plantilla "HTML" y los directorios de recursos que recursos estáticos como "JS, CSS, JPG, GIF".
La siguiente es la estructura del directorio de esta aplicación:
Cuatro, resumamos
(1) Dominar las declaraciones de operación básicas de la base de datos operativa NodeJS.
(2), divide las jerarquías, como modelos, vistas y rutas.
(3) Optimizar y modificar continuamente los ejemplos en este artículo (por ejemplo, registrarse para verificar si el usuario existe, puede crear independientemente un "usermanager" para completar las acciones de verificación y guardado del usuario).
(4) Para continuar completando las funciones posteriores mañana, espere con ansias.