Este artículo se cambia de la "[traducción] Guía de inicio de Feiyu para desarrolladores front-end, construyendo Node.js, Express, Jade, MongoDB Server desde cero. La razón por la cual Jade fue reemplazado por EJS es porque creo que EJS está más en línea con los hábitos de los programadores web, o más bien, solo debería ser más en línea con el uso de los hábitos de Php y ASP. Ok.
Instalación de la Parte 1 en 15 minutos
Si realmente aprende desde cero, tómese un tiempo para construir el entorno primero. No es difícil, estoy usando Win8, por lo que esto se ve un poco diferente de esos tutoriales usando Mac y Ubuntu u otros sistemas *nix, pero es más o menos lo mismo.
Paso 1 Instalar node.js
Es fácil ir al sitio web oficial de Node.js y hacer clic en el botón Green Big Install, que detectará automáticamente su sistema y le dará una descarga del archivo de instalación correcto. (Si no, haga clic en el botón Descargar para seleccionar la descarga que necesita). Ejecute el instalador, y eso está bien. Ha instalado Node.js y NPM (Node Package Manager) para instalar fácilmente varios paquetes útiles en el nodo.
Paso 2 Instalar Express
Ahora que hemos dejado que el nodo se ejecute, necesitamos algo más que nos permita crear un sitio que esté disponible. A continuación, necesitamos instalar Express, que es un marco que convierte el nodo de una aplicación original a un servidor web más similar que generalmente usamos. Necesitamos comenzar con Express porque necesitamos la funcionalidad de andamio que proporciona. Ingresemos este comando:
La copia del código es la siguiente:
c:/nodo> npm install -g express
De esta manera, Express se instala correctamente en nuestro nodo y se ha establecido a nivel mundial disponible. Verá un montón de salida en la ventana de la línea de comandos, principalmente HTTP 304 y obtendrá solicitudes, lo cual es normal. Express debe ser instalado y disponible.
Paso 3 Crear un proyecto expreso
Vamos a usar Express y EJS, pero no para el preprocesamiento de CSS. Escribiremos a mano algunos CSS. Necesitamos usar EJS u otros motores de plantilla para procesar los datos de nodo y expresar. Si conoce HTML, EJS no es difícil. Solo recuerde que necesita concentrarse o las cosas pueden ser propensas a los errores.
Ahora ingrese en la misma ventana de línea de comando:
La copia del código es la siguiente:
c:/nodo> sesiones expresas nodetest1
Entra y verás un montón de cosas como esta:
La copia del código es la siguiente:
C:/node> express --sessions Nodetest1
Crear: Nodetest1
Crear: Nodetest1/paquete.json
Crear: Nodetest1/App.js
Crear: rutas Nodetest1/
Crear: Nodetest1/Routes/Index.js
Crear: Nodetest1/Routes/User.js
Crear: Nodetest1/Vistas
Crear: Nodetest1/Views/Index.EJS
Crear: Nodetest1/Public/Images
Crear: Nodetest1/Public/JavaScripts
Crear: Nodetest1/Public
Crear: Nodetest1/public/Stylesheets
Crear: Nodetest1/public/Stylesheets/style.css
Instalar dependencias:
$ CD Nodetest1 && NPM Install
Ejecute la aplicación:
Aplicación $ nodo
Paso 4 Editar dependencias
Ok, ahora tenemos algunas estructuras básicas de proyectos, pero aún no ha terminado. Notará que el proceso de instalación de Express crea un archivo llamado paquete.json en su directorio Nodetest1. Abra el archivo con un editor de texto. Debería verse así.
La copia del código es la siguiente:
{
"Nombre": "Nombre de la aplicación",
"Versión": "0.0.1",
"Privado": Verdadero,
"Scripts": {
"Inicio": "Node App.js"
},
"Dependencias": {
"Express": "3.4.8",
"EJS": "*"
}
}
Este es un archivo de formato JSON estándar que indica nuestra aplicación y sus dependencias. Necesitamos agregar algo. Por ejemplo, llamadas a MongoDB y Monk. Cambiar la parte de dependencias a esto:
La copia del código es la siguiente:
"Dependencias": {
"Express": "3.4.8",
"EJS": "*",
"MongoDB": "*",
"Monje": "*"
}
Paso 5 Dependencias de instalación
Ahora hemos definido las dependencias del proyecto. * le dirá a NPM que "instale la última versión". Regrese a la ventana de la línea de comando, ingrese el directorio Nodetest1 e ingrese:
La copia del código es la siguiente:
C:/node/nodetest1> install npm
Emite un montón de cosas. Esto se debe a que lee directamente nuestro archivo JSON modificado, reconoce las dependencias en él e instala los archivos requeridos. Después de completar la instalación de NPM, debe tener un directorio Node_Modules que contenga todos los archivos de dependencia requeridos para nuestro proyecto.
Ahora tenemos una aplicación completa y está lista para ejecutarse. ¡Vamos a intentarlo! Asegúrese de que su directorio actual sea el directorio Nodetest1, ingrese:
La copia del código es la siguiente:
C:/node/nodetest1> node app.js
Después de ingresar al auto, verá:
La copia del código es la siguiente:
Servidor expreso escuchando en el puerto 3000
maravilloso. Abra el navegador e ingrese http: // localhost: 3000, y debería poder ver una página de bienvenida en Express.
Ahora ha comenzado a ejecutar su propio servidor web de nodo JS con Motor Express y EJS HTML Plantilla Engine. No es muy difícil, ¿verdad?
La Parte 2 está aquí, escribamos "¡Hola, mundo!"
Abra su editor de texto de uso común u otro IDE, personalmente me gusta usar texto sublime. Abra App.js en su directorio Nodetest1, y este archivo es el núcleo de su aplicación. Deberías ver algo como esto:
La copia del código es la siguiente:
var express = request ('express');
rutas var = requerir ('./ rutas');
VAR user = request ('./ rutas/user');
var http = require ('http');
ruta var = requerir ('ruta');
Esto solo define un montón de variables de JavaScript y apunta a algunos paquetes y dependencias, funciones de nodos y rutas. Rutas es equivalente a una colección de modelos y controladores en MVC. Es responsable de reenviar solicitudes y también contiene cierta lógica de procesamiento. Express ha creado todas estas cosas para nosotros, y ahora ignoramos la ruta del usuario y comenzamos a escribir la ruta de nivel superior (controlada por rutas/index.js).
Al final del archivo anterior:
La copia del código es la siguiente:
var app = express ();
Esta oración es crucial. Instancia Express y asigna valor a nuestra variable de aplicación. El siguiente contenido debe usar esta variable para configurar un montón de parámetros expresos. Continuar ingresando:
La copia del código es la siguiente:
// Todos los entornos
app.set ('puerto', process.env.port || 3000);
App.set ('Vistas', Path.Join (__ Dirname, 'Vistas'));
App.set ('Ver motor', 'EJS');
app.use (express.favicon ());
app.use (express.logger ('dev'));
App.use (Express.BodyParser ());
app.use (express.methodoverride ());
App.use (App.router);
app.use (express.static (path.join (__ dirname, 'public')));
Aquí configuramos el puerto, buscamos el directorio de vistas, qué motor de plantilla usar para manejar estas vistas y algunas otras cosas. También preste atención a la última línea, que le dice a Express que aloje los archivos estáticos en el público/ directorio como archivos en el directorio de nivel superior. Por ejemplo, su directorio de imágenes se almacena en c:/nodo/nodetest1/public/imágenes/, pero la dirección de acceso real es http: // localhost: 3000/imágenes/.
NOTA: Debe poner esta línea
La copia del código es la siguiente:
App.use (Express.BodyParser ());
Cambiar
La copia del código es la siguiente:
app.use (express.urlencoded ());
Esto es para ignorar la información de advertencia en la ventana del nodo durante la operación de algunas aplicaciones. Principalmente, algunos express y su complemento pueden modificarse en el futuro. Si no realiza esta modificación, recibirá un montón de advertencias de que una determinada función caducará pronto cuando se ejecute el programa.
Luego agregue:
La copia del código es la siguiente:
// solo desarrollo
if ('desarrollo' == app.get ('env')) {
app.use (express.errorHandler ());
}
De esta manera, puede hacer algunas verificaciones de error durante el desarrollo.
Continuar aumentando:
La copia del código es la siguiente:
app.get ('/', rutas.index);
app.get ('/users', user.list);
Esto le dirá a la ruta qué ruta usar cuando llegue una solicitud de URI. Tenga en cuenta que la variable del usuario se define anteriormente y se asigna a /routes/user.js. Llamaremos a la función de lista definida en este archivo. Aquí se puede mostrar una lista de usuarios.
Continuar aumentando:
La copia del código es la siguiente:
http.createServer (app) .listen (app.get ('puerto'), function () {
console.log ('Express Server Listening on Port' + App.get ('Port'));
});
Finalmente, cree un servidor HTTP y comience. Eso es todo.
(El contenido anterior se completa en la plantilla generada por New Express y no necesita ser escrita en él usted mismo)
Ahora, escribamos algo útil. No escribiremos "¡Hola mundo!" directamente en nuestra página de índice. Aprovecharemos esta oportunidad para aprender cómo usar el enrutamiento de ruta y aprender cómo funciona el motor EJS. Agregue una línea después del párrafo App.get () del archivo APP.JS anterior:
app.get ('/helloworld', rutes.helloworld);
Si presiona Ctrl+C en la ventana Línea de comando para finalizar el proceso App.js y reiniciarlo, y luego usa el navegador para acceder a http: // localhost: 3000/helloworld, obtendrá un error de nodo emocionante y un montón de indicaciones de bloqueo en la ventana de la línea de comandos. Esto se debe a que no hemos modificado la ruta para procesar esta ruta. Ven y haz esto. En su editor, vaya al directorio de rutas, busque index.js y ábralo. Debería verse así:
La copia del código es la siguiente:
/*
* Obtenga la página de inicio.
*/
exports.index = function (req, res) {
res.render ('índice', {título: 'express'});
};
Agreguemos una nueva página. Prefiero crear un archivo de ruta independiente para cada directorio de primer nivel, pero ahora no estamos planeando crear una estructura de directorio completa para Helloworld en Vistas, por lo que utilizamos rutas de índice por el momento. Agregue al final de este archivo:
La copia del código es la siguiente:
exports.helloworld = function (req, res) {
res.render ('Helloworld', {Título: '¡Hola, mundo!'});
};
Será responsable de manejar esta solicitud de URI, pero ahora no tenemos una página real para hacer RENDER RENDER, que es de lo que EJS es responsable. Vaya a su directorio de vistas, abra index.eJS y guárdelo como archivo helloworld.ejs. Ahora debería verse así:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> < %= title %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</ablo>
<Body>
<h1> < %= título %> </h1>
<p> Bienvenido a < %= título %> </p>
</body>
</html>
Debería ser fácil de entender.
Guarde el archivo. Presione CTRL+C en la ventana Línea de comando para interrumpir App.js y luego ingrese el nodo App.js para reiniciarlo. Consejo: cuando modifica un archivo de plantilla EJS, no necesita reiniciar el servidor. Pero cuando cambia un archivo JS, como App.js o un archivo JS de enrutamiento, debe reiniciar el servidor para ver el efecto.
Después de que se inicia el servidor, el servidor abre http: // localhost: 3000/helloworld y debería poder ver esta hermosa interfaz:
¡está bien! Ahora que tenemos las rutas que pueden manejar nuestras plantillas, vemos el efecto que queremos. A continuación, hagamos algunos modelos (capa de datos).
Parte 3 Crear una base de datos y leer datos
Paso 1 Instalar MongoDB
Cerremos el editor de texto primero y volvamos a la ventana de la línea de comandos. Primero use su navegador, abra http://mongodb.org/, y descargue Mongo. Haga clic en el enlace de descarga en el menú principal para encontrar la versión que le convenga. Para Win8 de 64 bits, descargue la versión de 64 bits *2008r2+. Después de descargar, es un archivo zip, y no se compromete a C:/Mongo, C:/Program Files/Mongo o lo que sea. Esto no importa. Guardamos los datos en nuestro directorio Nodetest1.
Paso 2 Run Mongod y Mongo
Cree datos de subdirectorio en nuestro directorio Nodetest1 y luego ingrese el directorio bin de su directorio MongoDB en la ventana de la línea de comandos e ingrese:
La copia del código es la siguiente:
MongoD DBPath C:/Node/Nodetest1/Data
Verá que se inicia el servidor Mongo, y la primera inicio lleva un poco de tiempo, ya que requiere pre-asignación de un espacio de disco duro y algunas otras tareas. Cuando solicita "[InitandListen] esperando conexiones en el puerto 27017", está hecho. No hay nada más que hacer, el servidor ya se está ejecutando. Ahora necesita abrir otra ventana de la línea de comando, ingresar el directorio bin del directorio Mongo e ingresar
La copia del código es la siguiente:
mongo
Verás algunos consejos como este:
La copia del código es la siguiente:
C:/Mongo> Mongo
Versión de shell MongoDB: 2.4.5
Conectando a: Prueba
En este momento, si mira la ventana MongoD, verá un mensaje de que se ha conectado una conexión. A continuación, utilizaremos este cliente de línea de comandos para procesar manualmente nuestra base de datos, pero esto no es necesario para nuestro sitio web.
Paso 3 Crear una base de datos
No se preocupe por el indicador anterior para conectarse a la prueba. Esa es solo una base de datos que Mongo vale cuando no especifica una base de datos, y ni siquiera creará esta base de datos llamada prueba a menos que le agregue un registro. Creemos nuestra propia base de datos. En la ventana de la línea de comandos de Mongo, ingrese:
La copia del código es la siguiente:
Use Nodetest1
No creará esta base de datos a menos que insertemos algunos datos en ella.
Paso 4 Agregar algunos datos
Mi característica favorita de MongoDB es que utiliza JSON como estructura de datos, lo que significa que estoy muy familiarizado con ella. Si no está familiarizado con JSON, lea primero algunos materiales relevantes, que está más allá del alcance de este tutorial.
Agregamos algunos datos a la colección. En este tutorial, solo tenemos una base de datos simple, dos campos: nombre de usuario y correo electrónico. Nuestros datos se ven así:
La copia del código es la siguiente:
{
"_id": 1234,
"nombre de usuario": "cwbuecheler",
"Correo electrónico": "[email protected]"
}
Puede crear su propio valor del campo _id, pero creo que es mejor dejar que Mongo lo haga. Crea un valor único para cada registro. Veamos cómo funciona. En la ventana Mongo, ingrese:
La copia del código es la siguiente:
db.usercollection.insert ({"nombre de usuario": "testuser1", "correo electrónico": "[email protected]"})
Consejo importante: DB es la base de datos Nodetest1 que creamos anteriormente, y Usercollection es nuestra colección, que es equivalente a una tabla de datos. Tenga en cuenta que no necesitamos crear esta colección por adelantado, se creará automáticamente cuando se use por primera vez. Ok, presione Entrar. Si todo va bien, verás ... nada. Esto no es muy bueno, entra:
La copia del código es la siguiente:
db.usercollection.find (). Pretty ()
Si tiene curiosidad, el método bonito formateará el contenido de salida y agregará la sangría de NewLine. Debería mostrar:
La copia del código es la siguiente:
{
"_id": objectId ("5202b481d2184d390cbf6eca"),
"nombre de usuario": "testuser1",
"Correo electrónico": "[email protected]"
}
Por supuesto, el objeto que obtienes debe ser diferente, Mongo generará automáticamente uno. Si ha utilizado los servicios de interfaz JSON antes, cree que, ¡guau, llamar a esto en la web debería ser muy simple! Bueno, tienes razón.
Consejo: Como servicio formal, no debe querer que todos los datos estén en el nivel superior. Con respecto al diseño de la estructura de datos de MongoDB, eche un vistazo a Google.
Ahora que tenemos un dato, agregamos más puntos. Ingresar:
La copia del código es la siguiente:
NewsStuff = [{"nombre de usuario": "testUser2", "correo electrónico": "[email protected]"}, {"nombre de usuario": "testuser3", "correo electrónico": "[email protected]"}]
db.usercollection.insert (newstuff);
Tenga en cuenta que pasamos múltiples datos a la colección a la vez a través de un datos. ¡Qué simple! Luego use el comando Buscar arriba y verá estos tres datos.
Ahora integremos el servidor web y la base de datos construida antes.
Paso 5 Conectar Mongo al nodo
Ahora creemos una página y mostremos los registros en la base de datos en una hermosa tabla. Aquí está el contenido HTML que estamos preparando para generar:
La copia del código es la siguiente:
<ul>
<li> <a href = "mailto: [email protected]"> testuser1 </a> </li>
<li> <a href = "mailto: [email protected]"> testuser2 </a> </li>
<li> <a href = "mailto: [email protected]"> testuser3 </a> </li>
</ul>
Sé que esto no es muy científico, pero puedes entenderlo. Solo estamos tratando de construir un programa de lectura y escritura de base de datos simple, no un sitio web completo. Primero, agregamos un poco de contenido a App.js (el corazón y el alma de nuestro programa) para que podamos vincular MongoDB. Abra C: /node/nodetest1/app.js, en la parte superior verá:
La copia del código es la siguiente:
var express = request ('express');
rutas var = requerir ('./ rutas');
VAR user = request ('./ rutas/user');
var http = require ('http');
ruta var = requerir ('ruta');
Agregue debajo:
La copia del código es la siguiente:
// nuevo código
var mongo = request ('MongoDB');
var monje = requirir ('monje');
var db = monk ('localhost: 27017/nodetest1');
Estas líneas le dirán a la aplicación que necesitamos conectarnos a MongoDB. Usamos Monk para ser responsable de esta conexión. Nuestra ubicación de la base de datos es Localhost: 27017/Nodetest1. Tenga en cuenta que 27017 es el puerto predeterminado de MongoDB. Si modifica el puerto por alguna razón, también debe cambiar el registro aquí. Ahora mira la parte inferior del archivo:
La copia del código es la siguiente:
app.get ('/', rutas.index);
app.get ('/users', user.list);
app.get ('/helloworld', rutes.helloworld);
Agregue una línea a continuación:
La copia del código es la siguiente:
app.get ('/userList', rutes.userList (db));
Esta línea le dice a la aplicación que cuando el usuario accede a la ruta /UserList, necesitamos pasar la variable DB a la ruta de la lista de usuarios. Pero todavía no tenemos una ruta de la lista de usuarios, así que creemos una ahora.
Paso 6 Lea los datos en Mongo y muestra álcallos
Use su editor para abrir c: /node/nodetest1/routes/idnex.js, que tiene dos rutas: índice y hello world. Ahora agregemos el tercero:
La copia del código es la siguiente:
exports.userList = function (db) {
Función de retorno (REQ, RES) {
var colección = db.get ('UserCollection');
Collection.find ({}, {}, function (e, docs) {
res.render ('UserList', {
"Userlist": Docs
});
});
};
};
Bueno, las cosas se vuelven un poco complicadas. Aquí primero definimos una función, recibimos la variable DB que pasamos y luego llamamos a un render de página que es el mismo que las dos rutas anteriores. Le decimos que necesitamos leer la Usercollection, hacer una búsqueda y los datos devueltos se guarda en la variable DOCS. Una vez que hemos leído el contenido, llamamos a Render para representar la página de plantilla de Listic User y pasar la variable DOCS obtenida como la variable de Listic de usuarios en el motor de plantilla.
A continuación, cree nuestra plantilla EJS. Abra index.eJS en el directorio de vistas, guarde como userList.Ejs y modifique su HTML a esto:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> UserList </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</ablo>
<Body>
<h1> UserList </h1>
<ul>
<%
para (var i en userList) {
%>
<li> <a href = ”mailto: <%= userList [i] .Email%>”> <%= userList [i] .Username%> </a> </li>
< %} %>
</ul>
</body>
</html>
Guarde el archivo y reinicie el servidor de nodo. Espero que aún recuerdes cómo reiniciar. Abra el navegador y visite http: // localhost: 3000/userlist, y debería ver una interfaz como esta:
Haga clic en el botón Enviar y verá un error de "No puedo publicar a /adduser". Vamos a arreglarlo.
Paso 2 Cree la función de procesamiento de su base de datos
Como antes, modificamos App.js, luego enrutamos el archivo y luego la plantilla EJS. Sin embargo, no hay necesidad de una plantilla EJS aquí, porque saltaremos para publicar más tarde. Agregue una línea después del párrafo App.get () de App.js:
La copia del código es la siguiente:
app.post ('/adduser', rutes.adduser (db));
Tenga en cuenta que esto es App.post, no App.get. Establezcamos la ruta. Regrese a rutas/index.js y cree nuestra función de inserción de base de datos. Esto es bastante grande, así que le sugiero que escriba un buen comentario.
La copia del código es la siguiente:
exports.adduser = function (db) {
Función de retorno (REQ, RES) {
// Obtenga nuestros valores de formulario. Estos confían en los atributos de "nombre"
var userName = req.body.username;
var useremail = req.body.userEmail;
// Establecer nuestra colección
var colección = db.get ('UserCollection');
// Enviar a la DB
colección.insert ({
"Nombre de usuario": nombre de usuario,
"correo electrónico": correo electrónico
}, función (err, doc) {
if (err) {
// Si falló, devuelve el error
res.send ("Hubo un problema para agregar la información a la base de datos");
}
demás {
// Si funcionó, establezca el encabezado para que la barra de direcciones aún no diga /adduser
res.location ("UserList");
// y reenviar a la página de éxito
res.Redirect ("UserList");
}
});
}
}
Obviamente, en proyectos reales, aún debe hacer mucha verificación, como el nombre de usuario y el correo electrónico, no permiten la duplicación, y la dirección de correo electrónico debe cumplir con ciertas reglas de formato. Pero ahora no nos importan estas cosas. Puede ver que cuando se realiza la base de datos de inserción, dejamos que el usuario vuelva a la página de la lista de usuarios donde deberían ver los datos recién insertados.
¿Es esta la mejor manera?
Paso 3 Conéctese a la base de datos y escriba los datos
¡Asegúrate de que tu mongod esté funcionando! Luego reinicie su servidor de nodo. Abra http: // localhost: 3000/Newuser con su navegador. Ahora completamos algún contenido y hacemos clic en el botón Enviar. Si va bien, deberíamos volver a la página de la lista de usuarios y ver los nuevos datos que acabamos de agregar.
Ahora hemos completado oficialmente la lectura y la escritura en la base de datos MongoDB usando Node.js, Exress y EJS. Ya somos un programador de NIU X.
Felicitaciones, de verdad. Si ha terminado este tutorial en serio y es muy serio sobre el aprendizaje en lugar de simplemente copiar el código, debe tener un concepto completo de rutas, opiniones, lectura de datos y datos de escritura. ¡Aquí hay todo el conocimiento que necesita usar para desarrollar cualquier otro sitio web completo! No importa lo que pienses, creo que esto es realmente genial.
Parte 5 Siguiente paso
Ahora comienza, tienes posibilidades ilimitadas. Puede echar un vistazo a Mongoose, otro paquete de nodo que maneja las bases de datos MongoDB. Es un poco más grande que el monje y tiene más características. También puede echar un vistazo a Stylus, un motor CSS Express. Puede Google Node Express Mongo Tutorial y ver qué sigue. Estudie duro y mejore todos los días.
Espero que este tutorial ayude, escribí esto porque cuando comencé a aprender realmente necesitaba algo como esto, pero realmente no pude encontrarlo. Si lo has visto aquí, ¡muchas gracias!