Tenemos experiencia en WEB y siempre hemos pensado naturalmente en cómo implementar la visualización frontal. Al principio, insertábamos asp y php en los códigos asp y php correspondientes en html, y luego usamos algunas etiquetas para la visualización frontal. , principalmente para implementar MVC. Para separar la lógica de front-end y back-end, ahora imagine que nodejs también debería estar allí. De hecho, koa como marco web también debería tener esta parte, así que aprendamos sobre el middleware koa- vistas hoy. También estoy aprendiendo y escribiendo
ahora Sí, es principalmente para registrar el proceso de aprendizaje en ese momento, por lo que puede haber muchos errores y puede haber problemas con la expresión. Este no es el punto. El punto es Registre el proceso de aprendizaje y pensamiento de un novato y también brinde a Xiaobai una referencia de aprendizaje.
1. Creo que el primer paso debería ser instalar este middleware. Usemos hilo y agreguemos koa-views para verlo. ¿Por qué usar hilo? Por supuesto, es más eficiente y rápido, y la instalación de npm es un poco lenta. La instalación fue exitosa, no hubo problemas. Aquí de repente pensé en cómo verificar si un módulo está instalado o no, primero verifique. Echemos un vistazo a la lista de hilos koa-views. Por supuesto, también puede ingresar node_modules para ver si existe dicho directorio o archivo. También puede verificar si habrá un error al escribir en vscode. Si está instalado, podrá ir a la definición a través del enlace derecho.
PS D:\chen\nodejs\test> yarn add koa-views
yarn add v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
PS D:\chen\nodejs\test> yarn list koa-views
yarn list v1.22.19
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
Done in 0.20s.
2. Parece que está instalado. Después de la instalación, debemos hacer referencia a este middleware y registrarlo.
const views = require('koa-views');
app.use(views(path.join(__dirname,'./view'),{
extends:'ejs'
}))
3. Podemos ver en lo anterior que va a crear un directorio de vista para almacenar archivos de vista y la extensión es ejs. Déjame intentarlo. Como resultado, la página no aparece después de la prueba y muestra el siguiente mensaje: No se puede encontrar el módulo 'ejs', ¿necesita instalar un módulo ejs? Instálelo y pruébelo primero. Parece que este koa-views es solo una clase para que podamos definir una función que se usa para almacenar archivos estáticos. Al final, tenemos que pensar en agregar las etiquetas correspondientes en html para generar contenido dinámico. Todavía depende del motor de plantilla ejs; de lo contrario, es la salida del archivo estático html tal como está. Después de instalar ejs, la pantalla es normal y el resultado de salida es:
hola koa2
EJS Bienvenido a hola koa2
De repente pensé: si cambio ejs a html u otras extensiones, ¿es factible? Pruébelo, el resultado es el resultado original y la etiqueta del título no se reemplaza, por lo que parece que si ejs quiere completar la extensión de reemplazo, debe ser ejs, y si agregamos enrutamiento, ¿puede también encontrar el archivo ejs correspondiente a través del enrutamiento? Déjame intentarlo de nuevo.
<%= title %>
EJS Welcome to <%= title %>
El código completo es el siguiente:
const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
extension: 'ejs'
}))
app.use( async ( ctx ) => {
let title = 'hello koa2'
await ctx.render('index', {
title,
})
})
app.listen(3000)
Prueba 1:
Después de agregar el efecto de enrutamiento, la prueba se puede ejecutar normalmente, pero aquí debe tenerse en cuenta que el primer parámetro de route.get es la dirección de enrutamiento y el segundo parámetro es un método, que no puede ser una cadena. este método es un objeto ctx, podemos renderizar la vista a través del renderizado de ctx. El primer parámetro es el nombre de la plantilla, aquí irá automáticamente a la vista para encontrar el archivo test.ejs, que está definido en las vistas koa anteriores, y el segundo parámetro son los datos que se cambiarán.
const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const router = require('./router/router')
const app = new Koa()
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
extension: 'ejs'
}))
async function test(ctx){
await ctx.render("test",{
title:"====aaa==="});
}
router.get("/test",test);
app.use(router.routes(), router.allowedMethods());
app.listen(3000)
ver/prueba.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>這是我的一個測試程序<%= title %></p>
</body>
</html>
Prueba 2:
¿Puedes ejecutar render varias veces? Pruébelo y verá que está bien, pero reemplazará el anterior por el último. Sólo se muestra bbbb,
async function test(ctx){
await ctx.render("test",{
title:"====aaa==="});
await ctx.render("test",{
title:"====bbbd==="});
}
bbbd=
Este es uno de mis programas de pruebabbbd=
Prueba 3:
¿Qué pasa si las variables que sustituyo son diferentes? Después de la prueba, se encuentra que la etiqueta ejs debe ser reemplazada por completo, de lo contrario habrá un error, es decir, si hay un título al frente, los datos correspondientes al título deben estar disponibles en segundo plano. No hay datos, se producirá un error, como el siguiente. Reemplace el título y el nombre de usuario por primera vez, y reemplace el nombre de usuario por segunda vez. El efecto real a continuación es reemplazar el título y el nombre de usuario al mismo tiempo para el primera vez. La segunda vez también debe tener un título, no solo el nombre de usuario, de lo contrario se producirá un error.
async function test(ctx){
await ctx.render("test",{
title:"====aaa===",userName:"----"});
await ctx.render("test",{
userName:"====顏歡==="});
}
router.get("/test",test);