Bienvenido de nuevo a esta lección. Te mostraré cómo podemos escribir.
H m l.
En un archivo separado, podemos enviar ese archivo de regreso en la respuesta en lugar de lo que hemos
estado haciendo hasta ahora usando el envío de redstart.
Aquí hay tres objetivos principales.
El primero es usar el enunciado de enroque rojo para procesarlo y enviar un archivo de cada archivo, y eso tendrá más
sentido una vez que hablemos sobre lo que somos.
Y ese es el siguiente objetivo.
Explica qué es Ejaz y por qué lo usamos.
Y finalmente, pasar variables a Ejay como plantillas.
Entonces, para comenzar aquí voy a necesitar una nueva aplicación Express y voy a seguir creando
la aplicación básica básica desde cero, lo cual no continuaré haciendo en cada video, pero aún es bastante temprano en
el curso. .
Y solo quiero asegurarme de que te acostumbres a verlo y hacerlo porque es
algo que vas a hacer sin parar.
haré un nuevo directorio dentro de eso y llamaremos a esta demostración de Ejay us.
Así que tengo un directorio llamado More express desde donde trabajaré para esta unidad y
Y luego, en lugar de la demo de Ejaz, ejecutaremos NPM en ella y aceleraré con esto.
Entonces ese nombre está bien.
La versión es buena descripción está vacía.
Siempre me gusta cambiar esto a la aplicación.
Sí.
Solo una preferencia personal
Presiona ingresar algunas veces más.
No necesita llenar ninguno de esos y allí vamos.
Y ahora, si nos lo permiten, tenemos un paquete que Jason nos permite crear
nuestro acto J y también correremos NPM install express dash dash save.
Aquí vamos.
Ahora vamos a abrir el archivo de jazz y comenzar a agregar un código allí.
Y en lugar de solo hacer ls y luego hacer clic en J. S. y al hacer clic en abrir, recientemente encontré
otra forma de hacerlo.
9 recientemente agregado, que es si escribe espacio C9 y luego el nombre de un archivo o la ruta a un archivo.
Ese Cloud
Así que la aplicación base C9.
J Sí, eso lo abrirá para usted en el editor.
Es mucho más rápido que tener que escribir ls y luego hacer clic en el archivo y luego hacer clic en Abrir.
Así que vamos a obtener el código expreso básico aquí hasta el momento expresar es igual a requerir expreso y luego la aplicación var es
igual a expresar ejecutarlo como una función.
Una cosa que ocasionalmente verá es que alguien dijo que la aplicación Savar es igual a requerir exprés y luego
solo ejecutarlo como una función de inmediato.
Sin embargo, la mayoría de la gente lo hará de esta manera en dos pasos separados y lo más común es que veas Xpress
y la aplicación que pueden ser cualquier cosa.
Ahora actuemos.
Escuche en la parte inferior que iniciará el servidor para que necesite el puerto que
procesa ese puerto EMV y luego procese ese IP D-NV y esas son variables de entorno que Cloud 9 configuró
para que estemos accediendo al puerto y Dirección IP.
Y luego agrego mi devolución de llamada que se ejecutará una vez que el servidor se haya configurado una vez que esté
escuchando y veremos lo que ocurre con el registro.
El servidor está escuchando así y guardará.
Ahora agreguemos en nuestra primera ruta y haremos la ruta.
Siempre me gusta empezar allí y eso siempre es una frase confusa para algunos de mis
alumnos porque esta palabra que pronuncio ruta algunos de ellos se pronunciará como raíz.
Intento dejarlo muy claro cuando digo raíces.
Solo estoy hablando de R O T como en esto.
La ruta raíz
y luego tendrá estos dos objetos solicitados en respuesta y nosotros continuaremos y solo llamaremos al rez. enviar y simplemente haremos algo simple.
OK, así que agreguemos eso en apt get root o slash y luego nuestra función de devolución de
llamada se ejecutará cada vez que se haga una solicitud para obtener solicitudes de barras
Bienvenido a la pagina principal.
Así debería revisarse todo en este punto.
Comencemos el servidor para que el nodo j.
Parece que todo está bien.
Vamos ahora a la página raíz aquí y actualizamos.
Bienvenido a la pagina principal.
Obviamente, este tipo de contenido una sola línea de texto es bastante aburrido.
Lo que podemos hacer para arreglarlo un poco es que podemos volver aquí y hacer de esto algo de H-2A Mel.
Si quisiéramos simplemente así y luego podemos agregar debajo eso y H-2 que dice bla, bla.
Así.
Aquí vamos.
Y si guardamos esto y reiniciamos el servidor.
Y luego volvemos aquí y refrescamos.
HVM que se nos presentan, pero eso es increíblemente doloroso al escribir una página entera.
Obtenemos álbumes
Es técnicamente posible, pero sería tan difícil.
Simplemente no es una buena idea.
Por suerte, hay una manera más fácil en la que podemos escribir todo nuestro código en un archivo
separado todo el tiempo que queremos todos los C Ss y sí, todo el javascript de la interfaz que queremos enviar al
usuario para que podamos usar un método llamado render y que renderiza el método vivo en el objeto de respuesta, como sea que
lo llamemos.
En nuestro caso, las revoluciones no se rinden.
Y luego le damos el nombre de un archivo como página de inicio o punto de inicio envejecido o Dogstar lo
eliminó o algo así.
Y, por supuesto, necesitamos tener ese archivo creado y debe tener algún contenido en él.
Pero incluso antes de hacer eso hay un pequeño problema. Me desharé de esta línea y
el problema es que cuando utilizamos Express no escribimos archivos simples.
Hay formas de hacerlo.
Requiere un poco más de configuración, pero la mayoría de nuestras aplicaciones web no serán solo archivos estándar Tim estáticos
que se envían de vuelta.
Lo que estamos buscando son archivos html dinámicos que se llaman plantillas y en la segunda mitad
de este video los presentaremos.
Pero por ahora voy a ir aquí y cambiar esto a E. J. s y todo lo que voy a decir sobre E. J. es que significa javascript
incrustado y que aprenderá mucho más sobre él en unos cinco minutos cuando se solicite
que se haga una tajada de nuestro código, se renderizará un archivo llamado Dogstar.
Sí.
Y cambiémoslo a casa solo porque eso tiene más sentido con la ruta de la ruta.
tenemos que crear ese archivo y en realidad no lo creamos en el mismo directorio que nosotros.
Y entonces
Lo que tenemos que hacer es crear un nuevo directorio llamado views y ese no es un nombre arbitrario que es un
directorio que express va a buscar.
Entonces, cuando renderizamos un archivo como se llame, primero lo veremos en el directorio de vistas e
intentaremos encontrar este archivo exacto dentro de un fusible.
Entonces, vamos a crear eso.
Así que voy a hacer un toque de vista de visitas a casa que nos Ejay simplemente así.
Y luego, lo siguiente que quiero hacer es agregar algo de contenido.
Así que vamos a abrir ese archivo con ese nuevo comando C9 que C-9 ve en su página principal.
MI. J. Sí y agreguemos algunas cosas aquí.
Esta es la página principal.
Arreglemos esto.
Y también agreguemos una imagen y tengo una imagen que me gustaría usar aquí.
Esto es algo llamado esquí de palma.
Es una mezcla pomerania y fornida.
Supuestamente, este es un Parsky completamente desarrollado, que es bastante loco si eso es cierto.
Parece un husky miniaturizado o simplemente un cachorro de husky permanente.
De todos modos, copiaremos esta URL y volveremos.
Y, por supuesto, puede hacer cualquier imagen que desee.
No tienes que ir a buscar eso o sin letras, eres Ellaby y ahorrarás.
Y ahora vamos a cerrar esto y deberíamos estar listos para irnos.
Excepto por la pérdida de una cosa y de hecho voy a dejar que el correo exprés nos diga lo que nos estamos perdiendo.
Recibiremos un mensaje de error.
Así que voy a aclarar esto solo para hacer más espacio para ti.
Y ahora voy a iniciar el servidor.
Y cuando vayamos a la ruta de la ruta llamaremos al método de renderizado que buscará el hogar.
Sí.
Dentro de un directorio llamado vistas.
Y luego, una vez que lo encuentra, tomará el contenido y lo
enviará de vuelta a la respuesta para que regresemos a nuestra aplicación y lo actualicemos, y obtenemos un mensaje de error que dice que no puede encontrar Montreuil.
MI. J. Sí.
el archivo Ejaz.
Y lo que eso significa es que Express está buscando un paquete llamado Ejay us que necesita usar para procesar y
Entonces necesitamos que NPM nos instale Ejay y todo esto tendrá sentido por qué estamos usando Ejaz en solo unos minutos.
Pero por ahora solo confía en mí NPM instala Ejay us y vamos a hacer dash dash save.
Y una vez que eso termina, podemos hacer un nodo.
J. S. de nuevo y actualiza la página ahora y obtenemos que esta es la página de
inicio y nuestros adorables cachorros han crecido por completo Tomsky.
Así que ahora tenemos un archivo de ht m l que hemos escrito que ahora estamos enviando de
vuelta al usuario y que se está procesando en el navegador.
Y eso es genial, pero esto todavía es extremadamente limitado para las aplicaciones web.
Esto solo enviará la misma
página exactamente cada vez y en la mayoría de las aplicaciones web eso no es lo que queremos.
Tal vez la página de inicio sea la misma o la página de inicio de sesión sea la misma.
Pero una vez
que el usuario ha iniciado sesión, por ejemplo, generalmente hay un mensaje que dice "bienvenidas" o "bienvenidas".
Adulto adorable de la raya vertical del perrito de Parsky.
Déjame mostrarte lo que quiero decir con un ejemplo rápido.
Así que volveré y agregaré una nueva ruta y nuestra ruta va a ser algo así como Slash.
Enamórate y luego algo como Rustie y luego también podemos ir a enamorarnos de un esquí de palma.
Creo que así es como se deletrea.
Y queremos un archivo HMO que nos muestre un mensaje que contenga la variable de la ruta de ese
parámetro de ruta.
Entonces diría algo como que te enamoraste de oxidado, así que para hacer eso necesitas definir o hacerte un corte en el
amor con Slash.
Así es como lo llamaremos.
Y luego necesitamos nuestra solicitud y respuesta dentro de la devolución de llamada.
Y al igual
que el último ejercicio capturará algo que será lo de VAR, es igual a
solicitar lo de harams y luego podemos comenzar con este simple envío de punto rojo tal como lo hicimos con el ejercicio de hablar con animales.
El cerdo dice Oink.
La vaca dice que moo puede hacer lo mismo aquí.
Entonces diremos que te enamoraste de algo más.
Todo bien.
Así que esto es una revisión y si reinicio el servidor ahora y vuelvo y ahora voy a atacarlo con
Slash
ske, conseguimos que te enamores de Tomsky, lo cual no es exactamente correcto desde el punto de vista gramatical, pero tampoco la palabra pomps.
Así que volveré y ahora lo que queremos hacer es descubrir cómo le podemos enviar una H Voy a contestar que dice
que te enamoré del plus
y luego algo podemos comenzar creando el archivo y Llamaré este archivo dentro
del directorio de vistas y lo llamaré por supuesto, pero voy a ir con amor E. J. como para mantenerlo corto y luego llenaremos eso.
Entonces, necesitamos una vista C-9.
Amo eso.
Sí, tenemos eso abierto y comencemos simplemente por agregar que te enamoraste y luego tenemos que completar
el espacio en blanco.
Pero aún no sabemos qué poner aquí, así que lo dejaremos así y vamos a poner una nota aquí que
dice P. S. Este es el amor que Ejay usamos para que sepas que proviene del archivo Ejaz.
No es el envío de redstart que tenemos ahora.
De hecho, para deshacerse de eso.
Entonces, lo que queremos hacer es renderizar ese archivo, así que leer no es renderizar.
Y el nombre del archivo es amor que E. J. Sí, se verá automáticamente en el directorio de vistas que está justo allí.
Ahí vamos, tenemos dos archivos, comencemos el nodo Nodo del servidor.
Sí se reiniciará y actualizará.
DE ACUERDO.
Entonces nuestro archivo está aquí.
Te enamoraste y tenemos que completar el espacio en blanco aquí.
datos que provienen de
una base de datos o datos que un usuario ha proporcionado donde no es un archivo estático de muerte.
Y sé que este es un ejemplo muy simple, que es el punto que no quiero confundir con algo loco por el momento, pero este tipo de lógica es realmente importante donde podemos completar una plantilla con
Eso es exactamente lo mismo cada vez.
Básicamente, queremos agregar variables a HTL y eso es lo que cada Sí nos deja hacer.
Entonces E. J. S significa javascript incrustado.
Nos permite incrustar variables de código javascript si los enunciados dentro de H Timo.
Entonces, es cómo podríamos hacer algo así.
Te enamoraste
y luego aquí esto no funcionará por el momento pero podríamos poner nuestra variable llamada cosa, solo hagámoslo en mayúscula variable.
Pero esto no funcionará
porque solo lo tratará como HMO regular y solo nos mostrará la palabra cosa variable.
Necesitamos hacer algo para decirnos a cada uno de
nosotros que este es un código de JavaScript que no le enseñe. Lo trataré como javascript.
Afortunadamente, solo nos da una forma de hacerlo.
Es un poco raro cuando lo ves por primera vez.
Se parece a esto.
corchete de apertura y lo que sea que vaya entre estos dos corchetes aquí se tratará como Javascript.
Así que tenemos nuestros corchetes y luego signos de porcentaje y luego signo igual en el
Así que les mostraré lo que
quiero decir con que podemos usar algo así como cinco más cinco que en H M L normal y lo haré para mostrarles cinco más cinco.
Sin estos corchetes de Ejay Yes solo imprimiremos
cinco más cinco, pero si lo hacemos aquí, en realidad obtendremos 10 impresos.
Así que voy a guardar esta plantilla para cerrarla o iniciar el
servidor de nuevo nodo después de J us y actualizar la página y conseguimos que te enamores de cinco más cinco diez.
Y lo entiendo totalmente
Si pause cinco diez es una captura completa, está bien.
Así que volveremos.
Entonces no queremos que se impriman cinco más cinco allí.
Pero realmente queremos es la cosa variable.
Lo llamaremos VAR o simplemente haremos algo.
Y esto debe venir de nuestro código aquí.
Entonces, lo que tenemos que hacer es pasar este valor a nuestro amor que E. J. como plantilla y queremos imprimirlo y mientras estamos
aquí también deshacerse de los cinco más cinco.
Así que conseguimos que te enamores y luego tenemos que definir el
asunto y podrías pensar que podríamos hacer esto.
Var es igual a la solicitud de tragamonedas.
Y es posible que esperes que la expresión automática envíe todas esas variables de alguna manera a esta plantilla.
Y solo sabe sobre la cosa var.
Lamentablemente, no es así como funciona.
Y le mostraré que reinicie el servidor. Recibiré un mensaje de error y me dice
que no hay nada definido.
Así que ahora necesito regresar y definir la barra de cosas.
Y la forma en que hago eso es pasándolo a mi amado E. J. s plantilla y lo hago en la línea de procesamiento de puntos cuando lo pasa como un
objeto.
Y en ese objeto puedo poner varios datos que quiero tener en mi plantilla.
Entonces, en lugar de cosas, simplemente vamos a llamarlo para aclarar esto
y luego voy a pasar los datos y voy a decir en la plantilla que var debe ser igual a una cosa.
Lo que esto hará es tomar el valor de la cosa y pegarla aquí mismo.
Entonces parecerá que algo lejano es igual a Rusty.
Y luego, aquí, lo var será reemplazado.
Todo esto sería reemplazado por oxidado.
OK, así que lo dejamos así.
Vuelve aquí y por qué no empezamos por codificarlo duro como resti solo así
y reiniciaremos el servidor y refrescaré la página y me enamoro de Rusty.
Entonces, en lugar de hacer una cadena, el
siguiente paso es volver a lo que teníamos, que es la variable de la variable completa
y la pasaremos por debajo de la barra de nombre del nombre y luego la presentaremos allí.
MI. J. ha etiquetado esta cosa que parece wonky.
Reinicia el servidor nuevamente.
Ahora entiendo, te enamoraste de Parsky.
Y si voy contigo, te enamoraste de Tater Tots que también se refleja aquí.
Este es un concepto muy poderoso que usaremos.
Como dije, y prácticamente todas las aplicaciones a partir de
ahora tienen estas páginas dinámicas que le han picado todas las respuestas que pueden cambiar dependiendo de lo que el
usuario solicitó en datos específicos de la solicitud.
La otra cosa que mostraré es que esto es solo un Javascript normal.
Así que aquí puedo hacer cosas como mayúsculas y esto se ejecutará primero y luego devolverá algo que
se imprimirá como oxidado.
Por lo tanto, solo es un javascript regular y hablaremos más sobre lo que debería incluirse aquí y lo que no debería.
Debido a que hay algunas reglas que no quieres complicar, le agotaste toda tu plantilla de Ejaz con
toneladas y toneladas de javascript.
Desea mantenerlo al mínimo, pero por ahora lo haré y lo guardaré.
Y esta será la última cosa que hacemos.
Reinicie la actualización del servidor.
Y ahora obtengo una versión en mayúscula.
De acuerdo, ahora vamos a resumir todo lo que hablamos.
Hay bastante en esta lección.
Lo primero es que podemos enviar de vuelta el contenido de un archivo utilizando el proceso de redstart como
lo hicimos aquí y aquí, y esas plantillas deben existir en el directorio de vistas que express express busca automáticamente allí.
Lo siguiente que hablamos sobre su Ejaz
es javascript incorporado y es lo que nos permite tener plantillas dinámicas de salida HDMI que cambiarán dependiendo de algunos datos que proporcionamos.
Vimos que teníamos que hacer cada Sí y luego hacer que nuestro archivo se llamara algo DOD Ejay Sí.
Y luego también necesitábamos ejecutar la instalación de NPM Ejay us y luego lo último es que
podemos usar los corchetes Ejay us que son muy raros al principio para escribir.
Probablemente no estés acostumbrado a usar esta parte del teclado, pero hay corchetes donde aparece el signo de porcentaje y
uno igual y luego, en el otro lado, solo se trata de un signo de porcentaje y todo lo que entra
se trata primero como código JavaScript y luego lo que
sea que devuelva ese código se imprime en la HMO y para pasar los datos.
Podemos pasar un objeto en la llamada de renderizado de puntos rojos donde tenemos pares de valores clave.
Es solo un objeto regular de javascript.
Y en la plantilla tenemos acceso a las variables que definimos son las propiedades del objeto.
En este caso, la cosa es igual a cualquiera que sea el valor de la cosa que cambia cada vez.
Y aquí podemos usar la cosa para.
De acuerdo, entonces sé que hay mucho que digerir en este video.
Tendremos mucha más práctica con estos conceptos en particular.
MI. J. Sí y eso E. J. tiene corchetes y luego pasar datos a una plantilla es algo
que vamos a hacer en cada video de aquí en adelante