node_express框架02

John Rivers

已于 2023-04-02 09:29:10 修改

阅读量411

点赞数

分类专栏： node.js 文章标签： express 前端 node.js

于 2023-04-01 23:16:59 首次发布

本文链接：https://blog.csdn.net/m0_66492535/article/details/129904157

版权

node.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了Node.jsExpress框架中的路由模块化，通过将不同类型的路由分开管理，提高代码组织性。同时，讲解了EJS模版引擎的使用，包括如何导入、设置变量、渲染HTML，以及EJS的基本语法和特性，如自定义分隔符、布局等。

摘要由CSDN通过智能技术生成

node_express框架01_游小北的博客-CSDN博客

09_路由模块化

我们使用路由时难免会遇到很多访问，有 get 请求 home,也有 post 请求，有前台的、后台的，当路由太多的时候难免会遇到摸不清头脑的情况，我们需要使用 路由模块化 的思想。第一步分离路由，把一类的路由分离到单独的文件中：我们需要使用 express 中的 Router 方法，创建实例后再创建路由规则，最后导出 router 路由对象。代码如下：

/**
 * 路由模块化，把路由规则放在独立的文件中，然后 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;

然后就是导入使用，在 app.js 文件中。使用 require 方法导入，然后使用 app.use 方法使用上：

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

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

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

// 使用
app.use(router);

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

10_模版引擎EJS

模版引擎是分离用户界面（HTML）和业务数据(JS) 的一种技术, 他是一个高效的 javascript 模版引擎。

官网：ejs , 下载：npm i ejs --save

10.1 用法：

/**
 * 模版引擎是分离 用户界面（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); //介绍：这是一个变量哦

到这我们并没有实现所谓的 html 和 js 分离，接下来，我们新建一个 html 文件，在里面写入如下内容：

<!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>

然后再导入使用：

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("服务开启");
});

更多模版功能：比如基本的js 代码也是可以写在模版里的，代码如下：

<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 });


...

结果如下：

10.2 标签含义

<% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

10.3 自定义分隔符

10.3.1 单个模版文件，使用 delimiter 参数，代码如下：

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

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

10.3.2 全局使用，在 ejs 上添加对象，代码如下：

ejs.delimiter = '$';

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

10.4 布局（Layouts）

EJS 并未对块（blocks）提供专门的支持，但是可以通过包含页眉和页脚来实现布局，代码如下：

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

John Rivers

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录