node_express framework 01_You Xiaobei's Blog-CSDN Blog

09_modulación de enrutamiento

Cuando utilizamos el enrutamiento, inevitablemente nos encontraremos con muchas visitas. Hay solicitudes de recepción para el hogar y también solicitudes de publicación . El primer paso es separar el enrutamiento y separar una clase de enrutamiento en un archivo separado: necesitamos usar el método Router en express, crear una instancia y luego crear reglas de enrutamiento y finalmente exportar el objeto de enrutamiento del enrutador. el código se muestra a continuación:

/**
 * 路由模块化，把路由规则放在独立的文件中，然后 require 导入使用
 */

const express = require("express"); // 导入express

// 创建路由对象，使用 express.Router() 方法
const router = express.Router();

// 创建路由规则
router.get("/router", (req, res) => {
  res.send("你访问了分离路由模块");
});

// module.exports 暴露出路由对象router
module.exports = router;

Luego se importa y se usa en el archivo app.js. Use el método require para importar y luego use el método app.use para usar:

const express = require("express");
const app = express();

/**
 * 导入路由模块，然后 app.use() 使用
 */

const router = require("./routerModule");

// 使用
app.use(router);

app.listen(8080, () => {
  console.log("服务开启在 8080 端口");
});

10_template motor EJS

El motor de plantillas es una tecnología que separa la interfaz de usuario (HTML) y los datos comerciales (JS) Es un motor de plantillas javascript eficiente.

Sitio web oficial: ejs , descarga: npm i ejs --save

10.1 Uso:

/**
 * 模版引擎是分离 用户界面（HTML） 和 业务数据(JS) 的一种技术
 * 他是一个高效的 javascript 模版引擎，https://ejs.bootcss.com/
 * 下载：npm i ejs --save
 *      类似之前我们使用的 ${} 模版字符串加强版
 */

// 1. 导入
const ejs = require("ejs");

// 2. 定义一个变量，后面使用
const str = "这是一个变量哦";

// 3. 使用 EJS 的渲染,介绍：
// <%= 某一个变量,需要在render 加入第二个对象参数 %>
let result = ejs.render("介绍：<%= str %>", { str: str });

console.log(result); //介绍：这是一个变量哦

Hasta este punto, no hemos logrado la llamada separación de html y js. A continuación, creamos un nuevo archivo html y escribimos en él el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EJS</title>
  </head>
  <body>
    <!-- 我们在里面写模版语法 -->
    <h2><%= str %></h2>
  </body>
</html>

Luego importa usando:

const express = require("express");
const fs = require("fs");
const app = express();

// 1. 导入
const ejs = require("ejs");

// 2. 定义一个变量，后面使用
const str = "这是一个变量哦";

// 3. 读取html 文件 ~用 toString() 方法 buffer 转字符串
const html = fs.readFileSync("./index.html").toString();

// 4. 使用 EJS 的渲染
let result = ejs.render(html, { str: str });

// 5. 把 html 响应给客户端
app.get("/html", (req, res) => {
  res.send(result);
});

// 开启服务
app.listen(8080, () => {
  console.log("服务开启");
});

Más funciones de plantilla: por ejemplo, el código js básico también se puede escribir en la plantilla, el código es el siguiente:

<body>
    渲染一个数组：
    <ul>
      <% arr.forEach((item)=> { %>
      <li><%= item %></li>
      <% }) %>
    </ul>
  </body>

...
// 2. 定义一个变量，后面使用
const arr = [1, 2, 3, 4, 5];

...

// 4. 使用 EJS 的渲染
let result = ejs.render(html, { arr: arr });


...

El resultado es el siguiente:

10.2 Significado de la etiqueta

<% etiqueta 'script', para control de flujo, sin salida.
<%_ eliminar el espacio en blanco anterior
<%= Datos de salida a la plantilla (la salida son etiquetas HTML escapadas)
<%- salida de datos sin escape a la plantilla
<%# Etiqueta de comentario, no ejecutar, no generar contenido
<%% cadena de salida '<%'
%> etiqueta final genérica
-%> eliminar la nueva línea que sigue
_%> Eliminar espacios después de la etiqueta de cierre

10.3 Delimitador personalizado

10.3.1 Para un solo archivo de plantilla, use el parámetro delimitador , el código es el siguiente:

let user = ['李','华'];

ejs.render('<?= users.join(" | "); ?>', {users: users},
    {delimiter: '?'});

10.3.2 Uso global, agregar objetos en ejs, el código es el siguiente:

ejs.delimiter = '$';

ejs.render('<$= users.join(" | "); $>', {users: users});

10.4 Diseños

EJS no proporciona soporte especial para bloques, pero puede implementar el diseño incluyendo encabezado y pie de página, el código es el siguiente:

<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

marco node_express 02